From d7d41b171760a0b16905c6359110c977555ded26 Mon Sep 17 00:00:00 2001
From: HIMANSHU <himanshu@wednesday.is>
Date: Tue, 16 Apr 2024 11:52:28 +0530
Subject: [PATCH] feat: Refactor example screen

---
 app/scenes/ExampleScreen/index.js             | 56 +++++++++----------
 app/scenes/ExampleScreen/saga.js              |  2 +-
 app/scenes/ExampleScreen/tests/index.test.js  | 12 ++--
 .../ExampleScreen/tests/reducer.test.js       | 23 ++++----
 .../ExampleScreen/tests/selectors.test.js     | 31 +++++-----
 5 files changed, 61 insertions(+), 63 deletions(-)

diff --git a/app/scenes/ExampleScreen/index.js b/app/scenes/ExampleScreen/index.js
index 1d7df58..3b273c1 100644
--- a/app/scenes/ExampleScreen/index.js
+++ b/app/scenes/ExampleScreen/index.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button, Platform, View, ActivityIndicator } from 'react-native';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
@@ -6,6 +5,7 @@ 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,
diff --git a/app/scenes/ExampleScreen/saga.js b/app/scenes/ExampleScreen/saga.js
index a0eefa1..6c3feaa 100644
--- a/app/scenes/ExampleScreen/saga.js
+++ b/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';
 
diff --git a/app/scenes/ExampleScreen/tests/index.test.js b/app/scenes/ExampleScreen/tests/index.test.js
index a1f364c..6038f51 100644
--- a/app/scenes/ExampleScreen/tests/index.test.js
+++ b/app/scenes/ExampleScreen/tests/index.test.js
@@ -7,15 +7,10 @@
 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} />
     );
@@ -23,10 +18,12 @@ describe('<ExampleScreen /> Container tests', () => {
   });
 
   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} />
     );
diff --git a/app/scenes/ExampleScreen/tests/reducer.test.js b/app/scenes/ExampleScreen/tests/reducer.test.js
index f0dd0e0..9356002 100644
--- a/app/scenes/ExampleScreen/tests/reducer.test.js
+++ b/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);
   });
diff --git a/app/scenes/ExampleScreen/tests/selectors.test.js b/app/scenes/ExampleScreen/tests/selectors.test.js
index 85c0635..1072308 100644
--- a/app/scenes/ExampleScreen/tests/selectors.test.js
+++ b/app/scenes/ExampleScreen/tests/selectors.test.js
@@ -5,18 +5,15 @@ 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
@@ -24,20 +21,24 @@ describe('Tests for selectors to get data from state for the ExampleScreen', ()
         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);
   });