Working in calendar

src/App.js

@@ -88,8 +88,9 @@ const App = () => {
             <Route index element={<Profile />} />
             <Route exact path="catalog" element={<Home />} />
             <Route exact path="calendar" element={<ProfileCalendar />} />
+            <Route exact path="calendar/view/" element={<ProfileCalendar />} />
             <Route exact path="summary" element={<Summary />} />
-            <Route exact path="view" element={<ViewReport />} />
+            <Route exact path="view/:id" element={<ViewReport />} />
             <Route exact path="tracker" element={<Tracker />} />
             <Route exact path="payouts" element={<Payouts />} />
             <Route exact path="settings" element={<PartnerSettings />} />

src/components/Calendar/calendarComponent.scss

@@ -7,7 +7,7 @@
   padding-right: 54px;
   padding-top: 48px;
   padding-bottom: 40px;
-  font-family: 'LabGrotesque', sans-serif;
+  font-family: "LabGrotesque", sans-serif;
 
   &__header {
     display: flex;
@@ -56,7 +56,6 @@
     }
 
     h3 {
-
       font-size: 2.5em;
       font-weight: 400;
       font-style: normal;
@@ -142,8 +141,8 @@
 
     button {
       margin: 0 auto;
-      //width: 125px;
-      //height: 42px;
+      width: 125px;
+      height: 42px;
       padding: 0 5px;
       box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
       border-radius: 5px;
@@ -157,40 +156,31 @@
       line-height: normal;
       text-align: center;
 
-      a {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 115px;
-        height: 42px;
-        text-decoration: none;
-        color: #000000;
-
-        img {
-          width: 16px;
-          height: 16px;
-          margin: 0 10px 0 0;
-        }
-
-        @media (max-width: 1200px) {
-          width: 90px;
-          height: 40px;
-        }
+      img {
+        width: 16px;
+        height: 16px;
+        margin: 0 10px 0 0;
 
         @media (max-width: 968px) {
-          width: 62px;
-          height: 40px;
-          font-size: 10px;
+          margin-right: 2px;
 
-          img {
-            margin-right: 2px;
-          }
-        }
-
-        @media (max-width: 610px) {
-          img {
+          @media (max-width: 610px) {
             display: none;
           }
+        }
+      }
+
+      @media (max-width: 1200px) {
+        width: 90px;
+        height: 40px;
+      }
+
+      @media (max-width: 968px) {
+        width: 62px;
+        height: 40px;
+        font-size: 10px;
+
+        @media (max-width: 610px) {
           width: auto;
           height: auto;
         }

src/components/ProfileCalendar/ProfileCalendar.js

@@ -1,99 +1,127 @@
-import React, { useEffect, useState } from 'react'
-import {useDispatch, useSelector} from 'react-redux'
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
 
-import {getReports} from '../Calendar/calendarHelper'
-import {Link, Navigate} from 'react-router-dom'
+import { getReports } from "../Calendar/calendarHelper";
+import { Link, Navigate } from "react-router-dom";
 import moment from "moment";
 
-import {ProfileCalendarComponent} from "./ProfileCalendarComponent";
-import {Loader} from "../Loader/Loader";
-import {ProfileHeader} from "../ProfileHeader/ProfileHeader";
-import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
-import { Footer } from '../Footer/Footer'
+import { ProfileCalendarComponent } from "./ProfileCalendarComponent";
+import { Loader } from "../Loader/Loader";
+import { ProfileHeader } from "../ProfileHeader/ProfileHeader";
+import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { Footer } from "../Footer/Footer";
+import { Navigation } from "../Navigation/Navigation";
+import { ViewReport } from "../../pages/ViewReport/ViewReport";
 
-import {urlForLocal} from "../../helper";
+import { urlForLocal } from "../../helper";
 
-import {apiRequest} from "../../api/request";
-import { getProfileInfo } from '../../redux/outstaffingSlice'
-import {getRequestDates, setReportDate, setRequestDate} from "../../redux/reportSlice";
-
-import 'moment/locale/ru'
-import './profileCalendar.scss'
-import { Navigation } from '../Navigation/Navigation';
+import { apiRequest } from "../../api/request";
+import { getProfileInfo } from "../../redux/outstaffingSlice";
+import {
+  getRequestDates,
+  setReportDate,
+  setRequestDate,
+} from "../../redux/reportSlice";
 
+import "moment/locale/ru";
+import "./profileCalendar.scss";
 
 export const ProfileCalendar = () => {
-    if(localStorage.getItem('role_status') === '18') {
-        return <Navigate to="/profile" replace/>
+  if (localStorage.getItem("role_status") === "18") {
+    return <Navigate to="/profile" replace />;
+  }
+  const dispatch = useDispatch();
+  const profileInfo = useSelector(getProfileInfo);
+  const requestDates = useSelector(getRequestDates);
+  const [value, setValue] = useState(moment());
+  const [reports, setReports] = useState([]);
+  const [totalHours, setTotalHours] = useState(0);
+  const [loader, setLoader] = useState(true);
+
+  function setValueHandler(value) {
+    setValue(value);
+  }
+
+  useEffect(() => {
+    dispatch(setRequestDate(getReports(moment())));
+  }, []);
+
+  useEffect(() => {
+    setLoader(true);
+    if (!requestDates) {
+      return;
     }
-    const dispatch = useDispatch();
-    const profileInfo = useSelector(getProfileInfo)
-    const requestDates = useSelector(getRequestDates)
-    const [value, setValue] = useState(moment())
-    const [reports, setReports] = useState([]);
-    const [totalHours, setTotalHours] = useState(0);
-    const [loader, setLoader] = useState(true)
+    apiRequest(
+      `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem(
+        "cardId"
+      )}`
+    ).then((reports) => {
+      let spendTime = 0;
+      for (const report of reports) {
+        report.task.map((task) => {
+          if (task.hours_spent) {
+            spendTime += Number(task.hours_spent);
+          }
+        });
+      }
+      setTotalHours(spendTime);
+      setReports(reports);
+      setLoader(false);
+    });
+  }, [requestDates]);
 
-    function setValueHandler (value) {
-        setValue(value)
-    }
-
-    useEffect(() => {
-        dispatch(setRequestDate(getReports(moment())))
-    },[]);
-
-    useEffect( () => {
-        setLoader(true)
-        if (!requestDates) {
-            return
-        }
-        apiRequest(`/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem('cardId')}`)
-            .then((reports) => {
-                let spendTime = 0;
-                for (const report of reports) {
-                    report.task.map((task) => {
-                        if(task.hours_spent) {
-                            spendTime += Number(task.hours_spent)
-                        }
-                    })
-                }
-                setTotalHours(spendTime);
-                setReports(reports)
-                setLoader(false)
-            })
-    }, [requestDates]);
-
-    return (
-        <div className='profile__calendar'>
-            <ProfileHeader/>
-            <Navigation />
-            <div className='container'>
-                <ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'},{name: 'Ваша отчетность', link: '/profile/calendar'}]} />
-                <h2 className='summary__title'>Ваши отчеты</h2>
-                <div className='summary__info'>
-                    <div className='summary__person'>
-                        <img src={urlForLocal(profileInfo.photo)} className='summary__avatar'  alt='avatar'/>
-                        <p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p>
-                    </div>
-                    <Link to='/report'>
-                        <button className="calendar__btn" onClick={() => {
-                            dispatch(setReportDate(''))
-                        }}>Заполнить отчет за день</button>
-                    </Link>
-                </div>
-                {loader ?
-                    <div className='loader__wrapper'>
-                        <Loader height={80}  width={80} />
-                    </div>
-                    :
-                    <div className='row calendar__wrapper'>
-                        <div className='col-12 col-xl-12'>
-                            <ProfileCalendarComponent setValueHandler={setValueHandler} value={value} reports={reports} totalHours={totalHours} />
-                        </div>
-                    </div>
-                }
-            </div>
-            <Footer />
+  return (
+    <div className="profile__calendar">
+      <ProfileHeader />
+      <Navigation />
+      <div className="container">
+        <ProfileBreadcrumbs
+          links={[
+            { name: "Главная", link: "/profile" },
+            { name: "Ваша отчетность", link: "/profile/calendar" },
+          ]}
+        />
+        <h2 className="summary__title">Ваши отчеты</h2>
+        <div className="summary__info">
+          <div className="summary__person">
+            <img
+              src={urlForLocal(profileInfo.photo)}
+              className="summary__avatar"
+              alt="avatar"
+            />
+            <p className="summary__name">
+              {profileInfo.fio}, {profileInfo.specification} разработчик
+            </p>
+          </div>
+          <Link to="/report">
+            <button
+              className="calendar__btn"
+              onClick={() => {
+                dispatch(setReportDate(""));
+              }}
+            >
+              Заполнить отчет за день
+            </button>
+          </Link>
         </div>
-    )
+        {loader ? (
+          <div className="loader__wrapper">
+            <Loader height={80} width={80} />
+          </div>
+        ) : (
+          <div className="row calendar__wrapper">
+            <div className="col-12 col-xl-12">
+              <ProfileCalendarComponent
+                setValueHandler={setValueHandler}
+                value={value}
+                reports={reports}
+                totalHours={totalHours}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+      <Footer />
+    </div>
+  );
 };

src/components/ProfileCalendar/ProfileCalendarComponent.js

@@ -1,141 +1,181 @@
-import React, { useState, useEffect } from 'react'
-import arrow from '../../images/arrowCalendar.png'
-import rectangle from '../../images/rectangle__calendar.png'
-import calendarIcon from '../../images/calendar_icon.png'
-import moment from 'moment'
-import {calendarHelper, currentMonthAndDay, getReports, hourOfNum} from '../Calendar/calendarHelper'
-import {setReportDate, setRequestDate} from '../../redux/reportSlice';
-import {useDispatch} from "react-redux";
-import {Link} from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import arrow from "../../images/arrowCalendar.png";
+import rectangle from "../../images/rectangle__calendar.png";
+import calendarIcon from "../../images/calendar_icon.png";
+import moment from "moment";
+import {
+  calendarHelper,
+  currentMonthAndDay,
+  getReports,
+  hourOfNum,
+} from "../Calendar/calendarHelper";
+import {
+  setReportDate,
+  setRequestDate,
+  setSendRequest,
+} from "../../redux/reportSlice";
+import { useDispatch } from "react-redux";
+import { Link } from "react-router-dom";
+import ShortReport from "../ShortReport/ShortReport";
 
-import 'moment/locale/ru'
-import './../Calendar/calendarComponent.scss'
+import "moment/locale/ru";
+import "./../Calendar/calendarComponent.scss";
 
-export const ProfileCalendarComponent = React.memo(({value, setValueHandler, reports, totalHours}) => {
+export const ProfileCalendarComponent = React.memo(
+  ({ value, setValueHandler, reports, totalHours }) => {
     const dispatch = useDispatch();
-    const [currentDay] = useState(moment())
-    const [calendar, setCalendar] = useState([])
-    const [month, setMonth] = useState('');
+    const [currentDay] = useState(moment());
+    const [calendar, setCalendar] = useState([]);
+    const [month, setMonth] = useState("");
+    const [shortReport, setShortReport] = useState(false);
+    const [dayTest, setDayTest] = useState("");
 
     useEffect(() => {
-        setCalendar(calendarHelper(value))
-    }, [value])
+      setCalendar(calendarHelper(value));
+    }, [value]);
 
     useEffect(() => {
-        setMonth(value.format('MMMM'))
+      setMonth(value.format("MMMM"));
     }, [month]);
 
     function isToday(day) {
-        return day.isSame(new Date(), 'day')
+      return day.isSame(new Date(), "day");
     }
 
     function correctDay(day) {
-        if (day < 10) {
-            return `0${day}`
-        } return day
+      if (day < 10) {
+        return `0${day}`;
+      }
+      return day;
     }
 
     function dayStyles(day) {
-        if (currentDay < day) return `block`
-        for (const date of reports) {
-            if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) {
-                return `before`
-            }
+      if (currentDay < day) return `block`;
+      for (const date of reports) {
+        if (
+          `${new Date(day).getFullYear()}-${correctDay(
+            new Date(day).getMonth() + 1
+          )}-${correctDay(new Date(day).getDate())}` === date.created_at
+        ) {
+          return `before`;
         }
-        if (day.day() === 6 || day.day() === 0) return `selected`
-        if (isToday(day)) return `today`
-        return 'pass'
+      }
+      if (day.day() === 6 || day.day() === 0) return `selected`;
+      if (isToday(day)) return `today`;
+      return "pass";
     }
 
     function correctRoute(day) {
-        for (const date of reports) {
-            if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.created_at) {
-                return `../view`
-            }
+      for (const date of reports) {
+        if (
+          `${new Date(day).getFullYear()}-${correctDay(
+            new Date(day).getMonth() + 1
+          )}-${correctDay(new Date(day).getDate())}` === date.created_at
+        ) {
+          return `../view/${day}`;
         }
-        return '../../report'
+      }
+      return "../../report";
     }
 
     function prevMonth() {
-        return value.clone().subtract(1, 'month')
+      return value.clone().subtract(1, "month");
     }
 
     function nextMonth() {
-        return value.clone().add(1, 'month');
+      return value.clone().add(1, "month");
     }
 
     return (
-        <div className='calendar-component'>
-            <div className='calendar-component__header'>
-                <div className='calendar-component__header-info'>
-                    <h3>Мои отчеты:</h3>
-                    <p className='calendar__hours'>
-                        {month}&nbsp;<span>{totalHours} {hourOfNum(totalHours)} </span>
-                    </p>
-                </div>
-                <div className='calendar-component__header-switcher'>
-                    <div className='calendar-component__header-box' onClick={() => {
-                        setValueHandler(prevMonth())
-                        dispatch(setRequestDate(getReports(prevMonth())))
-                    }}>
-                        <img src={arrow} alt='' />
-                        <span>
-                            {prevMonth().format('MMMM')}
-                        </span>
-                    </div>
-                    <div className='calendar-component__header-box'>
-                        <span>{value.format('YYYY')}</span>
-                    </div>
-                    <div className='calendar-component__header-box' onClick={() => {
-                        setValueHandler(nextMonth())
-                        dispatch(setRequestDate(getReports(nextMonth())))
-
-                    }}>
-                        <span>
-                            {nextMonth().format('MMMM')}
-                        </span>
-                        <img src={arrow} alt='' />
-                    </div>
-                </div>
+      <div className="calendar-component">
+        <div className="calendar-component__header">
+          <div className="calendar-component__header-info">
+            <h3>Мои отчеты:</h3>
+            <p className="calendar__hours">
+              {month}&nbsp;
+              <span>
+                {totalHours} {hourOfNum(totalHours)}{" "}
+              </span>
+            </p>
+          </div>
+          <div className="calendar-component__header-switcher">
+            <div
+              className="calendar-component__header-box"
+              onClick={() => {
+                setValueHandler(prevMonth());
+                dispatch(setRequestDate(getReports(prevMonth())));
+              }}
+            >
+              <img src={arrow} alt="" />
+              <span>{prevMonth().format("MMMM")}</span>
             </div>
-
-            <div className='calendar-component__rectangle'>
-                <img src={rectangle} alt='' />
+            <div className="calendar-component__header-box">
+              <span>{value.format("YYYY")}</span>
             </div>
-
-            <div className='calendar-component__body'>
-                <div>
-                    <p>Пн</p>
-                    <p>Вт</p>
-                    <p>Ср</p>
-                    <p>Чт</p>
-                    <p>Пт</p>
-                    <p>Сб</p>
-                    <p>Вс</p>
-                </div>
-
-                <div className='calendar-component__form'>
-                    {calendar.map((week) =>
-                        week.map((day) => (
-                                <button
-                                    onClick={() => {
-                                        dispatch(setReportDate(day))
-                                    }}
-                                    key={day}
-                                    className={dayStyles(day)}
-                                    name={day.format('dddd')}
-                                    id='btn'
-                                >
-                                    <Link to={correctRoute(day)}>
-                                        <img className={'calendar__icon'} src={calendarIcon} alt='' />
-                                        {currentMonthAndDay(day)}
-                                    </Link>
-                                </button>
-                        ))
-                    )}
-                </div>
+            <div
+              className="calendar-component__header-box"
+              onClick={() => {
+                setValueHandler(nextMonth());
+                dispatch(setRequestDate(getReports(nextMonth())));
+              }}
+            >
+              <span>{nextMonth().format("MMMM")}</span>
+              <img src={arrow} alt="" />
             </div>
+          </div>
         </div>
-    )
-})
 
+        <div className="calendar-component__rectangle">
+          <img src={rectangle} alt="" />
+        </div>
+
+        <div className="calendar-component__body">
+          <div>
+            <p>Пн</p>
+            <p>Вт</p>
+            <p>Ср</p>
+            <p>Чт</p>
+            <p>Пт</p>
+            <p>Сб</p>
+            <p>Вс</p>
+          </div>
+
+          <div className="calendar-component__form">
+            {calendar.map((week) =>
+              week.map((day) => (
+                <button
+                  onClick={() => {
+                    dispatch(setReportDate(day));
+                    dispatch(setSendRequest(true));
+                    setShortReport(true);
+                    setDayTest(day);
+                  }}
+                  key={day}
+                  className={dayStyles(day)}
+                  name={day.format("dddd")}
+                  id="btn"
+                >
+                  {/* <Link to={correctRoute(day)}>
+                    <img
+                      className={"calendar__icon"}
+                      src={calendarIcon}
+                      alt=""
+                    />
+                    {currentMonthAndDay(day)}
+                  </Link> */}
+
+                  <img className={"calendar__icon"} src={calendarIcon} alt="" />
+                  {currentMonthAndDay(day)}
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+        <Link to={correctRoute(dayTest)}>
+          <button className="calendar__btn">Посмотреть подробнее</button>
+        </Link>
+        {shortReport && <ShortReport />}
+      </div>
+    );
+  }
+);

src/components/ProfileCalendar/profileCalendar.scss

@@ -1,5 +1,5 @@
 .profile__calendar {
-  background: #F1F1F1;
+  background: #f1f1f1;
   height: 100%;
   min-height: 100vh;
   font-family: "LabGrotesque", sans-serif;
@@ -32,7 +32,6 @@
     }
   }
 
-
   .calendar__wrapper {
     min-height: 719px;
 

src/components/ShortReport/ShortReport.jsx

@@ -0,0 +1,167 @@
+import React, { useEffect, useState } from "react";
+
+import { apiRequest } from "../../api/request";
+import {
+  getCorrectDate,
+  getCreatedDate,
+  hourOfNum,
+} from "../../components/Calendar/calendarHelper";
+import {
+  getReportDate,
+  getSendRequest,
+  setSendRequest,
+} from "../../redux/reportSlice";
+import { useDispatch, useSelector } from "react-redux";
+
+import "./shortReport.scss";
+
+export const ShortReport = ({}) => {
+  const reportDate = useSelector(getReportDate);
+
+  const sendTest = useSelector(getSendRequest);
+  const dispatch = useDispatch();
+
+  const [taskText, setTaskText] = useState([]);
+  const [difficulties, setDifficulties] = useState([]);
+  const [tomorrowTask, setTomorrowTask] = useState([]);
+  const [totalHours, setTotalHours] = useState(0);
+  const [loader, setLoader] = useState(false);
+  const [reportDay] = useState(new Date(getCreatedDate(reportDate)));
+
+  function getReportFromDate(day) {
+    setLoader(true);
+    setTaskText([]);
+    setDifficulties([]);
+    setTomorrowTask([]);
+
+    apiRequest(
+      `reports/find-by-date?user_card_id=${localStorage.getItem(
+        "cardId"
+      )}&date=${day}`
+    ).then((res) => {
+      console.log(res);
+      let spendTime = 0;
+      for (const item of res) {
+        if (item.difficulties) {
+          setDifficulties((prevArray) => [...prevArray, item.difficulties]);
+        }
+        if (item.tomorrow) {
+          setTomorrowTask((prevArray) => [...prevArray, item.tomorrow]);
+        }
+        item.task.map((task) => {
+          const taskInfo = {
+            hours: task.hours_spent,
+            task: task.task,
+            id: task.id,
+          };
+          if (task.hours_spent) {
+            spendTime += Number(task.hours_spent);
+          }
+          setTaskText((prevArray) => [...prevArray, taskInfo]);
+        });
+      }
+
+      setTotalHours(spendTime);
+      setLoader(false);
+    });
+  }
+
+  if (sendTest) {
+    dispatch(setSendRequest(false));
+    getReportFromDate(getCreatedDate(reportDate));
+  }
+
+  return (
+    <div>
+      <div className="viewReport__info">
+        <h2 className="viewReport__title">
+          Ваши отчеты - <span>просмотр отчета за день</span>
+        </h2>
+        <div className="viewReport__bar">
+          <h3 className="viewReport__bar__date">
+            {getCorrectDate(reportDate)}
+          </h3>
+          <p className="viewReport__bar__hours">
+            Вами потрачено на работу :{" "}
+            <span>
+              {totalHours} {hourOfNum(totalHours)}
+            </span>
+          </p>
+        </div>
+      </div>
+      {Boolean(taskText.length) && (
+        <div className="viewReport__content">
+          <div className="table__container">
+            <table className="viewReport__done">
+              <thead>
+                <tr>
+                  <th>
+                    <p>Какие задачи были выполнены?</p>
+                  </th>
+                  <th>
+                    <p>Время</p>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {taskText.length &&
+                  taskText.map((task, index) => {
+                    return (
+                      <tr key={task.id}>
+                        <td>
+                          <p>
+                            {index + 1}. {task.task}
+                          </p>
+                        </td>
+                        <td>
+                          <div className="viewReport__done__hours__item">
+                            <span>{task.hours}</span>
+                            <p className="hours">
+                              {hourOfNum(task.hours)} на задачу
+                            </p>
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                <tr>
+                  <td></td>
+                  <td>
+                    <span>
+                      Всего: {totalHours} {hourOfNum(totalHours)}
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          {Boolean(difficulties.length) && (
+            <div className="viewReport__item">
+              <h3>Какие сложности возникли?</h3>
+              {difficulties.map((item, index) => {
+                return <p key={index}>{item}</p>;
+              })}
+            </div>
+          )}
+          {Boolean(tomorrowTask.length) && (
+            <div className="viewReport__item">
+              <h3>Что планируется сделать завтра?</h3>
+              {tomorrowTask.map((item, index) => {
+                return <p key={index}>{item}</p>;
+              })}
+            </div>
+          )}
+        </div>
+      )}
+      {!Boolean(taskText.length) && !loader && (
+        <div className="viewReport__noTask">
+          <p>
+            В этот день вы <span>не заполняли</span> отчет
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ShortReport;

src/pages/ViewReport/ViewReport.js

@@ -1,175 +1,219 @@
-import React, {useEffect, useState} from 'react'
-import {Link, Navigate} from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import { Link, Navigate } from "react-router-dom";
 
-import {useSelector} from "react-redux";
-import {getReportDate} from "../../redux/reportSlice";
+import { useSelector } from "react-redux";
+import { getReportDate } from "../../redux/reportSlice";
 
-import {Loader} from "../../components/Loader/Loader"
-import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
-import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
-import {Footer} from "../../components/Footer/Footer";
+import { Loader } from "../../components/Loader/Loader";
+import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
+import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { Footer } from "../../components/Footer/Footer";
 
-import {apiRequest} from "../../api/request";
-import {getCorrectDate, getCreatedDate, hourOfNum} from '../../components/Calendar/calendarHelper'
+import { apiRequest } from "../../api/request";
+import {
+  getCorrectDate,
+  getCreatedDate,
+  hourOfNum,
+} from "../../components/Calendar/calendarHelper";
 
 import arrow from "../../images/right-arrow.png";
 import arrowSwitchDate from "../../images/arrowViewReport.png";
 
-import './viewReport.scss'
-import { Navigation } from '../../components/Navigation/Navigation';
+import "./viewReport.scss";
+import { Navigation } from "../../components/Navigation/Navigation";
 
 export const ViewReport = () => {
-    if(localStorage.getItem('role_status') === '18') {
-        return <Navigate to="/profile" replace/>
-    }
-    const reportDate = useSelector(getReportDate);
+  if (localStorage.getItem("role_status") === "18") {
+    return <Navigate to="/profile" replace />;
+  }
+  const reportDate = useSelector(getReportDate);
 
-    const [taskText, setTaskText] = useState([]);
-    const [difficulties, setDifficulties] = useState([]);
-    const [tomorrowTask, setTomorrowTask] = useState([]);
-    const [totalHours, setTotalHours] = useState(0);
-    const [reportDay] = useState(new Date (getCreatedDate(reportDate)));
-    const [currentDay] = useState(new Date ());
-    const [loader, setLoader] = useState(false);
+  const [taskText, setTaskText] = useState([]);
+  const [difficulties, setDifficulties] = useState([]);
+  const [tomorrowTask, setTomorrowTask] = useState([]);
+  const [totalHours, setTotalHours] = useState(0);
+  const [reportDay] = useState(new Date(getCreatedDate(reportDate)));
+  const [currentDay] = useState(new Date());
+  const [loader, setLoader] = useState(false);
 
-    function getReportFromDate(day) {
-        setLoader(true);
-        setTaskText([]);
-        setDifficulties([]);
-        setTomorrowTask([]);
-        apiRequest(`reports/find-by-date?user_card_id=${localStorage.getItem('cardId')}&date=${day}`)
-            .then(res => {
-                let spendTime = 0;
-                for (const item of res) {
-                    if(item.difficulties) {
-                        setDifficulties(prevArray => [...prevArray, item.difficulties])
-                    }
-                    if(item.tomorrow) {
-                        setTomorrowTask(prevArray => [...prevArray, item.tomorrow])
-                    }
-                    item.task.map((task) => {
-                        const taskInfo = {
-                            hours: task.hours_spent,
-                            task: task.task,
-                            id: task.id
-                        };
-                        if(task.hours_spent) {
-                            spendTime += Number(task.hours_spent)
-                        }
-                        setTaskText(prevArray => [...prevArray, taskInfo])
-                    })
-                }
-                setTotalHours(spendTime);
-                setLoader(false)
-            })
-    }
+  function getReportFromDate(day) {
+    setLoader(true);
+    setTaskText([]);
+    setDifficulties([]);
+    setTomorrowTask([]);
+    apiRequest(
+      `reports/find-by-date?user_card_id=${localStorage.getItem(
+        "cardId"
+      )}&date=${day}`
+    ).then((res) => {
+      console.log(res);
+      let spendTime = 0;
+      for (const item of res) {
+        if (item.difficulties) {
+          setDifficulties((prevArray) => [...prevArray, item.difficulties]);
+        }
+        if (item.tomorrow) {
+          setTomorrowTask((prevArray) => [...prevArray, item.tomorrow]);
+        }
+        item.task.map((task) => {
+          const taskInfo = {
+            hours: task.hours_spent,
+            task: task.task,
+            id: task.id,
+          };
+          if (task.hours_spent) {
+            spendTime += Number(task.hours_spent);
+          }
+          setTaskText((prevArray) => [...prevArray, taskInfo]);
+        });
+      }
+      setTotalHours(spendTime);
+      setLoader(false);
+    });
+  }
 
-    function nextDay() {
-        reportDay.setDate(reportDay.getDate() + 1);
-        getReportFromDate(getCreatedDate(reportDay))
-    }
+  function nextDay() {
+    reportDay.setDate(reportDay.getDate() + 1);
+    getReportFromDate(getCreatedDate(reportDay));
+  }
 
-    function previousDay() {
-        reportDay.setDate(reportDay.getDate() - 1);
-        getReportFromDate(getCreatedDate(reportDay))
-    }
+  function previousDay() {
+    reportDay.setDate(reportDay.getDate() - 1);
+    getReportFromDate(getCreatedDate(reportDay));
+  }
 
-    useEffect(() => {
-        getReportFromDate(getCreatedDate(reportDate))
-    }, []);
-    return (
-        <div className='viewReport'>
-            <ProfileHeader/>
-            <Navigation />
-            <div className='container'>
-                <div className='viewReport__info'>
-                    <ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'},
-                        {name: 'Ваша отчетность', link: '/profile/calendar'},
-                        {name: 'Просмотр отчета за день', link: '/profile/view'}]}
-                    />
-                    <h2 className='viewReport__title'>Ваши отчеты - <span>просмотр отчета за день</span></h2>
-                    <Link className='viewReport__back' to={`/profile/calendar`}>
-                        <img src={arrow} alt='arrow'/><p>Вернуться</p>
-                    </Link>
-                    <div className='viewReport__bar'>
-                        <h3 className='viewReport__bar__date'>{getCorrectDate(reportDay)}</h3>
-                        <p className='viewReport__bar__hours'>Вами потрачено на работу : <span>{totalHours} {hourOfNum(totalHours)}</span></p>
-                        {/*<div className='viewReport__bar__progressBar'>*/}
-                        {/*    <span></span>*/}
-                        {/*</div>*/}
-                        {/*<p className='viewReport__bar__total'>122 часа из 160</p>*/}
-                    </div>
-                </div>
-                <div className='viewReport__switchDate'>
-                    <div className='viewReport__switchDate__prev switchDate' onClick={() => previousDay()}>
-                        <img src={arrowSwitchDate} alt='arrow'/>
-                    </div>
-                    <p>{getCorrectDate(reportDay)}</p>
-                    <div className={`viewReport__switchDate__next switchDate ${getCreatedDate(currentDay) === getCreatedDate(reportDay) ? 'disable' : ''}`} onClick={() => nextDay()}>
-                        <img src={arrowSwitchDate} alt='arrow'/>
-                    </div>
-                </div>
-                {loader &&
-                    <Loader width={75} height={75}/>
-                }
-                {Boolean(taskText.length) &&
-                    <div className='viewReport__content'>
-                        <div className='table__container'>
-                            <table className='viewReport__done'>
-                                <thead>
-                                <tr>
-                                    <th><p>Какие задачи были выполнены?</p></th>
-                                    <th><p>Время</p></th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                {taskText.length && taskText.map((task, index) => {
-                                    return <tr key={task.id}>
-                                                <td>
-                                                    <p>{index + 1}. {task.task}</p>
-                                                </td>
-                                                <td>
-                                                    <div className='viewReport__done__hours__item'>
-                                                        <span>{task.hours}</span>
-                                                        <p className='hours'>{hourOfNum(task.hours)} на задачу</p>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                })}
-                                <tr>
-                                    <td></td>
-                                    <td><span>Всего: {totalHours} {hourOfNum(totalHours)}</span></td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                        {Boolean(difficulties.length) &&
-                            <div className='viewReport__item'>
-                                <h3>Какие сложности возникли?</h3>
-                                {difficulties.map((item, index) => {
-                                        return <p key={index}>{item}</p>
-                                    }
-                                )}
-                            </div>
-                        }
-                        {Boolean(tomorrowTask.length) &&
-                            <div className='viewReport__item'>
-                                <h3>Что планируется сделать завтра?</h3>
-                                {tomorrowTask.map((item, index) => {
-                                        return <p key={index}>{item}</p>
-                                    }
-                                )}
-                            </div>
-                        }
-                    </div>
-                }
-                {!Boolean(taskText.length) && !loader &&
-                    <div className='viewReport__noTask'>
-                        <p>В этот день вы <span>не заполняли</span> отчет</p>
-                    </div>
-                }
-                <Footer />
-            </div>
+  useEffect(() => {
+    getReportFromDate(getCreatedDate(reportDate));
+  }, []);
+  return (
+    <div className="viewReport">
+      <ProfileHeader />
+      <Navigation />
+      <div className="container">
+        <div className="viewReport__info">
+          <ProfileBreadcrumbs
+            links={[
+              { name: "Главная", link: "/profile" },
+              { name: "Ваша отчетность", link: "/profile/calendar" },
+              { name: "Просмотр отчета за день", link: "/profile/view" },
+            ]}
+          />
+          <h2 className="viewReport__title">
+            Ваши отчеты - <span>просмотр отчета за день</span>
+          </h2>
+          <Link className="viewReport__back" to={`/profile/calendar`}>
+            <img src={arrow} alt="arrow" />
+            <p>Вернуться</p>
+          </Link>
+          <div className="viewReport__bar">
+            <h3 className="viewReport__bar__date">
+              {getCorrectDate(reportDay)}
+            </h3>
+            <p className="viewReport__bar__hours">
+              Вами потрачено на работу :{" "}
+              <span>
+                {totalHours} {hourOfNum(totalHours)}
+              </span>
+            </p>
+            {/*<div className='viewReport__bar__progressBar'>*/}
+            {/*    <span></span>*/}
+            {/*</div>*/}
+            {/*<p className='viewReport__bar__total'>122 часа из 160</p>*/}
+          </div>
         </div>
-    )
+        <div className="viewReport__switchDate">
+          <div
+            className="viewReport__switchDate__prev switchDate"
+            onClick={() => previousDay()}
+          >
+            <img src={arrowSwitchDate} alt="arrow" />
+          </div>
+          <p>{getCorrectDate(reportDay)}</p>
+          <div
+            className={`viewReport__switchDate__next switchDate ${
+              getCreatedDate(currentDay) === getCreatedDate(reportDay)
+                ? "disable"
+                : ""
+            }`}
+            onClick={() => nextDay()}
+          >
+            <img src={arrowSwitchDate} alt="arrow" />
+          </div>
+        </div>
+        {loader && <Loader width={75} height={75} />}
+        {Boolean(taskText.length) && (
+          <div className="viewReport__content">
+            <div className="table__container">
+              <table className="viewReport__done">
+                <thead>
+                  <tr>
+                    <th>
+                      <p>Какие задачи были выполнены?</p>
+                    </th>
+                    <th>
+                      <p>Время</p>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {taskText.length &&
+                    taskText.map((task, index) => {
+                      return (
+                        <tr key={task.id}>
+                          <td>
+                            <p>
+                              {index + 1}. {task.task}
+                            </p>
+                          </td>
+                          <td>
+                            <div className="viewReport__done__hours__item">
+                              <span>{task.hours}</span>
+                              <p className="hours">
+                                {hourOfNum(task.hours)} на задачу
+                              </p>
+                            </div>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  <tr>
+                    <td></td>
+                    <td>
+                      <span>
+                        Всего: {totalHours} {hourOfNum(totalHours)}
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            {Boolean(difficulties.length) && (
+              <div className="viewReport__item">
+                <h3>Какие сложности возникли?</h3>
+                {difficulties.map((item, index) => {
+                  return <p key={index}>{item}</p>;
+                })}
+              </div>
+            )}
+            {Boolean(tomorrowTask.length) && (
+              <div className="viewReport__item">
+                <h3>Что планируется сделать завтра?</h3>
+                {tomorrowTask.map((item, index) => {
+                  return <p key={index}>{item}</p>;
+                })}
+              </div>
+            )}
+          </div>
+        )}
+        {!Boolean(taskText.length) && !loader && (
+          <div className="viewReport__noTask">
+            <p>
+              В этот день вы <span>не заполняли</span> отчет
+            </p>
+          </div>
+        )}
+        <Footer />
+      </div>
+    </div>
+  );
 };

src/redux/reportSlice.js

@@ -1,13 +1,14 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice } from "@reduxjs/toolkit";
 
 const initialState = {
-    dateSelected: '',
-    reportDate: '',
-    requestDates: ''
+  dateSelected: "",
+  reportDate: "",
+  requestDates: "",
+  sendRequest: "",
 };
 
 export const reportSlice = createSlice({
-  name: 'report',
+  name: "report",
   initialState,
   reducers: {
     dateSelected: (state, action) => {
@@ -17,17 +18,23 @@ export const reportSlice = createSlice({
       state.reportDate = action.payload;
     },
     setRequestDate: (state, action) => {
-      state.requestDates = action.payload
-    }
+      state.requestDates = action.payload;
+    },
+    setSendRequest: (state, action) => {
+      state.sendRequest = action.payload;
+    },
   },
 });
 
-export const { dateSelected, setReportDate, setRequestDate} = reportSlice.actions;
+export const { dateSelected, setReportDate, setRequestDate, setSendRequest } =
+  reportSlice.actions;
 
 export const selectDate = (state) => state.report.dateSelected;
 
 export const getReportDate = (state) => state.report.reportDate;
 
-export const getRequestDates = (state) => state.report.requestDates
+export const getRequestDates = (state) => state.report.requestDates;
+
+export const getSendRequest = (state) => state.report.sendRequest;
 
 export default reportSlice.reducer;