Update: TDD for React Sample App

.gitignore

@@ -1 +1,6 @@
 .DS_Store
+
+node_modules
+
+/coverage/  
+

src/App.css

@@ -2,37 +2,13 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+table {
+  margin: 4rem auto;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+table,
+th,
+td {
+  border: 1px solid black;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,23 +1,17 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+import { useReducer } from "react";
+import tableReducer, { initialState } from "./reducer/table.reducer";
+import Header from "./components/Header";
+import Form from "./components/Form";
+import Table from "./components/Table";
 
 function App() {
+  const [state, dispatch] = useReducer(tableReducer, initialState);
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Header />
+      <Form {...{ dispatch }} />
+      <Table {...{ state, dispatch }} />
     </div>
   );
 }

src/App.test.js

@@ -3,6 +3,6 @@ import App from './App';
 
 test('renders learn react link', () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+  const titleElement = screen.getByText(/React Sample Application/i);
+  expect(titleElement).toBeInTheDocument();
 });

src/components/Form.js

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { v4 as uuidv4 } from "uuid";
+
+const Form = ({dispatch}) => {
+    const initialObj = {
+        id: uuidv4(),
+        name: "",
+        role: "",
+    }
+    const [contributorObj, setContributorObj] = useState(initialObj);
+    return(
+        <div>
+        <h2>Form</h2>
+        <input
+          placeholder="Add Name"
+          value={contributorObj.name}
+          onChange={(e) =>
+            setContributorObj({ ...contributorObj, name: e.target.value })
+          }
+        />
+        <input
+          placeholder="Enter role"
+          value={contributorObj.role}
+          onChange={(e) =>
+            setContributorObj({ ...contributorObj, role: e.target.value })
+          }
+        />
+        <button
+          onClick={() => {
+            dispatch({
+              type: "ADD_MEMBER",
+              payload: { member: contributorObj },
+            });
+            setContributorObj(initialObj)
+          }}
+        >
+          Add Contributor
+        </button>
+      </div>
+    )
+}
+
+
+export default Form

src/components/Header.js

@@ -0,0 +1,6 @@
+const  Header = () => {
+    return <header>
+      <h1>React Sample Application</h1>
+    </header>;
+}
+export default Header

src/components/Table.js

@@ -0,0 +1,37 @@
+const Table = ({ state, dispatch }) => {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Role</th>
+        </tr>
+      </thead>
+      <tbody>
+        {state.members?.map((contributor) => {
+          return (
+            <tr key={contributor.id}>
+              <td>{contributor.name}</td>
+              <td>{contributor.role}</td>
+              <td>
+                <button
+                  onClick={() =>
+                    dispatch({
+                      type: "REMOVE_MEMBER",
+                      payload: { member: contributor },
+                    })
+                  }
+                >
+                  Remove
+                </button>
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+export default Table;
+

src/reducer/table.reducer.js

@@ -0,0 +1,31 @@
+export const initialState = {
+    members: [
+      { id: 1234, name: "Jessica Adams", role: "Community Engineer" },
+    ],
+    totalMembers: 1,
+  };
+
+const tableReducer = (state = initialState, action) => {
+    switch(action.type){
+        case "ADD_MEMBER" : 
+        return {
+            ...state,
+            members: [...state.members, action.payload.member],
+            totalMembers: state.totalMembers+1
+        };
+
+        case "REMOVE_MEMBER" : 
+        const updatedMembersList = state.members.filter((memberObj) => memberObj.id !== action.payload.member.id )
+        return {
+            ...state,
+            members: [...updatedMembersList],
+            totalMembers: state.totalMembers - 1
+        };
+
+        default : 
+        break;
+    }
+}
+
+
+export default tableReducer

src/reducer/table.reducer.test.js

@@ -0,0 +1,75 @@
+import tableReducer from "./table.reducer";
+
+describe("testing reducer", () => {
+  test("ADD_MEMBER", () => {
+    const initialState = {
+      members: [
+        { id: 1234, name: "Jessica Adams", role: "Community Engineer" },
+      ],
+      totalMembers: 1,
+    };
+
+    const action = {
+      type: "ADD_MEMBER",
+      payload: {
+        member: {
+          id: 1235,
+          name: "Ompragash Vishwanathan",
+          role: "Senior Software Engineer",
+        },
+      },
+    };
+
+    const expectedState = {
+        members: [
+          { id: 1234, name: "Jessica Adams", role: "Community Engineer" },{
+            id: 1235,
+            name: "Ompragash Vishwanathan",
+            role: "Senior Software Engineer",
+          }
+        ],
+        totalMembers: 2,
+      };
+
+    const state = tableReducer(initialState, action)
+    expect(state).toEqual(expectedState)
+  });
+
+
+  test("REMOVE_MEMBER", () => {
+    const initialState = {
+        members: [
+          { id: 1234, name: "Jessica Adams", role: "Community Engineer" },
+          { id: 1235, name: "Ompragash Vishwanathan", role: "Senior Software Engineer" },
+          { id: 1236, name: "Pravin Mali", role: "Community Engineer Manager" },
+          { id: 1237, name: "Alex Garg", role: "Community Engineer" },
+        ],
+        totalMembers: 4,
+      };
+
+    const action = {
+        type: "REMOVE_MEMBER",
+        payload: {
+          member: {
+            id: 1237,
+            name: "Alex Garg",
+            role: "Community Engineer",
+          },
+        },
+      };
+
+      const expectedState = {
+        members: [
+          { id: 1234, name: "Jessica Adams", role: "Community Engineer" },
+          { id: 1235, name: "Ompragash Vishwanathan", role: "Senior Software Engineer" },
+          { id: 1236, name: "Pravin Mali", role: "Community Engineer Manager" }
+        ],
+        totalMembers: 3,
+      };
+
+      const state = tableReducer(initialState, action)
+      expect(state).toEqual(expectedState)
+
+  })
+});
+