Skip to content

P
planner-team-one
Commit 5b582978 authored by Ermolaev Timur's avatar Ermolaev Timur
Browse files
Options

#28 Начал распределять логику по разным местам

parent 7fb56c62
Show whitespace changes
Inline Side-by-side
Showing with 120 additions and 110 deletions
planner-front/src/components/MonthCalendarBody/MonthCalendarBody.js
View file @ 5b582978
import { Grid, TextField } from "@mui/material";
import { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { setNewTasksForCells } from "../../store/actions/tasksActions";
const exampleTasks=[
{
user:"first",
title:"задача1",
description:"описание задачи11111",
priority:"A",
author:"Ivan",
executor:"Arman",
dateTimeStart:"26.12.2022 20:00:00",
dateTimeDue:"27.10.2022 14:20:00",
id:1,
dateCreated:"26.10.2022"
}, {
user:"first",
title:"задача2",
description:"описание задачи11111",
priority:"A",
author:"Ivan",
executor:"Arman",
dateTimeStart:"1.12.2022 9:00:00",
dateTimeDue:"27.10.2022 15:20:00",
id:1,
dateCreated:"26.10.2022"
},{
user:"first",
title:"first",
description:"описание задачи11111",
priority:"A",
author:"Ivan",
executor:"Arman",
dateTimeStart:"5.11.2022 16:00:00",
dateTimeDue:"5.11.2022 17:00:00",
id:1,
dateCreated:"26.10.2022"
},{
user:"first",
title:"second",
description:"описание задачи11111",
priority:"A",
author:"Ivan",
executor:"Arman",
dateTimeStart:"5.11.2022 16:00:00",
dateTimeDue:"5.11.2022 17:00:00",
id:1,
dateCreated:"26.10.2022"
}
]
function MonthCalendarBody({month, year}) {
function MonthCalendarBody({month, year, tasks}) {
const [hoursInDay, setHoursInDay] = useState(['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '6:00'])
const [daysInMonth, setDaysInMonth] = useState([])
const [tasksForCell, setTasksForCell] = useState([])
useEffect(()=>{
setNewMonthDays(month, year)
setNewTasksWithInfoForCell(exampleTasks, month, year)
setNewMonthDays()
}, [month, year])
const getDaysInMonth = () => {
......@@ -69,53 +20,29 @@ function MonthCalendarBody({month, year}) {
return ["ВС","ПН","ВТ","СР","ЧТ","ПТ","СБ"][day];
}
const getDayOfWeekNumber = (month, year, day) => {
const getDayOfWeekNumber = (day) => {
return new Date(year, month, day).getDay()
}
const setNewTasksWithInfoForCell = (tasks, month, year) => {
const newArr = tasks.map((task)=>{
const dateStart = task.dateTimeStart.split(' ')[0]
const timeStart = task.dateTimeStart.split(' ')[1]
const timeEnd = task.dateTimeDue.split(' ')[1]
const dayStart = parseInt(dateStart.split('.')[0])
const dayOfWeekStartNumber = getDayOfWeekNumber(month, year, dayStart)
const dayOfWeekStartString = getDayOfWeekString(dayOfWeekStartNumber)
const monthStartNumber = parseInt(dateStart.split('.')[1])
const yearStartNumber = parseInt(dateStart.split('.')[2])
const timeStartHour = parseInt(timeStart.split(':')[0])
const timeEndHour = parseInt(timeEnd.split(':')[0])
return {...task,
startDay: dayStart,
startDayOfWeek: dayOfWeekStartString,
startHour: timeStartHour,
startMonth: monthStartNumber,
startYear: yearStartNumber,
endHour: timeEndHour,
}
})
setTasksForCell(newArr)
}
const createTaskInCellHandler = (month, year, dayOfWeek, dayNumber, dayHour) => {
const newTasks = [...tasksForCell]
const newTask = {
id: Date.now(),
user:"first",
title:"Новая",
description:"описание задачи11111",
priority:"A",
author:"Ivan",
executor:"Arman",
dateTimeStart:`${dayNumber}.${month+1}.${year} ${parseInt(dayHour.split(':')[0])}:00:00`,
dateTimeDue:`${dayNumber}.${month+1}.${year} ${parseInt(dayHour.split(':')[0]) + 1}:00:00`,
}
newTasks.push(newTask)
exampleTasks.push(newTask)
setNewTasksWithInfoForCell(newTasks, month, year)
}
const getTaskInDayCell = (tasks, day, hours, month, year) => {
const createTaskInCellHandler = (dayOfWeek, dayNumber, dayHour) => {
// const newTasks = [...tasksForCell]
// const newTask = {
// id: Date.now(),
// user:"first",
// title:"Новая",
// description:"описание задачи11111",
// priority:"A",
// author:"Ivan",
// executor:"Arman",
// dateTimeStart:`${dayNumber}.${month+1}.${year} ${parseInt(dayHour.split(':')[0])}:00:00`,
// dateTimeDue:`${dayNumber}.${month+1}.${year} ${parseInt(dayHour.split(':')[0]) + 1}:00:00`,
// }
// newTasks.push(newTask)
// exampleTasks.push(newTask)
// setNewTasksWithInfoForCell(newTasks, month, year)
}
const getTaskInDayCell = (tasks, day, hours) => {
const task = tasks.find(task=> {
if (year === task.startYear) {
if (month + 1 === task.startMonth) {
......@@ -131,7 +58,7 @@ function MonthCalendarBody({month, year}) {
}
const setNewMonthDays = (month, year) => {
const setNewMonthDays = () => {
const newDaysInMonth = []
for (let i = 1; i <= getDaysInMonth(month, year); i++) {
const dayOfWeekNumber = getDayOfWeekNumber(month, year, i)
......@@ -144,14 +71,13 @@ function MonthCalendarBody({month, year}) {
const value = e.target.value;
const name = e.target.name;
const { id } = task;
const newTasks = tasksForCell.map(task => {
const newTasks = tasks.map(task => {
if (task.id === id) {
return { ...task, [name]: value };
}
return task;
});
setTasksForCell(newTasks);
exampleTasks = [...newTasks]
setNewTasksForCells(newTasks)
}
return (
......@@ -190,13 +116,13 @@ function MonthCalendarBody({month, year}) {
{day.dayOfWeek}
</Grid>
{hoursInDay.map((hours, i)=>{
const task = getTaskInDayCell(tasksForCell, day, hours, month, year)
const task = getTaskInDayCell(tasks, day, hours)
return (
<Grid
key={i}
item xs={1.2222}
sx={{borderRight: '1px solid black'}}
onClick={()=>{createTaskInCellHandler(month, year, day.dayOfWeek, day.dayNumber, hours)}}>
onClick={()=>{createTaskInCellHandler(day.dayOfWeek, day.dayNumber, hours)}}>
{ task ?
<Grid key={i} sx={{backgroundColor: 'lightgreen'}}>
<TextField
......
planner-front/src/containers/MonthCalendar/MonthCalendar.js
View file @ 5b582978
......@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import MonthCalendarBody from '../../components/MonthCalendarBody/MonthCalendarBody';
import MonthCalendarHeader from '../../components/MonthCalendarHeader/MonthCalendarHeader';
import { fetchTasks } from '../../store/actions/tasksActions';
import { fetchTasks, setNewTasksForCells } from '../../store/actions/tasksActions';
function MonthCalendar() {
const dispatch = useDispatch();
......@@ -14,7 +14,6 @@ function MonthCalendar() {
const [worker, setWorker] = useState('');
const [calendarType, setCalendarType] = useState('Месяц');
useEffect(()=>{
setMonth(new Date().getMonth())
setYear(new Date().getFullYear())
......@@ -33,6 +32,40 @@ function MonthCalendar() {
return ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь", "Декабрь"][month];
}
const getDayOfWeekString = (day) => {
return ["ВС","ПН","ВТ","СР","ЧТ","ПТ","СБ"][day];
}
const getDayOfWeekNumber = (day) => {
return new Date(year, month, day).getDay()
}
const setNewTasksWithInfoForCell = (tasks) => {
const newArr = tasks.map((task)=>{
if (task.dateTimeStart && task.dateTimeDue) {
const dateStart = task.dateTimeStart.split('T')[0]
const timeStart = task.dateTimeStart.split('T')[1]
const timeEnd = task.dateTimeDue.split('T')[1]
const dayStart = parseInt(dateStart.split('-')[2])
const dayOfWeekStartNumber = getDayOfWeekNumber(dayStart)
const dayOfWeekStartString = getDayOfWeekString(dayOfWeekStartNumber)
const monthStartNumber = parseInt(dateStart.split('-')[1])
const yearStartNumber = parseInt(dateStart.split('-')[0])
const timeStartHour = parseInt(timeStart.split(':')[0])
const timeEndHour = parseInt(timeEnd.split(':')[0])
return {...task,
startDay: dayStart,
startDayOfWeek: dayOfWeekStartString,
startHour: timeStartHour,
startMonth: monthStartNumber,
startYear: yearStartNumber,
endHour: timeEndHour,
}
}
})
dispatch(setNewTasksForCells(newArr))
}
const incrementMonth = () => {
setMonth((prevState)=>{
if (prevState + 1 === 12 ) {
......@@ -70,6 +103,7 @@ function MonthCalendar() {
<MonthCalendarBody
month={month}
year={year}
tasks={tasks}
/>
</Container>
</>
......
planner-front/src/store/actionTypes/tasksTypes.js
View file @ 5b582978
export const FETCH_TASKS_REQUEST = "FETCH_TASKS_REQUEST";
export const FETCH_TASKS_SUCCESS = "FETCH_TASKS_SUCCESS";
export const FETCH_TASKS_FAILURE = "FETCH_TASKS_FAILURE";
export const SET_NEW_TASKS_FOR_CELLS = "SET_NEW_TASKS_FOR_CELLS";
\ No newline at end of file
planner-front/src/store/actions/tasksActions.js
View file @ 5b582978
import { FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS } from "../actionTypes/tasksTypes";
import { FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS, SET_NEW_TASKS_FOR_CELLS } from "../actionTypes/tasksTypes";
import axios from '../../axiosPlanner'
const fetchTasksRequest = () => {
......@@ -12,14 +12,38 @@ const fetchTasksSuccess = (tasks) => {
const fetchTasksFailure = (error) => {
return {type: FETCH_TASKS_FAILURE, error}
};
export const setNewTasksForCells = (tasks) => {
return {type: SET_NEW_TASKS_FOR_CELLS, tasks}
}
export const fetchTasks = () => {
return async (dispatch) => {
dispatch(fetchTasksRequest());
try {
const response = await axios.get("/tasks");
console.log(response.data)
dispatch(fetchTasksSuccess(response.data))
const arr = [
{
accomplish: "opened",
author: {id: 'f0e4a3bf-78fb-465b-9f28-620790750418', name: 'timur', surname: 'ermolaev', displayName: 'ermolaev t.', email: 'loool@mail.ru'},
createdAt: "2022-11-07T11:35:30.937Z",
dateTimeDue: "2022-11-11T14:35:30.937Z",
dateTimeStart: "2022-11-11T11:35:30.937Z",
description: "lol",
id: "2fd828a2-3778-45fd-a11a-00d799db9142",
title : "task",
}, {
accomplish: "opened",
author: {id: 'f0e4a3bf-78fb-465b-9f28-620790750418', name: 'timur', surname: 'ermolaev', displayName: 'ermolaev t.', email: 'loool@mail.ru'},
createdAt: "2022-11-07T11:35:30.937Z",
dateTimeDue: "2022-11-25T14:35:30.937Z",
dateTimeStart: "2022-11-25T11:35:30.937Z",
description: "lol",
id: "2fd828a2-3778-45fd-a11a-00d799db9142",
title : "task",
},
]
dispatch(fetchTasksSuccess(arr))
setNewTasksForCells()
} catch (error) {
dispatch(fetchTasksFailure(error.response.data));
}
......
planner-front/src/store/reducers/tasksReducer.js
View file @ 5b582978
import { FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS } from "../actionTypes/tasksTypes";
import { FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS, SET_NEW_TASKS_FOR_CELLS } from "../actionTypes/tasksTypes";
const initialState = {
tasks: [],
......@@ -11,9 +11,33 @@ const tasksReduсer = (state = initialState, action) => {
case FETCH_TASKS_REQUEST:
return {...state, loading: true};
case FETCH_TASKS_SUCCESS:
return {...state, loading: false, tasks: action.tasks};
const newArr = action.tasks.map((task)=>{
if (task.dateTimeStart && task.dateTimeDue) {
const dateStart = task.dateTimeStart.split('T')[0]
const timeStart = task.dateTimeStart.split('T')[1]
const timeEnd = task.dateTimeDue.split('T')[1]
const dayStart = parseInt(dateStart.split('-')[2])
const dayOfWeekStartNumber = new Date(new Date().getFullYear(), new Date().getMonth(), dayStart).getDay()
const dayOfWeekStartString = ["ВС","ПН","ВТ","СР","ЧТ","ПТ","СБ"][dayOfWeekStartNumber]
const monthStartNumber = parseInt(dateStart.split('-')[1])
const yearStartNumber = parseInt(dateStart.split('-')[0])
const timeStartHour = parseInt(timeStart.split(':')[0])
const timeEndHour = parseInt(timeEnd.split(':')[0])
return {...task,
startDay: dayStart,
startDayOfWeek: dayOfWeekStartString,
startHour: timeStartHour,
startMonth: monthStartNumber,
startYear: yearStartNumber,
endHour: timeEndHour,
}
}
})
return {...state, loading: false, tasks: newArr};
case FETCH_TASKS_FAILURE:
return {...state, loading: false, error: action.error};
case SET_NEW_TASKS_FOR_CELLS:
return {...state, tasks: action.tasks}
default:
return state;
}
......
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