cloudpbx · DarshilRij · May 4, 2022 · May 4, 2022 · May 4, 2022 · May 4, 2022
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
-*.js
+# *.js
 /.build
 /.dynamodb
 /node_modules
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules\\typescript\\lib"
+}
diff --git a/README.md b/README.md
@@ -8,6 +8,29 @@ example. A local DynamoDB instance is provided by the
 [serverless-dynamodb-local](https://github.com/99xt/serverless-dynamodb-local)
 plugin.
 
+#Note: For the Task Management Full Stack Application
+
+* Modified the existing full stack application with the Simple Task Management feature 
+by creating the necessary React components. 
+* Kept the layout simple and classic to view the tasks easily 
+* Created necessary CRUD operation and files for backend in the dynamodb 
+
+## New Setup
+```bash
+npm i -g serverless@2.72.3
+npm install
+serverless dynamodb install
+serverless dynamodb start
+cd frontend
+npm install
+npm start
+```
+
+After running the project successfully, one can run below cmd from root directory
+```bash
+npm start
+```
+
 ## Use-case
 
 Test your service locally, without having to deploy it first.

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -6,9 +6,16 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.1.3",
+    "node-sass": "^7.0.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "reactstrap": "^9.0.2",
+    "recoil": "^0.7.2",
+    "sass": "^1.51.0",
+    "typescript": "^4.6.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -34,5 +41,13 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.17.10",
+    "@babel/preset-react": "^7.16.7",
+    "babel-jest": "^28.0.3",
+    "jest": "^28.0.3",
+    "jest-watch-typeahead": "^0.6.5",
+    "react-test-renderer": "^18.1.0"
   }
-}
+}
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Task Management</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frontend/setupTests.js b/frontend/setupTests.js
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
diff --git a/frontend/src/App.css b/frontend/src/App.css
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -0,0 +1,42 @@
+import * as React from "react"
+import { BrowserRouter, Route, Routes } from "react-router-dom"
+import "./Styling/App.scss"
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { Container } from "reactstrap";
+
+const Main = React.lazy(() => import("./Components/Home/Main/index.tsx"))
+const TaskList = React.lazy(() => import("./Components/Home/Form/List/index.jsx"))
+
+const App = () => {
+
+    return (
+        <div className="App">
+            <Container>
+                <BrowserRouter>
+                    <Routes>
+
+                        <Route
+                            path='/'
+                            element={
+                                <React.Suspense fallback={<>...</>}>
+                                    <Main />
+                                </React.Suspense>
+                            }
+                        />
+                        <Route
+                            path='/task/list'
+                            element={
+                                <React.Suspense fallback={<>...</>}>
+                                    <TaskList />
+                                </React.Suspense>
+                            }
+                        />
+
+                    </Routes>
+                </BrowserRouter>
+            </Container>
+        </div>
+    )
+}
+
+export default App
diff --git a/frontend/src/App.test.js b/frontend/src/App.test.js
@@ -0,0 +1,6 @@
+import { render } from '@testing-library/react';
+import App from './App';
+
+test('renders Home', () => {
+    render(<App />)
+});
diff --git a/frontend/src/Components/Home/Form/Create/Home.scss b/frontend/src/Components/Home/Form/Create/Home.scss
@@ -0,0 +1,8 @@
+.heading{
+    padding-top: 1%;
+    padding-bottom: 1%;
+}
+
+.input{
+    width: max-content;
+}
diff --git a/frontend/src/Components/Home/Form/Create/index.jsx b/frontend/src/Components/Home/Form/Create/index.jsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { TaskActions } from '../../../../Store/Actions/task.actions';
+import { taskAtom } from '../../../../Store/Atoms/TaskAtoms/Atoms';
+import { Button, Input } from 'reactstrap'
+import "./Home.scss"
+
+function Create({ setIsAdd, isEdit, setIsEdit }) {
+
+    const task = useRecoilValue(taskAtom)
+    const taskActions = TaskActions()
+    const setTask = useSetRecoilState(taskAtom);
+
+    return (
+        <>
+            <div className='heading space '>
+                <div className='py-3 w-25'>
+                    <h3>Add Task</h3>
+                    <div className='py-2'>
+                        <Input
+                            // className='input'
+                            type="text"
+                            value={task.title}
+                            placeholder="Enter Title"
+                            onChange={(e) => setTask({ ...task, "title": e.target.value })}
+                        />
+
+                    </div>
+                    <div className='py-2'>
+                        <Input
+                            // className='input'
+                            cols="30"
+                            type="textarea"
+                            value={task.description}
+                            placeholder="Enter Description"
+                            onChange={(e) => setTask({ ...task, "description": e.target.value })}
+                        />
+                    </div>
+                    {isEdit && <div className='py-2'>
+                        <Input
+                            className='input'
+                            type="select"
+                            value={task.taskStatus}
+                            placeholder="Enter Description"
+                            onChange={(e) => setTask({ ...task, "taskStatus": e.target.value })}
+                        >
+                            <option value={"completed"}>
+                                Completed
+                            </option>
+                            <option value={"pending"}>
+                                Pending
+                            </option>
+                        </Input>
+                    </div>}
+                    <div className='mt-5'>
+                        <Button
+                            className='mx-2'
+                            color="primary"
+                            onClick={() => {
+                                isEdit ?
+                                    taskActions.updateTask()
+                                    :
+                                    taskActions.addTask()
+                                taskActions.resetUser()
+                                setIsAdd(false)
+                                setIsEdit(false)
+                            }}
+                        >
+                            {isEdit ? "Save" : "Add"}
+                        </Button>
+                        <Button
+                            color="danger"
+                            onClick={(e) => {
+                                taskActions.resetUser()
+                                setIsEdit(false)
+                                setIsAdd(false)
+                            }}
+                        >
+                            Cancel
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default Create
diff --git a/frontend/src/Components/Home/Form/List/index.jsx b/frontend/src/Components/Home/Form/List/index.jsx
@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { TaskActions } from '../../../../Store/Actions/task.actions';
+import { taskAtom, tasksAtom } from '../../../../Store/Atoms/TaskAtoms/Atoms';
+import { Button, Table } from 'reactstrap'
+import Create from '../Create/index.jsx';
+
+const List = () => {
+
+    const tasks = useRecoilValue(tasksAtom)
+    const taskActions = TaskActions()
+    const setTask = useSetRecoilState(taskAtom);
+    const [isAdd, setIsAdd] = useState(false)
+    const [isEdit, setIsEdit] = useState(false)
+
+    // eslint-disable-next-line
+    useEffect(() => {
+        taskActions.getAllTasks()
+    }, [])
+
+    return (
+        <>
+            <div className='d-flex justify-content-between heading space mb-2'>
+                <h2 className=''>
+                    Tasks List
+                </h2>
+                <Button
+                    color="primary"
+                    onClick={(e) => {
+                        setIsAdd(true)
+                    }}
+                >
+                    Add
+                </Button>
+            </div>
+            {isAdd &&
+                <div>
+                    <Create setIsAdd={setIsAdd} isEdit={isEdit} setIsEdit={setIsEdit} />
+                </div>}
+            <div>
+                <Table responsive striped bordered>
+                    <thead>
+                        <tr>
+                            <th>
+                                Title
+                            </th>
+                            <th>
+                                Description
+                            </th>
+                            <th>
+                                Task Status
+                            </th>
+                            <th>
+                                Action
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {tasks.length === 0 ?
+                            <tr>
+                                No Tasks Found
+                            </tr>
+
+                            :
+                            <>
+                                {tasks.map((task) => {
+                                    return (
+                                        <tr>
+                                            <th scope="row">
+                                                {task.title}
+                                            </th>
+                                            <td>
+                                                {task.description}
+                                            </td>
+                                            <td>
+                                                {task.taskStatus}
+                                            </td>
+                                            <td>
+                                                <Button
+                                                    color="primary"
+                                                    onClick={() => {
+                                                        setTask(task)
+                                                        setIsAdd(true)
+                                                        setIsEdit(true)
+                                                    }}
+                                                >
+                                                    Edit
+                                                </Button>
+                                            </td>
+                                        </tr>
+                                    )
+                                })
+                                }
+                            </>
+                        }
+
+                    </tbody>
+                </Table>
+            </div>
+
+        </>
+    )
+}
+
+export default List
diff --git a/frontend/src/Components/Home/Main/index.scss b/frontend/src/Components/Home/Main/index.scss