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

calendar refactoring started

This commit is contained in:
VividTruthKeeper 2022-08-31 14:49:19 +05:00
parent 1d754f1cc4
commit 4e7f319ec1
2 changed files with 118 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,6 +20,9 @@ import sharp from "../../icons/sharp.svg";
// Types
import { dataItem, dateMatrix } from "../../helpers/calendar";
// Components
import CalendarCell from "./CalendarCell";
const Calendar = () => {
// Static
const date = new Date();
@ -172,87 +175,58 @@ 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 (
<td
className={
selectedDay.day === el &&
selectedDay.month === currentMonth
? "active selected"
: "active"
}
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>
);
} 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>
);
}
{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} />
);
} else {
return <td key={uuidv4()}></td>;
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>
);
}
})}
</tr>
);
} else {
return <td key={uuidv4()}></td>;
}
})}
</tr>
)
} else {
return "";
}

66
src/components/global/CalendarCell.tsx Normal file
View File

@ -0,0 +1,66 @@
// Modules
import React, {SetStateAction} from 'react';
// Helpers
import { matchLocaleLang } from "../../helpers/calendar";
// 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>>];
interface Props{
setSelectedDay: dayStateType[1],
selectedDay: dayType,
el: number,
currentMonth: monthType[0],
currentYear: monthType[0],
event?: 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 default CalendarCell;