enhanced points & checkbox convert to hooks

src/components/checkbox/view/checkboxView.js

@@ -1,30 +1,19 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 
 import styles from './checkboxStyles';
 
-class CheckBoxView extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { isCheck: false };
+const CheckBoxView = ({ clicked, value, isChecked, style, locked }) => {
+  const [isCheck, setIsCheck] = useState(false);
+
+  const _checkClicked = () => {
+    setIsCheck(!isCheck);
+
+    if (clicked) {
+      clicked(value, !isCheck);
     }
-
-  _checkClicked = async () => {
-    const { clicked, value } = this.props;
-
-    await this.setState(prevState => ({
-      isCheck: !prevState.isCheck,
-    }));
-
-    const { isCheck } = this.state;
-
-    if (clicked) clicked(value, isCheck);
   };
 
-  render() {
-    const { style, isChecked, locked } = this.props;
-    const { isCheck } = this.state;
-
   if (locked) {
     return (
       <View style={styles.bigSquare}>
@@ -32,14 +21,14 @@ class CheckBoxView extends Component {
       </View>
     );
   }
+
   return (
-      <TouchableOpacity onPress={this._checkClicked} style={style}>
+    <TouchableOpacity onPress={_checkClicked} style={style}>
       <View style={styles.bigSquare}>
         <View style={[styles.smallSquare, isCheck && styles.checked]} />
       </View>
     </TouchableOpacity>
   );
-  }
-}
+};
 
 export default CheckBoxView;

src/components/errorBoundary/index.js

@@ -1,3 +0,0 @@
-import ErrorBoundary from './view/errorBoundaryView';
-
-export { ErrorBoundary };

src/components/errorBoundary/view/errorBoundaryView.js

@@ -1,32 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import Text from 'react-native';
-
-export default class ErrorBoundary extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-
-  componentDidCatch(error, info) {
-    if (__DEV__) {
-      return;
-    }
-    this.setState({ hasError: true, info, error });
-  }
-
-  render() {
-    const { hasError, info, error } = this.state;
-    const { children } = this.props;
-
-    if (hasError) {
-      return (
-        <Fragment>
-          <Text>Something went wrong.</Text>
-          <Text>{error}</Text>
-          <Text>{info}</Text>
-        </Fragment>
-      );
-    }
-    return children;
-  }
-}

src/index.js

@@ -3,6 +3,7 @@ import { Provider, connect } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { IntlProvider } from 'react-intl';
 import { useScreens } from 'react-native-screens';
+import { setTopLevelNavigator } from './navigation/service';
 
 import { flattenMessages } from './utils/flattenMessages';
 import messages from './config/locales';
@@ -29,7 +30,11 @@ const App = connect(mapStateToProps)(_renderApp);
 export default () => {
   return (
     <Provider store={store}>
-      <App />
+      <App
+        ref={navigatorRef => {
+          setTopLevelNavigator(navigatorRef);
+        }}
+      />
     </Provider>
   );
 };

src/navigation/service.js

@@ -0,0 +1,16 @@
+import { NavigationActions } from 'react-navigation';
+
+let _navigator;
+
+export const setTopLevelNavigator = navigatorRef => {
+  _navigator = navigatorRef;
+};
+
+export const navigate = (routeName, params) => {
+  _navigator.dispatch(
+    NavigationActions.navigate({
+      routeName,
+      params,
+    }),
+  );
+};

src/screens/pinCode/screen/pinCodeScreen.js

@@ -1,4 +1,6 @@
-import React, { PureComponent } from 'react';
+import React, { useState } from 'react';
+import { useIntl } from 'react-intl';
+
 import { Text, TouchableOpacity, View } from 'react-native';
 
 import { NumericKeyboard, PinAnimatedInput } from '../../../components';
@@ -6,53 +8,42 @@ import { UserAvatar } from '../../../components';
 
 import styles from './pinCodeStyles';
 
-class PinCodeScreen extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      pin: '',
-      loading: false,
-    };
-  }
+const PinCodeScreen = ({
+  informationText,
+  showForgotButton,
+  username,
+  handleForgotButton,
+  setPinCode,
+}) => {
+  const [pin, setPin] = useState('');
+  const [loading, setLoading] = useState(false);
+  const intl = useIntl();
 
-  // Component Life Cycles
-
-  // Component Functions
-
-  _handleKeyboardOnPress = async value => {
-    const { setPinCode } = this.props;
-    const { pin, loading } = this.state;
+  const _handleKeyboardOnPress = async value => {
     if (loading) {
       return;
     }
     if (value === 'clear') {
-      this.setState({ pin: '' });
+      setPin('');
       return;
     }
     const newPin = `${pin}${value}`;
 
     if (pin.length < 3) {
-      this.setState({ pin: newPin });
+      setPin(newPin);
     } else if (pin.length === 3) {
-      await this.setState({ pin: newPin, loading: true });
+      await setPin(newPin);
+      await setLoading(true);
 
-      setPinCode(`${pin}${value}`)
-        .then(() => {
-          // TODO: fix unmounted component error
-          this.setState({ pin: '', loading: false });
-        })
-        .catch(() => {
-          this.setState({ pin: '', loading: false });
-        });
+      await setPinCode(`${pin}${value}`);
+
+      setPin('');
+      setLoading(false);
     } else if (pin.length > 3) {
-      this.setState({ pin: `${value}` });
+      setPin(`${value}`);
     }
   };
 
-  render() {
-    const { informationText, showForgotButton, username, intl, handleForgotButton } = this.props;
-    const { pin, loading } = this.state;
-
   return (
     <View style={styles.container}>
       <View style={styles.logoView}>
@@ -68,7 +59,7 @@ class PinCodeScreen extends PureComponent {
         <PinAnimatedInput pin={pin} loading={loading} />
       </View>
       <View style={styles.numericKeyboardView}>
-          <NumericKeyboard onPress={this._handleKeyboardOnPress} />
+        <NumericKeyboard onPress={_handleKeyboardOnPress} />
       </View>
       {showForgotButton ? (
         <TouchableOpacity onPress={() => handleForgotButton()} style={styles.forgotButtonView}>
@@ -83,7 +74,6 @@ class PinCodeScreen extends PureComponent {
       )}
     </View>
   );
-  }
-}
+};
 
 export default PinCodeScreen;

src/screens/points/container/pointsContainer.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 
 // Component
@@ -7,33 +7,14 @@ import PointsScreen from '../screen/pointsScreen';
 // Constants
 import ROUTES from '../../../constants/routeNames';
 
-/*
- *            Props Name        Description                                     Value
- *@props -->  props name here   description here                                Value Type Here
- *
- */
-
-class PointsContainer extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  // Component Life Cycle Functions
-
-  // Component Functions
-  _handleOnPressLogin = () => {
-    const { navigation } = this.props;
-
+const PointsContainer = ({ isLoggedIn, navigation }) => {
+  const _handleOnPressLogin = () => {
     navigation.navigate(ROUTES.SCREENS.LOGIN);
   };
 
-  render() {
-    const { isLoggedIn } = this.props;
+  return <PointsScreen isLoggedIn={isLoggedIn} handleLoginPress={_handleOnPressLogin} />;
+};
 
-    return <PointsScreen isLoggedIn={isLoggedIn} handleLoginPress={this._handleOnPressLogin} />;
-  }
-}
 const matStateToProps = state => ({
   isLoggedIn: state.application.isLoggedIn,
 });

src/screens/points/screen/pointsScreen.js

@@ -1,6 +1,6 @@
-import React, { PureComponent, Fragment } from 'react';
-import { injectIntl } from 'react-intl';
-import { View, SafeAreaView } from 'react-native';
+import React, { Fragment } from 'react';
+import { useIntl } from 'react-intl';
+import { SafeAreaView } from 'react-native';
 
 // Containers
 import { PointsContainer } from '../../../containers';
@@ -11,23 +11,8 @@ import { Header, Points, NoPost } from '../../../components';
 // Styles
 import styles from './pointsStyles';
 
-class PointsScreen extends PureComponent {
-  /* Props
-   * ------------------------------------------------
-   *   @prop { type }    name                - Description....
-   */
-
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  // Component Life Cycles
-
-  // Component Functions
-
-  render() {
-    const { intl, isLoggedIn, handleLoginPress } = this.props;
+const PointsScreen = ({ isLoggedIn, handleLoginPress }) => {
+  const intl = useIntl();
 
   return (
     <Fragment>
@@ -72,7 +57,6 @@ class PointsScreen extends PureComponent {
       </SafeAreaView>
     </Fragment>
   );
-  }
-}
+};
 
-export default injectIntl(PointsScreen);
+export default PointsScreen;