@@ -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;
diff --git a/src/components/Timer/index.js b/src/components/Timer/index.js
deleted file mode 100644
index 698ac55..0000000
--- a/src/components/Timer/index.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { Component } from "react";
-
-// class based component
-class Timer extends Component {
-
- constructor(props) {
- console.log('constructor exec');
- super(props);
- this.state = {
- time: new Date()
- };
- }
-
- // componentDidMount
- componentDidMount() {
- console.log('componentDidMount exec');
- setInterval(() => {
- this.setState({
- time: new Date()
- })
- }, 1000);
- }
-
- componentDidUpdate() {
- console.log('componentDidUpdate exec');
- }
-
- shouldComponentUpdate() {
- return true;
- }
-
- componentWillUnmount() {
- // remove the interval here
- }
-
- render() {
- console.log('render exec');
- const { time } = this.state;
- return (
- {`Time: ${time.toLocaleString()}`}
- );
- }
-}
-
-export default Timer;
diff --git a/src/components/Timer/index.jsx b/src/components/Timer/index.jsx
new file mode 100644
index 0000000..6544780
--- /dev/null
+++ b/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 (
+
+
+ {`Duration: ${format}`}
+
+
+ );
+ }
+}
+
+export default Timer;
diff --git a/src/middlewares/index.js b/src/middlewares/index.js
new file mode 100644
index 0000000..a8be22a
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/middlewares/tasks.js b/src/middlewares/tasks.js
new file mode 100644
index 0000000..b683134
--- /dev/null
+++ b/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}`
+ }
+ )
+ );
+ }
+};
\ No newline at end of file
diff --git a/src/pages/TaskListPage/Tasks/index.tsx b/src/pages/TaskListPage/Tasks/index.tsx
new file mode 100644
index 0000000..eeff1fc
--- /dev/null
+++ b/src/pages/TaskListPage/Tasks/index.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import TodoListContainer from "../TodoListContainer";
+
+const MyTasksListPage = () => {
+ return (
+
+ );
+};
+
+export default MyTasksListPage;
\ No newline at end of file
diff --git a/src/pages/TaskListPage/TodoList/index.jsx b/src/pages/TaskListPage/TodoList/index.jsx
index 1ca5639..2211d9b 100644
--- a/src/pages/TaskListPage/TodoList/index.jsx
+++ b/src/pages/TaskListPage/TodoList/index.jsx
@@ -1,11 +1,11 @@
import React from 'react';
-import { Container, Divider, List, Paper } from '@mui/material';
-// import Timer from '../Timer';
-import Timer from 'Components/TimerFunction';
+import { Box, Container, Divider, List, Paper } from '@mui/material';
import TodoListItem from '../TodoListItem';
import FormAddTask from '../FormAddTask';
import Toggle from 'Components/Toggle';
import LoadingIndicator from 'Components/LoadingIndicator';
+import ChartPie from '../../../components/Chart';
+import Typography from '@mui/material/Typography';
/*
* class based component
@@ -15,43 +15,93 @@ class TodoList extends React.Component {
super(props);
}
+ getListByUser(taskList, userName) {
+ let listByUser = [];
+
+ if (!taskList instanceof Array) {
+ return listByUser
+ }
+ if (!(userName === "All") && taskList instanceof Array) {
+ taskList.filter(item => {
+ if (item.user === userName) {
+
+ listByUser.push(item);
+ }
+ })
+ return listByUser
+ }
+ return taskList
+ };
+
//render method
render() {
- const { list, filterApplied, toggleTimer, toggleListItem, performAddTask, showLoader } = this.props;
+ const { list, filterApplied, toggleListItem, performAddTask, showLoader, performUpdateTask, userName } = this.props;
+ const listByUser = this.getListByUser(list, userName);
return (
-
- {/*
-
-
-
-
- { !hideTimer && }
-
-
*/}
-
-
- { list.length > 0 && (
- <>
+ <>
+
+
+ {`Username: ${userName} `}
+
+
+
+
+
+
-
-
-
- {list.filter(item => (!filterApplied ? true : !item.completed)).map((item, index, array) => {
- return (
+
+
+
+
+
+ {listByUser.length > 0 && (
<>
-
- { index < array.length -1 && }
+
+
+ {listByUser.filter(item => (!filterApplied ? true : !item.completed)).map((item, index, array) => {
+ return (
+ <>
+
+ {index < array.length - 1 && }
+
+ )
+ })}
+
+
- )
- })}
-
-
-
- )}
-
+ )}
+
+
+