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/atoms/If/index.js

@@ -0,0 +1,26 @@
+/**
+ *
+ * If
+ *
+ */
+import PropTypes from 'prop-types';
+
+const If = props => (props.condition ? props.children : props.otherwise);
+
+If.propTypes = {
+  condition: PropTypes.bool,
+  otherwise: 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 → app/components/atoms/If/tests/index.test.js

@@ -9,35 +9,48 @@
 import React from 'react';
 import { Text } from 'react-native';
 import { render } from '@testing-library/react-native';
-
 import If from '../index';
 
 describe('<If />', () => {
   it('Should render and match the snapshot', () => {
     const baseElement = render(<If />);
     expect(baseElement).toMatchSnapshot();
   });
-  it('Should render the correct prop component based on the condition', () => {
-    const conditionTrueText = 'Shoudld render when condition is true';
+
+  it('If should render the child component when props.condition = true', () => {
+    const conditionTrueText = 'Should render when condition is true';
     const conditionFalseText = 'Should render condition is false';
     const OtherwiseComponent = () => <Text>{conditionFalseText}</Text>;
     const TrueConditionComponent = () => <Text>{conditionTrueText}</Text>;
     const props = {
       otherwise: <OtherwiseComponent />,
       condition: true
     };
-    const { getByText } = render(
+    const { queryByText, getByText } = render(
       <If {...props}>
         <TrueConditionComponent />
       </If>
     );
     expect(getByText(conditionTrueText)).toBeTruthy();
-    props.condition = false;
-    const { getByText: textQueryOnReRender } = render(
+    expect(queryByText(conditionFalseText)).not.toBeTruthy();
+  });
+
+  it('If should render the component passed on otherwise when props.condition = false', () => {
+    const conditionFalseText = 'Should render condition is false';
+    const conditionTrueText = 'Should render when condition is true';
+    const TrueConditionComponent = () => <Text>{conditionTrueText}</Text>;
+    const OtherwiseComponent = () => <Text>{conditionFalseText}</Text>;
+    const props = {
+      otherwise: <OtherwiseComponent />,
+      condition: false
+    };
+
+    const { queryByText, getByText } = render(
       <If {...props}>
         <TrueConditionComponent />
       </If>
     );
-    expect(textQueryOnReRender(conditionFalseText)).toBeTruthy();
+    expect(getByText(conditionFalseText)).toBeTruthy();
+    expect(queryByText(conditionTrueText)).not.toBeTruthy();
   });
 });

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/organisms/SimpsonsLoveWednesday/index.js

@@ -2,11 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components/native';
 import { fonts } from '@themes';
-import If from '@molecules/If';
+import If from '@app/components/atoms/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

@@ -10,7 +10,6 @@ import React from 'react';
 import { renderWithIntl } from '@utils/testUtils';
 import { rerender } from '@testing-library/react-native';
 import SimpsonsLoveWednesday from '../index';
-
 describe('<SimpsonsLoveWednesday />', () => {
   it('Should render and match the snapshot', () => {
     const baseElement = renderWithIntl(<SimpsonsLoveWednesday />);
@@ -29,7 +28,18 @@ describe('<SimpsonsLoveWednesday />', () => {
     };
     const { getByText } = renderWithIntl(<SimpsonsLoveWednesday {...props} />);
     expect(getByText(props.userErrorMessage)).toBeTruthy();
-    props.userErrorMessage = null;
+  });
+  it('Should render the component if userErrorMessage is empty', () => {
+    const props = {
+      userErrorMessage: null,
+      instructions: 'PRESS CMD + D for iOS',
+      user: {
+        character: 'Homer',
+        image:
+          'https://www.onthisday.com/images/people/homer-simpson-medium.jpg',
+        quote: "D'Oh!"
+      }
+    };
     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,20 +1,23 @@
 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 generateApiClient = (type = 'configApi') => {
   switch (type) {
     case 'configApi':
-      apiClients[type] = createApiClientWithTransForm(Config.API_URL);
-      return apiClients[type];
+      set(apiClients, type, createApiClientWithTransForm(Config.API_URL));
+      return get(apiClients, type);
     default:
-      apiClients.default = createApiClientWithTransForm(Config.API_URL);
+      set(apiClients, 'default', createApiClientWithTransForm(Config.API_URL));
       return apiClients.default;
   }
 };
@@ -23,19 +26,27 @@
   const api = create({
     baseURL,
     headers: { 'Content-Type': 'application/json' }
   });
   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();