Skip to content

Commit dcd09bf

Browse files
onesineonesine
committed
Code refactoring
1 parent fdc8b6c commit dcd09bf

File tree

5 files changed

+57
-68
lines changed

5 files changed

+57
-68
lines changed

‎src/components/Calendar/Months.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import dayjs from "dayjs";
22
import React, { useContext } from "react";
33

4+
import { MONTHS } from "../../constants";
45
import DatepickerContext from "../../contexts/DatepickerContext";
56
import { loadLanguageModule } from "../../helpers";
67
import { RoundedButton } from "../utils";
@@ -14,19 +15,15 @@ const Months: React.FC<Props> = ({ clickMonth }) => {
1415
loadLanguageModule(i18n);
1516
return (
1617
<div className="w-full grid grid-cols-2 gap-2 mt-2">
17-
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((item, index) => (
18+
{MONTHS.map(item => (
1819
<RoundedButton
19-
key={index}
20+
key={item}
2021
padding="py-3"
2122
onClick={() => {
22-
clickMonth(index + 1);
23+
clickMonth(item);
2324
}}
2425
>
25-
<>
26-
{dayjs(`2022-${1 + item}-01`)
27-
.locale(i18n)
28-
.format("MMM")}
29-
</>
26+
<>{dayjs(`2022-${item}-01`).locale(i18n).format("MMM")}</>
3027
</RoundedButton>
3128
))}
3229
</div>

‎src/components/Calendar/Week.tsx‎

Lines changed: 26 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,41 @@
11
import dayjs from "dayjs";
2-
import weekday from "dayjs/plugin/weekday";
3-
import React, { useContext } from "react";
2+
import React, { useContext, useMemo } from "react";
43

4+
import { DAYS } from "../../constants";
55
import DatepickerContext from "../../contexts/DatepickerContext";
66
import { loadLanguageModule, shortString, ucFirst } from "../../helpers";
77

8-
dayjs.extend(weekday);
9-
108
const Week: React.FC = () => {
119
const { i18n, startWeekOn } = useContext(DatepickerContext);
1210
loadLanguageModule(i18n);
13-
let startDateModifier = dayjs().locale(i18n).weekday(0).get("day");
14-
if (startWeekOn) {
15-
switch (startWeekOn) {
16-
case "mon":
17-
startDateModifier = 1;
18-
break;
19-
case "tue":
20-
startDateModifier = 2;
21-
break;
22-
case "wed":
23-
startDateModifier = 3;
24-
break;
25-
case "thu":
26-
startDateModifier = 4;
27-
break;
28-
case "fri":
29-
startDateModifier = 5;
30-
break;
31-
case "sat":
32-
startDateModifier = 6;
33-
break;
34-
case "sun":
35-
startDateModifier = 0;
36-
break;
37-
default:
38-
break;
11+
const startDateModifier = useMemo(() => {
12+
if (startWeekOn) {
13+
switch (startWeekOn) {
14+
case "mon":
15+
return 1;
16+
case "tue":
17+
return 2;
18+
case "wed":
19+
return 3;
20+
case "thu":
21+
return 4;
22+
case "fri":
23+
return 5;
24+
case "sat":
25+
return 6;
26+
case "sun":
27+
return 0;
28+
default:
29+
return 0;
30+
}
3931
}
40-
}
32+
return 0;
33+
}, [startWeekOn]);
4134

4235
return (
4336
<div className="grid grid-cols-7 border-b border-gray-300 dark:border-gray-700 py-2">
44-
{[0, 1, 2, 3, 4, 5, 6].map((item, index) => (
45-
<div key={index} className="tracking-wide text-gray-500 text-center">
37+
{DAYS.map(item => (
38+
<div key={item} className="tracking-wide text-gray-500 text-center">
4639
{ucFirst(
4740
shortString(
4841
dayjs(`2022-11-${6 + (item + startDateModifier)}`)

‎src/components/Calendar/index.tsx‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import dayjs from "dayjs";
22
import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
33

4+
import { CALENDAR_SIZE } from "../../constants";
45
import DatepickerContext from "../../contexts/DatepickerContext";
56
import {
67
formatDate,
@@ -64,9 +65,9 @@ const Calendar: React.FC<Props> = ({
6465
const previous = useCallback(() => {
6566
return getLastDaysInMonth(
6667
previousMonth(date),
67-
getNumberOfDay(getFirstDayInMonth(date).ddd, i18n, startWeekOn)
68+
getNumberOfDay(getFirstDayInMonth(date).ddd, startWeekOn)
6869
);
69-
}, [date, i18n, startWeekOn]);
70+
}, [date, startWeekOn]);
7071

7172
const current = useCallback(() => {
7273
return getDaysInMonth(formatDate(date));
@@ -75,20 +76,16 @@ const Calendar: React.FC<Props> = ({
7576
const next = useCallback(() => {
7677
return getFirstDaysInMonth(
7778
previousMonth(date),
78-
42 - (previous().length + current().length)
79+
CALENDAR_SIZE - (previous().length + current().length)
7980
);
8081
}, [current, date, previous]);
8182

8283
const hideMonths = useCallback(() => {
83-
if (showMonths) {
84-
setShowMonths(false);
85-
}
84+
showMonths && setShowMonths(false);
8685
}, [showMonths]);
8786

8887
const hideYears = useCallback(() => {
89-
if (showYears) {
90-
setShowYears(false);
91-
}
88+
showYears && setShowYears(false);
9289
}, [showYears]);
9390

9491
const clickMonth = useCallback(
@@ -278,14 +275,6 @@ const Calendar: React.FC<Props> = ({
278275
</div>
279276
</div>
280277

281-
{!showMonths && !showYears && (
282-
<div className="flex-none">
283-
<RoundedButton roundedFull={true} onClick={onClickNext}>
284-
<ChevronRightIcon className="h-5 w-5" />
285-
</RoundedButton>
286-
</div>
287-
)}
288-
289278
{showYears && (
290279
<div className="flex-none">
291280
<RoundedButton
@@ -298,6 +287,14 @@ const Calendar: React.FC<Props> = ({
298287
</RoundedButton>
299288
</div>
300289
)}
290+
291+
{!showMonths && !showYears && (
292+
<div className="flex-none">
293+
<RoundedButton roundedFull={true} onClick={onClickNext}>
294+
<ChevronRightIcon className="h-5 w-5" />
295+
</RoundedButton>
296+
</div>
297+
)}
301298
</div>
302299

303300
<div className="px-0.5 sm:px-2 mt-0.5 min-h-[285px]">

‎src/constants/index.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,17 @@ export const COLORS = [
2828
export const DEFAULT_COLOR = "blue";
2929

3030
export const LANGUAGE = "en";
31+
3132
export const DATE_FORMAT = "YYYY-MM-DD";
33+
3234
export const START_WEEK = "sun";
3335

36+
export const DAYS = [0, 1, 2, 3, 4, 5, 6];
37+
38+
export const MONTHS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
39+
40+
export const CALENDAR_SIZE = 42;
41+
3442
// Beware, these maps of colors cannot be replaced with functions using string interpolation such as `bg-${color}-100`
3543
// as described in Tailwind documentation https://tailwindcss.com/docs/content-configuration#dynamic-class-names
3644
export const BG_COLOR = {

‎src/helpers/index.ts‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import dayjs from "dayjs";
2-
import weekday from "dayjs/plugin/weekday";
3-
import {DATE_FORMAT, LANGUAGE} from "../constants";
42

5-
dayjs.extend(weekday);
3+
import { DATE_FORMAT, LANGUAGE } from "../constants";
64

75
export function classNames(...classes: (false | null | undefined | string)[]) {
86
return classes.filter(Boolean).join(" ");
@@ -131,14 +129,10 @@ export function getLastElementsInArray(array: number[] = [], size = 0) {
131129
return result.reverse();
132130
}
133131

134-
export function getNumberOfDay(
135-
dayString: string,
136-
i18n: string,
137-
startWeekOn?: string | null | undefined
138-
): number {
132+
export function getNumberOfDay(dayString: string, startWeekOn?: string | null | undefined): number {
139133
let number = 0;
140134

141-
let startDateModifier = 7 - dayjs().locale(i18n).weekday(0).get("day");
135+
let startDateModifier = 0;
142136

143137
if (startWeekOn) {
144138
switch (startWeekOn) {
@@ -299,7 +293,7 @@ export function loadLanguageModule(language = LANGUAGE) {
299293
case "en-tt":
300294
import("dayjs/locale/en-tt");
301295
break;
302-
case LANGUAGE:
296+
case "en":
303297
import("dayjs/locale/en");
304298
break;
305299
case "eo":

0 commit comments

Comments
 (0)