calendar & styling

src/components/aside/Calendar.tsx

@@ -1,61 +1,58 @@
 // Modules
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import { Calendar as ReactCalendar } from 'react-calendar';
-import { LazyLoadComponent } from 'react-lazy-load-image-component';
-import { v4 as uuiv4 } from 'uuid';
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { Calendar as ReactCalendar } from "react-calendar";
+import { LazyLoadComponent } from "react-lazy-load-image-component";
+import { v4 as uuiv4 } from "uuid";
 
 //
-import { Api } from '../../api/Api';
-import { url } from '../../url';
-import { IPostData } from '../../types/store.types';
-import Loader from '../global/Loader';
+import { Api } from "../../api/Api";
+import { url } from "../../url";
+import { IPostData } from "../../types/store.types";
+import Loader from "../global/Loader";
+import { Link } from "react-router-dom";
 
 const Calendar = () => {
   const [value, onChange] = useState(new Date());
 
   const [data, setData] = useState<any>();
-  const [popup, setPopup] = useState<boolean>(false);
-  const ref = useRef<boolean>(false);
 
   const valueMemo = useMemo(() => ({ value, onChange }), [value, onChange]);
   const dataMemo = useMemo(() => ({ data, setData }), [data, setData]);
 
   const constructDateParam = useCallback(() => {
     return `${value.getFullYear()}-${
-      value.getDate().toString().length < 2 ? '0' + value.getDate() : value.getDate()
+      value.getDate().toString().length < 2
+        ? "0" + value.getDate()
+        : value.getDate()
     }-${
       (value.getMonth() + 1).toString().length < 2
-        ? '0' + (value.getMonth() + 1)
+        ? "0" + (value.getMonth() + 1)
         : value.getMonth() + 1
     }`;
   }, [valueMemo.value]);
 
-  const api = new Api(url + `/posts`, [{ name: 'date', value: constructDateParam() }]);
+  const api = new Api(url + `/posts`, [
+    { name: "date", value: constructDateParam() },
+  ]);
   useEffect(() => {
-    if (!ref.current) {
-      ref.current = true;
-      console.log(dataMemo.data);
-      setPopup(false);
-      return;
-    }
     api.get(dataMemo.data, dataMemo.setData);
-    setPopup(true);
   }, [value]);
 
   return (
     <div className="calendar">
-      {popup ? (
-        <div className={popup ? 'calendar-popup calendar-popup-active' : 'calendar-popup'}>
+      <LazyLoadComponent useIntersectionObserver>
+        <ReactCalendar value={value} onChange={valueMemo.onChange} />
+      </LazyLoadComponent>
+      <div className={"calendar-popup"}>
         {data ? (
-            // data.map((el: any, index: number) => (
-            //   <div className="calendar-popup-item" key={uuiv4()}>
-            //     <p>{el.title}</p>
-            //   </div>
-            // ))
           data[0] ? (
-              <div className="calendar-popup-item" key={uuiv4()}>
+            <Link
+              to={`/news/${data[0].id}`}
+              className="calendar-popup-item"
+              key={uuiv4()}
+            >
               <p>{data[0].title}</p>
-              </div>
+            </Link>
           ) : (
             <div className="calendar-popup-item" key={uuiv4()}>
               <p>Нет событий</p>
@@ -65,10 +62,6 @@ const Calendar = () => {
           <Loader />
         )}
       </div>
-      ) : null}
-      <LazyLoadComponent useIntersectionObserver>
-        <ReactCalendar value={value} onChange={valueMemo.onChange} />
-      </LazyLoadComponent>
     </div>
   );
 };

src/components/global/CustomNewsScroll.tsx

@@ -1,5 +1,4 @@
 // Modules
-import { SetStateAction } from "react";
 import { v4 as uuidv4 } from "uuid";
 
 // Components
@@ -8,6 +7,7 @@ import Pagination from "./Pagination";
 
 // Types
 import { INewPostsData } from "../../types/posts.types";
+import Loader from "./Loader";
 
 interface IProps {
   data: INewPostsData;
@@ -27,11 +27,12 @@ const CustomNewsScroll = ({
   pageMemo,
   avoidFirst,
 }: IProps) => {
+  console.log(data);
   return (
     <div className="news-scroll">
       <div className="news-scroll-wrapper">
         <div className="news-scroll-inner">
-          {data?.data[0].id > -1 ? (
+          {data ? (
             data.data.map((dataEl, index) => {
               if (avoidFirst) {
                 if (index > 0) {
@@ -68,7 +69,7 @@ const CustomNewsScroll = ({
           )}
         </div>
         {pagination ? (
-          data?.data[0].id > -1 ? (
+          data ? (
             <Pagination
               pages={data?.meta.total}
               activePage={pageMemo.activePage}

src/styles/_calendar.scss

@@ -88,13 +88,13 @@
 
 .react-calendar__navigation__arrow.react-calendar__navigation__next-button {
   display: block;
-  background: url('../assets/icons/stroke-right-black.svg') no-repeat center;
+  background: url("../assets/icons/stroke-right-black.svg") no-repeat center;
   color: transparent;
 }
 
 .react-calendar__navigation__arrow.react-calendar__navigation__prev-button {
   display: block;
-  background: url('../assets/icons/stroke-left-black.svg') no-repeat center;
+  background: url("../assets/icons/stroke-left-black.svg") no-repeat center;
   color: transparent;
 }
 
@@ -106,11 +106,14 @@
     width: 100%;
   }
 }
+.calendar {
+  display: flex;
+  flex-direction: column;
+  gap: 3.2rem;
+}
 
 .calendar-popup {
-  position: absolute;
-  left: 0;
-  bottom: -20%;
+  width: 100%;
   background: $main;
   padding: 1.6rem;
   color: $white;
@@ -119,7 +122,10 @@
   flex-direction: column;
   gap: 0.8rem;
   border-radius: 0.8rem;
-  display: none;
+
+  a {
+    color: $white;
+  }
 
   .calendar-popup-item {
     font-weight: 400;
@@ -127,10 +133,6 @@
   }
 }
 
-.calendar-popup-active {
-  display: block;
-}
-
 @media (max-width: 1024px) {
   .calendar {
     display: none;

src/styles/_videos.scss

@@ -35,7 +35,7 @@
     font-size: 1.6rem;
     color: $black;
     display: -webkit-box;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }