├── .env
├── public
    ├── index.css
    ├── logo.ico
    ├── robots.txt
    ├── logo192.png
    ├── logo512.png
    ├── fonts
    │   ├── CircularStd-Bold.otf
    │   ├── CircularStd-Book.otf
    │   ├── CircularStd-Medium.otf
    │   └── index.css
    ├── manifest.json
    └── index.html
├── src
    ├── pages
    │   ├── Task
    │   │   ├── index.js
    │   │   └── Task.js
    │   └── ToDo
    │   │   ├── index.js
    │   │   └── ToDo.js
    ├── containers
    │   ├── Layout
    │   │   ├── index.js
    │   │   └── Layout.js
    │   └── AppContainer.js
    ├── redux
    │   ├── api
    │   │   ├── request.js
    │   │   └── apiCall.js
    │   ├── modules
    │   │   ├── todo
    │   │   │   ├── constants.js
    │   │   │   ├── selectors.js
    │   │   │   ├── actions.js
    │   │   │   └── reducers.js
    │   │   └── task
    │   │   │   ├── constants.js
    │   │   │   ├── selectors.js
    │   │   │   ├── actions.js
    │   │   │   └── reducers.js
    │   ├── reducers.js
    │   ├── sagas
    │   │   ├── index.js
    │   │   ├── todo.js
    │   │   └── task.js
    │   └── store.js
    ├── index.js
    ├── routes
    │   └── index.js
    └── serviceWorker.js
├── .eslintrc
├── config
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── pnpTs.js
    ├── getHttpsConfig.js
    ├── paths.js
    ├── env.js
    ├── modules.js
    ├── webpackDevServer.config.js
    └── webpack.config.js
├── .gitignore
├── README.md
├── scripts
    ├── test.js
    ├── start.js
    └── build.js
└── package.json


/.env:
--------------------------------------------------------------------------------
1 | NODE_PATH = "src/"
2 | 


--------------------------------------------------------------------------------
/public/index.css:
--------------------------------------------------------------------------------
1 | body {
2 |   background-color: lightgray;
3 | }


--------------------------------------------------------------------------------
/src/pages/Task/index.js:
--------------------------------------------------------------------------------
1 | import Task from './Task'
2 | 
3 | export default Task
4 | 


--------------------------------------------------------------------------------
/src/pages/ToDo/index.js:
--------------------------------------------------------------------------------
1 | import ToDo from './ToDo'
2 | 
3 | export default ToDo
4 | 


--------------------------------------------------------------------------------
/public/logo.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelaltao/Cohen-Company-Test/HEAD/public/logo.ico


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/containers/Layout/index.js:
--------------------------------------------------------------------------------
1 | import Layout from './Layout'
2 | 
3 | export default Layout
4 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelaltao/Cohen-Company-Test/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelaltao/Cohen-Company-Test/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/fonts/CircularStd-Bold.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelaltao/Cohen-Company-Test/HEAD/public/fonts/CircularStd-Bold.otf


--------------------------------------------------------------------------------
/public/fonts/CircularStd-Book.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelaltao/Cohen-Company-Test/HEAD/public/fonts/CircularStd-Book.otf


--------------------------------------------------------------------------------
/public/fonts/CircularStd-Medium.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelaltao/Cohen-Company-Test/HEAD/public/fonts/CircularStd-Medium.otf


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "react-app",
3 |   "rules": {
4 |     "semi" : [2, "never"],
5 |     "max-len": [2, 140, 2],
6 |     "react/no-unused-prop-types": 0
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/src/redux/api/request.js:
--------------------------------------------------------------------------------
1 | export const requestPending = type => `${type}/pending`
2 | 
3 | export const requestSuccess = type => `${type}/success`
4 | 
5 | export const requestFail = type => `${type}/fail`
6 | 


--------------------------------------------------------------------------------
/src/redux/modules/todo/constants.js:
--------------------------------------------------------------------------------
1 | export const GET_TODO_LIST = 'GET_TODO_LIST'
2 | export const ADD_TODO = 'ADD_TODO'
3 | export const DELETE_TODO = 'DELETE_TODO'
4 | export const SET_ERROR_MESSAGE = 'SET_ERROR_MESSAGE'
5 | 


--------------------------------------------------------------------------------
/src/redux/reducers.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux'
2 | import todo from './modules/todo/reducers'
3 | import task from './modules/task/reducers'
4 | 
5 | export default combineReducers({
6 |   todo,
7 |   task,
8 | })
9 | 


--------------------------------------------------------------------------------
/src/redux/sagas/index.js:
--------------------------------------------------------------------------------
 1 | import { all } from 'redux-saga/effects'
 2 | import todo from './todo'
 3 | import task from './task'
 4 | 
 5 | export default function* rootSaga() {
 6 |   yield all([
 7 |     todo(),
 8 |     task()
 9 |   ])
10 | }
11 | 


--------------------------------------------------------------------------------
/src/containers/AppContainer.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Provider } from 'react-redux'
 3 | import store from 'redux/store'
 4 | import Routes from 'routes'
 5 | 
 6 | export default () => (
 7 |   <Provider store={store}>
 8 |     <Routes />
 9 |   </Provider>
10 | )
11 | 


--------------------------------------------------------------------------------
/src/containers/Layout/Layout.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Box } from '@mui/material'
 3 | 
 4 | const Layout = ({ children }) => {
 5 |   return (
 6 |     <Box sx={{ pt: 10 }}>
 7 |       {children}
 8 |     </Box>
 9 |   )
10 | }
11 | 
12 | export default Layout
13 | 


--------------------------------------------------------------------------------
/src/redux/modules/todo/selectors.js:
--------------------------------------------------------------------------------
 1 | import { get } from 'lodash'
 2 | 
 3 | export const todoStateSelector = (state) =>
 4 |   get(state, 'todo')
 5 | 
 6 | export const todoListSelector = (state) =>
 7 |   get(state, 'todo.todos')
 8 | 
 9 | export const errorMessageSelector = (state) =>
10 |   get(state, 'todo.error')
11 | 


--------------------------------------------------------------------------------
/src/redux/modules/task/constants.js:
--------------------------------------------------------------------------------
1 | export const GET_TASK_LIST = 'GET_TASK_LIST'
2 | export const DELETE_TASK = 'DELETE_TASK'
3 | export const ADD_TASK = 'ADD_TASK'
4 | export const GET_TASK = 'GET_TASK'
5 | export const UPDATE_TASK = 'UPDATE_TASK'
6 | export const GET_ALL_TASKS = 'GET_ALL_TASKS'
7 | export const SET_ERROR_MESSAGE = 'SET_ERROR_MESSAGE'
8 | 


--------------------------------------------------------------------------------
/src/redux/modules/todo/actions.js:
--------------------------------------------------------------------------------
1 | import { createAction } from 'redux-actions'
2 | import * as CONSTANTS from './constants'
3 | 
4 | export const getTodoList = createAction(CONSTANTS.GET_TODO_LIST)
5 | export const addTodo = createAction(CONSTANTS.ADD_TODO)
6 | export const deleteTodo = createAction(CONSTANTS.DELETE_TODO)
7 | export const setErrorMessage = createAction(CONSTANTS.SET_ERROR_MESSAGE)
8 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/en/webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/src/redux/modules/task/selectors.js:
--------------------------------------------------------------------------------
 1 | import { get } from 'lodash'
 2 | 
 3 | export const taskStateSelector = (state) =>
 4 |   get(state, 'task')
 5 | 
 6 | export const taskListSelector = (state) =>
 7 |   get(state, 'task.tasks')
 8 | 
 9 | export const taskSelector = (state) =>
10 |   get(state, 'task.task')
11 | 
12 | export const allTasksSelector = (state) =>
13 |   get(state, 'task.allTasks')
14 | 
15 | export const errorMessageSelector = (state) =>
16 |   get(state, 'task.error')
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | #IDE
 4 | .idea
 5 | 
 6 | # dependencies
 7 | /node_modules
 8 | /.pnp
 9 | .pnp.js
10 | 
11 | # testing
12 | /coverage
13 | 
14 | # production
15 | /build
16 | 
17 | # misc
18 | .DS_Store
19 | .env.local
20 | .env.development.local
21 | .env.test.local
22 | .env.production.local
23 | 
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | package-lock.json
29 | yarn.lock
30 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import App from './containers/AppContainer'
 4 | import * as serviceWorker from './serviceWorker'
 5 | 
 6 | ReactDOM.render(
 7 |   <App />
 8 |   ,
 9 |   document.getElementById('root'))
10 | 
11 | // If you want your app to work offline and load faster, you can change
12 | // unregister() to register() below. Note this comes with some pitfalls.
13 | // Learn more about service workers: https://bit.ly/CRA-PWA
14 | serviceWorker.unregister()
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | <h4 align="center">Cohen</h4>
 4 | 
 5 | ## Quick start
 6 | 
 7 | ## 1.install
 8 | 
 9 | ### Steps
10 | 
11 | 1. Type following commands:
12 | ``` console
13 | npm install
14 | or
15 | yarn install
16 | ```
17 | 
18 | 2. Serve your app:
19 | ``` console
20 | npm start
21 | or
22 | yarn start
23 | ```
24 | ## 2.Build
25 | ```sh
26 | npm run build or yarn build
27 | ```
28 | 
29 | Builds the app for production to the `build` folder.<br>
30 | 
31 | Your app is ready to be deployed.
32 | 
33 | ## 3.User Guide
34 | 
35 | soon..


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "Cohen",
 3 |   "name": "Cohen Company",
 4 |   "icons": [
 5 |     {
 6 |       "src": "logo.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png"
13 |     },
14 |     {
15 |       "src": "logo512.png",
16 |       "type": "image/png"
17 |     }
18 |   ],
19 |   "start_url": ".",
20 |   "display": "standalone",
21 |   "theme_color": "#000000",
22 |   "background_color": "#ffffff"
23 | }
24 | 


--------------------------------------------------------------------------------
/public/fonts/index.css:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |   font-family: 'CircularStd';
 3 |   font-weight: 400;
 4 |   font-style: normal;
 5 |   src: local('CircularStd'), url('CircularStd-Book.otf') format('opentype');
 6 | }
 7 | @font-face {
 8 |   font-family: 'CircularStd';
 9 |   font-weight: 500;
10 |   font-style: normal;
11 |   src: local('CircularStd'), url('CircularStd-Medium.otf') format('opentype');
12 | }
13 | @font-face {
14 |   font-family: 'CircularStd';
15 |   font-weight: 700;
16 |   font-style: normal;
17 |   src: local('CircularStd'), url('CircularStd-Bold.otf') format('opentype');
18 | }
19 | 


--------------------------------------------------------------------------------
/src/redux/modules/task/actions.js:
--------------------------------------------------------------------------------
 1 | import { createAction } from 'redux-actions'
 2 | import * as CONSTANTS from './constants'
 3 | 
 4 | export const getTasks = createAction(CONSTANTS.GET_TASK_LIST)
 5 | export const deleteTask = createAction(CONSTANTS.DELETE_TASK)
 6 | export const addTask = createAction(CONSTANTS.ADD_TASK)
 7 | export const getTask = createAction(CONSTANTS.GET_TASK)
 8 | export const updateTask = createAction(CONSTANTS.UPDATE_TASK)
 9 | export const getAllTasks = createAction(CONSTANTS.GET_ALL_TASKS)
10 | export const setErrorMessage = createAction(CONSTANTS.SET_ERROR_MESSAGE)
11 | 


--------------------------------------------------------------------------------
/src/routes/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 3 | import ToDo from 'pages/ToDo'
 4 | import Task from 'pages/Task'
 5 | import Layout from 'containers/Layout'
 6 | import ScrollToTop from 'react-router-scroll-top'
 7 | 
 8 | const routes = () => (
 9 |   <Router>
10 |     <ScrollToTop>
11 |       <Layout>
12 |         <Switch>
13 |           <Route exact path='/' component={ToDo} />
14 |           <Route path='/todo/:id' component={Task} />
15 |         </Switch>
16 |       </Layout>
17 |     </ScrollToTop>
18 |   </Router>
19 | )
20 | 
21 | export default (routes)
22 | 


--------------------------------------------------------------------------------
/config/pnpTs.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const { resolveModuleName } = require('ts-pnp');
 4 | 
 5 | exports.resolveModuleName = (
 6 |   typescript,
 7 |   moduleName,
 8 |   containingFile,
 9 |   compilerOptions,
10 |   resolutionHost
11 | ) => {
12 |   return resolveModuleName(
13 |     moduleName,
14 |     containingFile,
15 |     compilerOptions,
16 |     resolutionHost,
17 |     typescript.resolveModuleName
18 |   );
19 | };
20 | 
21 | exports.resolveTypeReferenceDirective = (
22 |   typescript,
23 |   moduleName,
24 |   containingFile,
25 |   compilerOptions,
26 |   resolutionHost
27 | ) => {
28 |   return resolveModuleName(
29 |     moduleName,
30 |     containingFile,
31 |     compilerOptions,
32 |     resolutionHost,
33 |     typescript.resolveTypeReferenceDirective
34 |   );
35 | };
36 | 


--------------------------------------------------------------------------------
/src/redux/sagas/todo.js:
--------------------------------------------------------------------------------
 1 | import { takeLatest } from 'redux-saga/effects'
 2 | import * as CONSTANTS from '../modules/todo/constants'
 3 | import apiCall from '../api/apiCall'
 4 | 
 5 | const doGetTodoList = apiCall({
 6 |   type: CONSTANTS.GET_TODO_LIST,
 7 |   method: 'get',
 8 |   path: 'todos',
 9 | })
10 | 
11 | const doAddTodo = apiCall({
12 |   type: CONSTANTS.ADD_TODO,
13 |   method: 'post',
14 |   path: 'todos',
15 | })
16 | 
17 | const doDeleteTodo = apiCall({
18 |   type: CONSTANTS.DELETE_TODO,
19 |   method: 'delete',
20 |   path: ({ payload }) => `/todos/${payload.id}`,
21 | })
22 | 
23 | export default function* rootSaga() {
24 |   yield takeLatest(CONSTANTS.GET_TODO_LIST, doGetTodoList)
25 |   yield takeLatest(CONSTANTS.ADD_TODO, doAddTodo)
26 |   yield takeLatest(CONSTANTS.DELETE_TODO, doDeleteTodo)
27 | }
28 | 


--------------------------------------------------------------------------------
/src/redux/modules/todo/reducers.js:
--------------------------------------------------------------------------------
 1 | import { handleActions } from 'redux-actions'
 2 | import { requestSuccess, requestFail } from 'redux/api/request'
 3 | import * as CONSTANTS from './constants'
 4 | 
 5 | const getInitialState = () => {
 6 |   return {
 7 |     todos: [],
 8 |     error: '',
 9 |   }
10 | }
11 | 
12 | export default handleActions({
13 |   [requestSuccess(CONSTANTS.GET_TODO_LIST)]: (state, { payload }) => ({
14 |     ...state,
15 |     todos: payload,
16 |   }),
17 |   [requestSuccess(CONSTANTS.ADD_TODO)]: (state, { payload }) => ({
18 |     ...state,
19 |     todos: payload,
20 |   }),
21 |   [requestFail(CONSTANTS.ADD_TODO)]: (state, { payload }) => ({
22 |     ...state,
23 |     error: payload.data.message,
24 |   }),
25 |   [requestSuccess(CONSTANTS.DELETE_TODO)]: (state, { payload }) => ({
26 |     ...state,
27 |     todos: payload,
28 |   }),
29 |   [(CONSTANTS.SET_ERROR_MESSAGE)]: (state, { payload }) => ({
30 |     ...state,
31 |     error: payload,
32 |   })
33 | 
34 | }, getInitialState())
35 | 


--------------------------------------------------------------------------------
/src/redux/store.js:
--------------------------------------------------------------------------------
 1 | import { createStore, applyMiddleware, compose } from 'redux'
 2 | import { routerMiddleware } from 'react-router-redux'
 3 | import createSagaMiddleware from 'redux-saga'
 4 | import { createBrowserHistory as createHistory } from 'history'
 5 | import rootReducer from './reducers'
 6 | import sagas from './sagas'
 7 | 
 8 | export const history = createHistory()
 9 | 
10 | const initialState = {}
11 | const enhancers = []
12 | 
13 | const sagaMiddleware = createSagaMiddleware()
14 | 
15 | const middleware = [
16 |   sagaMiddleware,
17 |   routerMiddleware(history)
18 | ]
19 | 
20 | if (process.env.NODE_ENV === 'development') {
21 |   const devToolsExtension = window.devToolsExtension
22 | 
23 |   if (typeof devToolsExtension === 'function') {
24 |     enhancers.push(devToolsExtension())
25 |   }
26 | }
27 | 
28 | const composedEnhancers = compose(
29 |   applyMiddleware(...middleware),
30 |   ...enhancers
31 | )
32 | 
33 | const store = createStore(
34 |   rootReducer,
35 |   initialState,
36 |   composedEnhancers
37 | )
38 | 
39 | sagaMiddleware.run(sagas)
40 | 
41 | export default store
42 | 


--------------------------------------------------------------------------------
/src/redux/modules/task/reducers.js:
--------------------------------------------------------------------------------
 1 | import { handleActions } from 'redux-actions'
 2 | import { requestSuccess, requestFail } from 'redux/api/request'
 3 | import * as CONSTANTS from './constants'
 4 | 
 5 | const getInitialState = () => {
 6 |   return {
 7 |     tasks: [],
 8 |     task: {},
 9 |     allTasks: [],
10 |     error: '',
11 |   }
12 | }
13 | 
14 | export default handleActions({
15 |   [requestSuccess(CONSTANTS.GET_TASK_LIST)]: (state, { payload }) => ({
16 |     ...state,
17 |     tasks: payload,
18 |   }),
19 |   [requestSuccess(CONSTANTS.DELETE_TASK)]: (state, { payload }) => ({
20 |     ...state,
21 |     tasks: payload,
22 |   }),
23 |   [requestSuccess(CONSTANTS.ADD_TASK)]: (state, { payload }) => ({
24 |     ...state,
25 |     tasks: payload,
26 |   }),
27 |   [requestFail(CONSTANTS.ADD_TASK)]: (state, { payload }) => ({
28 |     ...state,
29 |     error: payload.data.message,
30 |   }),
31 |   [requestSuccess(CONSTANTS.GET_TASK)]: (state, { payload }) => ({
32 |     ...state,
33 |     task: payload,
34 |   }),
35 |   [requestSuccess(CONSTANTS.UPDATE_TASK)]: (state, { payload }) => ({
36 |     ...state,
37 |     tasks: payload,
38 |   }),
39 |   [requestSuccess(CONSTANTS.GET_ALL_TASKS)]: (state, { payload }) => ({
40 |     ...state,
41 |     allTasks: payload,
42 |   }),
43 |   [(CONSTANTS.SET_ERROR_MESSAGE)]: (state, { payload }) => ({
44 |     ...state,
45 |     error: payload,
46 |   })
47 | 
48 | }, getInitialState())
49 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const camelcase = require('camelcase');
 5 | 
 6 | // This is a custom Jest transformer turning file imports into filenames.
 7 | // http://facebook.github.io/jest/docs/en/webpack.html
 8 | 
 9 | module.exports = {
10 |   process(src, filename) {
11 |     const assetFilename = JSON.stringify(path.basename(filename));
12 | 
13 |     if (filename.match(/\.svg$/)) {
14 |       // Based on how SVGR generates a component name:
15 |       // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
16 |       const pascalCaseFilename = camelcase(path.parse(filename).name, {
17 |         pascalCase: true,
18 |       });
19 |       const componentName = `Svg${pascalCaseFilename}`;
20 |       return `const React = require('react');
21 |       module.exports = {
22 |         __esModule: true,
23 |         default: ${assetFilename},
24 |         ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
25 |           return {
26 |             $$typeof: Symbol.for('react.element'),
27 |             type: 'svg',
28 |             ref: ref,
29 |             key: null,
30 |             props: Object.assign({}, props, {
31 |               children: ${assetFilename}
32 |             })
33 |           };
34 |         }),
35 |       };`;
36 |     }
37 | 
38 |     return `module.exports = ${assetFilename};`;
39 |   },
40 | };
41 | 


--------------------------------------------------------------------------------
/src/redux/sagas/task.js:
--------------------------------------------------------------------------------
 1 | import { takeLatest } from 'redux-saga/effects'
 2 | import * as CONSTANTS from '../modules/task/constants'
 3 | import apiCall from '../api/apiCall'
 4 | 
 5 | const doGetTaskList = apiCall({
 6 |   type: CONSTANTS.GET_TASK_LIST,
 7 |   method: 'get',
 8 |   path: ({ payload }) => `task/${payload.id}`,
 9 | })
10 | 
11 | const doDeleteTask = apiCall({
12 |   type: CONSTANTS.DELETE_TASK,
13 |   method: 'delete',
14 |   path: ({ payload }) => `task/${payload.id}/${payload.task_id}`
15 | })
16 | 
17 | const doAddTask = apiCall({
18 |   type: CONSTANTS.ADD_TASK,
19 |   method: 'post',
20 |   path: ({ payload }) => `task/${payload.id}`,
21 | })
22 | 
23 | const doGetTask = apiCall({
24 |   type: CONSTANTS.GET_TASK,
25 |   method: 'get',
26 |   path: ({ payload }) => `tasks/${payload.task_id}`,
27 | })
28 | 
29 | const doUpdateTask = apiCall({
30 |   type: CONSTANTS.UPDATE_TASK,
31 |   method: 'put',
32 |   path: ({ payload }) => `task/${payload.id}/${payload.task_id}`,
33 | })
34 | 
35 | const doGetAllTasks = apiCall({
36 |   type: CONSTANTS.GET_ALL_TASKS,
37 |   method: 'get',
38 |   path: 'task'
39 | })
40 | 
41 | export default function* rootSaga() {
42 |   yield takeLatest(CONSTANTS.GET_TASK_LIST, doGetTaskList)
43 |   yield takeLatest(CONSTANTS.DELETE_TASK, doDeleteTask)
44 |   yield takeLatest(CONSTANTS.ADD_TASK, doAddTask)
45 |   yield takeLatest(CONSTANTS.GET_TASK, doGetTask)
46 |   yield takeLatest(CONSTANTS.UPDATE_TASK, doUpdateTask)
47 |   yield takeLatest(CONSTANTS.GET_ALL_TASKS, doGetAllTasks)
48 | }
49 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | 
19 | const jest = require('jest');
20 | const execSync = require('child_process').execSync;
21 | let argv = process.argv.slice(2);
22 | 
23 | function isInGitRepository() {
24 |   try {
25 |     execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
26 |     return true;
27 |   } catch (e) {
28 |     return false;
29 |   }
30 | }
31 | 
32 | function isInMercurialRepository() {
33 |   try {
34 |     execSync('hg --cwd . root', { stdio: 'ignore' });
35 |     return true;
36 |   } catch (e) {
37 |     return false;
38 |   }
39 | }
40 | 
41 | // Watch unless on CI or explicitly running all tests
42 | if (
43 |   !process.env.CI &&
44 |   argv.indexOf('--watchAll') === -1 &&
45 |   argv.indexOf('--watchAll=false') === -1
46 | ) {
47 |   // https://github.com/facebook/create-react-app/issues/5210
48 |   const hasSourceControl = isInGitRepository() || isInMercurialRepository();
49 |   argv.push(hasSourceControl ? '--watch' : '--watchAll');
50 | }
51 | 
52 | 
53 | jest.run(argv);
54 | 


--------------------------------------------------------------------------------
/src/redux/api/apiCall.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import { call, put } from 'redux-saga/effects'
 3 | import { get } from 'lodash'
 4 | import { requestFail, requestPending, requestSuccess } from './request'
 5 | 
 6 | export default ({
 7 |   type,
 8 |   method, // one of 'get', 'post', 'put', 'delete'
 9 |   path,
10 |   success,
11 |   fail,
12 |   payloadOnSuccess,
13 |   payloadOnFail
14 | }) => function* (action) {
15 |   const {
16 |     body,
17 |     params,
18 |     success: successCallback,
19 |     fail: failCallback
20 |   } = (action.payload || {})
21 | 
22 |   axios.defaults.baseURL = 'http://localhost:3000'
23 | 
24 |   let headers = {
25 |     'Accept': '*/*',
26 |     'Content-Type': 'application/json',
27 |   }
28 | 
29 |   try {
30 |     yield put({
31 |       type: requestPending(type)
32 |     })
33 | 
34 |     const res = yield call(axios.request, {
35 |       url: typeof path === 'function' ? path(action) : path,
36 |       method: method.toLowerCase(),
37 |       headers: Object.assign({}, headers),
38 |       data: body,
39 |       params
40 |     })
41 | 
42 |     success && success(res, action)
43 |     successCallback && successCallback(res)
44 | 
45 |     yield put({
46 |       type: requestSuccess(type),
47 |       payload: payloadOnSuccess ? payloadOnSuccess(res.data, action) : res.data
48 |     })
49 |   } catch (err) {
50 |     const errRes = get(err, 'response', err)
51 | 
52 |     if (errRes.data && (errRes.data.code === 401 && errRes.data.message === 'Please authenticate')) {
53 |       yield put({
54 |         type: 'IS_UNAUTHORIZED',
55 |       })
56 |     }
57 | 
58 |     fail && fail(errRes)
59 |     failCallback && failCallback(errRes)
60 | 
61 |     yield put({
62 |       type: requestFail(type),
63 |       payload: payloadOnFail ? payloadOnFail(errRes, action) : errRes
64 |     })
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <link rel="icon" href="%PUBLIC_URL%/logo.ico" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |   <meta name="theme-color" content="#000000" />
 9 |   <meta name="description" content="Cohen Company Assessment" />
10 |   <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/fonts/index.css" />
11 |   <link rel="stylesheet" type="text/css" href="./index.css" />
12 |   <!--
13 |       manifest.json provides metadata used when your web app is installed on a
14 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
15 |     -->
16 |   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
17 |   <!--
18 |       Notice the use of %PUBLIC_URL% in the tags above.
19 |       It will be replaced with the URL of the `public` folder during the build.
20 |       Only files inside the `public` folder can be referenced from the HTML.
21 | 
22 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
23 |       work correctly both with client-side routing and a non-root public URL.
24 |       Learn how to configure a non-root public URL by running `npm run build`.
25 |     -->
26 | 
27 |   <title>Cohen Company Assessment</title>
28 | </head>
29 | 
30 | <body>
31 |   <noscript>You need to enable JavaScript to run this app.</noscript>
32 |   <div id="root"></div>
33 |   <!--
34 |       This HTML file is a template.
35 |       If you open it directly in the browser, you will see an empty page.
36 | 
37 |       You can add webfonts, meta tags, or analytics to this file.
38 |       The build step will place the bundled scripts into the <body> tag.
39 | 
40 |       To begin the development, run `npm start` or `yarn start`.
41 |       To create a production bundle, use `npm run build` or `yarn build`.
42 |     -->
43 | </body>
44 | 
45 | </html>


--------------------------------------------------------------------------------
/config/getHttpsConfig.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const crypto = require('crypto');
 6 | const chalk = require('react-dev-utils/chalk');
 7 | const paths = require('./paths');
 8 | 
 9 | // Ensure the certificate and key provided are valid and if not
10 | // throw an easy to debug error
11 | function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
12 |   let encrypted;
13 |   try {
14 |     // publicEncrypt will throw an error with an invalid cert
15 |     encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
16 |   } catch (err) {
17 |     throw new Error(
18 |       `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
19 |     );
20 |   }
21 | 
22 |   try {
23 |     // privateDecrypt will throw an error with an invalid key
24 |     crypto.privateDecrypt(key, encrypted);
25 |   } catch (err) {
26 |     throw new Error(
27 |       `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
28 |         err.message
29 |       }`
30 |     );
31 |   }
32 | }
33 | 
34 | // Read file and throw an error if it doesn't exist
35 | function readEnvFile(file, type) {
36 |   if (!fs.existsSync(file)) {
37 |     throw new Error(
38 |       `You specified ${chalk.cyan(
39 |         type
40 |       )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
41 |     );
42 |   }
43 |   return fs.readFileSync(file);
44 | }
45 | 
46 | // Get the https config
47 | // Return cert files if provided in env, otherwise just true or false
48 | function getHttpsConfig() {
49 |   const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
50 |   const isHttps = HTTPS === 'true';
51 | 
52 |   if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
53 |     const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
54 |     const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
55 |     const config = {
56 |       cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
57 |       key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
58 |     };
59 | 
60 |     validateKeyAndCerts({ ...config, keyFile, crtFile });
61 |     return config;
62 |   }
63 |   return isHttps;
64 | }
65 | 
66 | module.exports = getHttpsConfig;
67 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebook/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
13 | // "public path" at which the app is served.
14 | // webpack needs to know it to put the right <script> hrefs into HTML even in
15 | // single-page apps that may serve index.html for nested URLs like /todos/42.
16 | // We can't use a relative path in HTML because we don't want to load something
17 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
18 | const publicUrlOrPath = getPublicUrlOrPath(
19 |   process.env.NODE_ENV === 'development',
20 |   require(resolveApp('package.json')).homepage,
21 |   process.env.PUBLIC_URL
22 | );
23 | 
24 | const moduleFileExtensions = [
25 |   'web.mjs',
26 |   'mjs',
27 |   'web.js',
28 |   'js',
29 |   'web.ts',
30 |   'ts',
31 |   'web.tsx',
32 |   'tsx',
33 |   'json',
34 |   'web.jsx',
35 |   'jsx',
36 | ];
37 | 
38 | // Resolve file paths in the same order as webpack
39 | const resolveModule = (resolveFn, filePath) => {
40 |   const extension = moduleFileExtensions.find(extension =>
41 |     fs.existsSync(resolveFn(`${filePath}.${extension}`))
42 |   );
43 | 
44 |   if (extension) {
45 |     return resolveFn(`${filePath}.${extension}`);
46 |   }
47 | 
48 |   return resolveFn(`${filePath}.js`);
49 | };
50 | 
51 | // config after eject: we're in ./config/
52 | module.exports = {
53 |   dotenv: resolveApp('.env'),
54 |   appPath: resolveApp('.'),
55 |   appBuild: resolveApp('build'),
56 |   appPublic: resolveApp('public'),
57 |   appHtml: resolveApp('public/index.html'),
58 |   appIndexJs: resolveModule(resolveApp, 'src/index'),
59 |   appPackageJson: resolveApp('package.json'),
60 |   appSrc: resolveApp('src'),
61 |   appTsConfig: resolveApp('tsconfig.json'),
62 |   appJsConfig: resolveApp('jsconfig.json'),
63 |   yarnLockFile: resolveApp('yarn.lock'),
64 |   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
65 |   proxySetup: resolveApp('src/setupProxy.js'),
66 |   appNodeModules: resolveApp('node_modules'),
67 |   publicUrlOrPath,
68 | };
69 | 
70 | 
71 | 
72 | module.exports.moduleFileExtensions = moduleFileExtensions;
73 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const path = require('path');
  5 | const paths = require('./paths');
  6 | 
  7 | // Make sure that including paths.js after env.js will read .env variables.
  8 | delete require.cache[require.resolve('./paths')];
  9 | 
 10 | const NODE_ENV = process.env.NODE_ENV;
 11 | if (!NODE_ENV) {
 12 |   throw new Error(
 13 |     'The NODE_ENV environment variable is required but was not specified.'
 14 |   );
 15 | }
 16 | 
 17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
 18 | const dotenvFiles = [
 19 |   `${paths.dotenv}.${NODE_ENV}.local`,
 20 |   `${paths.dotenv}.${NODE_ENV}`,
 21 |   // Don't include `.env.local` for `test` environment
 22 |   // since normally you expect tests to produce the same
 23 |   // results for everyone
 24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
 25 |   paths.dotenv,
 26 | ].filter(Boolean);
 27 | 
 28 | // Load environment variables from .env* files. Suppress warnings using silent
 29 | // if this file is missing. dotenv will never modify any environment variables
 30 | // that have already been set.  Variable expansion is supported in .env files.
 31 | // https://github.com/motdotla/dotenv
 32 | // https://github.com/motdotla/dotenv-expand
 33 | dotenvFiles.forEach(dotenvFile => {
 34 |   if (fs.existsSync(dotenvFile)) {
 35 |     require('dotenv-expand')(
 36 |       require('dotenv').config({
 37 |         path: dotenvFile,
 38 |       })
 39 |     );
 40 |   }
 41 | });
 42 | 
 43 | // We support resolving modules according to `NODE_PATH`.
 44 | // This lets you use absolute paths in imports inside large monorepos:
 45 | // https://github.com/facebook/create-react-app/issues/253.
 46 | // It works similar to `NODE_PATH` in Node itself:
 47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
 48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
 49 | // Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
 50 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
 51 | // We also resolve them to make sure all tools using them work consistently.
 52 | const appDirectory = fs.realpathSync(process.cwd());
 53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
 54 |   .split(path.delimiter)
 55 |   .filter(folder => folder && !path.isAbsolute(folder))
 56 |   .map(folder => path.resolve(appDirectory, folder))
 57 |   .join(path.delimiter);
 58 | 
 59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 60 | // injected into the application via DefinePlugin in webpack configuration.
 61 | const REACT_APP = /^REACT_APP_/i;
 62 | 
 63 | function getClientEnvironment(publicUrl) {
 64 |   const raw = Object.keys(process.env)
 65 |     .filter(key => REACT_APP.test(key))
 66 |     .reduce(
 67 |       (env, key) => {
 68 |         env[key] = process.env[key];
 69 |         return env;
 70 |       },
 71 |       {
 72 |         // Useful for determining whether we’re running in production mode.
 73 |         // Most importantly, it switches React into the correct mode.
 74 |         NODE_ENV: process.env.NODE_ENV || 'development',
 75 |         // Useful for resolving the correct path to static assets in `public`.
 76 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
 77 |         // This should only be used as an escape hatch. Normally you would put
 78 |         // images into the `src` and `import` them in code to get their paths.
 79 |         PUBLIC_URL: publicUrl,
 80 |         // We support configuring the sockjs pathname during development.
 81 |         // These settings let a developer run multiple simultaneous projects.
 82 |         // They are used as the connection `hostname`, `pathname` and `port`
 83 |         // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
 84 |         // and `sockPort` options in webpack-dev-server.
 85 |         WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
 86 |         WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
 87 |         WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
 88 |       }
 89 |     );
 90 |   // Stringify all values so we can feed into webpack DefinePlugin
 91 |   const stringified = {
 92 |     'process.env': Object.keys(raw).reduce((env, key) => {
 93 |       env[key] = JSON.stringify(raw[key]);
 94 |       return env;
 95 |     }, {}),
 96 |   };
 97 | 
 98 |   return { raw, stringified };
 99 | }
100 | 
101 | module.exports = getClientEnvironment;
102 | 


--------------------------------------------------------------------------------
/config/modules.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const path = require('path');
  5 | const paths = require('./paths');
  6 | const chalk = require('react-dev-utils/chalk');
  7 | const resolve = require('resolve');
  8 | 
  9 | /**
 10 |  * Get additional module paths based on the baseUrl of a compilerOptions object.
 11 |  *
 12 |  * @param {Object} options
 13 |  */
 14 | function getAdditionalModulePaths(options = {}) {
 15 |   const baseUrl = options.baseUrl;
 16 | 
 17 |   // We need to explicitly check for null and undefined (and not a falsy value) because
 18 |   // TypeScript treats an empty string as `.`.
 19 |   if (baseUrl == null) {
 20 |     // If there's no baseUrl set we respect NODE_PATH
 21 |     // Note that NODE_PATH is deprecated and will be removed
 22 |     // in the next major release of create-react-app.
 23 | 
 24 |     const nodePath = process.env.NODE_PATH || '';
 25 |     return nodePath.split(path.delimiter).filter(Boolean);
 26 |   }
 27 | 
 28 |   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 29 | 
 30 |   // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
 31 |   // the default behavior.
 32 |   if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
 33 |     return null;
 34 |   }
 35 | 
 36 |   // Allow the user set the `baseUrl` to `appSrc`.
 37 |   if (path.relative(paths.appSrc, baseUrlResolved) === '') {
 38 |     return [paths.appSrc];
 39 |   }
 40 | 
 41 |   // If the path is equal to the root directory we ignore it here.
 42 |   // We don't want to allow importing from the root directly as source files are
 43 |   // not transpiled outside of `src`. We do allow importing them with the
 44 |   // absolute path (e.g. `src/Components/Button.js`) but we set that up with
 45 |   // an alias.
 46 |   if (path.relative(paths.appPath, baseUrlResolved) === '') {
 47 |     return null;
 48 |   }
 49 | 
 50 |   // Otherwise, throw an error.
 51 |   throw new Error(
 52 |     chalk.red.bold(
 53 |       "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
 54 |         ' Create React App does not support other values at this time.'
 55 |     )
 56 |   );
 57 | }
 58 | 
 59 | /**
 60 |  * Get webpack aliases based on the baseUrl of a compilerOptions object.
 61 |  *
 62 |  * @param {*} options
 63 |  */
 64 | function getWebpackAliases(options = {}) {
 65 |   const baseUrl = options.baseUrl;
 66 | 
 67 |   if (!baseUrl) {
 68 |     return {};
 69 |   }
 70 | 
 71 |   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 72 | 
 73 |   if (path.relative(paths.appPath, baseUrlResolved) === '') {
 74 |     return {
 75 |       src: paths.appSrc,
 76 |     };
 77 |   }
 78 | }
 79 | 
 80 | /**
 81 |  * Get jest aliases based on the baseUrl of a compilerOptions object.
 82 |  *
 83 |  * @param {*} options
 84 |  */
 85 | function getJestAliases(options = {}) {
 86 |   const baseUrl = options.baseUrl;
 87 | 
 88 |   if (!baseUrl) {
 89 |     return {};
 90 |   }
 91 | 
 92 |   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 93 | 
 94 |   if (path.relative(paths.appPath, baseUrlResolved) === '') {
 95 |     return {
 96 |       '^src/(.*)$': '<rootDir>/src/$1',
 97 |     };
 98 |   }
 99 | }
100 | 
101 | function getModules() {
102 |   // Check if TypeScript is setup
103 |   const hasTsConfig = fs.existsSync(paths.appTsConfig);
104 |   const hasJsConfig = fs.existsSync(paths.appJsConfig);
105 | 
106 |   if (hasTsConfig && hasJsConfig) {
107 |     throw new Error(
108 |       'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
109 |     );
110 |   }
111 | 
112 |   let config;
113 | 
114 |   // If there's a tsconfig.json we assume it's a
115 |   // TypeScript project and set up the config
116 |   // based on tsconfig.json
117 |   if (hasTsConfig) {
118 |     const ts = require(resolve.sync('typescript', {
119 |       basedir: paths.appNodeModules,
120 |     }));
121 |     config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
122 |     // Otherwise we'll check if there is jsconfig.json
123 |     // for non TS projects.
124 |   } else if (hasJsConfig) {
125 |     config = require(paths.appJsConfig);
126 |   }
127 | 
128 |   config = config || {};
129 |   const options = config.compilerOptions || {};
130 | 
131 |   const additionalModulePaths = getAdditionalModulePaths(options);
132 | 
133 |   return {
134 |     additionalModulePaths: additionalModulePaths,
135 |     webpackAliases: getWebpackAliases(options),
136 |     jestAliases: getJestAliases(options),
137 |     hasTsConfig,
138 |   };
139 | }
140 | 
141 | module.exports = getModules();
142 | 


--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.0/8 are considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | )
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href)
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config)
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 47 |           )
 48 |         })
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config)
 52 |       }
 53 |     })
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing
 63 |         if (installingWorker == null) {
 64 |           return
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 75 |               )
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration)
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.')
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration)
 90 |               }
 91 |             }
 92 |           }
 93 |         }
 94 |       }
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error)
 98 |     })
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl, {
104 |     headers: { 'Service-Worker': 'script' },
105 |   })
106 |     .then(response => {
107 |       // Ensure service worker exists, and that we really are getting a JS file.
108 |       const contentType = response.headers.get('content-type')
109 |       if (
110 |         response.status === 404 ||
111 |         (contentType != null && contentType.indexOf('javascript') === -1)
112 |       ) {
113 |         // No service worker found. Probably a different app. Reload the page.
114 |         navigator.serviceWorker.ready.then(registration => {
115 |           registration.unregister().then(() => {
116 |             window.location.reload()
117 |           })
118 |         })
119 |       } else {
120 |         // Service worker found. Proceed as normal.
121 |         registerValidSW(swUrl, config)
122 |       }
123 |     })
124 |     .catch(() => {
125 |       console.log(
126 |         'No internet connection found. App is running in offline mode.'
127 |       )
128 |     })
129 | }
130 | 
131 | export function unregister() {
132 |   if ('serviceWorker' in navigator) {
133 |     navigator.serviceWorker.ready
134 |       .then(registration => {
135 |         registration.unregister()
136 |       })
137 |       .catch(error => {
138 |         console.error(error.message)
139 |       })
140 |   }
141 | }
142 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "cohen",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "dependencies": {
  6 |     "@babel/core": "^7.13.15",
  7 |     "@emotion/react": "^11.4.1",
  8 |     "@emotion/styled": "^11.3.0",
  9 |     "@mui/icons-material": "^5.0.3",
 10 |     "@mui/lab": "*",
 11 |     "@mui/material": "^5.0.3",
 12 |     "@mui/styled-engine-sc": "^5.0.3",
 13 |     "@mui/styles": "^5.0.1",
 14 |     "@svgr/webpack": "4.3.3",
 15 |     "@testing-library/jest-dom": "^4.2.4",
 16 |     "@testing-library/react": "^9.3.2",
 17 |     "@testing-library/user-event": "^7.1.2",
 18 |     "@typescript-eslint/eslint-plugin": "^2.10.0",
 19 |     "@typescript-eslint/parser": "^2.10.0",
 20 |     "axios": "^0.20.0",
 21 |     "babel-eslint": "10.1.0",
 22 |     "babel-jest": "^24.9.0",
 23 |     "babel-loader": "8.1.0",
 24 |     "babel-plugin-named-asset-import": "^0.3.6",
 25 |     "babel-preset-react-app": "^9.1.2",
 26 |     "camelcase": "^5.3.1",
 27 |     "case-sensitive-paths-webpack-plugin": "2.3.0",
 28 |     "classnames": "^2.2.6",
 29 |     "css-loader": "3.4.2",
 30 |     "date-fns": "^2.27.0",
 31 |     "dotenv": "8.2.0",
 32 |     "dotenv-expand": "5.1.0",
 33 |     "eslint": "^6.6.0",
 34 |     "eslint-config-react-app": "^5.2.1",
 35 |     "eslint-loader": "3.0.3",
 36 |     "eslint-plugin-flowtype": "4.6.0",
 37 |     "eslint-plugin-import": "2.20.1",
 38 |     "eslint-plugin-jsx-a11y": "6.2.3",
 39 |     "eslint-plugin-react": "7.19.0",
 40 |     "eslint-plugin-react-hooks": "^1.6.1",
 41 |     "file-loader": "4.3.0",
 42 |     "font-awesome": "^4.7.0",
 43 |     "fs-extra": "^8.1.0",
 44 |     "html-webpack-plugin": "4.0.0-beta.11",
 45 |     "identity-obj-proxy": "3.0.0",
 46 |     "jest": "24.9.0",
 47 |     "jest-environment-jsdom-fourteen": "1.0.1",
 48 |     "jest-resolve": "24.9.0",
 49 |     "jest-watch-typeahead": "0.4.2",
 50 |     "mini-css-extract-plugin": "0.9.0",
 51 |     "moment": "^2.29.1",
 52 |     "node-sass": "^4.14.1",
 53 |     "optimize-css-assets-webpack-plugin": "5.0.3",
 54 |     "pnp-webpack-plugin": "1.6.4",
 55 |     "postcss-flexbugs-fixes": "4.1.0",
 56 |     "postcss-loader": "3.0.0",
 57 |     "postcss-normalize": "8.0.1",
 58 |     "postcss-preset-env": "6.7.0",
 59 |     "postcss-safe-parser": "4.0.1",
 60 |     "react": "^17.0.2",
 61 |     "react-app-polyfill": "^1.0.6",
 62 |     "react-avatar-edit": "^1.1.0",
 63 |     "react-dev-utils": "^10.2.1",
 64 |     "react-dom": "^17.0.2",
 65 |     "react-icons": "^4.3.1",
 66 |     "react-lazy-load-image-component": "^1.5.1",
 67 |     "react-player": "^2.10.0",
 68 |     "react-redux": "^7.2.1",
 69 |     "react-router": "^5.2.0",
 70 |     "react-router-dom": "^5.2.0",
 71 |     "react-router-redux": "^4.0.8",
 72 |     "react-router-scroll-top": "^0.3.1",
 73 |     "react-scroll": "^1.8.4",
 74 |     "react-show-more-text": "^1.5.2",
 75 |     "react-slick": "^0.28.1",
 76 |     "react-stickynode": "^4.0.0",
 77 |     "react-swipeable-views": "^0.14.0",
 78 |     "redux": "^4.0.5",
 79 |     "redux-actions": "^2.6.5",
 80 |     "redux-saga": "^1.1.3",
 81 |     "reselect": "^4.0.0",
 82 |     "resolve": "1.15.0",
 83 |     "resolve-url-loader": "3.1.1",
 84 |     "sass-loader": "8.0.2",
 85 |     "simplebar-react": "^2.3.6",
 86 |     "slick-carousel": "^1.8.1",
 87 |     "style-loader": "0.23.1",
 88 |     "styled-components": "^5.3.1",
 89 |     "terser-webpack-plugin": "2.3.8",
 90 |     "tinycolor2": "^1.4.2",
 91 |     "ts-pnp": "1.1.6",
 92 |     "typeface-inter": "^3.18.1",
 93 |     "url-loader": "2.3.0",
 94 |     "video-react": "^0.15.0",
 95 |     "webpack": "4.42.0",
 96 |     "webpack-dev-server": "3.11.0",
 97 |     "webpack-manifest-plugin": "2.2.0",
 98 |     "workbox-webpack-plugin": "4.3.1"
 99 |   },
100 |   "scripts": {
101 |     "start": "node scripts/start.js",
102 |     "build": "node scripts/build.js",
103 |     "test": "node scripts/test.js"
104 |   },
105 |   "eslintConfig": {
106 |     "extends": "react-app"
107 |   },
108 |   "browserslist": {
109 |     "production": [
110 |       ">0.2%",
111 |       "not dead",
112 |       "not op_mini all"
113 |     ],
114 |     "development": [
115 |       "last 1 chrome version",
116 |       "last 1 firefox version",
117 |       "last 1 safari version"
118 |     ]
119 |   },
120 |   "jest": {
121 |     "roots": [
122 |       "<rootDir>/src"
123 |     ],
124 |     "collectCoverageFrom": [
125 |       "src/**/*.{js,jsx,ts,tsx}",
126 |       "!src/**/*.d.ts"
127 |     ],
128 |     "setupFiles": [
129 |       "react-app-polyfill/jsdom"
130 |     ],
131 |     "setupFilesAfterEnv": [],
132 |     "testMatch": [
133 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
134 |       "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
135 |     ],
136 |     "testEnvironment": "jest-environment-jsdom-fourteen",
137 |     "transform": {
138 |       "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
139 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
140 |       "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
141 |     },
142 |     "transformIgnorePatterns": [
143 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
144 |       "^.+\\.module\\.(css|sass|scss)$"
145 |     ],
146 |     "modulePaths": [],
147 |     "moduleNameMapper": {
148 |       "^react-native$": "react-native-web",
149 |       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
150 |     },
151 |     "moduleFileExtensions": [
152 |       "web.js",
153 |       "js",
154 |       "web.ts",
155 |       "ts",
156 |       "web.tsx",
157 |       "tsx",
158 |       "json",
159 |       "web.jsx",
160 |       "jsx",
161 |       "node"
162 |     ],
163 |     "watchPlugins": [
164 |       "jest-watch-typeahead/filename",
165 |       "jest-watch-typeahead/testname"
166 |     ]
167 |   },
168 |   "babel": {
169 |     "presets": [
170 |       "react-app"
171 |     ]
172 |   },
173 |   "devDependencies": {
174 |     "resize-observer-polyfill": "^1.5.1"
175 |   }
176 | }
177 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'development';
  5 | process.env.NODE_ENV = 'development';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const fs = require('fs');
 19 | const chalk = require('react-dev-utils/chalk');
 20 | const webpack = require('webpack');
 21 | const WebpackDevServer = require('webpack-dev-server');
 22 | const clearConsole = require('react-dev-utils/clearConsole');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const {
 25 |   choosePort,
 26 |   createCompiler,
 27 |   prepareProxy,
 28 |   prepareUrls,
 29 | } = require('react-dev-utils/WebpackDevServerUtils');
 30 | const openBrowser = require('react-dev-utils/openBrowser');
 31 | const paths = require('../config/paths');
 32 | const configFactory = require('../config/webpack.config');
 33 | const createDevServerConfig = require('../config/webpackDevServer.config');
 34 | 
 35 | const useYarn = fs.existsSync(paths.yarnLockFile);
 36 | const isInteractive = process.stdout.isTTY;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // Tools like Cloud9 rely on this.
 44 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 45 | const HOST = process.env.HOST || '0.0.0.0';
 46 | 
 47 | if (process.env.HOST) {
 48 |   console.log(
 49 |     chalk.cyan(
 50 |       `Attempting to bind to HOST environment variable: ${chalk.yellow(
 51 |         chalk.bold(process.env.HOST)
 52 |       )}`
 53 |     )
 54 |   );
 55 |   console.log(
 56 |     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
 57 |   );
 58 |   console.log(
 59 |     `Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}`
 60 |   );
 61 |   console.log();
 62 | }
 63 | 
 64 | // We require that you explicitly set browsers and do not fall back to
 65 | // browserslist defaults.
 66 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 67 | checkBrowsers(paths.appPath, isInteractive)
 68 |   .then(() => {
 69 |     // We attempt to use the default port but if it is busy, we offer the user to
 70 |     // run on a different port. `choosePort()` Promise resolves to the next free port.
 71 |     return choosePort(HOST, DEFAULT_PORT);
 72 |   })
 73 |   .then(port => {
 74 |     if (port == null) {
 75 |       // We have not found a port.
 76 |       return;
 77 |     }
 78 | 
 79 |     const config = configFactory('development');
 80 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 81 |     const appName = require(paths.appPackageJson).name;
 82 |     const useTypeScript = fs.existsSync(paths.appTsConfig);
 83 |     const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
 84 |     const urls = prepareUrls(
 85 |       protocol,
 86 |       HOST,
 87 |       port,
 88 |       paths.publicUrlOrPath.slice(0, -1)
 89 |     );
 90 |     const devSocket = {
 91 |       warnings: warnings =>
 92 |         devServer.sockWrite(devServer.sockets, 'warnings', warnings),
 93 |       errors: errors =>
 94 |         devServer.sockWrite(devServer.sockets, 'errors', errors),
 95 |     };
 96 |     // Create a webpack compiler that is configured with custom messages.
 97 |     const compiler = createCompiler({
 98 |       appName,
 99 |       config,
100 |       devSocket,
101 |       urls,
102 |       useYarn,
103 |       useTypeScript,
104 |       tscCompileOnError,
105 |       webpack,
106 |     });
107 |     // Load proxy config
108 |     const proxySetting = require(paths.appPackageJson).proxy;
109 |     const proxyConfig = prepareProxy(
110 |       proxySetting,
111 |       paths.appPublic,
112 |       paths.publicUrlOrPath
113 |     );
114 |     // Serve webpack assets generated by the compiler over a web server.
115 |     const serverConfig = createDevServerConfig(
116 |       proxyConfig,
117 |       urls.lanUrlForConfig
118 |     );
119 |     const devServer = new WebpackDevServer(compiler, serverConfig);
120 |     // Launch WebpackDevServer.
121 |     devServer.listen(port, HOST, err => {
122 |       if (err) {
123 |         return console.log(err);
124 |       }
125 |       if (isInteractive) {
126 |         clearConsole();
127 |       }
128 | 
129 |       // We used to support resolving modules according to `NODE_PATH`.
130 |       // This now has been deprecated in favor of jsconfig/tsconfig.json
131 |       // This lets you use absolute paths in imports inside large monorepos:
132 |       if (process.env.NODE_PATH) {
133 |         console.log(
134 |           chalk.yellow(
135 |             'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
136 |           )
137 |         );
138 |         console.log();
139 |       }
140 | 
141 |       console.log(chalk.cyan('Starting the development server...\n'));
142 |       openBrowser(urls.localUrlForBrowser);
143 |     });
144 | 
145 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
146 |       process.on(sig, function() {
147 |         devServer.close();
148 |         process.exit();
149 |       });
150 |     });
151 | 
152 |     if (isInteractive || process.env.CI !== 'true') {
153 |       // Gracefully exit when stdin ends
154 |       process.stdin.on('end', function() {
155 |         devServer.close();
156 |         process.exit();
157 |       });
158 |       process.stdin.resume();
159 |     }
160 |   })
161 |   .catch(err => {
162 |     if (err && err.message) {
163 |       console.log(err.message);
164 |     }
165 |     process.exit(1);
166 |   });
167 | 


--------------------------------------------------------------------------------
/src/pages/ToDo/ToDo.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react'
  2 | import { useDispatch, useSelector } from 'react-redux'
  3 | import { useHistory } from 'react-router-dom'
  4 | import {
  5 |   Box,
  6 |   Card,
  7 |   CardContent,
  8 |   Typography,
  9 |   Link,
 10 |   IconButton,
 11 |   Modal,
 12 |   TextField,
 13 |   Button,
 14 |   List,
 15 |   ListItem,
 16 |   ListItemIcon
 17 | } from '@mui/material'
 18 | import { getTodoList, addTodo, deleteTodo, setErrorMessage } from 'redux/modules/todo/actions'
 19 | import { getAllTasks } from 'redux/modules/task/actions'
 20 | import { todoListSelector, errorMessageSelector } from 'redux/modules/todo/selectors'
 21 | import { allTasksSelector } from 'redux/modules/task/selectors'
 22 | import { AiOutlinePlus, AiOutlineDelete } from "react-icons/ai"
 23 | import { BsDot } from "react-icons/bs"
 24 | 
 25 | const ToDo = () => {
 26 |   const dispatch = useDispatch()
 27 |   const history = useHistory()
 28 |   const todos = useSelector(todoListSelector)
 29 |   const errorMessage = useSelector(errorMessageSelector)
 30 |   const allTasks = useSelector(allTasksSelector)
 31 |   const [open, setOpen] = useState(false)
 32 |   const [name, setName] = useState('')
 33 |   const [disabled, setDisabled] = useState(false)
 34 |   const [message, setMessage] = useState('')
 35 | 
 36 |   useEffect(() => {
 37 |     setDisabled(name === '')
 38 |   }, [name])
 39 | 
 40 |   useEffect(() => {
 41 |     setMessage(errorMessage)
 42 |   }, [errorMessage])
 43 | 
 44 |   useEffect(() => {
 45 |     dispatch(getTodoList())
 46 |     dispatch(getAllTasks())
 47 |   }, [dispatch])
 48 | 
 49 |   const handleSubmit = () => {
 50 |     dispatch(addTodo({
 51 |       body: {
 52 |         name
 53 |       },
 54 |       success: () => {
 55 |         setName('')
 56 |         setOpen(false)
 57 |       }
 58 |     }))
 59 |   }
 60 | 
 61 |   const handleDelete = (id) => () => {
 62 |     dispatch(deleteTodo({ id }))
 63 |   }
 64 | 
 65 |   return (
 66 |     <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
 67 |       <Card sx={{ width: '40%' }}>
 68 |         <CardContent>
 69 |           <Box
 70 |             sx={{
 71 |               display: 'flex',
 72 |               borderBottom: '1px solid',
 73 |               justifyContent: 'space-between',
 74 |               alignItems: 'center',
 75 |               mb: 2,
 76 |             }}
 77 |           >
 78 |             <Typography variant="h5" >Todo</Typography>
 79 | 
 80 |             <IconButton color="inherit" onClick={() => setOpen(true)}>
 81 |               <AiOutlinePlus />
 82 |             </IconButton>
 83 |           </Box>
 84 | 
 85 |           <List sx={{ width: '100%' }}>
 86 |             {todos?.length > 0 ?
 87 |               (todos.map((item) => {
 88 |                 const { id, name } = item
 89 |                 const completedCount = allTasks?.filter(item => item.todo_id === id && item.completed).length
 90 |                 const allCount = allTasks?.filter(item => item.todo_id === id).length
 91 |                 const todoCompleted = completedCount === allCount && completedCount !== 0
 92 | 
 93 |                 return (
 94 |                   <ListItem
 95 |                     key={id}
 96 |                     secondaryAction={
 97 |                       <IconButton onClick={handleDelete(id)}>
 98 |                         <AiOutlineDelete />
 99 |                       </IconButton>
100 |                     }
101 |                   >
102 |                     <ListItemIcon>
103 |                       <BsDot style={{ fontSize: 20, color: "#000" }} />
104 |                     </ListItemIcon>
105 |                     <Link
106 |                       color="inherit"
107 |                       onClick={() => !todoCompleted && history.push(`/todo/${id}`)}
108 |                       sx={{
109 |                         cursor: 'pointer',
110 |                         textDecoration: todoCompleted && 'line-through'
111 |                       }}
112 |                       underline={todoCompleted ? "none" : "hover"}
113 |                     >
114 |                       {name} ({completedCount}/{allCount})
115 |                     </Link>
116 |                   </ListItem>
117 |                 )
118 |               }))
119 |               :
120 |               <Typography variant="h6" sx={{ display: 'flex', justifyContent: 'center' }}>Add your todos</Typography>
121 |             }
122 |           </List>
123 |         </CardContent>
124 |       </Card>
125 | 
126 |       <Modal
127 |         open={open}
128 |         onClose={() => setOpen(false)}
129 |         aria-labelledby="modal-modal-title"
130 |         aria-describedby="modal-modal-description"
131 |       >
132 |         <Box
133 |           sx={{
134 |             backgroundColor: 'white',
135 |             borderRadius: '4px',
136 |             position: 'absolute',
137 |             top: '50%',
138 |             left: '50%',
139 |             transform: 'translate(-50%, -100%)',
140 |             width: '30%',
141 |             border: 'none',
142 |             p: 3
143 |           }}
144 |         >
145 |           <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
146 |             <Typography variant="h6" sx={{ minWidth: 150 }}>Name:</Typography>
147 |             <TextField
148 |               variant="outlined"
149 |               fullWidth
150 |               error={message !== ''}
151 |               helperText={message}
152 |               sx={{ ml: 2 }}
153 |               size="small"
154 |               value={name}
155 |               onChange={(e) => {
156 |                 setName(e.target.value)
157 |                 dispatch(setErrorMessage(''))
158 |               }}
159 |             />
160 |           </Box>
161 | 
162 |           <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
163 |             <Button
164 |               variant='outlined'
165 |               sx={{ mr: 2 }}
166 |               onClick={() => {
167 |                 setOpen(false)
168 |                 setName('')
169 |                 dispatch(setErrorMessage(''))
170 |               }}
171 |             >Cancel</Button>
172 |             <Button variant='contained' disabled={disabled} onClick={handleSubmit}>Submit</Button>
173 |           </Box>
174 |         </Box>
175 |       </Modal>
176 |     </Box>
177 |   )
178 | }
179 | 
180 | export default ToDo
181 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
  5 | const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
  6 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
  7 | const ignoredFiles = require('react-dev-utils/ignoredFiles');
  8 | const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
  9 | const paths = require('./paths');
 10 | const getHttpsConfig = require('./getHttpsConfig');
 11 | 
 12 | const host = process.env.HOST || '0.0.0.0';
 13 | const sockHost = process.env.WDS_SOCKET_HOST;
 14 | const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
 15 | const sockPort = process.env.WDS_SOCKET_PORT;
 16 | 
 17 | module.exports = function(proxy, allowedHost) {
 18 |   return {
 19 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
 20 |     // websites from potentially accessing local content through DNS rebinding:
 21 |     // https://github.com/webpack/webpack-dev-server/issues/887
 22 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
 23 |     // However, it made several existing use cases such as development in cloud
 24 |     // environment or subdomains in development significantly more complicated:
 25 |     // https://github.com/facebook/create-react-app/issues/2271
 26 |     // https://github.com/facebook/create-react-app/issues/2233
 27 |     // While we're investigating better solutions, for now we will take a
 28 |     // compromise. Since our WDS configuration only serves files in the `public`
 29 |     // folder we won't consider accessing them a vulnerability. However, if you
 30 |     // use the `proxy` feature, it gets more dangerous because it can expose
 31 |     // remote code execution vulnerabilities in backends like Django and Rails.
 32 |     // So we will disable the host check normally, but enable it if you have
 33 |     // specified the `proxy` setting. Finally, we let you override it if you
 34 |     // really know what you're doing with a special environment variable.
 35 |     disableHostCheck:
 36 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
 37 |     // Enable gzip compression of generated files.
 38 |     compress: true,
 39 |     // Silence WebpackDevServer's own logs since they're generally not useful.
 40 |     // It will still show compile warnings and errors with this setting.
 41 |     clientLogLevel: 'none',
 42 |     // By default WebpackDevServer serves physical files from current directory
 43 |     // in addition to all the virtual build products that it serves from memory.
 44 |     // This is confusing because those files won’t automatically be available in
 45 |     // production build folder unless we copy them. However, copying the whole
 46 |     // project directory is dangerous because we may expose sensitive files.
 47 |     // Instead, we establish a convention that only files in `public` directory
 48 |     // get served. Our build script will copy `public` into the `build` folder.
 49 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
 50 |     // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
 51 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
 52 |     // Note that we only recommend to use `public` folder as an escape hatch
 53 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
 54 |     // for some reason broken when imported through webpack. If you just want to
 55 |     // use an image, put it in `src` and `import` it from JavaScript instead.
 56 |     contentBase: paths.appPublic,
 57 |     contentBasePublicPath: paths.publicUrlOrPath,
 58 |     // By default files from `contentBase` will not trigger a page reload.
 59 |     watchContentBase: true,
 60 |     // Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
 61 |     // for the WebpackDevServer client so it can learn when the files were
 62 |     // updated. The WebpackDevServer client is included as an entry point
 63 |     // in the webpack development configuration. Note that only changes
 64 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
 65 |     hot: true,
 66 |     // Use 'ws' instead of 'sockjs-node' on server since we're using native
 67 |     // websockets in `webpackHotDevClient`.
 68 |     transportMode: 'ws',
 69 |     // Prevent a WS client from getting injected as we're already including
 70 |     // `webpackHotDevClient`.
 71 |     injectClient: false,
 72 |     // Enable custom sockjs pathname for websocket connection to hot reloading server.
 73 |     // Enable custom sockjs hostname, pathname and port for websocket connection
 74 |     // to hot reloading server.
 75 |     sockHost,
 76 |     sockPath,
 77 |     sockPort,
 78 |     // It is important to tell WebpackDevServer to use the same "publicPath" path as
 79 |     // we specified in the webpack config. When homepage is '.', default to serving
 80 |     // from the root.
 81 |     // remove last slash so user can land on `/test` instead of `/test/`
 82 |     publicPath: paths.publicUrlOrPath.slice(0, -1),
 83 |     // WebpackDevServer is noisy by default so we emit custom message instead
 84 |     // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
 85 |     quiet: true,
 86 |     // Reportedly, this avoids CPU overload on some systems.
 87 |     // https://github.com/facebook/create-react-app/issues/293
 88 |     // src/node_modules is not ignored to support absolute imports
 89 |     // https://github.com/facebook/create-react-app/issues/1065
 90 |     watchOptions: {
 91 |       ignored: ignoredFiles(paths.appSrc),
 92 |     },
 93 |     https: getHttpsConfig(),
 94 |     host,
 95 |     overlay: false,
 96 |     historyApiFallback: {
 97 |       // Paths with dots should still use the history fallback.
 98 |       // See https://github.com/facebook/create-react-app/issues/387.
 99 |       disableDotRule: true,
100 |       index: paths.publicUrlOrPath,
101 |     },
102 |     public: allowedHost,
103 |     // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
104 |     proxy,
105 |     before(app, server) {
106 |       // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
107 |       // middlewares before `redirectServedPath` otherwise will not have any effect
108 |       // This lets us fetch source contents from webpack for the error overlay
109 |       app.use(evalSourceMapMiddleware(server));
110 |       // This lets us open files from the runtime error overlay.
111 |       app.use(errorOverlayMiddleware());
112 | 
113 |       if (fs.existsSync(paths.proxySetup)) {
114 |         // This registers user provided middleware for proxy reasons
115 |         require(paths.proxySetup)(app);
116 |       }
117 |     },
118 |     after(app) {
119 |       // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
120 |       app.use(redirectServedPath(paths.publicUrlOrPath));
121 | 
122 |       // This service worker file is effectively a 'no-op' that will reset any
123 |       // previous service worker registered for the same host:port combination.
124 |       // We do this in development to avoid hitting the production cache if
125 |       // it used the same host and port.
126 |       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
127 |       app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
128 |     },
129 |   };
130 | };
131 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const path = require('path');
 19 | const chalk = require('react-dev-utils/chalk');
 20 | const fs = require('fs-extra');
 21 | const webpack = require('webpack');
 22 | const configFactory = require('../config/webpack.config');
 23 | const paths = require('../config/paths');
 24 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 25 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 26 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 27 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 28 | const printBuildError = require('react-dev-utils/printBuildError');
 29 | 
 30 | const measureFileSizesBeforeBuild =
 31 |   FileSizeReporter.measureFileSizesBeforeBuild;
 32 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 33 | const useYarn = fs.existsSync(paths.yarnLockFile);
 34 | 
 35 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 36 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 37 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 38 | 
 39 | const isInteractive = process.stdout.isTTY;
 40 | 
 41 | // Warn and crash if required files are missing
 42 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 43 |   process.exit(1);
 44 | }
 45 | 
 46 | // Generate configuration
 47 | const config = configFactory('production');
 48 | 
 49 | // We require that you explicitly set browsers and do not fall back to
 50 | // browserslist defaults.
 51 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 52 | checkBrowsers(paths.appPath, isInteractive)
 53 |   .then(() => {
 54 |     // First, read the current file sizes in build directory.
 55 |     // This lets us display how much they changed later.
 56 |     return measureFileSizesBeforeBuild(paths.appBuild);
 57 |   })
 58 |   .then(previousFileSizes => {
 59 |     // Remove all content but keep the directory so that
 60 |     // if you're in it, you don't end up in Trash
 61 |     fs.emptyDirSync(paths.appBuild);
 62 |     // Merge with the public folder
 63 |     copyPublicFolder();
 64 |     // Start the webpack build
 65 |     return build(previousFileSizes);
 66 |   })
 67 |   .then(
 68 |     ({ stats, previousFileSizes, warnings }) => {
 69 |       if (warnings.length) {
 70 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 71 |         console.log(warnings.join('\n\n'));
 72 |         console.log(
 73 |           '\nSearch for the ' +
 74 |             chalk.underline(chalk.yellow('keywords')) +
 75 |             ' to learn more about each warning.'
 76 |         );
 77 |         console.log(
 78 |           'To ignore, add ' +
 79 |             chalk.cyan('// eslint-disable-next-line') +
 80 |             ' to the line before.\n'
 81 |         );
 82 |       } else {
 83 |         console.log(chalk.green('Compiled successfully.\n'));
 84 |       }
 85 | 
 86 |       console.log('File sizes after gzip:\n');
 87 |       printFileSizesAfterBuild(
 88 |         stats,
 89 |         previousFileSizes,
 90 |         paths.appBuild,
 91 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 92 |         WARN_AFTER_CHUNK_GZIP_SIZE
 93 |       );
 94 |       console.log();
 95 | 
 96 |       const appPackage = require(paths.appPackageJson);
 97 |       const publicUrl = paths.publicUrlOrPath;
 98 |       const publicPath = config.output.publicPath;
 99 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
100 |       printHostingInstructions(
101 |         appPackage,
102 |         publicUrl,
103 |         publicPath,
104 |         buildFolder,
105 |         useYarn
106 |       );
107 |     },
108 |     err => {
109 |       const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
110 |       if (tscCompileOnError) {
111 |         console.log(
112 |           chalk.yellow(
113 |             'Compiled with the following type errors (you may want to check these before deploying your app):\n'
114 |           )
115 |         );
116 |         printBuildError(err);
117 |       } else {
118 |         console.log(chalk.red('Failed to compile.\n'));
119 |         printBuildError(err);
120 |         process.exit(1);
121 |       }
122 |     }
123 |   )
124 |   .catch(err => {
125 |     if (err && err.message) {
126 |       console.log(err.message);
127 |     }
128 |     process.exit(1);
129 |   });
130 | 
131 | // Create the production build and print the deployment instructions.
132 | function build(previousFileSizes) {
133 |   // We used to support resolving modules according to `NODE_PATH`.
134 |   // This now has been deprecated in favor of jsconfig/tsconfig.json
135 |   // This lets you use absolute paths in imports inside large monorepos:
136 |   if (process.env.NODE_PATH) {
137 |     console.log(
138 |       chalk.yellow(
139 |         'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
140 |       )
141 |     );
142 |     console.log();
143 |   }
144 | 
145 |   console.log('Creating an optimized production build...');
146 | 
147 |   const compiler = webpack(config);
148 |   return new Promise((resolve, reject) => {
149 |     compiler.run((err, stats) => {
150 |       let messages;
151 |       if (err) {
152 |         if (!err.message) {
153 |           return reject(err);
154 |         }
155 | 
156 |         let errMessage = err.message;
157 | 
158 |         // Add additional information for postcss errors
159 |         if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
160 |           errMessage +=
161 |             '\nCompileError: Begins at CSS selector ' +
162 |             err['postcssNode'].selector;
163 |         }
164 | 
165 |         messages = formatWebpackMessages({
166 |           errors: [errMessage],
167 |           warnings: [],
168 |         });
169 |       } else {
170 |         messages = formatWebpackMessages(
171 |           stats.toJson({ all: false, warnings: true, errors: true })
172 |         );
173 |       }
174 |       if (messages.errors.length) {
175 |         // Only keep the first error. Others are often indicative
176 |         // of the same problem, but confuse the reader with noise.
177 |         if (messages.errors.length > 1) {
178 |           messages.errors.length = 1;
179 |         }
180 |         return reject(new Error(messages.errors.join('\n\n')));
181 |       }
182 |       if (
183 |         process.env.CI &&
184 |         (typeof process.env.CI !== 'string' ||
185 |           process.env.CI.toLowerCase() !== 'false') &&
186 |         messages.warnings.length
187 |       ) {
188 |         console.log(
189 |           chalk.yellow(
190 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
191 |               'Most CI servers set it automatically.\n'
192 |           )
193 |         );
194 |         return reject(new Error(messages.warnings.join('\n\n')));
195 |       }
196 | 
197 |       return resolve({
198 |         stats,
199 |         previousFileSizes,
200 |         warnings: messages.warnings,
201 |       });
202 |     });
203 |   });
204 | }
205 | 
206 | function copyPublicFolder() {
207 |   fs.copySync(paths.appPublic, paths.appBuild, {
208 |     dereference: true,
209 |     filter: file => file !== paths.appHtml,
210 |   });
211 | }
212 | 


--------------------------------------------------------------------------------
/src/pages/Task/Task.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react'
  2 | import { useDispatch, useSelector } from 'react-redux'
  3 | import { useParams, useHistory } from 'react-router-dom'
  4 | import {
  5 |   Box,
  6 |   Card,
  7 |   CardContent,
  8 |   CardActions,
  9 |   Typography,
 10 |   FormControlLabel,
 11 |   Checkbox,
 12 |   IconButton,
 13 |   Modal,
 14 |   TextField,
 15 |   Button,
 16 |   Select,
 17 |   MenuItem,
 18 |   FormControl,
 19 |   Link,
 20 | } from '@mui/material'
 21 | import { FcHighPriority, FcMediumPriority, FcLowPriority } from 'react-icons/fc'
 22 | import { AiOutlinePlus, AiOutlineEdit, AiOutlineDelete } from "react-icons/ai"
 23 | import { getTasks, deleteTask, addTask, getTask, updateTask, setErrorMessage } from 'redux/modules/task/actions'
 24 | import { taskListSelector, taskSelector, errorMessageSelector } from 'redux/modules/task/selectors'
 25 | 
 26 | const Task = () => {
 27 |   const { id } = useParams()
 28 |   const dispatch = useDispatch()
 29 |   const history = useHistory()
 30 |   const tasks = useSelector(taskListSelector)
 31 |   const task = useSelector(taskSelector)
 32 |   const errorMessage = useSelector(errorMessageSelector)
 33 |   const [taskList, setTaskList] = useState([])
 34 |   const [currentTask, setCurrentTask] = useState({})
 35 |   const [open, setOpen] = useState(false)
 36 |   const [dueDate, setDueDate] = useState('')
 37 |   const [descriptionText, setDescriptionText] = useState('')
 38 |   const [priorityText, setPriorityText] = useState('')
 39 |   const [disabled, setDisabled] = useState(false)
 40 |   const [editStatus, setEditStatus] = useState(false)
 41 |   const [message, setMessage] = useState('')
 42 | 
 43 |   useEffect(() => {
 44 |     dispatch(getTasks({ id }))
 45 |   }, [dispatch, id])
 46 | 
 47 |   useEffect(() => {
 48 |     setTaskList(tasks)
 49 |   }, [tasks])
 50 | 
 51 |   useEffect(() => {
 52 |     setCurrentTask(task)
 53 |   }, [task])
 54 | 
 55 |   useEffect(() => {
 56 |     setMessage(errorMessage)
 57 |   }, [errorMessage])
 58 | 
 59 |   const renderPriority = (priority) => {
 60 |     switch (priority) {
 61 |       case 'low':
 62 |         return <FcLowPriority style={{ fontSize: 20 }} />
 63 |       case 'medium':
 64 |         return <FcMediumPriority style={{ fontSize: 20 }} />
 65 |       case 'high':
 66 |         return <FcHighPriority style={{ fontSize: 20 }} />
 67 |       default:
 68 |         return ''
 69 |     }
 70 |   }
 71 | 
 72 |   const handleAdd = () => {
 73 |     setEditStatus(false)
 74 |     setOpen(true)
 75 |   }
 76 | 
 77 |   const handleChange = (task_id, id) => () => {
 78 |     dispatch(updateTask({
 79 |       id,
 80 |       task_id,
 81 |       body: {
 82 |         completed: true,
 83 |       },
 84 |     }))
 85 |   }
 86 | 
 87 |   const handleEdit = (task_id) => () => {
 88 |     setEditStatus(true)
 89 |     dispatch(getTask({
 90 |       task_id,
 91 |       success: (res) => {
 92 |         setDescriptionText(res.data?.description)
 93 |         setDueDate(res.data?.due_date)
 94 |         setPriorityText(res.data?.priority)
 95 |         setOpen(true)
 96 |       }
 97 |     }))
 98 |   }
 99 | 
100 |   const handleDelete = (task_id) => () => {
101 |     dispatch(deleteTask({ id, task_id }))
102 |   }
103 | 
104 |   const handleSubmit = () => {
105 |     editStatus ?
106 |       dispatch(updateTask({
107 |         id,
108 |         task_id: currentTask.id,
109 |         body: {
110 |           description: descriptionText,
111 |           due_date: dueDate,
112 |           priority: priorityText,
113 |         },
114 |         success: () => {
115 |           setOpen(false)
116 |           setDescriptionText('')
117 |           setPriorityText('')
118 |           setDueDate('')
119 |         }
120 |       }))
121 |       :
122 |       dispatch(addTask({
123 |         id,
124 |         body: {
125 |           description: descriptionText,
126 |           due_date: dueDate,
127 |           priority: priorityText,
128 |         },
129 |         success: () => {
130 |           setOpen(false)
131 |           setDescriptionText('')
132 |           setPriorityText('')
133 |           setDueDate('')
134 |         }
135 |       }))
136 |   }
137 | 
138 |   useEffect(() => {
139 |     setDisabled(descriptionText === '' || dueDate === '' || priorityText === '')
140 |   }, [descriptionText, dueDate, priorityText])
141 | 
142 |   return (
143 |     <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
144 |       <Card sx={{ width: '40%' }}>
145 |         <CardContent>
146 |           <Box
147 |             sx={{
148 |               display: 'flex',
149 |               borderBottom: '1px solid',
150 |               justifyContent: 'space-between',
151 |               alignItems: 'center',
152 |               mb: 2,
153 |             }}
154 |           >
155 |             <Typography variant="h5" >Task List</Typography>
156 |             <IconButton color="inherit" onClick={handleAdd}>
157 |               <AiOutlinePlus />
158 |             </IconButton>
159 |           </Box>
160 |           {taskList?.length > 0 ?
161 |             taskList.map((item) => {
162 |               const { description, due_date, priority, completed } = item
163 | 
164 |               return (
165 |                 <Box key={item.id} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
166 |                   <Box sx={{ display: 'flex', alignItems: 'center' }}>
167 |                     <FormControlLabel
168 |                       control={
169 |                         <Checkbox checked={completed} onChange={handleChange(item.id, id)} />
170 |                       }
171 |                       label={
172 |                         <Typography sx={{ textDecoration: completed && 'line-through' }}>{description}</Typography>
173 |                       }
174 |                       sx={{ width: 250 }}
175 |                     />
176 |                     <Typography sx={{ textDecoration: completed && 'line-through', mr: 2 }}>{due_date}</Typography>
177 |                     {renderPriority(priority)}
178 |                   </Box>
179 |                   <Box>
180 |                     {!completed &&
181 |                       <IconButton onClick={handleEdit(item.id)}>
182 |                         <AiOutlineEdit />
183 |                       </IconButton>
184 |                     }
185 |                     <IconButton onClick={handleDelete(item.id)}>
186 |                       <AiOutlineDelete />
187 |                     </IconButton>
188 |                   </Box>
189 |                 </Box>
190 |               )
191 |             })
192 |             :
193 |             <Typography variant="h6" sx={{ display: 'flex', justifyContent: 'center' }}>No Tasks</Typography>
194 |           }
195 |         </CardContent>
196 |         <CardActions>
197 |           <Link
198 |             onClick={() => history.push('/')}
199 |             sx={{
200 |               display: 'flex',
201 |               justifyContent: 'center',
202 |               cursor: 'pointer',
203 |               width: '100%',
204 |             }}
205 |             underline="hover"
206 |           >
207 |             Todo List
208 |           </Link>
209 |         </CardActions>
210 |       </Card>
211 | 
212 |       <Modal
213 |         open={open}
214 |         onClose={() => setOpen(false)}
215 |         aria-labelledby="modal-modal-title"
216 |         aria-describedby="modal-modal-description"
217 |       >
218 |         <Box
219 |           sx={{
220 |             backgroundColor: 'white',
221 |             borderRadius: '4px',
222 |             position: 'absolute',
223 |             top: '50%',
224 |             left: '50%',
225 |             transform: 'translate(-50%, -100%)',
226 |             width: '30%',
227 |             border: 'none',
228 |             p: 3
229 |           }}
230 |         >
231 |           <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
232 |             <Typography variant="h6" sx={{ minWidth: 150 }}>Description:</Typography>
233 |             <TextField
234 |               variant="outlined"
235 |               fullWidth
236 |               sx={{ ml: 2 }}
237 |               size="small"
238 |               value={descriptionText}
239 |               onChange={(e) => {
240 |                 setDescriptionText(e.target.value)
241 |                 dispatch(setErrorMessage(''))
242 |               }}
243 |               error={message !== ''}
244 |               helperText={message}
245 |             />
246 |           </Box>
247 | 
248 |           <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
249 |             <Typography variant="h6" sx={{ minWidth: 150 }}>Due Date:</Typography>
250 |             <TextField
251 |               fullWidth
252 |               type="date"
253 |               defaultValue={dueDate}
254 |               size="small"
255 |               InputLabelProps={{
256 |                 shrink: true,
257 |               }}
258 |               sx={{ ml: 2 }}
259 |               onChange={(e) => setDueDate(e.target.value)}
260 |             />
261 |           </Box>
262 | 
263 |           <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
264 |             <Typography variant="h6" sx={{ minWidth: 150 }}>Priority:</Typography>
265 |             <FormControl fullWidth size="small" sx={{ ml: 2 }}>
266 |               <Select
267 |                 value={priorityText}
268 |                 onChange={(e) => setPriorityText(e.target.value)}
269 |               >
270 |                 <MenuItem value="low">Low</MenuItem>
271 |                 <MenuItem value="medium">Medium</MenuItem>
272 |                 <MenuItem value="high">High</MenuItem>
273 |               </Select>
274 |             </FormControl>
275 |           </Box>
276 | 
277 |           <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
278 |             <Button variant='outlined' sx={{ mr: 2 }} onClick={() => {
279 |               setOpen(false)
280 |               dispatch(setErrorMessage(''))
281 |               setDescriptionText('')
282 |               setDueDate('')
283 |               setPriorityText('')
284 |             }}
285 |             >
286 |               Cancel
287 |             </Button>
288 |             <Button variant='contained' disabled={disabled} onClick={handleSubmit}>Submit</Button>
289 |           </Box>
290 |         </Box>
291 |       </Modal>
292 |     </Box >
293 |   )
294 | }
295 | 
296 | export default Task
297 | 


--------------------------------------------------------------------------------
/config/webpack.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const resolve = require('resolve');
  7 | const PnpWebpackPlugin = require('pnp-webpack-plugin');
  8 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  9 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 10 | const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 11 | const TerserPlugin = require('terser-webpack-plugin');
 12 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 13 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 14 | const safePostCssParser = require('postcss-safe-parser');
 15 | const ManifestPlugin = require('webpack-manifest-plugin');
 16 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 17 | const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 18 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 19 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 20 | const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 21 | const paths = require('./paths');
 22 | const modules = require('./modules');
 23 | const getClientEnvironment = require('./env');
 24 | const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 25 | const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 26 | const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 27 | 
 28 | const postcssNormalize = require('postcss-normalize');
 29 | 
 30 | const appPackageJson = require(paths.appPackageJson);
 31 | 
 32 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 33 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 34 | // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 35 | // makes for a smoother build process.
 36 | const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 37 | 
 38 | const isExtendingEslintConfig = process.env.EXTEND_ESLINT === 'true';
 39 | 
 40 | const imageInlineSizeLimit = parseInt(
 41 |   process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
 42 | );
 43 | 
 44 | // Check if TypeScript is setup
 45 | const useTypeScript = fs.existsSync(paths.appTsConfig);
 46 | 
 47 | // style files regexes
 48 | const cssRegex = /\.css$/;
 49 | const cssModuleRegex = /\.module\.css$/;
 50 | const sassRegex = /\.(scss|sass)$/;
 51 | const sassModuleRegex = /\.module\.(scss|sass)$/;
 52 | 
 53 | // This is the production and development configuration.
 54 | // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 55 | module.exports = function(webpackEnv) {
 56 |   const isEnvDevelopment = webpackEnv === 'development';
 57 |   const isEnvProduction = webpackEnv === 'production';
 58 | 
 59 |   // Variable used for enabling profiling in Production
 60 |   // passed into alias object. Uses a flag if passed into the build command
 61 |   const isEnvProductionProfile =
 62 |     isEnvProduction && process.argv.includes('--profile');
 63 | 
 64 |   // We will provide `paths.publicUrlOrPath` to our app
 65 |   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 66 |   // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 67 |   // Get environment variables to inject into our app.
 68 |   const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
 69 | 
 70 |   // common function to get style loaders
 71 |   const getStyleLoaders = (cssOptions, preProcessor) => {
 72 |     const loaders = [
 73 |       isEnvDevelopment && require.resolve('style-loader'),
 74 |       isEnvProduction && {
 75 |         loader: MiniCssExtractPlugin.loader,
 76 |         // css is located in `static/css`, use '../../' to locate index.html folder
 77 |         // in production `paths.publicUrlOrPath` can be a relative path
 78 |         options: paths.publicUrlOrPath.startsWith('.')
 79 |           ? { publicPath: '../../' }
 80 |           : {},
 81 |       },
 82 |       {
 83 |         loader: require.resolve('css-loader'),
 84 |         options: cssOptions,
 85 |       },
 86 |       {
 87 |         // Options for PostCSS as we reference these options twice
 88 |         // Adds vendor prefixing based on your specified browser support in
 89 |         // package.json
 90 |         loader: require.resolve('postcss-loader'),
 91 |         options: {
 92 |           // Necessary for external CSS imports to work
 93 |           // https://github.com/facebook/create-react-app/issues/2677
 94 |           ident: 'postcss',
 95 |           plugins: () => [
 96 |             require('postcss-flexbugs-fixes'),
 97 |             require('postcss-preset-env')({
 98 |               autoprefixer: {
 99 |                 flexbox: 'no-2009',
100 |               },
101 |               stage: 3,
102 |             }),
103 |             // Adds PostCSS Normalize as the reset css with default options,
104 |             // so that it honors browserslist config in package.json
105 |             // which in turn let's users customize the target behavior as per their needs.
106 |             postcssNormalize(),
107 |           ],
108 |           sourceMap: isEnvProduction && shouldUseSourceMap,
109 |         },
110 |       },
111 |     ].filter(Boolean);
112 |     if (preProcessor) {
113 |       loaders.push(
114 |         {
115 |           loader: require.resolve('resolve-url-loader'),
116 |           options: {
117 |             sourceMap: isEnvProduction && shouldUseSourceMap,
118 |           },
119 |         },
120 |         {
121 |           loader: require.resolve(preProcessor),
122 |           options: {
123 |             sourceMap: true,
124 |           },
125 |         }
126 |       );
127 |     }
128 |     return loaders;
129 |   };
130 | 
131 |   return {
132 |     mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
133 |     // Stop compilation early in production
134 |     bail: isEnvProduction,
135 |     devtool: isEnvProduction
136 |       ? shouldUseSourceMap
137 |         ? 'source-map'
138 |         : false
139 |       : isEnvDevelopment && 'cheap-module-source-map',
140 |     // These are the "entry points" to our application.
141 |     // This means they will be the "root" imports that are included in JS bundle.
142 |     entry: [
143 |       // Include an alternative client for WebpackDevServer. A client's job is to
144 |       // connect to WebpackDevServer by a socket and get notified about changes.
145 |       // When you save a file, the client will either apply hot updates (in case
146 |       // of CSS changes), or refresh the page (in case of JS changes). When you
147 |       // make a syntax error, this client will display a syntax error overlay.
148 |       // Note: instead of the default WebpackDevServer client, we use a custom one
149 |       // to bring better experience for Create React App users. You can replace
150 |       // the line below with these two lines if you prefer the stock client:
151 |       // require.resolve('webpack-dev-server/client') + '?/',
152 |       // require.resolve('webpack/hot/dev-server'),
153 |       isEnvDevelopment &&
154 |         require.resolve('react-dev-utils/webpackHotDevClient'),
155 |       // Finally, this is your app's code:
156 |       paths.appIndexJs,
157 |       // We include the app code last so that if there is a runtime error during
158 |       // initialization, it doesn't blow up the WebpackDevServer client, and
159 |       // changing JS code would still trigger a refresh.
160 |     ].filter(Boolean),
161 |     output: {
162 |       // The build folder.
163 |       path: isEnvProduction ? paths.appBuild : undefined,
164 |       // Add /* filename */ comments to generated require()s in the output.
165 |       pathinfo: isEnvDevelopment,
166 |       // There will be one main bundle, and one file per asynchronous chunk.
167 |       // In development, it does not produce real files.
168 |       filename: isEnvProduction
169 |         ? 'static/js/[name].[contenthash:8].js'
170 |         : isEnvDevelopment && 'static/js/bundle.js',
171 |       // TODO: remove this when upgrading to webpack 5
172 |       futureEmitAssets: true,
173 |       // There are also additional JS chunk files if you use code splitting.
174 |       chunkFilename: isEnvProduction
175 |         ? 'static/js/[name].[contenthash:8].chunk.js'
176 |         : isEnvDevelopment && 'static/js/[name].chunk.js',
177 |       // webpack uses `publicPath` to determine where the app is being served from.
178 |       // It requires a trailing slash, or the file assets will get an incorrect path.
179 |       // We inferred the "public path" (such as / or /my-project) from homepage.
180 |       publicPath: paths.publicUrlOrPath,
181 |       // Point sourcemap entries to original disk location (format as URL on Windows)
182 |       devtoolModuleFilenameTemplate: isEnvProduction
183 |         ? info =>
184 |             path
185 |               .relative(paths.appSrc, info.absoluteResourcePath)
186 |               .replace(/\\/g, '/')
187 |         : isEnvDevelopment &&
188 |           (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
189 |       // Prevents conflicts when multiple webpack runtimes (from different apps)
190 |       // are used on the same page.
191 |       jsonpFunction: `webpackJsonp${appPackageJson.name}`,
192 |       // this defaults to 'window', but by setting it to 'this' then
193 |       // module chunks which are built will work in web workers as well.
194 |       globalObject: 'this',
195 |     },
196 |     optimization: {
197 |       minimize: isEnvProduction,
198 |       minimizer: [
199 |         // This is only used in production mode
200 |         new TerserPlugin({
201 |           terserOptions: {
202 |             parse: {
203 |               // We want terser to parse ecma 8 code. However, we don't want it
204 |               // to apply any minification steps that turns valid ecma 5 code
205 |               // into invalid ecma 5 code. This is why the 'compress' and 'output'
206 |               // sections only apply transformations that are ecma 5 safe
207 |               // https://github.com/facebook/create-react-app/pull/4234
208 |               ecma: 8,
209 |             },
210 |             compress: {
211 |               ecma: 5,
212 |               warnings: false,
213 |               // Disabled because of an issue with Uglify breaking seemingly valid code:
214 |               // https://github.com/facebook/create-react-app/issues/2376
215 |               // Pending further investigation:
216 |               // https://github.com/mishoo/UglifyJS2/issues/2011
217 |               comparisons: false,
218 |               // Disabled because of an issue with Terser breaking valid code:
219 |               // https://github.com/facebook/create-react-app/issues/5250
220 |               // Pending further investigation:
221 |               // https://github.com/terser-js/terser/issues/120
222 |               inline: 2,
223 |             },
224 |             mangle: {
225 |               safari10: true,
226 |             },
227 |             // Added for profiling in devtools
228 |             keep_classnames: isEnvProductionProfile,
229 |             keep_fnames: isEnvProductionProfile,
230 |             output: {
231 |               ecma: 5,
232 |               comments: false,
233 |               // Turned on because emoji and regex is not minified properly using default
234 |               // https://github.com/facebook/create-react-app/issues/2488
235 |               ascii_only: true,
236 |             },
237 |           },
238 |           sourceMap: shouldUseSourceMap,
239 |         }),
240 |         // This is only used in production mode
241 |         new OptimizeCSSAssetsPlugin({
242 |           cssProcessorOptions: {
243 |             parser: safePostCssParser,
244 |             map: shouldUseSourceMap
245 |               ? {
246 |                   // `inline: false` forces the sourcemap to be output into a
247 |                   // separate file
248 |                   inline: false,
249 |                   // `annotation: true` appends the sourceMappingURL to the end of
250 |                   // the css file, helping the browser find the sourcemap
251 |                   annotation: true,
252 |                 }
253 |               : false,
254 |           },
255 |           cssProcessorPluginOptions: {
256 |             preset: ['default', { minifyFontValues: { removeQuotes: false } }],
257 |           },
258 |         }),
259 |       ],
260 |       // Automatically split vendor and commons
261 |       // https://twitter.com/wSokra/status/969633336732905474
262 |       // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
263 |       splitChunks: {
264 |         chunks: 'all',
265 |         name: false,
266 |       },
267 |       // Keep the runtime chunk separated to enable long term caching
268 |       // https://twitter.com/wSokra/status/969679223278505985
269 |       // https://github.com/facebook/create-react-app/issues/5358
270 |       runtimeChunk: {
271 |         name: entrypoint => `runtime-${entrypoint.name}`,
272 |       },
273 |     },
274 |     resolve: {
275 |       // This allows you to set a fallback for where webpack should look for modules.
276 |       // We placed these paths second because we want `node_modules` to "win"
277 |       // if there are any conflicts. This matches Node resolution mechanism.
278 |       // https://github.com/facebook/create-react-app/issues/253
279 |       modules: ['node_modules', paths.appNodeModules].concat(
280 |         modules.additionalModulePaths || []
281 |       ),
282 |       // These are the reasonable defaults supported by the Node ecosystem.
283 |       // We also include JSX as a common component filename extension to support
284 |       // some tools, although we do not recommend using it, see:
285 |       // https://github.com/facebook/create-react-app/issues/290
286 |       // `web` extension prefixes have been added for better support
287 |       // for React Native Web.
288 |       extensions: paths.moduleFileExtensions
289 |         .map(ext => `.${ext}`)
290 |         .filter(ext => useTypeScript || !ext.includes('ts')),
291 |       alias: {
292 |         // Support React Native Web
293 |         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
294 |         'react-native': 'react-native-web',
295 |         // Allows for better profiling with ReactDevTools
296 |         ...(isEnvProductionProfile && {
297 |           'react-dom$': 'react-dom/profiling',
298 |           'scheduler/tracing': 'scheduler/tracing-profiling',
299 |         }),
300 |         ...(modules.webpackAliases || {}),
301 |       },
302 |       plugins: [
303 |         // Adds support for installing with Plug'n'Play, leading to faster installs and adding
304 |         // guards against forgotten dependencies and such.
305 |         PnpWebpackPlugin,
306 |         // Prevents users from importing files from outside of src/ (or node_modules/).
307 |         // This often causes confusion because we only process files within src/ with babel.
308 |         // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
309 |         // please link the files into your node_modules/ and let module-resolution kick in.
310 |         // Make sure your source files are compiled, as they will not be processed in any way.
311 |         new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
312 |       ],
313 |     },
314 |     resolveLoader: {
315 |       plugins: [
316 |         // Also related to Plug'n'Play, but this time it tells webpack to load its loaders
317 |         // from the current package.
318 |         PnpWebpackPlugin.moduleLoader(module),
319 |       ],
320 |     },
321 |     module: {
322 |       strictExportPresence: true,
323 |       rules: [
324 |         // Disable require.ensure as it's not a standard language feature.
325 |         { parser: { requireEnsure: false } },
326 | 
327 |         // First, run the linter.
328 |         // It's important to do this before Babel processes the JS.
329 |         {
330 |           test: /\.(js|mjs|jsx|ts|tsx)$/,
331 |           enforce: 'pre',
332 |           use: [
333 |             {
334 |               options: {
335 |                 cache: true,
336 |                 formatter: require.resolve('react-dev-utils/eslintFormatter'),
337 |                 eslintPath: require.resolve('eslint'),
338 |                 resolvePluginsRelativeTo: __dirname,
339 |                 
340 |               },
341 |               loader: require.resolve('eslint-loader'),
342 |             },
343 |           ],
344 |           include: paths.appSrc,
345 |         },
346 |         {
347 |           // "oneOf" will traverse all following loaders until one will
348 |           // match the requirements. When no loader matches it will fall
349 |           // back to the "file" loader at the end of the loader list.
350 |           oneOf: [
351 |             // "url" loader works like "file" loader except that it embeds assets
352 |             // smaller than specified limit in bytes as data URLs to avoid requests.
353 |             // A missing `test` is equivalent to a match.
354 |             {
355 |               test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
356 |               loader: require.resolve('url-loader'),
357 |               options: {
358 |                 limit: imageInlineSizeLimit,
359 |                 name: 'static/media/[name].[hash:8].[ext]',
360 |               },
361 |             },
362 |             // Process application JS with Babel.
363 |             // The preset includes JSX, Flow, TypeScript, and some ESnext features.
364 |             {
365 |               test: /\.(js|mjs|jsx|ts|tsx)$/,
366 |               include: paths.appSrc,
367 |               loader: require.resolve('babel-loader'),
368 |               options: {
369 |                 customize: require.resolve(
370 |                   'babel-preset-react-app/webpack-overrides'
371 |                 ),
372 |                 
373 |                 plugins: [
374 |                   [
375 |                     require.resolve('babel-plugin-named-asset-import'),
376 |                     {
377 |                       loaderMap: {
378 |                         svg: {
379 |                           ReactComponent:
380 |                             '@svgr/webpack?-svgo,+titleProp,+ref![path]',
381 |                         },
382 |                       },
383 |                     },
384 |                   ],
385 |                 ],
386 |                 // This is a feature of `babel-loader` for webpack (not Babel itself).
387 |                 // It enables caching results in ./node_modules/.cache/babel-loader/
388 |                 // directory for faster rebuilds.
389 |                 cacheDirectory: true,
390 |                 // See #6846 for context on why cacheCompression is disabled
391 |                 cacheCompression: false,
392 |                 compact: isEnvProduction,
393 |               },
394 |             },
395 |             // Process any JS outside of the app with Babel.
396 |             // Unlike the application JS, we only compile the standard ES features.
397 |             {
398 |               test: /\.(js|mjs)$/,
399 |               exclude: /@babel(?:\/|\\{1,2})runtime/,
400 |               loader: require.resolve('babel-loader'),
401 |               options: {
402 |                 babelrc: false,
403 |                 configFile: false,
404 |                 compact: false,
405 |                 presets: [
406 |                   [
407 |                     require.resolve('babel-preset-react-app/dependencies'),
408 |                     { helpers: true },
409 |                   ],
410 |                 ],
411 |                 cacheDirectory: true,
412 |                 // See #6846 for context on why cacheCompression is disabled
413 |                 cacheCompression: false,
414 |                 
415 |                 // Babel sourcemaps are needed for debugging into node_modules
416 |                 // code.  Without the options below, debuggers like VSCode
417 |                 // show incorrect code and set breakpoints on the wrong lines.
418 |                 sourceMaps: shouldUseSourceMap,
419 |                 inputSourceMap: shouldUseSourceMap,
420 |               },
421 |             },
422 |             // "postcss" loader applies autoprefixer to our CSS.
423 |             // "css" loader resolves paths in CSS and adds assets as dependencies.
424 |             // "style" loader turns CSS into JS modules that inject <style> tags.
425 |             // In production, we use MiniCSSExtractPlugin to extract that CSS
426 |             // to a file, but in development "style" loader enables hot editing
427 |             // of CSS.
428 |             // By default we support CSS Modules with the extension .module.css
429 |             {
430 |               test: cssRegex,
431 |               exclude: cssModuleRegex,
432 |               use: getStyleLoaders({
433 |                 importLoaders: 1,
434 |                 sourceMap: isEnvProduction && shouldUseSourceMap,
435 |               }),
436 |               // Don't consider CSS imports dead code even if the
437 |               // containing package claims to have no side effects.
438 |               // Remove this when webpack adds a warning or an error for this.
439 |               // See https://github.com/webpack/webpack/issues/6571
440 |               sideEffects: true,
441 |             },
442 |             // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
443 |             // using the extension .module.css
444 |             {
445 |               test: cssModuleRegex,
446 |               use: getStyleLoaders({
447 |                 importLoaders: 1,
448 |                 sourceMap: isEnvProduction && shouldUseSourceMap,
449 |                 modules: {
450 |                   getLocalIdent: getCSSModuleLocalIdent,
451 |                 },
452 |               }),
453 |             },
454 |             // Opt-in support for SASS (using .scss or .sass extensions).
455 |             // By default we support SASS Modules with the
456 |             // extensions .module.scss or .module.sass
457 |             {
458 |               test: sassRegex,
459 |               exclude: sassModuleRegex,
460 |               use: getStyleLoaders(
461 |                 {
462 |                   importLoaders: 3,
463 |                   sourceMap: isEnvProduction && shouldUseSourceMap,
464 |                 },
465 |                 'sass-loader'
466 |               ),
467 |               // Don't consider CSS imports dead code even if the
468 |               // containing package claims to have no side effects.
469 |               // Remove this when webpack adds a warning or an error for this.
470 |               // See https://github.com/webpack/webpack/issues/6571
471 |               sideEffects: true,
472 |             },
473 |             // Adds support for CSS Modules, but using SASS
474 |             // using the extension .module.scss or .module.sass
475 |             {
476 |               test: sassModuleRegex,
477 |               use: getStyleLoaders(
478 |                 {
479 |                   importLoaders: 3,
480 |                   sourceMap: isEnvProduction && shouldUseSourceMap,
481 |                   modules: {
482 |                     getLocalIdent: getCSSModuleLocalIdent,
483 |                   },
484 |                 },
485 |                 'sass-loader'
486 |               ),
487 |             },
488 |             // "file" loader makes sure those assets get served by WebpackDevServer.
489 |             // When you `import` an asset, you get its (virtual) filename.
490 |             // In production, they would get copied to the `build` folder.
491 |             // This loader doesn't use a "test" so it will catch all modules
492 |             // that fall through the other loaders.
493 |             {
494 |               loader: require.resolve('file-loader'),
495 |               // Exclude `js` files to keep "css" loader working as it injects
496 |               // its runtime that would otherwise be processed through "file" loader.
497 |               // Also exclude `html` and `json` extensions so they get processed
498 |               // by webpacks internal loaders.
499 |               exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
500 |               options: {
501 |                 name: 'static/media/[name].[hash:8].[ext]',
502 |               },
503 |             },
504 |             // ** STOP ** Are you adding a new loader?
505 |             // Make sure to add the new loader(s) before the "file" loader.
506 |           ],
507 |         },
508 |       ],
509 |     },
510 |     plugins: [
511 |       // Generates an `index.html` file with the <script> injected.
512 |       new HtmlWebpackPlugin(
513 |         Object.assign(
514 |           {},
515 |           {
516 |             inject: true,
517 |             template: paths.appHtml,
518 |           },
519 |           isEnvProduction
520 |             ? {
521 |                 minify: {
522 |                   removeComments: true,
523 |                   collapseWhitespace: true,
524 |                   removeRedundantAttributes: true,
525 |                   useShortDoctype: true,
526 |                   removeEmptyAttributes: true,
527 |                   removeStyleLinkTypeAttributes: true,
528 |                   keepClosingSlash: true,
529 |                   minifyJS: true,
530 |                   minifyCSS: true,
531 |                   minifyURLs: true,
532 |                 },
533 |               }
534 |             : undefined
535 |         )
536 |       ),
537 |       // Inlines the webpack runtime script. This script is too small to warrant
538 |       // a network request.
539 |       // https://github.com/facebook/create-react-app/issues/5358
540 |       isEnvProduction &&
541 |         shouldInlineRuntimeChunk &&
542 |         new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
543 |       // Makes some environment variables available in index.html.
544 |       // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
545 |       // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
546 |       // It will be an empty string unless you specify "homepage"
547 |       // in `package.json`, in which case it will be the pathname of that URL.
548 |       new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
549 |       // This gives some necessary context to module not found errors, such as
550 |       // the requesting resource.
551 |       new ModuleNotFoundPlugin(paths.appPath),
552 |       // Makes some environment variables available to the JS code, for example:
553 |       // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
554 |       // It is absolutely essential that NODE_ENV is set to production
555 |       // during a production build.
556 |       // Otherwise React will be compiled in the very slow development mode.
557 |       new webpack.DefinePlugin(env.stringified),
558 |       // This is necessary to emit hot updates (currently CSS only):
559 |       isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
560 |       // Watcher doesn't work well if you mistype casing in a path so we use
561 |       // a plugin that prints an error when you attempt to do this.
562 |       // See https://github.com/facebook/create-react-app/issues/240
563 |       isEnvDevelopment && new CaseSensitivePathsPlugin(),
564 |       // If you require a missing module and then `npm install` it, you still have
565 |       // to restart the development server for webpack to discover it. This plugin
566 |       // makes the discovery automatic so you don't have to restart.
567 |       // See https://github.com/facebook/create-react-app/issues/186
568 |       isEnvDevelopment &&
569 |         new WatchMissingNodeModulesPlugin(paths.appNodeModules),
570 |       isEnvProduction &&
571 |         new MiniCssExtractPlugin({
572 |           // Options similar to the same options in webpackOptions.output
573 |           // both options are optional
574 |           filename: 'static/css/[name].[contenthash:8].css',
575 |           chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
576 |         }),
577 |       // Generate an asset manifest file with the following content:
578 |       // - "files" key: Mapping of all asset filenames to their corresponding
579 |       //   output file so that tools can pick it up without having to parse
580 |       //   `index.html`
581 |       // - "entrypoints" key: Array of files which are included in `index.html`,
582 |       //   can be used to reconstruct the HTML if necessary
583 |       new ManifestPlugin({
584 |         fileName: 'asset-manifest.json',
585 |         publicPath: paths.publicUrlOrPath,
586 |         generate: (seed, files, entrypoints) => {
587 |           const manifestFiles = files.reduce((manifest, file) => {
588 |             manifest[file.name] = file.path;
589 |             return manifest;
590 |           }, seed);
591 |           const entrypointFiles = entrypoints.main.filter(
592 |             fileName => !fileName.endsWith('.map')
593 |           );
594 | 
595 |           return {
596 |             files: manifestFiles,
597 |             entrypoints: entrypointFiles,
598 |           };
599 |         },
600 |       }),
601 |       // Moment.js is an extremely popular library that bundles large locale files
602 |       // by default due to how webpack interprets its code. This is a practical
603 |       // solution that requires the user to opt into importing specific locales.
604 |       // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
605 |       // You can remove this if you don't use Moment.js:
606 |       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
607 |       // Generate a service worker script that will precache, and keep up to date,
608 |       // the HTML & assets that are part of the webpack build.
609 |       isEnvProduction &&
610 |         new WorkboxWebpackPlugin.GenerateSW({
611 |           clientsClaim: true,
612 |           exclude: [/\.map$/, /asset-manifest\.json$/],
613 |           importWorkboxFrom: 'cdn',
614 |           navigateFallback: paths.publicUrlOrPath + 'index.html',
615 |           navigateFallbackBlacklist: [
616 |             // Exclude URLs starting with /_, as they're likely an API call
617 |             new RegExp('^/_'),
618 |             // Exclude any URLs whose last part seems to be a file extension
619 |             // as they're likely a resource and not a SPA route.
620 |             // URLs containing a "?" character won't be blacklisted as they're likely
621 |             // a route with query params (e.g. auth callbacks).
622 |             new RegExp('/[^/?]+\\.[^/]+$'),
623 |           ],
624 |         }),
625 |       // TypeScript type checking
626 |       useTypeScript &&
627 |         new ForkTsCheckerWebpackPlugin({
628 |           typescript: resolve.sync('typescript', {
629 |             basedir: paths.appNodeModules,
630 |           }),
631 |           async: isEnvDevelopment,
632 |           useTypescriptIncrementalApi: true,
633 |           checkSyntacticErrors: true,
634 |           resolveModuleNameModule: process.versions.pnp
635 |             ? `${__dirname}/pnpTs.js`
636 |             : undefined,
637 |           resolveTypeReferenceDirectiveModule: process.versions.pnp
638 |             ? `${__dirname}/pnpTs.js`
639 |             : undefined,
640 |           tsconfig: paths.appTsConfig,
641 |           reportFiles: [
642 |             '**',
643 |             '!**/__tests__/**',
644 |             '!**/?(*.)(spec|test).*',
645 |             '!**/src/setupProxy.*',
646 |             '!**/src/setupTests.*',
647 |           ],
648 |           silent: true,
649 |           // The formatter is invoked directly in WebpackDevServerUtils during development
650 |           formatter: isEnvProduction ? typescriptFormatter : undefined,
651 |         }),
652 |     ].filter(Boolean),
653 |     // Some libraries import Node modules but don't use them in the browser.
654 |     // Tell webpack to provide empty mocks for them so importing them works.
655 |     node: {
656 |       module: 'empty',
657 |       dgram: 'empty',
658 |       dns: 'mock',
659 |       fs: 'empty',
660 |       http2: 'empty',
661 |       net: 'empty',
662 |       tls: 'empty',
663 |       child_process: 'empty',
664 |     },
665 |     // Turn off performance processing because we utilize
666 |     // our own hints via the FileSizeReporter
667 |     performance: false,
668 |   };
669 | };
670 | 


--------------------------------------------------------------------------------