diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index e2d0d4a..172518d 100644 --- 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 index ff54f60..e7e89b0 100644 --- 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 = ({ events, fetchEvents }) => { const [eventsSortMonth, setEventsSortMonth] = useState([]); const [eventsSortFind, setEventsSortFind] = useState([]); const [textInput, setTextInput] = useState(""); // поисковая строка - // const [isRenderEventPage, setIsRenderEventPage] = useState(false); - - // const reg = /[a-zA-Zа-яА-Я0-9-\ ]/; // переключение месяца в хедере страницы const reduceMonth = () => { @@ -51,29 +51,35 @@ export const EventsPage: React.FC = ({ 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 = ({ 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 (
@@ -99,7 +101,6 @@ export const EventsPage: React.FC = ({ events, fetchEvents }) => { reduceMonth={reduceMonth} year={year} increaseMonth={increaseMonth} - // monthToday={monthToday} yearToday={yearToday} isArrowBack={isArrowBack} /> @@ -113,13 +114,7 @@ export const EventsPage: React.FC = ({ events, fetchEvents }) => {
    {eventsSortFind.length > 0 && eventsSortFind.map((item) => ( - + ))}
diff --git a/src/pages/landing/LandingPage.module.scss b/src/pages/landing/LandingPage.module.scss index 95378e5..eb4949a 100644 --- 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 index be6a358..8121183 100644 --- a/src/pages/landing/LandingPage.tsx +++ b/src/pages/landing/LandingPage.tsx @@ -154,7 +154,7 @@ export const LandingPage: React.FC = () => {
- 03 + 01

работодателям и HR специалистам

@@ -190,7 +190,7 @@ export const LandingPage: React.FC = () => {
- 01 + 03

Сотрудникам

diff --git a/src/pages/main/components/PieChart/PieChart.tsx b/src/pages/main/components/PieChart/PieChart.tsx index c5177d0..b635517 100644 --- 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([]); const [pieChartData, setPieChartData] = useState([]); const [colors, setColors] = useState([]); const [datesArray, setDatesArray] = useState([]); 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 (
- {pieChartData.length !== 0 && colors.length !== 0 && } - + {pieChartData.length !== 0 && colors.length !== 0 && ( + + )} +
); }; diff --git a/src/pages/main/components/PieChart/components/PeriodPicker.module.scss b/src/pages/main/components/PieChart/components/PeriodPicker.module.scss index 593078c..f23bd00 100644 --- 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 index e76cf85..43ad9b9 100644 --- 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; diff --git a/src/shared/api/Api.ts b/src/shared/api/Api.ts index ca8e3dd..36d18b7 100644 --- a/src/shared/api/Api.ts +++ b/src/shared/api/Api.ts @@ -6,11 +6,9 @@ import { UserConditionForSend, UserInfo, WheelResults, - DateObject + DateObject, } from "@/types"; -import {BASE_URL_REQUEST, BASE_URL_WSS} from "../constants"; - -// const BASE_URL = "https://em-dev.usolcev.com/api/v1"; +import { BASE_URL_REQUEST, BASE_URL_WSS } from "../constants"; export const getUser = () => { return axios.get(`${BASE_URL_REQUEST}/users/current_user`, { @@ -144,15 +142,19 @@ export const getEvents = () => { }; export const checkTestNotificationIsActive = (id: string) => { - return axios.get(`${BASE_URL_REQUEST}/notifications?incident_id=${id}&incident_type=Опрос`, { - headers: { - authorization: `Bearer ${localStorage.getItem("jwt")}`, - }, - }); + return axios.get( + `${BASE_URL_REQUEST}/notifications?incident_id=${id}&incident_type=Опрос`, + { + headers: { + authorization: `Bearer ${localStorage.getItem("jwt")}`, + }, + } + ); }; export const postEvent = (event: EventInterface) => { - return axios.post(`${BASE_URL_REQUEST}/events/`, + return axios.post( + `${BASE_URL_REQUEST}/events/`, { name: event.name, for_all: true, @@ -169,30 +171,40 @@ export const postEvent = (event: EventInterface) => { { headers: { authorization: `Bearer ${localStorage.getItem("jwt")}`, - } + }, } ); }; export const postEventLike = (event: number) => { - return axios.post(`${BASE_URL_REQUEST}/socials/likes/`, + return axios.post( + `${BASE_URL_REQUEST}/socials/likes/`, { - "event": event + event: event, }, { headers: { authorization: `Bearer ${localStorage.getItem("jwt")}`, - } + }, } ); }; export const deleteEventLike = (id: number) => { - return axios.delete(`${BASE_URL_REQUEST}/socials/likes/${id}`, - { - headers: { - authorization: `Bearer ${localStorage.getItem("jwt")}`, - } - } - ); + return axios.delete(`${BASE_URL_REQUEST}/socials/likes/${id}`, { + headers: { + authorization: `Bearer ${localStorage.getItem("jwt")}`, + }, + }); +}; +export const getNotifications = () => { + return axios.get(`${BASE_URL_REQUEST}/notifications/`, { + headers: { + authorization: `Bearer ${localStorage.getItem("jwt")}`, + }, + params: { + // default limit=10 + limit: 100, + }, + }); }; export const makeEventNotificationUnactive = (id: string) => { return axios.get(`${BASE_URL_REQUEST}/notifications/${id}/viewed`, { @@ -218,13 +230,19 @@ export const getMeetingsInfo = (id: string | undefined) => { }); }; -export const sendMeetingInfo = (userId: string, formattedDate: string, comment: string, level: number) => { +export const sendMeetingInfo = ( + userId: string, + formattedDate: string, + comment: string, + level: number +) => { return axios.post( - `${BASE_URL_REQUEST}/meeting_results`, { + `${BASE_URL_REQUEST}/meeting_results`, + { date: formattedDate, comment: comment, employee: userId, - mental_state: level + mental_state: level, }, { headers: { @@ -234,29 +252,34 @@ export const sendMeetingInfo = (userId: string, formattedDate: string, comment: ); }; - export const getLifeDirections = () => { return axios.get(`${BASE_URL_REQUEST}/metrics/life_directions`, { headers: { authorization: `Bearer ${localStorage.getItem("jwt")}`, }, }); -} +}; export const getAllUserConditions = () => { - return axios.get(`${BASE_URL_REQUEST}/metrics/conditions/?my_conditions=true&limit=365`, { - headers: { - authorization: `Bearer ${localStorage.getItem("jwt")}`, - }, - }); + return axios.get( + `${BASE_URL_REQUEST}/metrics/conditions/?my_conditions=true&limit=365`, + { + headers: { + authorization: `Bearer ${localStorage.getItem("jwt")}`, + }, + } + ); }; export const getEmployeeConditions = (id: string) => { - return axios.get(`${BASE_URL_REQUEST}/metrics/conditions/?employee=${id}&limit=365`, { - headers: { - authorization: `Bearer ${localStorage.getItem("jwt")}`, - }, - }); + return axios.get( + `${BASE_URL_REQUEST}/metrics/conditions/?employee=${id}&limit=365`, + { + headers: { + authorization: `Bearer ${localStorage.getItem("jwt")}`, + }, + } + ); }; export const getBalanceWheelValues = (id: string | number) => { @@ -265,18 +288,26 @@ export const getBalanceWheelValues = (id: string | number) => { authorization: `Bearer ${localStorage.getItem("jwt")}`, }, }); -} +}; -export const sendBalanceWheelResults = (results: WheelResults[], isPriority: boolean) => { - return axios.post(`${BASE_URL_REQUEST}/metrics/life_balance`, {results: results, set_priority: isPriority}, { - headers: { - authorization: `Bearer ${localStorage.getItem("jwt")}`, +export const sendBalanceWheelResults = ( + results: WheelResults[], + isPriority: boolean +) => { + return axios.post( + `${BASE_URL_REQUEST}/metrics/life_balance`, + { results: results, set_priority: isPriority }, + { + headers: { + authorization: `Bearer ${localStorage.getItem("jwt")}`, + }, } - }); + ); }; export const sendUserCondition = (conditions: UserConditionForSend) => { - return axios.post(`${BASE_URL_REQUEST}/metrics/conditions/`, + return axios.post( + `${BASE_URL_REQUEST}/metrics/conditions/`, // return axios.post(`${BASE_URL_REQUEST}/metrics/conditions/?infinity_freq=true`, { mood: conditions.mood, @@ -286,44 +317,47 @@ export const sendUserCondition = (conditions: UserConditionForSend) => { { headers: { authorization: `Bearer ${localStorage.getItem("jwt")}`, - } + }, } ); }; //id пользователя currentUser export const getUserBurnoutsGraph = (id: number | string) => { - return axios.get(`${BASE_URL_REQUEST}/metrics/burnouts/graph_data/?employee=${id}`, { - headers: { - authorization: `Bearer ${localStorage.getItem("jwt")}`, - }, - }); + return axios.get( + `${BASE_URL_REQUEST}/metrics/burnouts/graph_data/?employee=${id}`, + { + headers: { + authorization: `Bearer ${localStorage.getItem("jwt")}`, + }, + } + ); }; export const postUsefulLike = (entry: number) => { - return axios.post(`${BASE_URL_REQUEST}/socials/likes/`, + return axios.post( + `${BASE_URL_REQUEST}/socials/likes/`, { - "entry": entry + entry: entry, }, { headers: { authorization: `Bearer ${localStorage.getItem("jwt")}`, - } + }, } ); }; export const deleteUsefulLike = (id: number) => { - return axios.delete(`${BASE_URL_REQUEST}/socials/likes/${id}`, - { - headers: { - authorization: `Bearer ${localStorage.getItem("jwt")}`, - } - } - ); + return axios.delete(`${BASE_URL_REQUEST}/socials/likes/${id}`, { + headers: { + authorization: `Bearer ${localStorage.getItem("jwt")}`, + }, + }); }; export const addUseful = (entry: any) => { - return axios.post(`${BASE_URL_REQUEST}/entries/`, + return axios.post( + `${BASE_URL_REQUEST}/entries/`, { preview: entry.preview_image, title: entry.title, @@ -331,28 +365,28 @@ export const addUseful = (entry: any) => { url: entry.url, text: entry.text, category: entry.category, - }, { headers: { authorization: `Bearer ${localStorage.getItem("jwt")}`, - } + }, } ); }; export const fetchData = async () => { - try { const token = localStorage.getItem("jwt"); - const headers = {Authorization: `Bearer ${token}`}; - const response = await axios.get('https://em-dev.usolcev.com/api/v1/entries/', {headers}); + const headers = { Authorization: `Bearer ${token}` }; + const response = await axios.get( + "https://em-dev.usolcev.com/api/v1/entries/", + { headers } + ); - console.log(response.data.results) + console.log(response.data.results); // console.log(chosenCardList) - return response + return response; } catch (error) { - console.error('Error fetching data:', error); - + console.error("Error fetching data:", error); } finally { // setIsLoading(false); } @@ -366,13 +400,19 @@ export const getActivityTypes = () => { }); }; -export const getActivities = (id: string | number, datesArray: DateObject[]) => { - if(datesArray.length !== 0) { - return axios.get(`${BASE_URL_REQUEST}/metrics/activities/?employee=${id}&before_date=${datesArray[0].before_date}&after_date=${datesArray[0].after_date}`, { - headers: { - authorization: `Bearer ${localStorage.getItem("jwt")}`, - }, - }); +export const getActivities = ( + id: string | number, + datesArray: DateObject[] +) => { + if (datesArray.length !== 0) { + return axios.get( + `${BASE_URL_REQUEST}/metrics/activities/?employee=${id}&before_date=${datesArray[0].before_date}&after_date=${datesArray[0].after_date}`, + { + headers: { + authorization: `Bearer ${localStorage.getItem("jwt")}`, + }, + } + ); } else { return axios.get(`${BASE_URL_REQUEST}/metrics/activities/?employee=${id}`, { headers: { @@ -384,8 +424,9 @@ export const getActivities = (id: string | number, datesArray: DateObject[]) => export const sendActivities = (activities: ActivityInterface[]) => { return axios.post( - `${BASE_URL_REQUEST}/metrics/activities`, { - activity_rates: activities + `${BASE_URL_REQUEST}/metrics/activities`, + { + activity_rates: activities, }, { headers: { @@ -394,4 +435,3 @@ export const sendActivities = (activities: ActivityInterface[]) => { } ); }; -