Add features to tasks page

src/App.jsx

@@ -3,6 +3,7 @@ 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/TaskListPage/myTaskListPage";
 import './styles.css';
 import { Provider } from "react-redux";
 
@@ -20,7 +21,7 @@ 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>

src/actions/tasks.js

@@ -8,6 +8,8 @@ export const TASKS = '[TASKS]';
 export const FETCH_TASKS = `${TASKS} FETCH`;
 // document actions
 export const SET_TASKS = `${TASKS} SET`;
+export const POST_TASK = `${TASKS} POST`;
+export const PUT_TASK = `${TASKS} PUT`;
 
 export const fetchTasks = ({query}) => ({
   type: FETCH_TASKS,
@@ -19,6 +21,18 @@ export const setTasks = ({list}) => ({
   payload: list
 });
 
+export const postTask = ({item}) => ({
+  type: POST_TASK,
+  payload: item
+});
+
+export const putTask = ({taskId, item}) => ({
+  taskId: taskId,
+  type: PUT_TASK,
+  payload: item
+});
+
+
 /*
 FETCH_TASKS -> API_START  -> API_SUCCESS -> SET_TASKS
                SET_LOADER                   SET_LOADER

src/middlewares/api.js

@@ -1,13 +1,26 @@
-import { apiFailure, apiSuccess, API_START } from "../actions/api";
+import { apiFailure, apiStart, apiSuccess, API_START } from "../actions/api";
 
+const TASKS_API = "https://davidvida-tasks-service.herokuapp.com/api/v1/task";
 export const apiMiddleware = ({dispatch}) => (next) => (action) => {
   next(action);
   if (action.type === API_START) {
-    const { method, body, url } = action.meta;
-    fetch(url, { method: method, body: body })
+    const { method, url } = action.meta;
+    const body = action.payload;
+    const requestOptions = {
+      method: method,
+      headers: { 'Content-Type': 'application/json' },
+      body: !!body ? JSON.stringify(body) : null
+    };
+
+    fetch(url, requestOptions)
     .then(response => response.json())
     .then(data => {
-      dispatch(apiSuccess({response: data.list}));
+      if (method === 'GET'){
+        dispatch(apiSuccess({response: data}));
+      }
+      else if (method === 'PUT') {
+        dispatch(apiStart({body: null, method: 'GET', url: TASKS_API}));
+      }
     })
     .catch(function(error) {
       dispatch(apiFailure({error: error}));

src/middlewares/tasks.js

@@ -1,16 +1,22 @@
 import { apiStart, API_FAILURE, API_SUCCESS } from "../actions/api";
-import { FETCH_TASKS, setTasks } from "../actions/tasks";
+import { FETCH_TASKS, setTasks, POST_TASK, PUT_TASK, fetchTasks } from "../actions/tasks";
 import { setLoader, setNotification } from "../actions/ui";
 
-const TASKS_API_GET = "http://localhost:3000/data/tasks.json";
+const TASKS_API = "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: null, method: 'GET', url: TASKS_API_GET}));
+      next(apiStart({body: null, method: 'GET', url: TASKS_API}));
       next(setLoader(true));
       break;
+    case POST_TASK:
+      next(apiStart({body: action.payload, method: 'POST', url: TASKS_API}));
+      break;
+    case PUT_TASK:
+      next(apiStart({body: action.payload, method: 'PUT', url: `${TASKS_API}/${action.taskId}`}));
+      break;
     case API_SUCCESS:
       next(setTasks({list: action.payload}));
       next(setLoader(false));

src/pages/TaskListPage/FormAddTask/index.js

@@ -1,44 +1,71 @@
 import React, { useState, useRef, useEffect } from "react";
+import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions } from "@mui/material";
 
 const FormAddTask = ({ onSubmitCallback }) => {
   const [taskName, setTaskName] = useState("");
-  const inputRef = useRef();
-
-  useEffect(() => {
-    inputRef.current.focus();
-  }, []);
+  const [taskDesc, setTaskDesc] = useState("");
+  const [open, setOpen] = useState(false);
 
   const onChangeName = (event) => {
     setTaskName(event.target.value);
   }
 
-  const onSubmitListener = (event) => {
-    event.preventDefault();
-    onSubmitCallback({
-      name: taskName
-    });
-    setTaskName("");
-  };
+  const onChangeDesc = (event) => {
+    setTaskDesc(event.target.value);
+  }
+
+  const addTask = () => {
+    onSubmitCallback({name: taskName, description: taskDesc});
+    handleClose();
+  }
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  }
+
+  const handleClose = () => {
+    setOpen(false);
+  }
 
   return (
-    <form onSubmit={onSubmitListener}>
-      <div>
-        <label htmlFor="taskName">Task Name</label>
-        <input
-          type="text"
-          id="taskName"
-          name="name"
-          autoComplete="off"
-          ref={inputRef}
-          value={taskName}
-          onChange={onChangeName} />
-      </div>
       <div>
-        <button type="submit" id="submitForm">
+        <Button variant="outlined" onClick={handleClickOpen}>
           Add Task
-        </button>
+        </Button>
+        <Dialog open={open} onClose={handleClose}>
+        <DialogTitle>Add new task</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Add the values for the new task
+          </DialogContentText>
+          <TextField
+            autoFocus
+            margin="dense"
+            id="taskName"
+            label="Task name"
+            type="text"
+            fullWidth
+            variant="standard"
+            value={taskName}
+            onChange={onChangeName}
+          />
+          <TextField
+            margin="dense"
+            id="taskDesc"
+            label="Description"
+            type="text"
+            fullWidth
+            variant="standard"
+            value={taskDesc}
+            onChange={onChangeDesc}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose}>Cancel</Button>
+          <Button onClick={addTask}>Add</Button>
+        </DialogActions>
+      </Dialog>
       </div>
-    </form>
   );
 };
 

src/pages/TaskListPage/TodoList/index.jsx

@@ -17,7 +17,7 @@ class TodoList extends React.Component {
 
   //render method
   render() {
-    const { list, filterApplied, toggleTimer, toggleListItem, performAddTask, showLoader } = this.props;
+    const { list, filter, toggleTimer, toggleListItem, performAddTask, showLoader, performUpdateTask } = this.props;
     return (
       <Container>
         {/* <div>
@@ -32,14 +32,14 @@ class TodoList extends React.Component {
         <LoadingIndicator show={showLoader} />
         { list.length > 0 && (
           <>
-            <Toggle active={filterApplied} label="Hide completed" onToggle={toggleListItem} />
+            <Toggle active={filter.filterApplied} label="Hide completed" onToggle={toggleListItem} />
 
             <Paper>
               <List>
-              {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 (
                   <>
-                    <TodoListItem key={item.id} completed={item.completed} name={item.name} />
+                    <TodoListItem key={item.id} item={item} performUpdateTask={performUpdateTask} />
                     { index < array.length -1  && <Divider /> }
                   </>
                 )

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 (
       <TodoList
         list={list}
         showLoader={loading}
-        filterApplied={filterApplied}
+        filter={filter}
         toggleTimer={this.toggleTimer}
         toggleListItem={this.toggleListItem}
         performAddTask={this.performAddTask}
+        performUpdateTask={this.performUpdateTask}
       />
     )
   }
@@ -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}))
   }
 }