diff --git a/src/components/global/Calendar.tsx b/src/components/global/Calendar.tsx index 1de76d2..01c514a 100644 --- a/src/components/global/Calendar.tsx +++ b/src/components/global/Calendar.tsx @@ -1,8 +1,8 @@ // Modules import { v4 as uuidv4 } from "uuid"; -import React, { SetStateAction, useMemo, useState } from "react"; +import { useMemo, useState } from "react"; -// Import helpers +// Helpers import { generateDateMatrix, matchLocaleLang, @@ -12,10 +12,16 @@ import { years, } from "../../helpers/calendar"; +// Types +import { + dayStateType, + monthType, + monthSelectType, +} from "../../types/calendarTypes"; + // Icons import prev from "../../icons/arrow-prev.svg"; import next from "../../icons/arrow-next.svg"; -import sharp from "../../icons/sharp.svg"; // Types import { dataItem, dateMatrix } from "../../helpers/calendar"; @@ -28,15 +34,6 @@ const Calendar = () => { const date = new Date(); const today = date.getDate(); - // Inner Types - interface dayType { - day: number; - month: number; - } - type monthType = [number, React.Dispatch>]; - type monthSelectType = [boolean, React.Dispatch>]; - type dayStateType = [dayType, React.Dispatch>]; - // State const [currentYear, setCurrentYear]: monthType = useState(date.getFullYear()); // Ability to change the year const [currentMonth, setCurrentMonth]: monthType = useState(date.getMonth()); // Ability to change the month @@ -175,58 +172,55 @@ const Calendar = () => { {sorted ? sorted.map((arr) => { if (arr.filter((x) => x === 0).length !== 7) { - return( + return ( - {arr.map((el) => { - if (el !== 0) { - if ( - today === el && - currentMonth === date.getMonth() && - currentYear === date.getFullYear() - ) { - return ( - - ); + {arr.map((el) => { + if (el !== 0) { + if ( + today === el && + currentMonth === date.getMonth() && + currentYear === date.getFullYear() + ) { + return ( + + ); + } else { + return ( + + ); + } } else { - return ( - - ) => { - const target = e.target as HTMLElement; - const span = target.innerText; - setSelectedDay({ - day: parseInt(span), - month: currentMonth, - }); - }} - > - {el} -
-
- -
-
{`${el} ${matchLocaleLang( - currentMonth - )} ${currentYear}`}
- Нет событий -
- - ); + return ; } - } else { - return ; - } - })} - - ) + })} + + ); } else { return ""; } diff --git a/src/components/global/CalendarCell.tsx b/src/components/global/CalendarCell.tsx index 17734d4..42d03e3 100644 --- a/src/components/global/CalendarCell.tsx +++ b/src/components/global/CalendarCell.tsx @@ -1,66 +1,93 @@ // Modules -import React, {SetStateAction} from 'react'; - +import React, { useEffect, useState } from "react"; // Helpers import { matchLocaleLang } from "../../helpers/calendar"; +import { checkDate } from "../../helpers/apiRequests"; // Icons import sharp from "../../icons/sharp.svg"; -interface dayType { - day: number; - month: number; - } - type monthType = [number, React.Dispatch>]; - type dayStateType = [dayType, React.Dispatch>]; +// Types +import { dayType, dayStateType, monthType } from "../../types/calendarTypes"; -interface Props{ - setSelectedDay: dayStateType[1], - selectedDay: dayType, - el: number, - currentMonth: monthType[0], - currentYear: monthType[0], - event?: string, +interface Props { + setSelectedDay: dayStateType[1]; + selectedDay: dayType; + element: number; + currentMonth: monthType[0]; + currentYear: monthType[0]; + givenClassName: string; } -const CalendarCell = ({selectedDay, setSelectedDay, el, currentMonth, currentYear, event}:Props) => { - return( - // {el !== 0 ? ( - // - // ) => { - // const target = e.target as HTMLElement; - // const span = target.innerText; - // setSelectedDay({ - // day: parseInt(span), - // month: currentMonth, - // }); - // }} - // > - // {el} - //
- //
- // - //
- //
{`${el} ${matchLocaleLang( - // currentMonth - // )} ${currentYear}`}
- // Нет событий - //
- // - // ) : ( - - // )} -
- ) +export interface dateEventType { + data: string[]; } -export default CalendarCell; \ No newline at end of file +const CalendarCell = ({ + setSelectedDay, + element, + selectedDay, + currentMonth, + currentYear, + givenClassName, +}: Props) => { + const [dateEvent, setDateEvent]: [ + dateEventType, + React.Dispatch + ] = useState({ + data: [""], + }); + useEffect(() => { + if (selectedDay.day === element) { + checkDate( + setDateEvent, + `${currentYear}-${ + (currentMonth + 1).toString().length < 2 + ? "0" + (currentMonth + 1) + : currentMonth + 1 + }-${ + selectedDay.day.toString().length < 2 + ? "0" + selectedDay.day + : selectedDay.day + }` + ); + } + }, [selectedDay, element, currentMonth, currentYear]); + return ( + ) => { + const target = e.target as HTMLElement; + const span = target.innerText; + setSelectedDay({ + day: parseInt(span), + month: currentMonth, + }); + }} + > + {element} + {selectedDay.day === element ? ( +
+
+ +
+
{`${element} ${matchLocaleLang( + currentMonth + )} ${currentYear}`}
+ + {dateEvent.data + ? dateEvent.data[0].length !== 0 + ? dateEvent.data[0] + : "" + : "Нет событий"} + +
+ ) : ( + "" + )} + + ); +}; + +export default CalendarCell; diff --git a/src/helpers/apiRequests.ts b/src/helpers/apiRequests.ts index d735e34..edf8250 100644 --- a/src/helpers/apiRequests.ts +++ b/src/helpers/apiRequests.ts @@ -6,6 +6,7 @@ import { eventType } from "../types/eventProps"; // Links import { + getDate, sliderDataUrl, partners, postsMain, @@ -28,6 +29,7 @@ import { PlayersData, playerType } from "../types/players"; import { About } from "../types/about"; import { structureType } from "../types/structure"; import { tournamentType } from "../types/events"; +import { dateEventType } from "../components/global/CalendarCell"; export const getMainSliderData = ( setState: React.Dispatch @@ -193,3 +195,15 @@ export const sendData = ( setTriggered(true); }); }; + +export const checkDate = ( + setState: React.Dispatch, + date: string +) => { + axios + .post(`${getDate}?date=${date}`) + .then((res) => { + setState(res.data); + }) + .catch(); +}; diff --git a/src/helpers/dateParser.ts b/src/helpers/dateParser.ts index c1ca0e8..5b7a4c1 100644 --- a/src/helpers/dateParser.ts +++ b/src/helpers/dateParser.ts @@ -37,3 +37,7 @@ export const dateParser = (input: string, includeYear?: boolean) => { return `${day} ${parsedMonth[1]}`; } }; + +export const splitDate = (input: string) => { + return input.split(" ")[0]; +}; diff --git a/src/links.ts b/src/links.ts index 39a4989..ff9ef32 100644 --- a/src/links.ts +++ b/src/links.ts @@ -25,3 +25,5 @@ export const players: string = hosting + "/api/v1/players"; export const events: string = hosting + "/api/v1/events"; export const contact_us: string = hosting + "/api/v1/send-contact-form"; + +export const getDate: string = hosting + "/api/v1/events/date"; diff --git a/src/types/calendarTypes.ts b/src/types/calendarTypes.ts new file mode 100644 index 0000000..a60ee8e --- /dev/null +++ b/src/types/calendarTypes.ts @@ -0,0 +1,13 @@ +import { SetStateAction } from "react"; + +export interface dayType { + day: number; + month: number; +} + +export type monthType = [number, React.Dispatch>]; +export type monthSelectType = [ + boolean, + React.Dispatch> +]; +export type dayStateType = [dayType, React.Dispatch>];