enhanced points & checkbox convert to hooks

src/components/checkbox/view/checkboxView.js

@@ -1,45 +1,34 @@
-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);
 
-  _checkClicked = async () => {
-    const { clicked, value } = this.props;
+  const _checkClicked = () => {
+    setIsCheck(!isCheck);
 
-    await this.setState(prevState => ({
-      isCheck: !prevState.isCheck,
-    }));
-
-    const { isCheck } = this.state;
-
-    if (clicked) clicked(value, isCheck);
+    if (clicked) {
+      clicked(value, !isCheck);
+    }
   };
 
-  render() {
-    const { style, isChecked, locked } = this.props;
-    const { isCheck } = this.state;
-
-    if (locked) {
-      return (
-        <View style={styles.bigSquare}>
-          <View style={[styles.smallSquare, isChecked && styles.checked]} />
-        </View>
-      );
-    }
+  if (locked) {
     return (
-      <TouchableOpacity onPress={this._checkClicked} style={style}>
-        <View style={styles.bigSquare}>
-          <View style={[styles.smallSquare, isCheck && styles.checked]} />
-        </View>
-      </TouchableOpacity>
+      <View style={styles.bigSquare}>
+        <View style={[styles.smallSquare, isChecked && styles.checked]} />
+      </View>
     );
   }
-}
+
+  return (
+    <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,84 +8,72 @@ 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}>
-          <UserAvatar noAction username={username} size="xl" style={styles.avatar} />
-        </View>
-        <View style={styles.titleView}>
-          <Text style={styles.title}>{`@${username}`}</Text>
-        </View>
-        <View style={styles.informationView}>
-          <Text style={styles.informationText}>{informationText}</Text>
-        </View>
-        <View style={styles.animatedView}>
-          <PinAnimatedInput pin={pin} loading={loading} />
-        </View>
-        <View style={styles.numericKeyboardView}>
-          <NumericKeyboard onPress={this._handleKeyboardOnPress} />
-        </View>
-        {showForgotButton ? (
-          <TouchableOpacity onPress={() => handleForgotButton()} style={styles.forgotButtonView}>
-            <Text style={styles.forgotButtonText}>
-              {intl.formatMessage({
-                id: 'pincode.forgot_text',
-              })}
-            </Text>
-          </TouchableOpacity>
-        ) : (
-          <View style={styles.forgotButtonView} />
-        )}
+  return (
+    <View style={styles.container}>
+      <View style={styles.logoView}>
+        <UserAvatar noAction username={username} size="xl" style={styles.avatar} />
       </View>
-    );
-  }
-}
+      <View style={styles.titleView}>
+        <Text style={styles.title}>{`@${username}`}</Text>
+      </View>
+      <View style={styles.informationView}>
+        <Text style={styles.informationText}>{informationText}</Text>
+      </View>
+      <View style={styles.animatedView}>
+        <PinAnimatedInput pin={pin} loading={loading} />
+      </View>
+      <View style={styles.numericKeyboardView}>
+        <NumericKeyboard onPress={_handleKeyboardOnPress} />
+      </View>
+      {showForgotButton ? (
+        <TouchableOpacity onPress={() => handleForgotButton()} style={styles.forgotButtonView}>
+          <Text style={styles.forgotButtonText}>
+            {intl.formatMessage({
+              id: 'pincode.forgot_text',
+            })}
+          </Text>
+        </TouchableOpacity>
+      ) : (
+        <View style={styles.forgotButtonView} />
+      )}
+    </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,68 +11,52 @@ import { Header, Points, NoPost } from '../../../components';
 // Styles
 import styles from './pointsStyles';
 
-class PointsScreen extends PureComponent {
-  /* Props
-   * ------------------------------------------------
-   *   @prop { type }    name                - Description....
-   */
+const PointsScreen = ({ isLoggedIn, handleLoginPress }) => {
+  const intl = useIntl();
 
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
+  return (
+    <Fragment>
+      <Header />
+      <SafeAreaView style={styles.container}>
+        {isLoggedIn ? (
+          <PointsContainer>
+            {({
+              handleOnDropdownSelected,
+              claimPoints,
+              fetchUserActivity,
+              isClaiming,
+              isDarkTheme,
+              isLoading,
+              refreshing,
+              userActivities,
+              userPoints,
+            }) => (
+              <Points
+                claimPoints={claimPoints}
+                fetchUserActivity={fetchUserActivity}
+                isClaiming={isClaiming}
+                isDarkTheme={isDarkTheme}
+                isLoading={isLoading}
+                refreshing={refreshing}
+                userActivities={userActivities}
+                userPoints={userPoints}
+                handleOnDropdownSelected={handleOnDropdownSelected}
+              />
+            )}
+          </PointsContainer>
+        ) : (
+          <NoPost
+            style={styles.noPostContainer}
+            isButtonText
+            defaultText={intl.formatMessage({
+              id: 'profile.login_to_see',
+            })}
+            handleOnButtonPress={handleLoginPress}
+          />
+        )}
+      </SafeAreaView>
+    </Fragment>
+  );
+};
 
-  // Component Life Cycles
-
-  // Component Functions
-
-  render() {
-    const { intl, isLoggedIn, handleLoginPress } = this.props;
-
-    return (
-      <Fragment>
-        <Header />
-        <SafeAreaView style={styles.container}>
-          {isLoggedIn ? (
-            <PointsContainer>
-              {({
-                handleOnDropdownSelected,
-                claimPoints,
-                fetchUserActivity,
-                isClaiming,
-                isDarkTheme,
-                isLoading,
-                refreshing,
-                userActivities,
-                userPoints,
-              }) => (
-                <Points
-                  claimPoints={claimPoints}
-                  fetchUserActivity={fetchUserActivity}
-                  isClaiming={isClaiming}
-                  isDarkTheme={isDarkTheme}
-                  isLoading={isLoading}
-                  refreshing={refreshing}
-                  userActivities={userActivities}
-                  userPoints={userPoints}
-                  handleOnDropdownSelected={handleOnDropdownSelected}
-                />
-              )}
-            </PointsContainer>
-          ) : (
-            <NoPost
-              style={styles.noPostContainer}
-              isButtonText
-              defaultText={intl.formatMessage({
-                id: 'profile.login_to_see',
-              })}
-              handleOnButtonPress={handleLoginPress}
-            />
-          )}
-        </SafeAreaView>
-      </Fragment>
-    );
-  }
-}
-
-export default injectIntl(PointsScreen);
+export default PointsScreen;