From 539a40f874324a0e3527475ea583ee31db8d98a4 Mon Sep 17 00:00:00 2001
From: Kenneth Kwakye-Gyamfi <kenneth.cross95@gmail.com>
Date: Mon, 4 May 2020 08:36:01 +0000
Subject: [PATCH 1/2] Redux example

---
 examples/redux/App.js                  | 27 ++++++++++
 examples/redux/App.test.js             | 34 ++++++++++++
 examples/redux/actions/todoActions.js  | 25 +++++++++
 examples/redux/babel.config.js         |  6 +++
 examples/redux/components/AddTodo.js   | 73 ++++++++++++++++++++++++++
 examples/redux/components/TodoElem.js  | 25 +++++++++
 examples/redux/components/TodoList.js  | 29 ++++++++++
 examples/redux/index.js                |  8 +++
 examples/redux/package.json            | 34 ++++++++++++
 examples/redux/reducers/index.js       |  6 +++
 examples/redux/reducers/todoReducer.js | 28 ++++++++++
 examples/redux/store.js                |  6 +++
 12 files changed, 301 insertions(+)
 create mode 100644 examples/redux/App.js
 create mode 100644 examples/redux/App.test.js
 create mode 100644 examples/redux/actions/todoActions.js
 create mode 100644 examples/redux/babel.config.js
 create mode 100644 examples/redux/components/AddTodo.js
 create mode 100644 examples/redux/components/TodoElem.js
 create mode 100644 examples/redux/components/TodoList.js
 create mode 100644 examples/redux/index.js
 create mode 100644 examples/redux/package.json
 create mode 100644 examples/redux/reducers/index.js
 create mode 100644 examples/redux/reducers/todoReducer.js
 create mode 100644 examples/redux/store.js

diff --git a/examples/redux/App.js b/examples/redux/App.js
new file mode 100644
index 000000000..9712cdf2d
--- /dev/null
+++ b/examples/redux/App.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet, View, StatusBar } from 'react-native';
+import { Provider } from 'react-redux';
+import configureStore from './store';
+import AddTodo from './components/AddTodo';
+import TodoList from './components/TodoList';
+
+const store = configureStore();
+
+export default function App() {
+  return (
+    <Provider store={store}>
+      <View style={styles.container}>
+        <StatusBar barStyle="dark-content" />
+        <AddTodo />
+        <TodoList />
+      </View>
+    </Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 32,
+  },
+});
diff --git a/examples/redux/App.test.js b/examples/redux/App.test.js
new file mode 100644
index 000000000..30264bc97
--- /dev/null
+++ b/examples/redux/App.test.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { cleanup, fireEvent, render } from 'react-native-testing-library';
+import App from './App';
+
+describe('Application test', () => {
+  afterEach(cleanup);
+
+  test('testing redux functionality', () => {
+    const component = <App />;
+    const { getByPlaceholder, getByText, getAllByText } = render(component);
+    const input = getByPlaceholder('Enter the name of the repository here');
+    expect(input).toBeTruthy();
+
+    const textEntered = 'Test input';
+    const secondEntered = 'Second test input';
+
+    // Enter two entries
+    fireEvent.changeText(input, textEntered);
+    fireEvent.press(getByText('Submit form'));
+
+    fireEvent.changeText(input, secondEntered);
+    fireEvent.press(getByText('Submit form'));
+
+    const buttons = getAllByText('Delete');
+    expect(buttons.length).toBe(2);
+
+    expect(getByText(textEntered)).toBeTruthy();
+    expect(getByText(secondEntered)).toBeTruthy();
+
+    // Delete the second button
+    fireEvent.press(buttons[0]);
+    expect(getAllByText('Delete').length).toBe(1);
+  });
+});
diff --git a/examples/redux/actions/todoActions.js b/examples/redux/actions/todoActions.js
new file mode 100644
index 000000000..b83a37153
--- /dev/null
+++ b/examples/redux/actions/todoActions.js
@@ -0,0 +1,25 @@
+export const actions = {
+  ADD: '@ADD_TODO',
+  REMOVE: '@REMOVE_TODO',
+  MODIFY: '@MODIFY_TODO',
+  CLEAR: '@CLEAR_TODO',
+};
+
+export const addTodo = (todo) => ({
+  type: actions.ADD,
+  payload: todo,
+});
+
+export const removeTodo = (id) => ({
+  type: actions.REMOVE,
+  payload: { id },
+});
+
+export const modifyTodo = (todo) => ({
+  type: actions.MODIFY,
+  payload: todo,
+});
+
+export const clearTodos = () => ({
+  type: actions.CLEAR,
+});
diff --git a/examples/redux/babel.config.js b/examples/redux/babel.config.js
new file mode 100644
index 000000000..9d89e1311
--- /dev/null
+++ b/examples/redux/babel.config.js
@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};
diff --git a/examples/redux/components/AddTodo.js b/examples/redux/components/AddTodo.js
new file mode 100644
index 000000000..7ab31fc89
--- /dev/null
+++ b/examples/redux/components/AddTodo.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Button, StyleSheet, Text, View, TextInput } from 'react-native';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { addTodo } from '../actions/todoActions';
+
+export function AddTodo(props) {
+  const [text, setText] = React.useState('');
+
+  const submitForm = () => {
+    const todo = {
+      id: props.todoLength + 1,
+      text,
+      date: new Date(),
+    };
+
+    props.addTodo(todo);
+    setText('');
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.header}>Enter a text below to add a new todo</Text>
+      <TextInput
+        autoFocus
+        value={text}
+        style={styles.input}
+        returnKeyType="search"
+        onSubmitEditing={submitForm}
+        onChangeText={(t) => setText(t)}
+        placeholder="Enter the name of the repository here"
+      />
+
+      <Button onPress={submitForm} title="Submit form" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 156,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomColor: '#EEEEEE',
+    borderBottomWidth: 2,
+    marginBottom: 16,
+    padding: 16,
+  },
+  header: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginBottom: 8,
+  },
+  input: {
+    borderColor: '#DDDDDD',
+    borderWidth: 1,
+    paddingVertical: 8,
+    width: '100%',
+    textAlign: 'center',
+    borderRadius: 4,
+  },
+});
+
+const mapStateToProps = ({ todos }) => ({
+  todoLength: todos.length,
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({ addTodo }, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(AddTodo);
diff --git a/examples/redux/components/TodoElem.js b/examples/redux/components/TodoElem.js
new file mode 100644
index 000000000..8932c0471
--- /dev/null
+++ b/examples/redux/components/TodoElem.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { StyleSheet, Button, Text, View } from 'react-native';
+
+export default function TodoElem({ todo, onDelete }) {
+  return (
+    <View style={styles.container}>
+      <View style={styles.textContainer}>
+        <Text style={styles.text}>{todo.text}</Text>
+        <Text style={styles.date}>{new Date(todo.date).toDateString()}</Text>
+      </View>
+      <View style={styles.buttonContainer}>
+        <Button onPress={() => onDelete(todo.id)} title="Delete" />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
diff --git a/examples/redux/components/TodoList.js b/examples/redux/components/TodoList.js
new file mode 100644
index 000000000..3c66f73e3
--- /dev/null
+++ b/examples/redux/components/TodoList.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { FlatList, Text } from 'react-native';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { removeTodo } from '../actions/todoActions';
+import TodoElem from './TodoElem';
+
+export function TodoList(props) {
+  const onDeleteTodo = (id) => props.removeTodo(id);
+
+  return (
+    <FlatList
+      data={props.todos}
+      keyExtractor={(todo) => todo.id.toString()}
+      renderItem={({ item }) => (
+        <TodoElem todo={item} onDelete={onDeleteTodo} />
+      )}
+    />
+  );
+}
+
+const mapStateToProps = (state) => ({
+  todos: state.todos,
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({ removeTodo }, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
diff --git a/examples/redux/index.js b/examples/redux/index.js
new file mode 100644
index 000000000..9d5d25a62
--- /dev/null
+++ b/examples/redux/index.js
@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in the Expo client or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);
diff --git a/examples/redux/package.json b/examples/redux/package.json
new file mode 100644
index 000000000..7a4a5f3e1
--- /dev/null
+++ b/examples/redux/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "redux-example",
+  "description": "Testing Redux interactions with RNTL",
+  "version": "0.0.1",
+  "scripts": {
+    "test": "jest"
+  },
+  "dependencies": {
+    "expo": "~37.0.3",
+    "expo-updates": "~0.1.0",
+    "react": "~16.9.0",
+    "react-dom": "~16.9.0",
+    "react-native": "~0.61.5",
+    "react-native-gesture-handler": "~1.6.0",
+    "react-native-reanimated": "~1.7.0",
+    "react-native-screens": "~2.2.0",
+    "react-native-unimodules": "~0.9.0",
+    "react-native-web": "~0.11.7",
+    "react-redux": "^7.2.0",
+    "redux": "^4.0.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.6",
+    "babel-jest": "~25.2.6",
+    "babel-preset-expo": "~8.1.0",
+    "jest": "~25.2.6",
+    "react-native-testing-library": "^1.13.2",
+    "react-test-renderer": "~16.9.0"
+  },
+  "private": true,
+  "jest": {
+    "preset": "react-native"
+  }
+}
diff --git a/examples/redux/reducers/index.js b/examples/redux/reducers/index.js
new file mode 100644
index 000000000..1f340fbb9
--- /dev/null
+++ b/examples/redux/reducers/index.js
@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux';
+import todos from './todoReducer';
+
+export default combineReducers({
+  todos,
+});
diff --git a/examples/redux/reducers/todoReducer.js b/examples/redux/reducers/todoReducer.js
new file mode 100644
index 000000000..f55d4c3e6
--- /dev/null
+++ b/examples/redux/reducers/todoReducer.js
@@ -0,0 +1,28 @@
+import { actions } from '../actions/todoActions.js';
+
+export default function todoReducer(state = [], action) {
+  switch (action.type) {
+    case actions.ADD:
+      return state.concat(action.payload);
+
+    case actions.REMOVE:
+      console.log(action);
+      return state.filter((todo) => todo.id !== action.payload.id);
+
+    case actions.MODIFY:
+      return state.map((todo) => {
+        if (todo.id === action.payload.id) {
+          return {
+            ...todo,
+            ...action.payload,
+          };
+        }
+      });
+
+    case actions.CLEAR:
+      return [];
+
+    default:
+      return state;
+  }
+}
diff --git a/examples/redux/store.js b/examples/redux/store.js
new file mode 100644
index 000000000..20ec66e1a
--- /dev/null
+++ b/examples/redux/store.js
@@ -0,0 +1,6 @@
+import { createStore } from 'redux';
+import reducers from './reducers';
+
+export default function configureStore() {
+  return createStore(reducers);
+}

From 7d20b522cc3ca228b14143d2fe86e48ca0292215 Mon Sep 17 00:00:00 2001
From: Kenneth Kwakye-Gyamfi <kenneth.cross95@gmail.com>
Date: Mon, 4 May 2020 21:51:51 +0000
Subject: [PATCH 2/2] Reviews implemented

---
 examples/redux/App.test.js                 | 34 -------------
 examples/redux/babel.config.js             |  2 +-
 examples/redux/components/AddTodo.test.js  | 42 +++++++++++++++
 examples/redux/components/TodoList.test.js | 59 ++++++++++++++++++++++
 examples/redux/package.json                | 10 +---
 examples/redux/store.js                    |  8 ++-
 6 files changed, 109 insertions(+), 46 deletions(-)
 delete mode 100644 examples/redux/App.test.js
 create mode 100644 examples/redux/components/AddTodo.test.js
 create mode 100644 examples/redux/components/TodoList.test.js

diff --git a/examples/redux/App.test.js b/examples/redux/App.test.js
deleted file mode 100644
index 30264bc97..000000000
--- a/examples/redux/App.test.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import { cleanup, fireEvent, render } from 'react-native-testing-library';
-import App from './App';
-
-describe('Application test', () => {
-  afterEach(cleanup);
-
-  test('testing redux functionality', () => {
-    const component = <App />;
-    const { getByPlaceholder, getByText, getAllByText } = render(component);
-    const input = getByPlaceholder('Enter the name of the repository here');
-    expect(input).toBeTruthy();
-
-    const textEntered = 'Test input';
-    const secondEntered = 'Second test input';
-
-    // Enter two entries
-    fireEvent.changeText(input, textEntered);
-    fireEvent.press(getByText('Submit form'));
-
-    fireEvent.changeText(input, secondEntered);
-    fireEvent.press(getByText('Submit form'));
-
-    const buttons = getAllByText('Delete');
-    expect(buttons.length).toBe(2);
-
-    expect(getByText(textEntered)).toBeTruthy();
-    expect(getByText(secondEntered)).toBeTruthy();
-
-    // Delete the second button
-    fireEvent.press(buttons[0]);
-    expect(getAllByText('Delete').length).toBe(1);
-  });
-});
diff --git a/examples/redux/babel.config.js b/examples/redux/babel.config.js
index 9d89e1311..4d710acf8 100644
--- a/examples/redux/babel.config.js
+++ b/examples/redux/babel.config.js
@@ -1,6 +1,6 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ['module:metro-react-native-babel-preset'],
   };
 };
diff --git a/examples/redux/components/AddTodo.test.js b/examples/redux/components/AddTodo.test.js
new file mode 100644
index 000000000..c90344cf2
--- /dev/null
+++ b/examples/redux/components/AddTodo.test.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { cleanup, fireEvent, render } from 'react-native-testing-library';
+import configureStore from '../store';
+import AddTodo from './AddTodo';
+
+describe('Application test', () => {
+  afterEach(cleanup);
+
+  test('adds a new test when entry has been included', () => {
+    const store = configureStore();
+
+    const component = (
+      <Provider store={store}>
+        <AddTodo />
+      </Provider>
+    );
+
+    const { getByPlaceholder, getByText } = render(component);
+
+    const input = getByPlaceholder(/repository/i);
+    expect(input).toBeTruthy();
+
+    const textToEnter = 'This is a random element';
+    fireEvent.changeText(input, textToEnter);
+    fireEvent.press(getByText('Submit form'));
+
+    const todosState = store.getState().todos;
+
+    expect(todosState.length).toEqual(1);
+
+    expect(todosState).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: 1,
+          text: textToEnter,
+          date: expect.any(Date),
+        }),
+      ])
+    );
+  });
+});
diff --git a/examples/redux/components/TodoList.test.js b/examples/redux/components/TodoList.test.js
new file mode 100644
index 000000000..80b27f05f
--- /dev/null
+++ b/examples/redux/components/TodoList.test.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { cleanup, fireEvent, render } from 'react-native-testing-library';
+import configureStore from '../store';
+import TodoList from './TodoList';
+
+describe('Application test', () => {
+  afterEach(cleanup);
+
+  test('it should execute with a store with 4 elements', () => {
+    const initialState = {
+      todos: [
+        { id: 1, text: 'Sing something', date: new Date() },
+        { id: 2, text: 'Dance something', date: new Date() },
+        { id: 3, text: 'Sleep something', date: new Date() },
+        { id: 4, text: 'Sleep something', date: new Date() },
+      ],
+    };
+    const store = configureStore(initialState);
+
+    const component = (
+      <Provider store={store}>
+        <TodoList />
+      </Provider>
+    );
+
+    const { getAllByText } = render(component);
+    const todoElems = getAllByText(/something/i);
+
+    expect(todoElems.length).toEqual(4);
+  });
+
+  test('should execute with 2 elements and end up with 1 after delete', () => {
+    const initialState = {
+      todos: [
+        { id: 1, text: 'Sing something', date: new Date() },
+        { id: 2, text: 'Dance something', date: new Date() },
+      ],
+    };
+    const store = configureStore(initialState);
+
+    const component = (
+      <Provider store={store}>
+        <TodoList />
+      </Provider>
+    );
+
+    const { getAllByText } = render(component);
+    const todoElems = getAllByText(/something/i);
+
+    expect(todoElems.length).toBe(2);
+
+    const buttons = getAllByText('Delete');
+    expect(buttons.length).toBe(2);
+
+    fireEvent.press(buttons[0]);
+    expect(getAllByText('Delete').length).toBe(1);
+  });
+});
diff --git a/examples/redux/package.json b/examples/redux/package.json
index 7a4a5f3e1..95b4ea122 100644
--- a/examples/redux/package.json
+++ b/examples/redux/package.json
@@ -6,24 +6,16 @@
     "test": "jest"
   },
   "dependencies": {
-    "expo": "~37.0.3",
-    "expo-updates": "~0.1.0",
     "react": "~16.9.0",
-    "react-dom": "~16.9.0",
     "react-native": "~0.61.5",
-    "react-native-gesture-handler": "~1.6.0",
-    "react-native-reanimated": "~1.7.0",
-    "react-native-screens": "~2.2.0",
-    "react-native-unimodules": "~0.9.0",
-    "react-native-web": "~0.11.7",
     "react-redux": "^7.2.0",
     "redux": "^4.0.5"
   },
   "devDependencies": {
     "@babel/core": "^7.8.6",
     "babel-jest": "~25.2.6",
-    "babel-preset-expo": "~8.1.0",
     "jest": "~25.2.6",
+    "metro-react-native-babel-preset": "^0.59.0",
     "react-native-testing-library": "^1.13.2",
     "react-test-renderer": "~16.9.0"
   },
diff --git a/examples/redux/store.js b/examples/redux/store.js
index 20ec66e1a..f3a29b883 100644
--- a/examples/redux/store.js
+++ b/examples/redux/store.js
@@ -1,6 +1,10 @@
 import { createStore } from 'redux';
 import reducers from './reducers';
 
-export default function configureStore() {
-  return createStore(reducers);
+const initialStore = {
+  todos: [],
+};
+
+export default function configureStore(initialState = initialStore) {
+  return createStore(reducers, initialState);
 }