final project demo

package.json

@@ -11,6 +11,10 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@devexpress/dx-react-chart": "^2.7.6",
+    "@devexpress/dx-react-chart-bootstrap4": "^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",
     "@mui/icons-material": "^5.1.1",

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 Tasks from "./pages/TaskListPage/Tasks"
+
 import './styles.css';
 import { Provider } from "react-redux";
 
@@ -20,7 +22,8 @@ function App () {
               {/* /tasks */}
               <Route path="tasks" element={<TasksListPage />} />
               {/* /tasks/self */}
-              <Route path="tasks/self" element={<div>My Tasks</div>} />
+              {/* <Route path="tasks/self" element={<div>My Tasks</div>} /> */}
+              <Route path="tasks/self" element={< Tasks />} />
               {/* /dashboard */}
               <Route path="dashboard" element={<div>Dashboard in construction</div>} />
             </Route>

src/actions/tasks.js

@@ -0,0 +1,34 @@
+import { SET_LOADER } from "./ui";
+
+export const TASKS = '[TASKS]';
+export const FETCH_TASKS = `${TASKS} FETCH`;
+export const SET_TASKS = `${TASKS} SET`;
+export const POST_TASK = `${TASKS} POST`;
+export const PUT_TASK = `${TASKS} PUT`;
+export const ADD_NEW_TASK = `${TASKS} ADD`;
+
+export const fetchTasks = ({ query }) => ({
+  type: FETCH_TASKS,
+  payload: query
+});
+
+export const setTasks = ({ list }) => ({
+  type: SET_TASKS,
+  payload: list
+});
+
+export const postTask = ({ task }) => ({
+  type: POST_TASK,
+  payload: task
+});
+
+export const putTask = ({ task, paramId }) => ({
+  type: PUT_TASK,
+  payload: task,
+  paramId: paramId
+});
+
+export const addNewTasks = ({ list }) => ({
+  type: ADD_NEW_TASK,
+  payload: list
+});

src/components/Chart/index.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import Paper from '@material-ui/core/Paper';
+import {
+    Chart,
+    PieSeries,
+    Legend,
+    Title,
+    Tooltip,
+} from '@devexpress/dx-react-chart-material-ui';
+import { Animation } from '@devexpress/dx-react-chart';
+
+
+
+
+const ChartPie = ({ list }) => {
+    const chartData = [
+        {
+            title: "Completed",
+            value: list instanceof Array ? list.filter((task) => task.completed).length : 0
+        },
+        {
+            title: "In-Progress",
+            value: list instanceof Array ? list.filter((task) => !task.completed).length : 0
+        },
+    ];
+
+
+    return (
+        <Paper>
+            <Chart data={chartData}>
+                <PieSeries
+                    name="name"
+                    valueField="value"
+                    argumentField="title"
+                />
+                <Title
+                    text="Status Tasks"
+                />
+                <Animation />
+                <Tooltip />
+                <Legend position={'bottom'} />
+            </Chart>
+        </Paper>
+    );
+}
+
+export default ChartPie; 

src/components/NavigationBar/index.jsx

@@ -1,18 +1,15 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import CssBaseline from '@mui/material/CssBaseline';
 import Divider from '@mui/material/Divider';
 import Drawer from '@mui/material/Drawer';
 import IconButton from '@mui/material/IconButton';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
 import List from '@mui/material/List';
 import MenuIcon from '@mui/icons-material/Menu';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import { Outlet } from 'react-router';
-import { Link } from 'react-router-dom';
 import ListItemLink from 'Components/ListItemLink';
 
 import HomeIcon from '@mui/icons-material/Home';
@@ -38,6 +35,9 @@ function NavigationBar(props) {
         <ListItemLink to="/tasks" label="Tasks" icon={<TaskIcon />}/>
         <ListItemLink to="/tasks/self"label="My Tasks" icon={<TaskIcon />} />
         <ListItemLink to="/dashboard" label="Dashboard" icon={<DashboardIcon />}/>
+        <ListItemLink to="/tasks" label="Tasks" icon={<TaskIcon />} />
+        <ListItemLink to="/tasks/self" label="My Tasks" icon={<TaskIcon />} />
+        <ListItemLink to="/dashboard" label="Dashboard" icon={<DashboardIcon />} />
       </List>
       <Divider />
       <List>
@@ -116,12 +116,4 @@ function NavigationBar(props) {
   );
 }
 
-// ResponsiveDrawer.propTypes = {
-//   /**
-//    * Injected by the documentation to work in an iframe.
-//    * You won't need it on your project.
-//    */
-//   window: PropTypes.func,
-// };
-
 export default NavigationBar;

src/components/Timer/index.jsx

@@ -0,0 +1,65 @@
+import React, { Component } from "react";
+import { Box } from "@mui/material";
+const styles = { color: 'white', backgroundColor: 'blue' }
+
+class Timer extends Component {
+
+  constructor(props) {
+    console.log('constructor exec');
+    super(props);
+    this.state = {
+      time: new Date()
+    };
+  }
+
+  componentDidMount() {
+    var countDownDate = new Date(this.state.time).getTime();
+
+    setInterval(() => {
+      var now = new Date().getTime();
+      var distance = now - countDownDate;
+      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+      var format = `${days} d ${hours} h ${minutes} m ${seconds} s`
+      this.setState({
+        format: format
+      })
+    }, 1000);
+  }
+
+  componentDidUpdate() {
+    console.log('componentDidUpdate exec');
+  }
+
+  shouldComponentUpdate() {
+    return true;
+  }
+
+  componentWillUnmount() {
+    // remove the interval here
+  }
+
+  render() {
+    const { format } = this.state;
+    return (
+      <div id="timer" style={styles}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            width: 'fit-content',
+            bgcolor: 'background.paper',
+            color: 'text.secondary',
+            fontSize: 18
+          }}
+        >
+          {`Duration: ${format}`}
+        </Box>
+      </div>
+    );
+  }
+}
+
+export default Timer;

src/middlewares/index.js

@@ -0,0 +1,40 @@
+import { apiFailure, apiStart, apiSuccess, API_START } from "../actions/api";
+
+const TASKS_API_GET = "https://davidvida-tasks-service.herokuapp.com/api/v1/task";
+export const apiMiddleware = ({ dispatch }) => (next) => (action) => {
+  next(action)
+  switch (action.type) {
+    case API_START:
+      const { method, body, url } = action.meta;
+      if (method === "POST" || method === "PUT") {
+        fetch(action.meta.url, {
+          method: action.meta.method,
+          body: JSON.stringify(action.payload),
+          headers: { 'Content-Type': 'application/json' }
+        }
+        )
+          .then(response => response.json())
+          .then(data => {
+            dispatch(apiStart({ body: {}, method: 'GET', url: TASKS_API_GET }));
+          })
+          .catch(function (error) {
+            dispatch(apiFailure({ error: error }));
+          });
+      } else {
+
+        if (method === "GET") {
+          fetch(url, { method: method, body: body })
+            .then(response => response.json())
+            .then(data => {
+              dispatch(apiSuccess({ response: data }));
+            })
+            .catch(function (error) {
+              dispatch(apiFailure({ error: error }));
+            });
+        }
+      }
+      break;
+    default:
+      break;
+  }
+}

src/middlewares/tasks.js

@@ -0,0 +1,39 @@
+import { apiStart, API_FAILURE, API_SUCCESS } from "../actions/api";
+import { FETCH_TASKS, POST_TASK, PUT_TASK, setTasks } from "../actions/tasks";
+import { setLoader, setNotification } from "../actions/ui";
+
+const TASKS_API_GET = "https://davidvida-tasks-service.herokuapp.com/api/v1/task";
+const TASKS_API_POST = "https://davidvida-tasks-service.herokuapp.com/api/v1/task";
+
+export const tasksMiddleware = () => (next) => (action) => {
+  next(action);
+  switch (action.type) {
+    case FETCH_TASKS:
+      next(apiStart({ body: {}, method: 'GET', url: TASKS_API_GET }));
+      next(setLoader(true));
+      break;
+    case API_SUCCESS:
+      next(setTasks({ list: action.payload }));
+      next(setLoader(false));
+      break;
+    case API_FAILURE:
+      next(setNotification({ error: action.payload }));
+      next(setLoader(false));
+      break;
+    case POST_TASK:
+      next(apiStart({ body: action.payload, method: 'POST', url: TASKS_API_POST }));
+      next(apiStart({ body: {}, method: 'GET', url: TASKS_API_GET }));
+      next(setLoader(true));
+      break;
+    case PUT_TASK:
+      next(
+          apiStart(
+              { 
+                  body: action.payload, 
+                  method: "PUT", 
+                  url: `${TASKS_API_POST}/${action.paramId}` 
+                }
+            )
+        );
+  }
+};

src/pages/TaskListPage/Tasks/index.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import TodoListContainer from "../TodoListContainer";
+
+const MyTasksListPage = () => {
+  return (
+    <TodoListContainer userName={"ER"} />
+  );
+};
+
+export default MyTasksListPage;