Refactored Example Screen

app/scenes/ExampleScreen/index.js

@@ -1,11 +1,11 @@
-import React from 'react';
 import { Button, Platform, View, ActivityIndicator } from 'react-native';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { PropTypes } from 'prop-types';
 import styled from 'styled-components/native';
 import { createStructuredSelector } from 'reselect';
 import { injectIntl } from 'react-intl';
+import React, { useEffect } from 'react';
 
 import AppContainer from '@atoms/Container';
 import SimpsonsLoveWednesday from '@organisms/SimpsonsLoveWednesday';
@@ -44,36 +44,32 @@ const instructions = Platform.select({
     'Double tap R on your keyboard to reload,\nShake or press menu button for dev menu.'
 });
 
-class ExampleScreen extends React.Component {
-  componentDidMount() {
-    this.requestFetchUser()();
-  }
-
-  requestFetchUser = () => () => {
-    this.props.fetchUser();
+const ExampleScreen = props => {
+  const requestFetchUser = () => {
+    props.fetchUser();
   };
-
-  render() {
-    return (
-      <Container>
-        {this.props.userIsLoading ? (
-          <ActivityIndicator testID="loader" size="large" color="#0000ff" />
-        ) : (
-          <View testID="example-container-content">
-            <SimpsonsLoveWednesday
-              instructions={instructions}
-              userErrorMessage={this.props.userErrorMessage}
-              user={this.props.user}
-            />
-            <CustomButtonParentView>
-              <Button onPress={this.requestFetchUser()} title="Refresh" />
-            </CustomButtonParentView>
-          </View>
-        )}
-      </Container>
-    );
-  }
-}
+  useEffect(() => {
+    requestFetchUser();
+  }, []);
+  return (
+    <Container>
+      {props.userIsLoading ? (
+        <ActivityIndicator testID="loader" size="large" color="#0000ff" />
+      ) : (
+        <View testID="example-container-content">
+          <SimpsonsLoveWednesday
+            instructions={instructions}
+            userErrorMessage={props.userErrorMessage}
+            user={props.user}
+          />
+          <CustomButtonParentView>
+            <Button onPress={requestFetchUser} title="Refresh" />
+          </CustomButtonParentView>
+        </View>
+      )}
+    </Container>
+  );
+};
 
 ExampleScreen.propTypes = {
   user: PropTypes.object,

app/scenes/ExampleScreen/reducer.js

@@ -39,14 +39,11 @@ export const failureFetchUser = (state, { errorMessage }) =>
  */
 export const exampleContainerReducer = (state = initialState, action) =>
   produce(state, () => {
-    switch (action.type) {
-      case exampleScreenTypes.REQUEST_FETCH_USER:
-        return fetchUser(state, action);
-      case exampleScreenTypes.SUCCESS_FETCH_USER:
-        return successFetchUser(state, action);
-      case exampleScreenTypes.FAILURE_FETCH_USER:
-        return failureFetchUser(state, action);
-      default:
-        return state;
-    }
+    const actionTypes = {
+      [exampleScreenTypes.REQUEST_FETCH_USER]: fetchUser(state),
+      [exampleScreenTypes.SUCCESS_FETCH_USER]: successFetchUser(state, action),
+      [exampleScreenTypes.FAILURE_FETCH_USER]: failureFetchUser(state, action)
+    };
+    if (actionTypes[action.type]) return actionTypes[action.type];
+    return state;
   });

app/scenes/ExampleScreen/saga.js

@@ -1,5 +1,5 @@
 import { put, call, takeLatest } from 'redux-saga/effects';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import { getUser } from '@app/services/UserService';
 import { exampleScreenActions, exampleScreenTypes } from './reducer';
 

app/scenes/ExampleScreen/tests/index.test.js

@@ -7,26 +7,23 @@
 import React from 'react';
 import { renderProvider } from 'app/utils/testUtils';
 import { ExampleScreenTest } from '../index';
-
+const setupJest = () => ({ submitSpy: jest.fn() });
 describe('<ExampleScreen /> Container tests', () => {
-  let submitSpy;
-
-  beforeAll(() => {
-    submitSpy = jest.fn();
-  });
-
   it('should render and match the snapshot', () => {
+    const { submitSpy } = setupJest();
     const baseElement = renderProvider(
       <ExampleScreenTest fetchUser={submitSpy} />
     );
     expect(baseElement).toMatchSnapshot();
   });
 
   it('should fetch the user data on mount', () => {
+    const { submitSpy } = setupJest();
     renderProvider(<ExampleScreenTest fetchUser={submitSpy} />);
     expect(submitSpy).toHaveBeenCalled();
   });
   it('should render ActivityIndicator if userIsLoading is true', () => {
+    const { submitSpy } = setupJest();
     const { getByTestId } = renderProvider(
       <ExampleScreenTest fetchUser={submitSpy} userIsLoading />
     );
@@ -36,6 +33,7 @@ describe('<ExampleScreen /> Container tests', () => {
   });
 
   it('should not render ActivityIndicator if userIsLoading is false, should instead render exampleContainerContent', () => {
+    const { submitSpy } = setupJest();
     const { getByTestId } = renderProvider(
       <ExampleScreenTest fetchUser={submitSpy} userIsLoading={false} />
     );

app/scenes/ExampleScreen/tests/reducer.test.js

@@ -5,50 +5,53 @@ import {
 } from '../reducer';
 
 /* eslint-disable default-case, no-param-reassign */
+const setupState = () => ({
+  state: initialState,
+  user: 'Mohammed Ali Chherawalla'
+});
 describe('Tests for reducers used in the ExampleScreen', () => {
-  let state;
-  beforeEach(() => {
-    state = initialState;
-  });
-
   it('should return the initial state', () => {
+    const { state } = setupState();
     expect(exampleContainerReducer(undefined, {})).toEqual(state);
   });
 
   it('should ensure that userLoading = true when an action of type REQUEST_FETCH_USER is dispatched', () => {
+    const { state, user } = setupState();
     const expectedResult = state
       .set('userIsLoading', true)
       .set('userErrorMessage', null);
     expect(
       exampleContainerReducer(state, {
         type: exampleScreenTypes.REQUEST_FETCH_USER,
-        user: 'Mohammed Ali Chherawalla'
+        user
       })
     ).toEqual(expectedResult);
   });
 
   it('should ensure that the user data is present and userLoading = false when SUCCESS_FETCH_USER is dispatched', () => {
+    const { state, user } = setupState();
     const expectedResult = state
-      .set('user', { name: 'Mohammed Ali Chherawalla' })
+      .set('user', { name: user })
       .set('userIsLoading', false)
       .set('userErrorMessage', null);
     expect(
       exampleContainerReducer(state, {
         type: exampleScreenTypes.SUCCESS_FETCH_USER,
-        user: { name: 'Mohammed Ali Chherawalla' }
+        user: { name: user }
       })
     ).toEqual(expectedResult);
   });
 
   it('should ensure that the userErrorMessage has some data and userLoading = false when FAILURE_FETCH_USER is dispatched', () => {
+    const { state } = setupState();
     const expectedResult = state
       .set('user', {})
       .set('userIsLoading', false)
-      .set('userErrorMessage', 'There was some error bro');
+      .set('userErrorMessage', 'There was some error');
     expect(
       exampleContainerReducer(state, {
         type: exampleScreenTypes.FAILURE_FETCH_USER,
-        errorMessage: 'There was some error bro'
+        errorMessage: 'There was some error'
       })
     ).toEqual(expectedResult);
   });

app/scenes/ExampleScreen/tests/selectors.test.js

@@ -5,39 +5,40 @@ import {
   selectUserErrorMessage
 } from '../selectors';
 
-describe('Tests for selectors to get data from state for the ExampleScreen', () => {
-  let mockedState;
-  let username;
-  let userIsLoading;
-  let userErrorMessage;
-
-  beforeEach(() => {
-    username = 'Mohammed Ali Chherawalla';
-    userErrorMessage = 'Some error';
-    userIsLoading = false;
-
-    mockedState = {
+const setupMockedState = () => {
+  const username = 'Mohammed Ali Chherawalla';
+  const userErrorMessage = 'Some error';
+  const userIsLoading = false;
+  return {
+    username,
+    userErrorMessage,
+    userIsLoading,
+    mockedState: {
       example: fromJS({
         user: {
           username
         },
         userErrorMessage,
         userIsLoading
       })
-    };
-  });
-
+    }
+  };
+};
+describe('Tests for selectors to get data from state for the ExampleScreen', () => {
   it('should select the user state', () => {
+    const { mockedState, username } = setupMockedState();
     const userSelector = selectUser();
     expect(userSelector(mockedState)).toEqual({ username });
   });
 
   it('should select userIsLoading', () => {
+    const { mockedState, userIsLoading } = setupMockedState();
     const userIsLoadingSelector = selectUserIsLoading();
     expect(userIsLoadingSelector(mockedState)).toEqual(userIsLoading);
   });
 
   it('should select the userErrorMessage', () => {
+    const { mockedState, userErrorMessage } = setupMockedState();
     const userErrorMessageSelector = selectUserErrorMessage();
     expect(userErrorMessageSelector(mockedState)).toEqual(userErrorMessage);
   });