Fixed switch in back

src/components/Calendar/calendarHelper.js

@@ -1,19 +1,23 @@
-import moment from 'moment';
+import moment from "moment";
-import 'moment/locale/ru';
+import "moment/locale/ru";
 
 export function calendarHelper(value) {
-  const startDay = value.clone().startOf('month').startOf('week').startOf('day');
+  const startDay = value
-  const endDay = value.clone().endOf('month').endOf('week');
+    .clone()
+    .startOf("month")
+    .startOf("week")
+    .startOf("day");
+  const endDay = value.clone().endOf("month").endOf("week");
 
-  const day = startDay.clone().subtract(1, 'day');
+  const day = startDay.clone().subtract(1, "day");
 
   const calendar = [];
 
-  while (day.isBefore(endDay, 'day')) {
+  while (day.isBefore(endDay, "day")) {
     calendar.push(
       Array(1)
         .fill(0)
-        .map(() => day.add(1, 'day').clone())
+        .map(() => day.add(1, "day").clone())
     );
   }
 
@@ -21,48 +25,84 @@ export function calendarHelper(value) {
 }
 
 export function getReports(value) {
-  const startDay = value.clone().startOf('month').startOf('week').startOf('day');
+  const startDay = value
-  const reportsStart = `${new Date(startDay).getFullYear()}-${new Date(startDay).getMonth() + 1}-${new Date(startDay).getDate()}`
+    .clone()
-  const endDay = value.clone().endOf('month').endOf('week');
+    .startOf("month")
-  const reportsEnd = `${new Date(endDay).getFullYear()}-${new Date(endDay).getMonth() + 1}-${new Date(endDay).getDate()}`
+    .startOf("week")
-  const getReports = `fromDate=${reportsStart}&toDate=${reportsEnd}`
+    .startOf("day");
+  const reportsStart = `${new Date(startDay).getFullYear()}-${
+    new Date(startDay).getMonth() + 1
+  }-${new Date(startDay).getDate()}`;
+  const endDay = value.clone().endOf("month").endOf("week");
+  const reportsEnd = `${new Date(endDay).getFullYear()}-${
+    new Date(endDay).getMonth() + 1
+  }-${new Date(endDay).getDate()}`;
+  const getReports = `fromDate=${reportsStart}&toDate=${reportsEnd}`;
 
   return getReports;
 }
 
 export function getCreatedDate(day) {
   if (day) {
-    return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}`
+    return `${new Date(day).getFullYear()}-${correctDay(
+      new Date(day).getMonth() + 1
+    )}-${correctDay(new Date(day).getDate())}`;
   } else {
     const date = new Date();
-    const dd = String(date.getDate()).padStart(2, '0');
+    const dd = String(date.getDate()).padStart(2, "0");
-    const mm = String(date.getMonth() + 1).padStart(2, '0');
+    const mm = String(date.getMonth() + 1).padStart(2, "0");
     const yyyy = date.getFullYear();
-    return `${yyyy}-${mm}-${dd}`
+    return `${yyyy}-${mm}-${dd}`;
   }
 }
 
+export function correctDay(day) {
+  if (day < 10) {
+    return `0${day}`;
+  }
+  return day;
+}
+
 export function currentMonth() {
-  const currentMonth = moment().format('MMMM');
+  const currentMonth = moment().format("MMMM");
 
   return currentMonth.charAt(0).toUpperCase() + currentMonth.slice(1);
 }
 
 export function currentMonthAndDay(day) {
-  return day.format('D MMMM');
+  return day.format("D MMMM");
 }
 
 export function getCorrectDate(day) {
-  const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
+  const months = [
-  return `${new Date(day).getDate()} ${months[new Date(day).getMonth()]} ${new Date(day).getFullYear()} года`
+    "января",
-};
+    "февраля",
+    "марта",
+    "апреля",
+    "мая",
+    "июня",
+    "июля",
+    "августа",
+    "сентября",
+    "октября",
+    "ноября",
+    "декабря",
+  ];
+  return `${new Date(day).getDate()} ${
+    months[new Date(day).getMonth()]
+  } ${new Date(day).getFullYear()} года`;
+}
 
 export function currentMonthAndDayReportPage() {
-  return moment().format('D MMMM');
+  return moment().format("D MMMM");
 }
 
 export function hourOfNum(number) {
-  const hours = [' час', ' часа', ' часов'];
+  const hours = [" час", " часа", " часов"];
   const cases = [2, 0, 1, 1, 1, 2];
-  return hours[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]];
+  return hours[
+    number % 100 > 4 && number % 100 < 20
+      ? 2
+      : cases[number % 10 < 5 ? number % 10 : 5]
+  ];
 }

src/components/ShortReport/ShortReport.jsx

@@ -27,7 +27,7 @@ export const ShortReport = ({}) => {
   const [tomorrowTask, setTomorrowTask] = useState([]);
   const [totalHours, setTotalHours] = useState(0);
   const [loader, setLoader] = useState(false);
-  const [dateTest, setDateTest] = useState("");
+  const [dateCreate, setDateCreate] = useState("");
 
   function getReportFromDate(day) {
     setLoader(true);
@@ -41,7 +41,7 @@ export const ShortReport = ({}) => {
     ).then((res) => {
       let spendTime = 0;
       for (const item of res) {
-        setDateTest(item.created_at);
+        setDateCreate(item.created_at);
         if (item.difficulties) {
           setDifficulties((prevArray) => [...prevArray, item.difficulties]);
         }
@@ -78,7 +78,9 @@ export const ShortReport = ({}) => {
           <h2 className="viewReport__title">
             Ваши отчеты - <span>просмотр отчета за день</span>
           </h2>
-          <Link to={`../view/${dateTest}`}>Посмотреть подробнее об отчете</Link>
+          <Link to={`../view/${dateCreate}`}>
+            Посмотреть подробнее об отчете
+          </Link>
         </div>
 
         <div className="viewReport__bar">

src/pages/ViewReport/ViewReport.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Link, Navigate } from "react-router-dom";
+import { Link, Navigate, useParams } from "react-router-dom";
 
 import { useSelector } from "react-redux";
 import { getReportDate } from "../../redux/reportSlice";
@@ -26,13 +26,16 @@ export const ViewReport = () => {
   if (localStorage.getItem("role_status") === "18") {
     return <Navigate to="/profile" replace />;
   }
-  const reportDate = useSelector(getReportDate);
+  const reportDate = useSelector(getReportDate); // :D
+
+  const dateReport = useParams();
+  const [testReportDay] = useState(new Date(dateReport.id));
 
   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 [reportDay] = useState(new Date(getCreatedDate(reportDate))); ///
   const [currentDay] = useState(new Date());
   const [loader, setLoader] = useState(false);
 
@@ -46,7 +49,9 @@ export const ViewReport = () => {
         "cardId"
       )}&date=${day}`
     ).then((res) => {
+      console.log(res);
       let spendTime = 0;
+
       for (const item of res) {
         if (item.difficulties) {
           setDifficulties((prevArray) => [...prevArray, item.difficulties]);
@@ -69,6 +74,7 @@ export const ViewReport = () => {
       setTotalHours(spendTime);
       setLoader(false);
     });
+    testReportDay.setDate(testReportDay.getDate() - 1);
   }
 
   function nextDay() {
@@ -77,13 +83,14 @@ export const ViewReport = () => {
   }
 
   function previousDay() {
-    reportDay.setDate(reportDay.getDate() - 1);
+    getReportFromDate(getCreatedDate(testReportDay));
-    getReportFromDate(getCreatedDate(reportDay));
   }
 
   useEffect(() => {
-    getReportFromDate(getCreatedDate(reportDate));
+    getReportFromDate(dateReport.id);
+    console.log(dateReport.id);
   }, []);
+
   return (
     <div className="viewReport">
       <ProfileHeader />
@@ -106,7 +113,7 @@ export const ViewReport = () => {
           </Link>
           <div className="viewReport__bar">
             <h3 className="viewReport__bar__date">
-              {getCorrectDate(reportDay)}
+              {getCorrectDate(dateReport.id)}
             </h3>
             <p className="viewReport__bar__hours">
               Вами потрачено на работу :{" "}
@@ -114,30 +121,36 @@ export const ViewReport = () => {
                 {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">
-          <Link></Link>
           <div
-            className="viewReport__switchDate__prev switchDate"
+            onClick={() => {
-            onClick={() => previousDay()}
+              previousDay();
+            }}
           >
-            <img src={arrowSwitchDate} alt="arrow" />
+            <Link to={`../view/${getCreatedDate(testReportDay)}`}>
+              <div className="viewReport__switchDate__prev switchDate">
+                <img src={arrowSwitchDate} alt="arrow" />
+              </div>
+            </Link>
           </div>
-          <p>{getCorrectDate(reportDay)}</p>
+
-          <div
+          <p>{getCorrectDate(dateReport.id)}</p>
-            className={`viewReport__switchDate__next switchDate ${
+
-              getCreatedDate(currentDay) === getCreatedDate(reportDay)
+          <div>
-                ? "disable"
+            <Link to={`../view/${0}`}>
-                : ""
+              <div
-            }`}
+                className={`viewReport__switchDate__next switchDate ${
-            onClick={() => nextDay()}
+                  getCreatedDate(currentDay) === getCreatedDate(reportDay)
-          >
+                    ? "disable"
-            <img src={arrowSwitchDate} alt="arrow" />
+                    : ""
+                }`}
+                onClick={() => nextDay()}
+              >
+                <img src={arrowSwitchDate} alt="arrow" />
+              </div>
+            </Link>
           </div>
         </div>
         {loader && <Loader width={75} height={75} />}