Fixed button in report

src/components/Calendar/calendarComponent.scss

@@ -158,6 +158,10 @@
       line-height: normal;
       text-align: center;
 
+      a {
+        color: black;
+      }
+
       img {
         width: 16px;
         height: 16px;

src/components/ProfileCalendar/ProfileCalendarComponent.js

@@ -65,6 +65,19 @@ export const ProfileCalendarComponent = React.memo(
       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/${day}`;
+    //     }
+    //   }
+    //   return "../../report";
+    // }
+
     function correctRoute(day) {
       for (const date of reports) {
         if (
@@ -72,7 +85,7 @@ export const ProfileCalendarComponent = React.memo(
             new Date(day).getMonth() + 1
           )}-${correctDay(new Date(day).getDate())}` === date.created_at
         ) {
-          return `../view/${day}`;
+          return;
         }
       }
       return "../../report";
@@ -146,38 +159,33 @@ export const ProfileCalendarComponent = React.memo(
                 <button
                   onClick={() => {
                     dispatch(setReportDate(day));
-                    dispatch(setSendRequest(true));
-                    setShortReport(true);
-                    setDayReport(day);
                   }}
                   key={day}
                   className={dayStyles(day)}
                   name={day.format("dddd")}
                   id="btn"
                 >
-                  {/* <Link to={correctRoute(day)}>
+                  <Link
+                    to={correctRoute(day)}
+                    onClick={() => {
+                      setShortReport(true);
+                      setDayReport(day);
+                      dispatch(setSendRequest(true));
+                    }}
+                  >
                     <img
                       className={"calendar__icon"}
                       src={calendarIcon}
                       alt=""
                     />
                     {currentMonthAndDay(day)}
-                  </Link> */}
-
-                  <img className={"calendar__icon"} src={calendarIcon} alt="" />
-                  {currentMonthAndDay(day)}
+                  </Link>
                 </button>
               ))
             )}
           </div>
         </div>
 
-        {shortReport && (
-          <Link to={correctRoute(dayReport)}>
-            <button className="calendar__btn">Посмотреть подробнее</button>
-          </Link>
-        )}
-
         {shortReport && <ShortReport />}
       </div>
     );

src/components/ShortReport/ShortReport.jsx

@@ -12,6 +12,7 @@ import {
   setSendRequest,
 } from "../../redux/reportSlice";
 import { useDispatch, useSelector } from "react-redux";
+import { Link } from "react-router-dom";
 
 import "./shortReport.scss";
 
@@ -32,7 +33,6 @@ export const ShortReport = ({}) => {
     setTaskText([]);
     setDifficulties([]);
     setTomorrowTask([]);
-
     apiRequest(
       `reports/find-by-date?user_card_id=${localStorage.getItem(
         "cardId"
@@ -72,9 +72,15 @@ export const ShortReport = ({}) => {
   return (
     <div>
       <div className="viewReport__info short-report">
+        <div className="viewReport__title-box">
           <h2 className="viewReport__title">
             Ваши отчеты - <span>просмотр отчета за день</span>
           </h2>
+          <Link to={`profile/view/${reportDate}`}>
+            Посмотреть подробнее об отчете
+          </Link>
+        </div>
+
         <div className="viewReport__bar">
           <h3 className="viewReport__bar__date">
             {getCorrectDate(reportDate)}

src/components/ShortReport/shortReport.scss

@@ -1,3 +1,15 @@
 .short-report {
   margin-bottom: 30px;
 }
+
+.viewReport {
+  &__title-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    a {
+      font-size: 16px;
+    }
+  }
+}