добавила кейс и экшн для получения всех задач, написала функцию получения задач…

добавила кейс и экшн для получения всех задач, написала функцию получения задач и вывода на страницу Мои задачи
parent ee25eac5
...@@ -13,6 +13,7 @@ import { ...@@ -13,6 +13,7 @@ import {
} from "@mui/material"; } from "@mui/material";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import {useDispatch, useSelector} from "react-redux";
import { Done, Edit } from "@mui/icons-material"; import { Done, Edit } from "@mui/icons-material";
import DeleteIcon from "@mui/icons-material/Delete"; import DeleteIcon from "@mui/icons-material/Delete";
import TaskModal from "../../components/MyTasksCompoments/TaskModal/TaskModal"; import TaskModal from "../../components/MyTasksCompoments/TaskModal/TaskModal";
...@@ -22,7 +23,8 @@ import MyTaskToolBar from '../../components/MyTasksCompoments/MyTaskToolBar'; ...@@ -22,7 +23,8 @@ import MyTaskToolBar from '../../components/MyTasksCompoments/MyTaskToolBar';
import CustomTableCell from "../../components/MyTasksCompoments/CustomTableCell"; import CustomTableCell from "../../components/MyTasksCompoments/CustomTableCell";
import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker/DateTimePicker"; import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker/DateTimePicker";
import MaterialUIPickersDue from "../../components/MyTasksCompoments/DateTimePicker/DateTimePickerDue"; import MaterialUIPickersDue from "../../components/MyTasksCompoments/DateTimePicker/DateTimePickerDue";
import BasicSelect from "../../components/UI/Select/Select" import BasicSelect from "../../components/UI/Select/Select";
import { fetchAllTasks} from "../../store/actions/tasksActions";
function descendingComparator(a, b, orderBy) { function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) { if (b[orderBy] < a[orderBy]) {
...@@ -68,46 +70,53 @@ export default function EnhancedTable() { ...@@ -68,46 +70,53 @@ export default function EnhancedTable() {
}; };
const [tasks,setTasks]=useState([ const dispatch = useDispatch();
{
user:"first", useEffect(() => {
title:"задача1", dispatch(fetchAllTasks ());
description:"описание задачи11111", }, []);
priority:"A", const tasks = useSelector(state => state.tasks.tasks);
author:"Ivan", console.log(tasks)
executor:"Arman", // const [tasks,setTasks]=useState([
dateTimeStart: "2022-10-26T11:00:00", // {
dateTimeDue: "2022-10-27T10:30:00", // user:"first",
id:1, // title:"задача1",
createdAt:"26.10.2022", // description:"описание задачи11111",
accomplish:" " // priority:"A",
}, // author:"Ivan",
{ // executor:"Arman",
title:"задача2", // dateTimeStart: "2022-10-26T11:00:00",
description:"описание задачи222222", // dateTimeDue: "2022-10-27T10:30:00",
author:"Ivan", // id:1,
executor:"Elena", // createdAt:"26.10.2022",
priority:"B", // accomplish:" "
dateTimeStart: "2022-10-26T13:30:00", // },
dateTimeDue: "2022-10-27T12:30:00", // {
id:2, // title:"задача2",
createdAt:"26.10.2022", // description:"описание задачи222222",
accomplish:" " // author:"Ivan",
}, // executor:"Elena",
{ // priority:"B",
id:3, // dateTimeStart: "2022-10-26T13:30:00",
title:"задача3", // dateTimeDue: "2022-10-27T12:30:00",
description:"описание задачи333333bjh,khkuhlhvilv hmgjtycikg mkgyxxkjfkkmgyhkfrdtseygdtjtuliuo8plfyvguh,bb", // id:2,
createdAt:"27.10.2022", // createdAt:"26.10.2022",
dateTimeStart: "2022-10-30T09:30:00", // accomplish:" "
dateTimeDue: "2022-11-02T09:30:00", // },
accomplish:" ", // {
author:"Artem", // id:3,
project:"Project1", // title:"задача3",
executor:"Bota", // description:"описание задачи333333bjh,khkuhlhvilv hmgjtycikg mkgyxxkjfkkmgyhkfrdtseygdtjtuliuo8plfyvguh,bb",
priority:"B", // createdAt:"27.10.2022",
} // dateTimeStart: "2022-10-30T09:30:00",
]) // dateTimeDue: "2022-11-02T09:30:00",
// accomplish:" ",
// author:"Artem",
// project:"Project1",
// executor:"Bota",
// priority:"B",
// }
// ])
useEffect(() => { useEffect(() => {
...@@ -122,7 +131,7 @@ export default function EnhancedTable() { ...@@ -122,7 +131,7 @@ export default function EnhancedTable() {
dateTimeStart: moment.parseZone(newStartedDate.date, 'DD/MM/YYYY', true).format(), dateTimeStart: moment.parseZone(newStartedDate.date, 'DD/MM/YYYY', true).format(),
}; };
updatedTasks.push(updatedTask); updatedTasks.push(updatedTask);
setTasks(updatedTasks); tasks=updatedTasks;
} }
}, [newStartedDate]); }, [newStartedDate]);
...@@ -137,33 +146,33 @@ export default function EnhancedTable() { ...@@ -137,33 +146,33 @@ export default function EnhancedTable() {
dateTimeDue: moment.parseZone(newDueDate.date, 'DD/MM/YYYY', true).format() dateTimeDue: moment.parseZone(newDueDate.date, 'DD/MM/YYYY', true).format()
}; };
updatedTasks.push(updatedTask); updatedTasks.push(updatedTask);
setTasks(updatedTasks); tasks=updatedTasks;
} }
}, [newDueDate]); }, [newDueDate]);
const onToggleEditMode = id => { const onToggleEditMode = id => {
if (readOnly==true) {setReadOnly(false)} else {setReadOnly(true)} if (readOnly==true) {setReadOnly(false)} else {setReadOnly(true)}
setTasks(state => {
return tasks.map(task => { return tasks.map(task => {
if (task.id === id) { if (task.id === id) {
return { ...task, isEditMode: !task.isEditMode }; return { ...task, isEditMode: !task.isEditMode };
} }
return task; return task;
}); });
});
}; };
const onToggleEditModeDone = id => { const onToggleEditModeDone = id => {
if (readOnly==true) {setReadOnly(false)} else {setReadOnly(true)} if (readOnly==true) {setReadOnly(false)} else {setReadOnly(true)}
setTasks(state => {
return tasks.map(task => { return tasks.map(task => {
if (task.id === id) { if (task.id === id) {
React.dispatch(addTask(task)) return { ...task, isEditMode: !task.isEditMode };
return { ...task, isEditMode: !task.isEditMode };
} }
return task; return task;
}); });
});
}; };
...@@ -177,7 +186,7 @@ export default function EnhancedTable() { ...@@ -177,7 +186,7 @@ export default function EnhancedTable() {
} }
return task; return task;
}); });
setTasks(newTasks); tasks=newTasks;
}; };
const handleRequestSort = (event, property) => { const handleRequestSort = (event, property) => {
...@@ -190,7 +199,7 @@ export default function EnhancedTable() { ...@@ -190,7 +199,7 @@ export default function EnhancedTable() {
console.log(id) console.log(id)
let newTasks=[...tasks] let newTasks=[...tasks]
newTasks.splice(tasks[id],1) newTasks.splice(tasks[id],1)
setTasks(newTasks) tasks=newTasks
}; };
const handleChangePage = (event, newPage) => { const handleChangePage = (event, newPage) => {
...@@ -230,8 +239,7 @@ export default function EnhancedTable() { ...@@ -230,8 +239,7 @@ export default function EnhancedTable() {
accomplish:" " accomplish:" "
} }
) )
setTasks(newTasks); tasks=newTasks;
}; };
return ( return (
...@@ -275,7 +283,7 @@ export default function EnhancedTable() { ...@@ -275,7 +283,7 @@ export default function EnhancedTable() {
<CustomTableCell {...{ task, name: "priority", onChange }} /> <CustomTableCell {...{ task, name: "priority", onChange }} />
<CustomTableCell {...{ task, name: "createdAt", onChange }} /> <CustomTableCell {...{ task, name: "createdAt", onChange }} />
<CustomTableCell {...{ task, name: "title", onChange, onModalOpen}} /> <CustomTableCell {...{ task, name: "title", onChange, onModalOpen}} />
<CustomTableCell {...{ task, name: "author", onChange }} /> <CustomTableCell {...{ task, name: "author.displayName", onChange }} />
<TableCell key={task.id} > <TableCell key={task.id} >
<MaterialUIPickers <MaterialUIPickers
...@@ -293,13 +301,14 @@ export default function EnhancedTable() { ...@@ -293,13 +301,14 @@ export default function EnhancedTable() {
readOnly={readOnly} readOnly={readOnly}
/> />
</TableCell> </TableCell>
<CustomTableCell {...{ task, name: "accomplish", onChange }} />
<BasicSelect {/* <BasicSelect
itemOne={"open"} itemOne={"open"}
itemTwo={"done"} itemTwo={"done"}
itemThree={"failed"} itemThree={"failed"}
task={task} task={task}
/> /> */}
<TableCell > <TableCell >
...@@ -353,7 +362,7 @@ export default function EnhancedTable() { ...@@ -353,7 +362,7 @@ export default function EnhancedTable() {
onChange={(e) => {onChange(e,modal.task)}} onChange={(e) => {onChange(e,modal.task)}}
onToggleEditMode={onToggleEditMode} onToggleEditMode={onToggleEditMode}
tasks={tasks} tasks={tasks}
setTasks={setTasks} // setTasks={setTasks}
/> />
</Box> </Box>
); );
......
...@@ -25,7 +25,7 @@ const headCells = [ ...@@ -25,7 +25,7 @@ const headCells = [
id: 'date', id: 'date',
numeric: true, numeric: true,
disablePadding: false, disablePadding: false,
label: 'Дата', label: 'Дата создания',
}, },
{ {
id: 'task', id: 'task',
......
export const FETCH_TASKS_REQUEST = "FETCH_TASKS_REQUEST"; export const FETCH_TASKS_REQUEST = "FETCH_TASKS_REQUEST";
export const FETCH_TASKS_SUCCESS = "FETCH_TASKS_SUCCESS"; export const FETCH_TASKS_SUCCESS = "FETCH_TASKS_SUCCESS";
export const FETCH_ALL_TASKS_SUCCESS = "FETCH_ALL_TASKS_SUCCESS";
export const FETCH_TASKS_FAILURE = "FETCH_TASKS_FAILURE"; export const FETCH_TASKS_FAILURE = "FETCH_TASKS_FAILURE";
export const ADD_NEW_TASK_REQUEST = "ADD_NEW_TASK_REQUEST"; export const ADD_NEW_TASK_REQUEST = "ADD_NEW_TASK_REQUEST";
......
import { ADD_NEW_TASK_FAILURE, ADD_NEW_TASK_REQUEST, ADD_NEW_TASK_SUCCESS, FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS} from "../actionTypes/tasksTypes"; import { ADD_NEW_TASK_FAILURE, ADD_NEW_TASK_REQUEST, ADD_NEW_TASK_SUCCESS, FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS, FETCH_ALL_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
import axios from '../../axiosPlanner' import axios from '../../axiosPlanner'
const fetchTasksRequest = () => { const fetchTasksRequest = () => {
...@@ -9,6 +9,10 @@ const fetchTasksSuccess = (tasks) => { ...@@ -9,6 +9,10 @@ const fetchTasksSuccess = (tasks) => {
return {type: FETCH_TASKS_SUCCESS, tasks} return {type: FETCH_TASKS_SUCCESS, tasks}
}; };
const fetchAllTasksSuccess = (tasks) => {
return {type: FETCH_ALL_TASKS_SUCCESS, tasks}
};
const fetchTasksFailure = (error) => { const fetchTasksFailure = (error) => {
return {type: FETCH_TASKS_FAILURE, error} return {type: FETCH_TASKS_FAILURE, error}
}; };
...@@ -18,13 +22,25 @@ export const fetchTasks = () => { ...@@ -18,13 +22,25 @@ export const fetchTasks = () => {
dispatch(fetchTasksRequest()); dispatch(fetchTasksRequest());
try { try {
const response = await axios.get("/tasks"); const response = await axios.get("/tasks");
dispatch(fetchTasksSuccess(response.data.tasks)) dispatch(fetchTasksSuccess(response.data.tasks))
} catch (error) { } catch (error) {
dispatch(fetchTasksFailure(error.response.data)); dispatch(fetchTasksFailure(error.response.data));
} }
} }
} };
export const fetchAllTasks = () => {
return async (dispatch) => {
dispatch(fetchTasksRequest());
try {
const response = await axios.get("/tasks");
dispatch(fetchAllTasksSuccess(response.data.tasks))
} catch (error) {
dispatch(fetchTasksFailure(error.response.data));
}
}
};
const addTaskRequest = () => { const addTaskRequest = () => {
return {type: ADD_NEW_TASK_REQUEST} return {type: ADD_NEW_TASK_REQUEST}
}; };
......
import { FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS} from "../actionTypes/tasksTypes"; import { FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS,FETCH_ALL_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
const initialState = { const initialState = {
tasks: [], tasks: [],
...@@ -12,7 +12,7 @@ const tasksReduсer = (state = initialState, action) => { ...@@ -12,7 +12,7 @@ const tasksReduсer = (state = initialState, action) => {
return {...state, loading: true}; return {...state, loading: true};
case FETCH_TASKS_SUCCESS: case FETCH_TASKS_SUCCESS:
const newArr = [] const newArr = []
action.tasks.forEach((task)=>{ action.tasks.forEach((task)=>{
if (task.dateTimeStart && task.dateTimeDue) { if (task.dateTimeStart && task.dateTimeDue) {
if (new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() < (4 * 3600000)) { if (new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() < (4 * 3600000)) {
const dateStart = task.dateTimeStart.split('T')[0] const dateStart = task.dateTimeStart.split('T')[0]
...@@ -36,9 +36,12 @@ const tasksReduсer = (state = initialState, action) => { ...@@ -36,9 +36,12 @@ const tasksReduсer = (state = initialState, action) => {
} }
} ) } )
} }
} }
}) })
return {...state, loading: false, tasks: newArr}; return {...state, loading: false, tasks: newArr};
case FETCH_ALL_TASKS_SUCCESS:
return {...state, loading: false, tasks: action.tasks};
case FETCH_TASKS_FAILURE: case FETCH_TASKS_FAILURE:
return {...state, loading: false, error: action.error}; return {...state, loading: false, error: action.error};
default: default:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment