Flow integration init

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["react-native"]
+  "presets": ["react-native", "flow"]
 }

.flowconfig

@@ -1,6 +1,7 @@
 [ignore]
 ; We fork some components by platform
 .*/*[.]android.js
+<PROJECT_ROOT>/node_modules/.*
 
 ; Ignore "BUCK" generated dirs
 <PROJECT_ROOT>/\.buckd/

app/containers/AttendeesList/index.js

@@ -21,7 +21,21 @@ import * as actions from './actions';
 import * as selectors from './selectors';
 import * as ticketSelectors from '../TicketList/selectors';
 
-class AttendeesList extends Component {
+// @flow
+type Props = {
+  listAttendees?: Array<mixed>,
+  isTransferring: boolean,
+  isGettingTicket: boolean,
+  ticketId: number,
+  isGettingAttendees: boolean,
+  fetchingAttendeeStat: boolean
+};
+
+type State = {
+  isLoading: boolean
+};
+
+class AttendeesList extends Component<Props, State> {
   state = {
     isLoading: true
   }
@@ -45,7 +59,7 @@ class AttendeesList extends Component {
     }
   }
 
-  handleTransferPressed = (ticketId, receiverId, targetName) => {
+  handleTransferPressed = (ticketId: number, receiverId: number, targetName: string) => {
     Alert.alert(
       strings.attendeesList.confirm,
       targetName,
@@ -134,21 +148,6 @@ class AttendeesList extends Component {
   }
 }
 
-AttendeesList.propTypes = {
-  listAttendees: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.array
-  ]
-  ).isRequired,
-  isTransferring: PropTypes.bool.isRequired,
-  isGettingTicket: PropTypes.bool.isRequired,
-  fetchAttendees: PropTypes.func.isRequired,
-  transferTicket: PropTypes.func.isRequired,
-  ticketId: PropTypes.number.isRequired,
-  isGettingAttendees: PropTypes.bool.isRequired,
-  fetchingAttendeeStat: PropTypes.bool.isRequired
-};
-
 const mapStateToProps = createStructuredSelector({
   listAttendees: selectors.getAttendees(),
   isTransferring: selectors.getIsTransferring(),

app/containers/BoothInfo/index.js

@@ -33,8 +33,27 @@ import * as selectors from './selectors';
 const background = require('./../../../assets/images/background.png');
 const noImage = require('./../../../assets/images/noimage.png');
 
+// @flow
+type Props = {
+  boothGalleries?: Array<mixed>,
+  boothPhoto: string,
+  fields: {
+    photoPic: string
+  },
+  isBoothGalleryUpdated: boolean,
+  isBoothPhotoUpdated: boolean,
+  summary: string,
+  title: string,
+  user: Object
+};
 
-class BoothInfo extends Component {
+type State = {
+  imagePreview: string,
+  modalVisible: boolean,
+  logged_user?: Object<mixed>
+};
+
+class BoothInfo extends Component<Props, State> {
   constructor(props) {
     super(props);
     this.state = {
@@ -74,7 +93,7 @@ class BoothInfo extends Component {
       }).catch(err => console.log(strings.booth.errorImage, err));
   }
 
-  setModalVisible = (visible, image) => {
+  setModalVisible = (visible: boolean, image: string) => {
     this.setState({ modalVisible: visible, imagePreview: image });
   }
 
@@ -91,7 +110,6 @@ class BoothInfo extends Component {
   }
 
   renderItem = (images) => {
-    console.log('checking image', images);
     return (
       <TouchableWithoutFeedback onPress={() => this.setModalVisible(true, images.url)}>
         <Image

app/containers/BoothList/index.js

@@ -40,10 +40,26 @@ import AccordionView2 from './Accordion2';
 import { PRIMARYCOLOR } from '../../constants';
 import { getProfileData } from './../../helpers';
 
-const bgBooth1 = require('./../../../assets/images/bgbooth_1.png');
-const bgBooth2 = require('./../../../assets/images/bgbooth_2.png');
+// @flow
+const bgBooth1: string = require('./../../../assets/images/bgbooth_1.png');
+const bgBooth2: string = require('./../../../assets/images/bgbooth_2.png');
 
-class BoothList extends Component {
+type Props = {
+  booth?: Array<mixed>,
+  hackaton?: Object<mixed>,
+  isFetching: boolean,
+  isFetching2: boolean
+};
+
+type State = {
+  accordion: boolean,
+  accordion2: boolean,
+  boothFilter?: Array<mixed>,
+  modalVisible: boolean,
+  url: string
+};
+
+class BoothList extends Component<Props, State> {
   state = {
     modalVisible: false,
     boothFilter: this.props.booth,
@@ -74,15 +90,15 @@ class BoothList extends Component {
     }
   }
 
-  setAccordion = (visible) => {
+  setAccordion = (visible: boolean) => {
     this.setState({ accordion: visible });
   };
 
-  setAccordion2 = (visible) => {
+  setAccordion2 = (visible: boolean) => {
     this.setState({ accordion2: visible });
   }
 
-  setModalVisible(visible) {
+  setModalVisible(visible: boolean) {
     this.setState({ modalVisible: visible });
   }
 

app/containers/ChangePassword/index.js

@@ -22,7 +22,25 @@ import * as selectors from './selectors';
 // import constants
 import { role_option } from '../../constants';
 
-class ChangePassword extends Component {
+// @flow
+type Props = {
+  errorFields: {
+    error_confirm_password: boolean,
+    error_current_password: boolean,
+    error_new_password: boolean,
+    error_password_not_the_same: boolean
+  },
+  inputFields: {
+    confirm_password: string,
+    current_password: string,
+    new_password: string
+  },
+  isLoading: boolean,
+  isPasswordUpdated: boolean,
+  isPasswordWrong: boolean
+};
+
+class ChangePassword extends Component<Props> {
     /*
      * initialize some state
      */
@@ -34,7 +52,7 @@ class ChangePassword extends Component {
     this.props.resetState()
   }
 
-  handleInputChange = (field, value) => {
+  handleInputChange = (field: string, value: string) => {
     const { errorFields } = this.props || {};
     const { error_password_not_the_same } = errorFields || false;
 

app/containers/Feed/index.js

@@ -28,14 +28,12 @@ import {
   AsyncStorage,
   Modal,
   Alert,
-  BackHandler,
   KeyboardAvoidingView,
   ScrollView,
   TouchableHighlight,
   WebView,
   Platform
 } from 'react-native';
-import { func, bool, object, array, string } from 'prop-types';
 import ImagePicker from 'react-native-image-crop-picker';
 import { createStructuredSelector } from 'reselect';
 import { connect } from 'react-redux';
@@ -57,8 +55,7 @@ import * as actions from './actions';
 import * as selectors from './selectors';
 import OrderList from '../OrderList';
 import Redeem from '../Redeem';
-import { PRIMARYCOLOR } from '../../constants';
-import { API_BASE_URL } from '../../constants';
+import { PRIMARYCOLOR, API_BASE_URL } from '../../constants';
 import { CONTENT_REPORT, TWITTER_ICON, FACEBOOK_ICON, WHATSAPP_ICON } from './constants';
 import { isConfirm } from '../../helpers';
 import { getIsConfirmEmail } from '../OrderList/selectors';
@@ -71,7 +68,7 @@ const noFeeds = require('./../../../assets/images/nofeed.png');
 function subscribeToFeeds(cb) {
   socket.on('feeds', data => cb(null, data));
 }
-
+// @flow
 const today = new Date();
 const date = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
 const time = `${today.getHours()}:${today.getMinutes()}:${today.getSeconds()}`;
@@ -142,7 +139,51 @@ const mapStateToProps = () =>
     isConfirmEmail: getIsConfirmEmail()
   });
 
-class Feed extends Component {
+type Links = {
+  attachment: string
+};
+
+type ImageObject = {
+  path?: string,
+  sourceURL?: string,
+  mime: string
+};
+
+type Props = {
+  isFetching: boolean,
+  feeds?: Array<mixed>,
+  links?: Links,
+  isPosting: boolean,
+  imagesData?: ImageObject,
+  textData: string,
+  isRemoving: boolean
+};
+
+type ShareObject = {
+  message: string,
+  url: string
+};
+
+type State = {
+  userId: Array<number>,
+  userPostID: string,
+  postId: string,
+  firstName: string,
+  lastName: string,
+  profileUrl: string,
+  imagePreview: string,
+  report: string,
+  fabActive: boolean,
+  modalRedeem: boolean,
+  modalVisible: boolean,
+  postToFeeds: boolean,
+  modalReport: boolean,
+  optionVisible: boolean,
+  shareOptions: ShareObject,
+  shareTwitter: ShareObject
+};
+
+class Feed extends Component<Props, State> {
   constructor(props) {
     super(props);
     this.state = {
@@ -168,7 +209,7 @@ class Feed extends Component {
     console.ignoredYellowBox = [ 'Setting a timer' ];
     subscribeToFeeds((err, data) => this.props.updateFeeds(data));
   }
-
+  
   componentWillMount() {
     this.props.setTokenHeader(this.props.currentPage);
 
@@ -191,19 +232,19 @@ class Feed extends Component {
     this.setState({ visible: false });
   };
 
-  setModalVisible = (visible, image) => {
+  setModalVisible = (visible: boolean, image: string) => {
     this.setState({ modalVisible: visible, imagePreview: image });
   };
 
-  setModalRedeem = (visible) => {
+  setModalRedeem = (visible: boolean) => {
     this.setState({ modalRedeem: visible });
   };
 
   setModalReport = (visible) => {
     this.setState({ modalReport: visible });
   };
 
-  setModalWebView = (visible, link) => {
+  setModalWebView = (visible: boolean, link: string) => {
     this.setState({ modalWebView: visible });
     this.state.link = link;
   };
@@ -218,7 +259,7 @@ class Feed extends Component {
 
   _keyExtractor = (item, index) => item.id;
 
-  onOpen = (message, attachment) => {
+  onOpen = (message: string, attachment: string) => {
     Share.open({
       title: 'Devsummit Indonesia',
       message,
@@ -227,7 +268,7 @@ class Feed extends Component {
     });
   };
 
-  alertRemoveFeed = (postId) => {
+  alertRemoveFeed = (postId: number) => {
     Alert.alert(
       '',
       'Are you sure you want to delete this post?',
@@ -239,12 +280,12 @@ class Feed extends Component {
     );
   };
 
-  removeFeed = (postId) => {
+  removeFeed = (postId: number) => {
     this.props.removeFeed(postId);
     this.setState({ optionVisible: false });
   };
 
-  alertReportFeed = (postId) => {
+  alertReportFeed = (postId: number) => {
     Alert.alert(
       '',
       'Are you sure you want to report this post?',
@@ -256,12 +297,12 @@ class Feed extends Component {
     );
   };
 
-  reportFeed = (postId) => {
+  reportFeed = (postId: number) => {
     this.props.reportFeed(postId);
     this.setState({ optionVisible: false });
   };
 
-  handleInputChange = (value) => {
+  handleInputChange = (value: string) => {
     this.setState({ report: value });
   };
 
@@ -609,7 +650,6 @@ class Feed extends Component {
             />
           </View>
         </Modal>
-
         {/* Modal for picture preview */}
         <Modal
           animationType={'fade'}
@@ -696,17 +736,4 @@ class CustomInput extends Component {
   }
 }
 
-Feed.PropTypes = {
-  updateFeeds: func,
-  fetchFeeds: func,
-  postFeeds: func,
-  isFetching: bool,
-  isFetchingMore: bool,
-  feeds: array,
-  isRemoving: bool,
-  removeFeed: func,
-  reportFeed: func,
-  link: string
-};
-
 export default connect(mapStateToProps, actions)(Feed);