@@ -32,14 +32,14 @@ class TodoList extends React.Component {
{ list.length > 0 && (
<>
-
+
- {list.filter(item => (!filterApplied ? true : !item.completed)).map((item, index, array) => {
+ {list.filter(item => (!filter.filterApplied ? true : !item.completed) && (!!filter.user ? filter.user === item.user : true)).map((item, index, array) => {
return (
<>
-
+
{ index < array.length -1 && }
)
diff --git a/src/pages/TaskListPage/TodoListContainer/index.jsx b/src/pages/TaskListPage/TodoListContainer/index.jsx
index 097c7fc..0ef5680 100644
--- a/src/pages/TaskListPage/TodoListContainer/index.jsx
+++ b/src/pages/TaskListPage/TodoListContainer/index.jsx
@@ -2,22 +2,25 @@ import React, { Component } from "react";
import TodoList from "../TodoList";
import { connect } from "react-redux";
import { setLoader } from "../../../actions/ui";
-import { fetchTasks } from "../../../actions/tasks";
+import { fetchTasks,postTask,putTask } from "../../../actions/tasks";
class TodoListContainer extends Component {
constructor(props) {
super(props);
this.state = {
- filterApplied: false,
- hideTimer: false
+ filter: {
+ filterApplied: false,
+ user: this.props.user
+ }
};
this.toggleTimer = this.toggleTimer.bind(this);
this.toggleListItem = this.toggleListItem.bind(this);
this.performAddTask = this.performAddTask.bind(this);
+ this.performUpdateTask = this.performUpdateTask.bind(this);
+ this.currentUser = "joel chambilla"
}
componentDidMount() {
- const __this = this;
this.props.fetchTasks();
}
@@ -28,40 +31,43 @@ class TodoListContainer extends Component {
}
toggleListItem(event) {
- this.setState({
- filterApplied: event.currentTarget.checked
- });
+ const toggleChecked = event.currentTarget.checked;
+ this.setState(prevState => ({
+ filter : {
+ ...prevState.filter,
+ filterApplied: toggleChecked
+ }
+ }));
}
performAddTask(newTask) {
- /*Challenge
- * Create a new command action and the necessary actions and middlewares to manage this process
- */
- // this.setState(state => {
- // const newTaskElement = {
- // ...newTask,
- // id: this.propsstate.list.length,
- // completed: false
- // }
- // let newList = [...state.list];
- // newList.push(newTaskElement);
- // return {
- // list: newList
- // }
- // });
+ const newTaskElement = {
+ id: this.props.list.length,
+ ...newTask,
+ completed: false,
+ user: this.currentUser
+ }
+
+ this.props.postTask(newTaskElement);
+ this.props.fetchTasks();
+ }
+
+ performUpdateTask(udpatedTask) {
+ this.props.putTask(udpatedTask._id, udpatedTask);
}
render() {
- const { filterApplied } = this.state;
+ const { filter } = this.state;
const { list, loading } = this.props;
return (
)
}
@@ -76,7 +82,9 @@ const mapStateToProps = state => {
const mapDispacthToProps = dispatch => {
return {
- fetchTasks: () => dispatch(fetchTasks({query: {}}))
+ fetchTasks: () => dispatch(fetchTasks({query: {}})),
+ postTask: (task) => dispatch(postTask({item: task})),
+ putTask: (taskId, task) => dispatch(putTask({taskId: taskId, item: task}))
}
}
diff --git a/src/pages/TaskListPage/TodoListItem/index.jsx b/src/pages/TaskListPage/TodoListItem/index.jsx
index 9966be1..9c5d5f6 100644
--- a/src/pages/TaskListPage/TodoListItem/index.jsx
+++ b/src/pages/TaskListPage/TodoListItem/index.jsx
@@ -1,63 +1,56 @@
import React from "react";
import { IconButton, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
-import PlayIcon from '@mui/icons-material/PlayCircleOutlined'
+import PlayIcon from '@mui/icons-material/PlayCircleOutlined';
+import StopIcon from '@mui/icons-material/StopCircleOutlined';
import CompletedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
import PendingIcon from '@mui/icons-material/PendingOutlined';
/* styles import */
import { withStyles } from "@mui/styles";
import styles from './styles';
-/*
-* class based component
-*/
-// class TodoListItem extends React.Component {
-// constructor(props) {
-// super(props);
-// }
-
-// render() {
-// const { name, completed, classes } = this.props;
-// return (
-//
-//
-//
-// }
-// >
-//
-//
-// { completed ? : }
-//
-//
-//
-//
-// )
-// }
-// }
-
-/*
-* function component
-*/
import useStyles from "./styles";
-const TodoListItem = ({ name, completed }) => {
+const TodoListItem = ({performUpdateTask,item}) => {
const classes = useStyles();
+
+ const setTime = () => {
+ var completed = item.completed;
+ if (!item.startDate) {
+ var startDate = (new Date()).toISOString();
+ }
+ else if (!item.endDate) {
+ var endDate = (new Date()).toISOString();
+ completed = true;
+ }
+
+ const udpatedItem = {
+ ...item,
+ startDate: startDate,
+ endDate: endDate,
+ completed: completed
+ }
+
+ performUpdateTask(udpatedItem);
+ }
+
return (
-
+ !item.completed &&
+ {!item.startDate ? : }
}
>
- { completed ? : }
+ { item.completed ? : }
-
+
+
+
+
+
)
diff --git a/src/pages/TaskListPage/myTaskListPage.jsx b/src/pages/TaskListPage/myTaskListPage.jsx
new file mode 100644
index 0000000..af7e83f
--- /dev/null
+++ b/src/pages/TaskListPage/myTaskListPage.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import TodoListContainer from "./TodoListContainer";
+
+const TasksListPage = () => {
+ return (
+
+ );
+};
+
+export default TasksListPage;