calendar

src/components/aside/Calendar.tsx

@@ -1,14 +1,70 @@
 // Modules
-import { useState } from "react";
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import { Calendar as ReactCalendar } from "react-calendar";
+import { Calendar as ReactCalendar } from 'react-calendar';
-import { LazyLoadComponent } from "react-lazy-load-image-component";
+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';
 
 const Calendar = () => {
   const [value, onChange] = useState(new Date());
+
+  const [data, setData] = useState<any>();
+  const ref = useRef<boolean>(false);
+  const popupRef = useRef<HTMLDivElement>(null);
+
+  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.getMonth() + 1).toString().length < 2
+        ? '0' + (value.getMonth() + 1)
+        : value.getMonth() + 1
+    }`;
+  }, [valueMemo.value]);
+
+  const api = new Api(url + `/posts`, [{ name: 'date', value: constructDateParam() }]);
+  useEffect(() => {
+    if (!ref.current) {
+      ref.current = true;
+      console.log(dataMemo.data);
+      return;
+    }
+    console.log(dataMemo.data);
+    api.get(dataMemo.data, dataMemo.setData);
+  }, [value]);
+
   return (
     <div className="calendar">
+      <div className="calendar-popup" ref={popupRef}>
+        {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()}>
+              <p>{data[0].title}</p>
+            </div>
+          ) : (
+            <div className="calendar-popup-item" key={uuiv4()}>
+              <p>Нет событий</p>
+            </div>
+          )
+        ) : (
+          <Loader />
+        )}
+      </div>
       <LazyLoadComponent useIntersectionObserver>
-        <ReactCalendar value={value} onChange={onChange} />
+        <ReactCalendar value={value} onChange={valueMemo.onChange} />
       </LazyLoadComponent>
     </div>
   );

src/styles/_calendar.scss

@@ -1,6 +1,7 @@
 .calendar {
   display: flex;
   justify-content: center;
+  position: relative;
 }
 
 .react-calendar__navigation__label {
@@ -106,6 +107,25 @@
   }
 }
 
+.calendar-popup {
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: $main;
+  padding: 1.6rem;
+  color: $white;
+  font-weight: normal;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  border-radius: 0.8rem;
+
+  .calendar-popup-item {
+    font-weight: 400;
+    font-size: 1.6rem;
+  }
+}
+
 @media (max-width: 1024px) {
   .calendar {
     display: none;