Merge pull request #72 from moodbeat/fix/notification-count-65

fix: notification count update in real-time
moodbeat · Jul 27, 2023 · 2cc6b8b · 2cc6b8b
2 parents de9e20c + 1b7eea0
commit 2cc6b8b
Show file tree

Hide file tree

Showing 8 changed files with 189 additions and 148 deletions.
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -295,7 +295,6 @@ export const App = () => {
   useEffect(() => {
     handleEmployees();
   }, [role]);
-  //
 
   function openTestAlertPopup() {
     dispatch(
@@ -305,12 +304,11 @@ export const App = () => {
     );
   }
 
-  //запрос мероприятий для вкладки мероприятия
+  // запрос мероприятий для вкладки мероприятия
   async function fetchEvents() {
     try {
       if (role === "hr" || role === "chief" || role === "employee") {
         const response = await Api.getEvents();
-        // console.log(response)
         setEvents(response.data.results);
       }
     } catch (err: any) {
@@ -320,7 +318,7 @@ export const App = () => {
   useEffect(() => {
     fetchEvents();
   }, [role]);
-  //
+
   // отпрвка мероприятия
   // async function postEvent() {
   //   try {
@@ -379,8 +377,9 @@ export const App = () => {
 
   // получение уведомлений о тестах и мероприятиях с помощью WebSocket
   useEffect(() => {
-    const socket = new WebSocket(`${BASE_URL_WSS}/notifications?2`);
-
+    const socket = new WebSocket(
+      `${BASE_URL_WSS}/notifications?${String(currentUserInfo.id)}`
+    );
     socket.onmessage = (event) => {
       const newEvent = JSON.parse(event.data) as WebSocketMessage;
       dispatch(addNotifications(newEvent));
@@ -390,7 +389,7 @@ export const App = () => {
         socket.close();
       }
     };
-  }, []);
+  }, [currentUserInfo]);
 
   useEffect(() => {
     if (currentUserInfo.id !== 0) {

diff --git a/src/components/EventsPage/EventsPage.tsx b/src/components/EventsPage/EventsPage.tsx
@@ -4,9 +4,12 @@ import { EventInterface } from "@/types";
 import { EventsHeader } from "./EventsHeader/EventsHeader";
 import { EventsFunctional } from "./EventsFunctional/EventsFunctional";
 import { EventsCard } from "./EventsCard/EventsCard";
+import {
+  getNotifications,
+  makeEventNotificationUnactive,
+} from "@/shared/api/Api";
 
 interface Props {
-  // valueInputSort: string;
   events: EventInterface[];
   fetchEvents: () => void;
 }
@@ -21,9 +24,6 @@ export const EventsPage: React.FC<Props> = ({ events, fetchEvents }) => {
   const [eventsSortMonth, setEventsSortMonth] = useState<EventInterface[]>([]);
   const [eventsSortFind, setEventsSortFind] = useState<EventInterface[]>([]);
   const [textInput, setTextInput] = useState<string>(""); // поисковая строка
-  // const [isRenderEventPage, setIsRenderEventPage] = useState(false);
-
-  // const reg = /[a-zA-Zа-яА-Я0-9-\ ]/;
 
   // переключение месяца в хедере страницы
   const reduceMonth = () => {
@@ -51,29 +51,35 @@ export const EventsPage: React.FC<Props> = ({ events, fetchEvents }) => {
     setTextInput("");
   };
 
-  // function sortMonthEvents() {
-  //   setEventsSortMonth(events.filter(item => new Date(item.start_time).getMonth() === month));
-  // }
+  // сортировка мероприятий по месяцу
   useEffect(() => {
-    // console.log('сортировка мероприятий по месяцу');
-    // console.log(events);
     setEventsSortMonth(
       events.filter((item) => new Date(item.start_time).getMonth() === month)
     );
   }, [month, events]);
-  // }, [month, events, isRenderEventPage]);
 
+  // сортировка мероприятий по поисковой строке
   useEffect(() => {
-    // console.log('сортировка по поисковой строке');
-    // console.log(eventsSortMonth);
     setEventsSortFind(eventsSortMonth);
   }, [eventsSortMonth]);
 
+  // уменьшение счетчика уведомлений при открытии страницы месяца
+  useEffect(() => {
+    getNotifications().then((res) => {
+      eventsSortMonth.forEach((element) => {
+        res.data.results.forEach(
+          (n: { incident_id: number | undefined; id: number }) => {
+            if (n.incident_id === element.id) {
+              makeEventNotificationUnactive(String(n.id));
+            }
+          }
+        );
+      });
+    });
+  }, [eventsSortMonth]);
+
   const handleInputSort = (e: { target: { value: string } }) => {
     const value = e.target.value;
-    // console.log(value.match(reg));
-    // !(value.substring(value.length-2, value.length-1) === '-' && value.substring(value.length-1) === '-') &&
-    // (value === '' || value.substring(value.length-1).match(reg) !== null) &&
     setTextInput(value);
   };
 
@@ -83,14 +89,10 @@ export const EventsPage: React.FC<Props> = ({ events, fetchEvents }) => {
         (event) =>
           event.name.toLowerCase().includes(textInput.toLowerCase()) ||
           event.text.toLowerCase().includes(textInput.toLowerCase())
-        // || employee.position.name.toLowerCase().includes(textInput.toLowerCase())
       )
     );
   }, [textInput]);
 
-  // console.log(events);
-  // console.log(eventsSortMonth);
-  // console.log(eventsSortFind);
   return (
     <section className={styles.eventsPage}>
       <div className={styles.eventsPageContainer}>
@@ -99,7 +101,6 @@ export const EventsPage: React.FC<Props> = ({ events, fetchEvents }) => {
           reduceMonth={reduceMonth}
           year={year}
           increaseMonth={increaseMonth}
-          // monthToday={monthToday}
           yearToday={yearToday}
           isArrowBack={isArrowBack}
         />
@@ -113,13 +114,7 @@ export const EventsPage: React.FC<Props> = ({ events, fetchEvents }) => {
         <ul className={styles.eventsContent}>
           {eventsSortFind.length > 0 &&
             eventsSortFind.map((item) => (
-              <EventsCard
-                key={item.id}
-                item={item}
-                fetchEvents={fetchEvents}
-                // isRenderEventPage={isRenderEventPage}
-                // setIsRenderEventPage={setIsRenderEventPage}
-              />
+              <EventsCard key={item.id} item={item} fetchEvents={fetchEvents} />
             ))}
         </ul>
       </div>

diff --git a/src/pages/landing/LandingPage.module.scss b/src/pages/landing/LandingPage.module.scss
@@ -17,6 +17,7 @@
   font-weight: 500;
   font-size: var(--font-size-m);
   line-height: var(--font-line-m);
+  font-family: Roboto, sans-serif;
 }
 
 // @TODO: Единообразная подложка
@@ -361,6 +362,7 @@
 }
 .sectionForm p a {
   text-decoration: none;
+  color: var(--color-accent-secondary);
   border-bottom: 0.5px solid var(--color-accent-secondary);
 }
 

diff --git a/src/pages/landing/LandingPage.tsx b/src/pages/landing/LandingPage.tsx
@@ -154,7 +154,7 @@ export const LandingPage: React.FC = () => {
             <div className={styles.audienceCards}>
               <article>
                 <div>
-                  <span>03</span>
+                  <span>01</span>
                 </div>
                 <h3>работодателям и&nbsp;HR&nbsp;специалистам</h3>
                 <div>
@@ -190,7 +190,7 @@ export const LandingPage: React.FC = () => {
 
               <article>
                 <div>
-                  <span>01</span>
+                  <span>03</span>
                 </div>
                 <h3>Сотрудникам</h3>
                 <div>

diff --git a/src/pages/main/components/PieChart/PieChart.tsx b/src/pages/main/components/PieChart/PieChart.tsx
@@ -1,10 +1,10 @@
-import {ResponsivePie} from "@nivo/pie";
-import styles from './PieChart.module.scss';
-import {TagsInterface, DateObject} from "@/types.ts";
-import {ReactElement, useEffect, useState} from 'react';
-import {getActivities} from "@/shared/api/Api.ts";
-import {getCurrentDateAndFutureDate} from "@/pages/main/components/PieChart/PieChart.helpers.ts";
-import {PeriodPicker} from "@/pages/main/components/PieChart/components/PeriodPicker.tsx";
+import { ResponsivePie } from "@nivo/pie";
+import styles from "./PieChart.module.scss";
+import { TagsInterface, DateObject } from "@/types.ts";
+import { ReactElement, useEffect, useState } from "react";
+import { getActivities } from "@/shared/api/Api.ts";
+import { getCurrentDateAndFutureDate } from "@/pages/main/components/PieChart/PieChart.helpers.ts";
+import { PeriodPicker } from "@/pages/main/components/PieChart/components/PeriodPicker.tsx";
 
 interface Props {
   data: TagsInterface[];
@@ -34,47 +34,45 @@ const MyResponsivePie = ({ data, colors }: PieDataProps): ReactElement => (
     valueFormat={(value) => `${value}%`}
     legends={[
       {
-        anchor: 'bottom',
-        direction: 'column',
+        anchor: "bottom",
+        direction: "column",
         justify: false,
         translateX: -86,
         translateY: 70,
         itemsSpacing: 0,
         itemWidth: 100,
         itemHeight: 18,
-        itemTextColor: '#000',
-        itemDirection: 'left-to-right',
+        itemTextColor: "#000",
+        itemDirection: "left-to-right",
         itemOpacity: 1,
         symbolSize: 12,
-        symbolShape: 'circle',
-      }
+        symbolShape: "circle",
+      },
     ]}
   />
 );
 
-export const PieChart = ({data, id, widths}: Props): ReactElement => {
+export const PieChart = ({ data, id, widths }: Props): ReactElement => {
   const [activities, setActivities] = useState<any>([]);
   const [pieChartData, setPieChartData] = useState<PieChartDataInterface[]>([]);
   const [colors, setColors] = useState<string[]>([]);
   const [datesArray, setDatesArray] = useState<DateObject[]>([]);
   const [valueOfDatePicker, setValueOfDatePicker] = useState("");
 
-  console.log(activities);
-
   useEffect(() => {
     const dates = getCurrentDateAndFutureDate(valueOfDatePicker);
-    console.log(dates);
     setDatesArray(dates);
   }, [valueOfDatePicker]);
 
   useEffect(() => {
-    getPieChartActivities(id, datesArray)
+    getPieChartActivities(id, datesArray);
   }, [datesArray]);
 
   useEffect(() => {
     const colorsArr: string[] = [];
     if (activities && activities.length > 0 && data) {
-      setPieChartData(data.map((item: TagsInterface, index: number) => ({
+      setPieChartData(
+        data.map((item: TagsInterface, index: number) => ({
           id: item.name,
           label: item.name,
           value: Number(widths[index]),
@@ -83,19 +81,21 @@ export const PieChart = ({data, id, widths}: Props): ReactElement => {
 
       data.forEach((item) => {
         colorsArr.push(item.color);
-      })
+      });
       setColors(colorsArr);
     }
   }, [activities, data, widths, datesArray]);
 
   const handleChooseOption = (option: string) => {
     setValueOfDatePicker(option);
-  }
+  };
 
-  async function getPieChartActivities(id: string | number, datesArray: DateObject[]) {
+  async function getPieChartActivities(
+    id: string | number,
+    datesArray: DateObject[]
+  ) {
     try {
       const response = await getActivities(id, datesArray);
-      console.log(response.data.results);
       setActivities(response.data.results);
     } catch (err: any) {
       console.log(err);
@@ -104,8 +104,13 @@ export const PieChart = ({data, id, widths}: Props): ReactElement => {
 
   return (
     <div className={styles.container}>
-      {pieChartData.length !== 0 && colors.length !== 0 && <MyResponsivePie data={pieChartData} colors={colors}/>}
-      <PeriodPicker handleChooseOption={handleChooseOption} value={valueOfDatePicker} />
+      {pieChartData.length !== 0 && colors.length !== 0 && (
+        <MyResponsivePie data={pieChartData} colors={colors} />
+      )}
+      <PeriodPicker
+        handleChooseOption={handleChooseOption}
+        value={valueOfDatePicker}
+      />
     </div>
   );
 };
diff --git a/src/pages/main/components/PieChart/components/PeriodPicker.module.scss b/src/pages/main/components/PieChart/components/PeriodPicker.module.scss
@@ -1,6 +1,6 @@
-@import '@/shared/styles/mixins';
+@import "@/shared/styles/mixins";
 
-.period-picker{
+.period-picker {
   width: 156px;
   position: absolute;
   top: -46px;
@@ -18,13 +18,13 @@
     border-radius: 12px 12px 0 0;
   }
   &-button {
-    @include size (24px, 24px);
+    @include size(24px, 24px);
     @include background-no-repeat-center-cover;
     border: none;
     background-color: var(--color-background);
-    background-image: url('../assets/chevron_down_24.svg');
+    background-image: url("chevron_down_24.svg");
     &-opened {
-      background-image: url('../assets/chevron_up_24.svg');
+      background-image: url("chevron_up_24.svg");
     }
   }
 }
@@ -42,8 +42,7 @@
     font: var(--font-body);
     cursor: pointer;
     &:hover {
-      background-color: #F4F9FC;
+      background-color: #f4f9fc;
     }
   }
 }
-
diff --git a/src/pages/main/main.module.scss b/src/pages/main/main.module.scss
@@ -5,6 +5,7 @@
 }
 
 .main {
+  margin: 0 auto;
   width: 1029px;
   box-sizing: border-box;
   padding: 40px 0 46px;
@@ -19,7 +20,7 @@
 
 .pie-chart {
   &-container {
-    @include size (324px, 328px);
+    @include size(324px, 328px);
     border-radius: 20px;
     background-color: white;
     padding: 14px 10px 16px 20px;