Skip to content

Commit

Permalink
Merge pull request #158 from chingu-x/fix/calendar-fix
Browse files Browse the repository at this point in the history 
Fix/calendar fix
  • Loading branch information
@Dan-Y-Ko
Dan-Y-Ko authored Aug 6, 2024
2 parents a515365 + 3240c4b commit c2c97a1
Show file tree
Hide file tree
Showing 14 changed files with 426 additions and 446 deletions.
13 changes: 12 additions & 1 deletion src/app/(auth)/AuthProvider.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
"use client";

import { useEffect } from "react";
import { formatInTimeZone } from "date-fns-tz";
import { clientSignIn, clientSignOut } from "@/store/features/auth/authSlice";
import { useAppDispatch } from "@/store/hooks";
import { type User, getUserState } from "@/store/features/user/userSlice";
import { type AppError } from "@/types/types";
import { currentDate } from "@/utils/getCurrentSprint";

interface AuthProviderProps {
user: User | null;
Expand All @@ -18,7 +20,16 @@ export default function AuthProvider({ user, error }: AuthProviderProps) {
if (user) {
dispatch(clientSignIn());
// Add the currentDate field to the user object
const userWithDate = { ...user, currentDate: new Date() };
const currentDateInUserTimezone = formatInTimeZone(
currentDate,
user.timezone,
"yyyy-MM-dd HH:mm:ss",
);

const userWithDate = {
...user,
currentDate: new Date(currentDateInUserTimezone),
};
// Dispatch the getUserState action with the user object
dispatch(getUserState(userWithDate));
}
Expand Down
233 changes: 27 additions & 206 deletions src/app/(main)/dashboard/components/Calendar/Calendar.logic.ts
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,34 @@
import { useEffect, useMemo, useState } from "react";

import {
format,
startOfMonth,
endOfMonth,
getDay,
getDate,
getMonth,
getYear,
isSameDay,
isAfter,
isBefore,
addMonths,
startOfDay,
endOfDay,
subDays,
} from "date-fns";
import { useState } from "react";
import type { EventList } from "@/app/(main)/dashboard/components/voyage-dashboard/getDashboardData";
import type { Sprint } from "@/store/features/sprint/sprintSlice";
import { useUser } from "@/store/hooks";
import convertStringToDate from "@/utils/convertStringToDate";
import routePaths from "@/utils/routePaths";

export const useCalendarLogic = (
sprintsData?: Sprint[],
currentSprintNumber?: number | null,
meetingsData?: EventList[],
voyageNumber?: number | null,
teamId?: string,
) => {
const { currentDate, timezone } = useUser();
const userDate = currentDate ?? new Date();
const [today, setToday] = useState(userDate);
const [selectDate, setSelectDate] = useState(userDate);
const [isHoveredDate, setIsHoveredDate] = useState<Date | null>(null);

const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
export const useCalendarLogic = () => {
const { currentDate } = useUser();
const today = useMemo(() => currentDate ?? new Date(), [currentDate]);

const voyageStartDate = sprintsData?.find(
(sprint) => Number(sprint.number) === 1,
)?.startDate;
const voyageEndDate = sprintsData?.find(
(sprint) => Number(sprint.number) === 6,
)?.endDate;
const [date, setDate] = useState<Date>(today);
const [selectedDate, setSelectedDate] = useState<Date>(today);

const currentSprintStartDate = sprintsData?.find(
(sprint) => Number(sprint.number) === currentSprintNumber,
)?.startDate;

const currentSprintEndDate = sprintsData?.find(
(sprint) => Number(sprint.number) === currentSprintNumber,
)?.endDate;
useEffect(() => {
if (today) {
setDate(today);
setSelectedDate(today);
}
}, [today]);

const cn = (...classes: string[]) => classes.filter(Boolean).join(" ");
const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

const generateDate = (
const generateDates = (
month = getMonth(new Date()),
year = getYear(new Date()),
) => {
Expand All @@ -82,7 +42,7 @@ export const useCalendarLogic = (
while (firstDayOfWeek > 0) {
const date = subDays(firstDateOfMonth, firstDayOfWeek);
arrayOfDate.unshift({
currentMonth: false,
isWithinSelectedMonth: false,
date,
});
firstDayOfWeek--;
Expand All @@ -93,175 +53,36 @@ export const useCalendarLogic = (
for (let i = 1; i <= getDate(lastDateOfMonth); i++) {
const date = new Date(year, month, i);
arrayOfDate.push({
currentMonth: true,
isWithinSelectedMonth: true,
date,
today: isSameDay(date, new Date()),
});
}

const remaining = 42 - arrayOfDate.length;

for (let i = 1; i <= remaining; i++) {
arrayOfDate.push({
currentMonth: false,
isWithinSelectedMonth: false,
date: new Date(year, month + 1, i),
});
}

return arrayOfDate;
};

const isSelectedDate = (date: Date) => isSameDay(selectDate, date);

const generateClassString = (date: Date, currentMonth: boolean) => {
let classes =
"h-[50px] w-[48px] grid place-content-center transition-all cursor-pointer select-none";

const isWithinSprintRange =
currentSprintStartDate &&
currentSprintEndDate &&
(isSameDay(
date,
startOfDay(convertStringToDate(currentSprintStartDate, timezone)),
) ||
isAfter(
date,
startOfDay(convertStringToDate(currentSprintStartDate, timezone)),
)) &&
isBefore(
date,
endOfDay(convertStringToDate(currentSprintEndDate, timezone)),
);

if (!currentMonth) {
classes += " text-neutral-content";
}

if (isSelectedDate(date)) {
classes += " bg-primary text-base-200";
} else {
classes += " hover:bg-base-100";
if (isWithinSprintRange) {
classes += " bg-primary-content";
}
}

return classes;
};

const selectedDate = format(selectDate, "EEEE, MMMM do");

let selectedSprint = null;
for (const sprint of sprintsData!) {
const startDate = new Date(sprint.startDate);
const endDate = new Date(sprint.endDate);
if (selectDate >= startDate && selectDate <= endDate) {
selectedSprint = sprint.number;
break;
}
}

const weeklyCheckInLink = () => {
if (teamId && currentSprintNumber) {
return routePaths.weeklyCheckInPage(
teamId,
currentSprintNumber?.toString(),
);
} else {
return "";
}
};

const submitVoyageLink = () => {
if (teamId && currentSprintNumber) {
return routePaths.submitVoyagePage(
teamId,
currentSprintNumber?.toString(),
);
} else {
return "";
}
};

const showDotConditions = (date: Date) => [
{
id: 1,
check: meetingsData?.some((event) =>
isSameDay(new Date(event.date), date),
),
},
{
id: 2,
check: sprintsData?.some((day) => isSameDay(new Date(day.endDate), date)),
label: "Weekly Check-in Due",
link: weeklyCheckInLink(),
isDisabled: isBefore(date, new Date()),
},
{
id: 3,
check: isSameDay(new Date(voyageEndDate!), date),
label: "Voyage Submission Due",
link: submitVoyageLink(),
},
];

const showRocketIcon = (date: Date) =>
(voyageStartDate &&
isSameDay(convertStringToDate(voyageStartDate, timezone), date)) ||
(voyageEndDate &&
isSameDay(convertStringToDate(voyageEndDate, timezone), date));

const getCalendarElementColor = (date: Date, currentMonth: boolean) => {
if (isSelectedDate(date)) {
return "base-200";
} else if (date.getTime() === isHoveredDate?.getTime()) {
return "neutral";
} else if (!currentMonth) {
return "neutral-content";
} else {
return "neutral-focus";
}
};

const onDotClick = (date: Date) => {
if (setSelectDate && date) {
setSelectDate(date);
}
};

const getDayLabel = () => {
if (
voyageStartDate &&
isSameDay(convertStringToDate(voyageStartDate, timezone), selectDate)
)
return `Start of Voyage ${voyageNumber}`;
if (
voyageEndDate &&
isSameDay(convertStringToDate(voyageEndDate, timezone), selectDate)
)
return `End of Voyage ${voyageNumber}`;
// Handle arrow click (previous/next month)
const handleArrowClick = (month: number) => {
if (date) setDate(addMonths(date, month));
};

return {
cn,
generateDate,
generateClassString,
days,
generateDates,
weekdays,
today,
setToday,
selectDate,
setSelectDate,
userDate,
onArrowClick: (month: number) => setToday(addMonths(today, month)),
currentMonth: months[getMonth(today)],
currentYear: getYear(today),
date,
setDate,
selectedDate,
showDotConditions,
showRocketIcon,
getCalendarElementColor,
setIsHoveredDate,
onDotClick,
getDayLabel,
selectedSprint,
setSelectedDate,
onArrowClick: (month: number) => handleArrowClick(month),
};
};
Loading

0 comments on commit c2c97a1

Please sign in to comment.