Aydogdy
/
react-typescript-chess-federation
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

calendar finished

This commit is contained in:
VividTruthKeeper 2022-09-05 23:35:02 +05:00
parent 307e0b899a
commit 7aaded8a48
6 changed files with 168 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/components/global/Calendar.tsx
View File

@ -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<SetStateAction<number>>];
type monthSelectType = [boolean, React.Dispatch<SetStateAction<boolean>>];
type dayStateType = [dayType, React.Dispatch<SetStateAction<dayType>>];
// 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 (
<tr key={uuidv4()}>
{arr.map((el) => {
if (el !== 0) {
if (
today === el &&
currentMonth === date.getMonth() &&
currentYear === date.getFullYear()
) {
return (
<CalendarCell key={uuidv4()} currentMonth={currentMonth} currentYear={currentYear} el={el as number} selectedDay={selectedDay} setSelectedDay={setSelectedDay} />
);
{arr.map((el) => {
if (el !== 0) {
if (
today === el &&
currentMonth === date.getMonth() &&
currentYear === date.getFullYear()
) {
return (
<CalendarCell
key={uuidv4()}
currentMonth={currentMonth}
currentYear={currentYear}
element={el}
selectedDay={selectedDay}
setSelectedDay={setSelectedDay}
givenClassName={
selectedDay.day === el &&
selectedDay.month === currentMonth
? " active selected"
: " active"
}
/>
);
} else {
return (
<CalendarCell
key={uuidv4()}
currentMonth={currentMonth}
currentYear={currentYear}
element={el}
selectedDay={selectedDay}
setSelectedDay={setSelectedDay}
givenClassName={
selectedDay.day === el &&
selectedDay.month === currentMonth
? "selected"
: ""
}
/>
);
}
} else {
return (
<td
className={
selectedDay.day === el &&
selectedDay.month === currentMonth
? "selected"
: ""
}
key={uuidv4()}
onClick={(
e: React.MouseEvent<HTMLElement>
) => {
const target = e.target as HTMLElement;
const span = target.innerText;
setSelectedDay({
day: parseInt(span),
month: currentMonth,
});
}}
>
<span>{el}</span>
<div className="event">
<div className="sharp">
<img src={sharp} alt="" />
</div>
<h5>{`${el} ${matchLocaleLang(
currentMonth
)} ${currentYear}`}</h5>
<span>Нет событий</span>
</div>
</td>
);
return <td key={uuidv4()}></td>;
}
} else {
return <td key={uuidv4()}></td>;
}
})}
</tr>
)
})}
</tr>
);
} else {
return "";
}

133
src/components/global/CalendarCell.tsx
View File

@ -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<SetStateAction<number>>];
type dayStateType = [dayType, React.Dispatch<SetStateAction<dayType>>];
// 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 ? (
// <td
// className={
// selectedDay.day === el &&
// selectedDay.month === currentMonth
// ? "active selected"
// : "active"
// }
// onClick={(
// e: React.MouseEvent<HTMLElement>
// ) => {
// const target = e.target as HTMLElement;
// const span = target.innerText;
// setSelectedDay({
// day: parseInt(span),
// month: currentMonth,
// });
// }}
// >
// <span>{el}</span>
// <div className="event">
// <div className="sharp">
// <img src={sharp} alt="" />
// </div>
// <h5>{`${el} ${matchLocaleLang(
// currentMonth
// )} ${currentYear}`}</h5>
// <span>Нет событий</span>
// </div>
// </td>
// ) : (
// )}
<div></div>
)
export interface dateEventType {
data: string[];
}
export default CalendarCell;
const CalendarCell = ({
setSelectedDay,
element,
selectedDay,
currentMonth,
currentYear,
givenClassName,
}: Props) => {
const [dateEvent, setDateEvent]: [
dateEventType,
React.Dispatch<dateEventType>
] = 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 (
<td
className={givenClassName}
onClick={(e: React.MouseEvent<HTMLElement>) => {
const target = e.target as HTMLElement;
const span = target.innerText;
setSelectedDay({
day: parseInt(span),
month: currentMonth,
});
}}
>
<span>{element}</span>
{selectedDay.day === element ? (
<div className="event">
<div className="sharp">
<img src={sharp} alt="" />
</div>
<h5>{`${element} ${matchLocaleLang(
currentMonth
)} ${currentYear}`}</h5>
<span>
{dateEvent.data
? dateEvent.data[0].length !== 0
? dateEvent.data[0]
: ""
: "Нет событий"}
</span>
</div>
) : (
""
)}
</td>
);
};
export default CalendarCell;

14
src/helpers/apiRequests.ts
View File

@ -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<SlideProps[]>
@ -193,3 +195,15 @@ export const sendData = (
setTriggered(true);
});
};
export const checkDate = (
setState: React.Dispatch<dateEventType>,
date: string
) => {
axios
.post(`${getDate}?date=${date}`)
.then((res) => {
setState(res.data);
})
.catch();
};

4
src/helpers/dateParser.ts
View File

@ -37,3 +37,7 @@ export const dateParser = (input: string, includeYear?: boolean) => {
return `${day} ${parsedMonth[1]}`;
}
};
export const splitDate = (input: string) => {
return input.split(" ")[0];
};

2
src/links.ts
View File

@ -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";

13
src/types/calendarTypes.ts Normal file
View File

@ -0,0 +1,13 @@
import { SetStateAction } from "react";
export interface dayType {
day: number;
month: number;
}
export type monthType = [number, React.Dispatch<SetStateAction<number>>];
export type monthSelectType = [
boolean,
React.Dispatch<SetStateAction<boolean>>
];
export type dayStateType = [dayType, React.Dispatch<SetStateAction<dayType>>];