code refator

App.js

@@ -12,9 +12,7 @@ if (!window.Intl) {
   })
     .then(() => Promise.all([import('intl/locale-data/jsonp/en.js')]))
     .then(() => AppRegistry.registerComponent(appName, () => App))
-    .catch(err => {
-      throw err;
-    });
+    .catch(alert);
 } else {
   AppRegistry.registerComponent(appName, () => App);
 }

app/components/molecules/CharacterWithQuote/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components/native';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import { fonts } from '@themes';
 import T from '@atoms/T';
@@ -23,7 +23,7 @@ function CharacterWithQuote({ user }) {
       <Result
         id="wednesday_lover"
         values={{
-          username: get(user, 'character') || 'character'
+          username: get(user, 'character', 'character')
         }}
       />
       <Result id="because" />

app/components/molecules/If/index.js

@@ -4,21 +4,24 @@
  *
  */
 // eslint-disable-next-line
-import React from 'react'
-import Proptypes from 'prop-types';
+import PropTypes from 'prop-types';
+
 const If = props => (props.condition ? props.children : props.otherwise);
-If.propsTypes = {
-  condition: Proptypes.bool,
-  otherwise: Proptypes.oneOfType([
-    Proptypes.arrayOf(Proptypes.node),
-    Proptypes.node
+
+If.propTypes = {
+  condition: PropTypes.bool,
+  otherwise: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
   ]),
-  children: Proptypes.oneOfType([
-    Proptypes.arrayOf(Proptypes.node),
-    Proptypes.node
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
   ])
 };
+
 If.defaultProps = {
   otherwise: null
 };
+
 export default If;

app/components/molecules/If/tests/index.test.js

@@ -9,7 +9,7 @@
 import React from 'react';
 import { Text } from 'react-native';
 import { render } from '@testing-library/react-native';
-
+import set from 'lodash/set';
 import If from '../index';
 
 describe('<If />', () => {
@@ -32,7 +32,7 @@ describe('<If />', () => {
       </If>
     );
     expect(getByText(conditionTrueText)).toBeTruthy();
-    props.condition = false;
+    set(props, 'condition', false);
     const { getByText: textQueryOnReRender } = render(
       <If {...props}>
         <TrueConditionComponent />

app/components/organisms/SimpsonsLoveWednesday/index.js

@@ -6,7 +6,7 @@ import If from '@molecules/If';
 import CharacterWithQuote from '@molecules/CharacterWithQuote';
 import LogoWithInstructions from '@molecules/LogoWithInstructions';
 
-const Error = styled.Text`
+const Err = styled.Text`
   ${fonts.style.standard()};
   text-align: center;
   margin-bottom: 5px;
@@ -25,7 +25,7 @@ function SimpsonsLoveWednesday({ instructions, user, userErrorMessage }) {
       <LogoWithInstructions instructions={instructions} />
       <If
         condition={!userErrorMessage}
-        otherwise={<Error>{userErrorMessage}</Error>}
+        otherwise={<Err>{userErrorMessage}</Err>}
       >
         <SeparatedView>
           <CharacterWithQuote user={user} />

app/components/organisms/SimpsonsLoveWednesday/tests/index.test.js

@@ -9,8 +9,8 @@
 import React from 'react';
 import { renderWithIntl } from '@utils/testUtils';
 import { rerender } from '@testing-library/react-native';
+import set from 'lodash/set';
 import SimpsonsLoveWednesday from '../index';
-
 describe('<SimpsonsLoveWednesday />', () => {
   it('Should render and match the snapshot', () => {
     const baseElement = renderWithIntl(<SimpsonsLoveWednesday />);
@@ -29,7 +29,7 @@ describe('<SimpsonsLoveWednesday />', () => {
     };
     const { getByText } = renderWithIntl(<SimpsonsLoveWednesday {...props} />);
     expect(getByText(props.userErrorMessage)).toBeTruthy();
-    props.userErrorMessage = null;
+    set(props, 'userErrorMessage', null);
     const { getByText: textQueryOnReRender } = renderWithIntl(
       <SimpsonsLoveWednesday {...props} />,
       rerender

app/i18n.js

@@ -7,12 +7,12 @@
  *   script `extract-intl`, and must use CommonJS module syntax
  *   You CANNOT use import/export in this file.
  */
+import get from 'lodash/get';
 const addLocaleData = require('react-intl').addLocaleData; //eslint-disable-line
 
 const enLocaleData = require('react-intl/locale-data/en');
 
 const enTranslationMessages = require('./translations/en.json');
-
 addLocaleData(enLocaleData);
 
 export const DEFAULT_LOCALE = 'en';
@@ -28,11 +28,15 @@ export const formatTranslationMessages = (locale, messages) => {
       ? formatTranslationMessages(DEFAULT_LOCALE, enTranslationMessages)
       : {};
   const flattenFormattedMessages = (formattedMessages, key) => {
-    const formattedMessage =
-      !messages[key] && locale !== DEFAULT_LOCALE
-        ? defaultFormattedMessages[key]
-        : messages[key];
-    return Object.assign(formattedMessages, { [key]: formattedMessage });
+    const formattedMessageOptions = {
+      true: get(defaultFormattedMessages, key),
+      false: get(messages, key)
+    };
+    const formattedCondition = !get(messages, key) && locale !== DEFAULT_LOCALE;
+    return {
+      ...formattedMessages,
+      [key]: get(formattedMessageOptions, formattedCondition)
+    };
   };
   return Object.keys(messages).reduce(flattenFormattedMessages, {});
 };

app/utils/apiUtils.js

@@ -1,41 +1,57 @@
 import { create } from 'apisauce';
 import mapKeysDeep from 'map-keys-deep';
-import { camelCase, snakeCase } from 'lodash';
+import camelCase from 'lodash/camelCase';
+import snakeCase from 'lodash/snakeCase';
+import set from 'lodash/set';
+import get from 'lodash/get';
 import { Config } from '@app/config/index';
-
 export const apiClients = {
   configApi: null,
   default: null
 };
-export const getApiClient = (type = 'configApi') => apiClients[type];
+export const getApiClient = (type = 'configApi') => get(apiClients, type);
 export const generateApiClient = (type = 'configApi') => {
-  switch (type) {
-    case 'configApi':
-      apiClients[type] = createApiClientWithTransForm(Config.API_URL);
-      return apiClients[type];
-    default:
-      apiClients.default = createApiClientWithTransForm(Config.API_URL);
+  const apiClientOption = {
+    configApi: () => {
+      set(apiClients, type, createApiClientWithTransForm(Config.API_URL));
+      return get(apiClients, type);
+    },
+    default: () => {
+      set(apiClients, 'default', createApiClientWithTransForm(Config.API_URL));
       return apiClients.default;
-  }
+    }
+  };
+  const clientGenerator = get(apiClientOption, type, apiClientOption.default);
+  return clientGenerator();
 };
 
 export const createApiClientWithTransForm = baseURL => {
   const api = create({
     baseURL,
     headers: { 'Content-Type': 'application/json' }
   });
+
+  // eslint-disable-next-line complexity
   api.addResponseTransform(response => {
     const { ok, data } = response;
     if (ok && data) {
-      response.data = mapKeysDeep(data, keys => camelCase(keys));
+      set(
+        response,
+        'data',
+        mapKeysDeep(data, keys => camelCase(keys))
+      );
     }
     return response;
   });
 
   api.addRequestTransform(request => {
     const { data } = request;
     if (data) {
-      request.data = mapKeysDeep(data, keys => snakeCase(keys));
+      set(
+        request,
+        'data',
+        mapKeysDeep(data, keys => snakeCase(keys))
+      );
     }
     return request;
   });

app/utils/createStore.js

@@ -26,14 +26,10 @@ const persistConfig = {
 };
 
 export default (rootReducer, rootSaga) => {
-  const middleware = [];
-  const enhancers = [];
-
-  // Connect the sagas to the redux store
+  // connect sagas to redux store
   const sagaMiddleware = createSagaMiddleware();
-  middleware.push(sagaMiddleware);
-
-  enhancers.push(applyMiddleware(...middleware));
+  const middleware = [sagaMiddleware];
+  const enhancers = [applyMiddleware(...middleware)];
 
   // Redux persist
   const persistedReducer = persistReducer(persistConfig, rootReducer);

app/utils/testUtils.js

@@ -3,6 +3,7 @@ import { IntlProvider } from 'react-intl';
 import { render } from '@testing-library/react-native';
 import { Provider } from 'react-redux';
 import createStore from 'app/rootReducer';
+import get from 'lodash/get';
 import { DEFAULT_LOCALE, translationMessages } from '@app/i18n';
 import ConnectedLanguageProvider from '@atoms/LanguageProvider';
 
@@ -14,7 +15,7 @@ export const renderWithIntl = (children, renderFunction = render) =>
   renderFunction(
     <IntlProvider
       locale={DEFAULT_LOCALE}
-      messages={translationMessages[DEFAULT_LOCALE]}
+      messages={get(translationMessages, DEFAULT_LOCALE)}
     >
       {children}
     </IntlProvider>

babel.config.js

@@ -1,4 +1,4 @@
-module.exports = function(api = { cache: () => {} }) {
+module.exports = (api = { cache: () => {} }) => {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],

setupTests.js

@@ -1,4 +1,4 @@
 import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
-
+import { LogBox } from 'react-native';
 jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);
-console.disableYellowBox = true;
+LogBox.ignoreAllLogs();