Feature/reinaldo aguilar finaldo poject

package.json

@@ -5,17 +5,25 @@
   "main": "index.js",
   "scripts": {
     "serve": "webpack serve --mode development",
-    "build": "webpack --mode production"
+    "build": "webpack --mode production",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@devexpress/dx-react-chart": "^2.7.6",
+    "@devexpress/dx-react-chart-material-ui": "^2.7.6",
+    "@devexpress/dx-react-core": "^2.7.6",
     "@emotion/react": "^11.6.0",
     "@emotion/styled": "^11.6.0",
+    "@material-ui/core": "^4.12.3",
     "@mui/icons-material": "^5.1.1",
     "@mui/material": "^5.1.1",
     "@mui/styles": "^5.2.0",
+    "date-fns": "^2.27.0",
+    "material-ui-chip-input": "^2.0.0-beta.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
@@ -27,10 +35,16 @@
     "@babel/core": "^7.16.0",
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
+    "@testing-library/react": "^12.1.2",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
+    "babel-jest": "^27.4.2",
     "babel-loader": "^8.2.3",
     "css-loader": "^6.5.1",
+    "enzyme": "^3.11.0",
+    "enzyme-to-json": "^3.6.2",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
+    "jest": "^27.4.3",
     "style-loader": "^3.3.1",
     "webpack": "^5.64.0",
     "webpack-cli": "^4.9.1",

src/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

src/App.jsx

@@ -3,6 +3,8 @@ import { Route, Routes, Outlet } from 'react-router';
 import { BrowserRouter, Link } from "react-router-dom";
 import NavigationBar from "Components/NavigationBar";
 import TasksListPage from "./pages/TaskListPage";
+import MyTasksListPage from "./pages/MyTasksListPage";
+import  DashboardPage  from "./pages/DashboardPage";
 import './styles.css';
 import { Provider } from "react-redux";
 
@@ -20,9 +22,9 @@ function App () {
               {/* /tasks */}
               <Route path="tasks" element={<TasksListPage />} />
               {/* /tasks/self */}
-              <Route path="tasks/self" element={<div>My Tasks</div>} />
+              <Route path="tasks/self" element={<MyTasksListPage />} />
               {/* /dashboard */}
-              <Route path="dashboard" element={<div>Dashboard in construction</div>} />
+              <Route path="dashboard" element={<DashboardPage />} />
             </Route>
           </Routes>
         </BrowserRouter>

src/actions/api.js

@@ -0,0 +1,63 @@
+// action types
+// event actions
+export const API_START = 'API_START';
+export const API_POST = 'API_POST';
+export const API_PUT = 'API_PUT';
+export const API_DASHBOARD = 'API_DASHBOARD';
+export const API_SUCCESS = 'API_SUCCESS';
+export const POST_SUCCESS = 'POST_SUCCESS';
+export const DASHBOARD_SUCCESS = 'DASHBOARD_SUCCESS';
+export const API_FAILURE = 'API_FAILURE';
+export const API_SELF_START = 'API_SELF_START';
+
+
+export const apiStart = ({body, method, url}) =>  ({
+  type: API_START,
+  payload: body,
+  meta: {method, url, body}
+});
+
+export const apiSelfStart = ({body, method, url}) => ({
+
+    type: API_SELF_START,
+    payload: body,
+    meta: {body, method, url}
+  });
+
+export const apiPost = ({body, method='POST', url}) => ({
+
+    type: API_POST,
+    payload: body,
+    meta: {body, method, url}
+  });
+
+export const apiPut = ({body, method='POST', url}) => ({  
+    type: API_PUT,
+    payload: body,
+    meta: {body, method, url}
+  });
+
+export const dashboardStart = ({body, method, url}) => ({  
+    type: API_DASHBOARD,
+    payload: body,
+    meta: {body, method, url}
+  });
+export const apiSuccess = ({response}) =>  ({
+  type: API_SUCCESS,
+  payload: response
+});
+
+export const postSuccess = ({response}) =>  ({
+  type: POST_SUCCESS,
+  payload: response
+});
+
+export const dashboardSuccess = ({response}) => ({
+  type: DASHBOARD_SUCCESS,
+  payload: response
+});
+
+export const apiFailure = ({error}) =>  ({
+  type: API_FAILURE,
+  payload: error
+});

src/actions/tasks.js

@@ -0,0 +1,53 @@
+import { SET_LOADER } from "./ui";
+
+// feature name
+export const TASKS = '[TASKS]';
+
+export const USER_TASKS = `[USER_TASKS]`;
+
+// action types
+// command actions
+export const FETCH_TASKS = `${TASKS} FETCH`;
+
+export const FETCH_USER_TASKS = `${USER_TASKS} FETCH`;
+
+export const PUT_TASK = `${TASKS} PUT`;
+
+// document actions
+export const SET_TASKS = `${TASKS} SET`;
+
+export const ADD_TASKS = `${TASKS} ADD`;
+
+export const DASHBOARD_TASKS = `${TASKS} DASHBOARD`;
+
+export const fetchTasks = ({query}) => ({
+  type: FETCH_TASKS,
+  payload: query
+});
+
+export const setTasks = ({list}) => ({
+  type: SET_TASKS,
+  payload: list
+});
+
+export const addTasks = ({task}) => ({
+  type: ADD_TASKS,
+  payload: task
+});
+
+export const fetchUserTasks = (query) => {
+  return {
+    type: FETCH_USER_TASKS,
+    payload: query
+  };
+};
+
+export const updateTask = ({task}) => ({
+  type: PUT_TASK,
+  payload: task
+});
+
+export const countTasks = ({list}) => ({
+  type: DASHBOARD_TASKS,
+  payload: list
+});

src/actions/ui.js

@@ -1,7 +1,13 @@
 // action types
 export const SET_LOADER = 'SET_LOADER';
+export const SET_NOTIFICATION = 'SET_NOTIFICATION';
 
 export const setLoader = (showLoader) => ({
   type: SET_LOADER,
   payload: showLoader
 });
+
+export const setNotification = ({error}) => ({
+  type: SET_NOTIFICATION,
+  payload: error
+});

src/components/NavigationBar/NavigationBar.test.js

@@ -0,0 +1,31 @@
+import React from "react";
+import NavigationBar from ".";
+import { shallow } from 'enzyme';
+
+// Enzyme adapter configuration
+import Enzyme from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { act } from "react-dom/test-utils";
+
+Enzyme.configure({ adapter: new Adapter() });
+
+let wrapper = null;
+
+beforeEach(() => {
+  // Variable setting
+});
+
+afterEach(() => {
+  // destroy some resources
+  // wrapper.unmount();
+});
+
+describe('', () => {
+  it('Render 8 <ListItemLink /> components for two drawers', () => {
+    act(() => {
+      wrapper = shallow(<NavigationBar />);
+    });
+    console.log(wrapper.debug());
+    expect(wrapper.find('ListItemLink')).toHaveLength(8);
+  });
+});

src/components/Toggle/Toggle.test.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import Toggle from '.';
+import { act } from "react-dom/test-utils";
+import { render } from 'react-dom';
+import { fireEvent, screen } from '@testing-library/react';
+
+import Enzyme from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+let container = null;
+let toggleCallback = () => jest.fn();
+
+beforeEach(() => {
+  // Variable setting
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  // destroy some resources
+  container.remove();
+  container = null;
+});
+
+describe('Render <Toggle /> component', () => {
+  it('Renders <Toggle /> with label "My Label"', () => {
+    act(() => {
+      render(<Toggle label="My Label" />, container);
+    });
+    expect(container.textContent).toContain('My Label');
+  });
+
+  it('Renders <Toggle /> deactive by default', () => {
+    act(() => {
+      render(<Toggle label="My Label" />, container);
+    });
+    expect(container.querySelector('input[type="checkbox"]').checked).toEqual(false);
+  });
+
+  it('Should change to active the <Toggle /> after dispatch click', () => {
+    act(() => {
+      render(<Toggle label="My Label" onToggle={toggleCallback} />, container);
+      fireEvent.click(screen.getByTestId('toggle'));
+    });
+    expect(container.querySelector('input[type="checkbox"]').checked).toEqual(true);
+  });
+
+  it('Should change to inactive the <Toggle active={true} /> after dispatch click', () => {
+    act(() => {
+      render(<Toggle label="My Label" onToggle={toggleCallback} active={true} />, container);
+    });
+    act(() => {
+      fireEvent.click(screen.getByTestId('toggle'));
+    });
+    expect(container.querySelector('input[type="checkbox"]').checked).toEqual(false);
+  });
+});

src/components/Toggle/index.js

@@ -6,6 +6,7 @@ const Toggle = ({ label, onToggle, active }) => {
   return (
     <FormControlLabel control={
       <Switch
+        data-testid="toggle"
         onChange={onToggle}
         defaultChecked={active}
       />

src/middlewares/api.js

@@ -0,0 +1,79 @@
+import { apiFailure, apiSuccess, dashboardSuccess , postSuccess, API_START, API_POST, API_SELF_START, API_PUT, API_DASHBOARD} from "../actions/api";
+
+export const apiMiddleware = ({dispatch}) => (next) => (action) => {
+  next(action);
+  switch(action.type) {
+    case API_START: {
+      const { method, body, url } = action.meta;
+      fetch(url, { method: method, body: body })
+      .then(response => response.json())
+      .then(data => {
+        dispatch(apiSuccess({response: data}));
+      })
+      .catch(function(error) {
+        dispatch(apiFailure({error: error}));
+      });
+      break;
+    }
+    case API_SELF_START: {
+      const { method, body, url } = action.meta;
+      fetch(url, { method: method })
+      .then(response => response.json())
+      .then(data => {
+        dispatch(apiSuccess({response: data.filter(item => item.user === body.user)}));
+      })
+      .catch(function(error) {
+        dispatch(apiFailure({error: error}));
+      });
+      break;
+    }
+    case API_POST: {
+      fetch(action.meta.url, {
+        method: action.meta.method,
+        body: JSON.stringify(action.payload),
+        headers: { 'Content-Type': 'application/json' }
+      })
+      .then(data => {
+        dispatch(postSuccess({response: data}));
+      })
+      .catch(function(error) {
+        dispatch(apiFailure({error: error}));
+      });
+      break;
+    }
+    case API_PUT: {
+      fetch(action.meta.url, {
+        method: action.meta.method,
+        body: JSON.stringify(action.payload),
+        headers: { 'Content-Type': 'application/json' }
+      })
+      .then(data => {
+        dispatch(postSuccess({response: data}));
+      })
+      .catch(function(error) {
+        dispatch(apiFailure({error: error}));
+      });
+      break;
+    }
+    case API_DASHBOARD: {
+      fetch(action.meta.url, { method: action.meta.method, body: action.meta.body })
+      .then(response => response.json())
+      .then(data => {
+        const completedTasks = data.filter(item => item.completed === true);
+        const uncompletedTasks = data.filter(item => item.completed === false);
+        dispatch(dashboardSuccess(
+          {response:  [
+            { argument: 'Completed', value: completedTasks.length},
+            { argument: 'Uncompleted', value: uncompletedTasks.length}
+          ]}
+        ));
+      })
+      .catch(function(error) {
+        dispatch(apiFailure({error: error}));
+      });
+      break;
+    }
+    default:
+      break;
+  }
+}