3008 improvements see plan user should be able to see all plans on th…

…e calendar (#3016) * fix: show all months in the month select * show all years with plan +5 future years * show all years with plan +5 future years * highlight past plan dates
ever-co · Sep 14, 2024 · d2a5ccc · d2a5ccc
1 parent d1eaa48
commit d2a5ccc
Showing 1 changed file with 36 additions and 20 deletions.
diff --git a/apps/web/lib/features/daily-plan/all-plans-modal.tsx b/apps/web/lib/features/daily-plan/all-plans-modal.tsx
@@ -31,7 +31,7 @@ export const AllPlansModal = memo(function AllPlansModal(props: IAllPlansModal)
 	const [showCalendar, setShowCalendar] = useState(false);
 	const [showCustomPlan, setShowCustomPlan] = useState(false);
 	const [customDate, setCustomDate] = useState<Date>();
-	const { myDailyPlans } = useDailyPlan();
+	const { myDailyPlans, pastPlans } = useDailyPlan();
 
 	// Utility function for checking if two dates are the same
 	const isSameDate = useCallback(
@@ -87,6 +87,26 @@ export const AllPlansModal = memo(function AllPlansModal(props: IAllPlansModal)
 				return undefined;
 		}
 	}, [selectedTab, todayPlan, tomorrowPlan, selectedFuturePlan]);
+
+	// Set the related tab for today and tomorrow dates
+	const handleCalendarSelect = useCallback(() => {
+		if (customDate) {
+			if (
+				new Date(customDate).toLocaleDateString('en') === new Date(moment().toDate()).toLocaleDateString('en')
+			) {
+				setSelectedTab('Today');
+			} else if (
+				new Date(customDate).toLocaleDateString('en') ===
+				new Date(moment().add(1, 'days').toDate()).toLocaleDateString('en')
+			) {
+				setSelectedTab('Tomorrow');
+			} else {
+				setShowCalendar(false);
+				setShowCustomPlan(true);
+			}
+		}
+	}, [customDate]);
+
 	return (
 		<Modal isOpen={isOpen} closeModal={handleCloseModal} className={clsxm('w-[36rem]')}>
 			<Card className="w-full  h-full overflow-hidden" shadow="custom">
@@ -143,6 +163,7 @@ export const AllPlansModal = memo(function AllPlansModal(props: IAllPlansModal)
 												selectedPlan={customDate}
 												setSelectedPlan={setCustomDate}
 												plans={myDailyPlans.items}
+												pastPlans={pastPlans}
 											/>
 										</div>
 									</div>
@@ -162,10 +183,7 @@ export const AllPlansModal = memo(function AllPlansModal(props: IAllPlansModal)
 										variant="default"
 										type="submit"
 										className={clsxm('py-3 px-5 rounded-md font-light text-md dark:text-white')}
-										onClick={() => {
-											setShowCalendar(false);
-											setShowCustomPlan(true);
-										}}
+										onClick={handleCalendarSelect}
 									>
 										Select
 									</Button>
@@ -203,6 +221,7 @@ interface ICalendarProps {
 	setSelectedPlan: Dispatch<SetStateAction<Date | undefined>>;
 	selectedPlan: Date | undefined;
 	plans: IDailyPlan[];
+	pastPlans: IDailyPlan[];
 }
 
 /**
@@ -212,21 +231,18 @@ interface ICalendarProps {
  * @param {Dispatch<SetStateAction<IDailyPlan>>} props.setSelectedFuturePlan - A function that set the selected plan
  * @param {IDailyPlan} props.selectedFuturePlan - The selected plan
  * @param {IDailyPlan[]} props.plans - Available plans
+ * @param {IDailyPlan[]} props.pastPlans - Past plans
  *
  * @returns {JSX.Element} The Calendar component.
  */
 const FuturePlansCalendar = memo(function FuturePlansCalendar(props: ICalendarProps) {
-	const { selectedPlan, setSelectedPlan, plans } = props;
+	const { selectedPlan, setSelectedPlan, plans, pastPlans } = props;
 
 	const sortedPlans = useMemo(
 		() =>
-			plans
-				.filter(
-					(plan) =>
-						new Date(plan.date).toLocaleDateString('en') !==
-						new Date(moment().add(1, 'days').toDate()).toLocaleDateString('en')
-				)
-				.sort((plan1, plan2) => (new Date(plan1.date).getTime() < new Date(plan2.date).getTime() ? 1 : -1)),
+			[...plans].sort((plan1, plan2) =>
+				new Date(plan1.date).getTime() < new Date(plan2.date).getTime() ? 1 : -1
+			),
 		[plans]
 	);
 
@@ -240,11 +256,6 @@ const FuturePlansCalendar = memo(function FuturePlansCalendar(props: ICalendarPr
 	const isDateUnplanned = useCallback(
 		(dateToCheck: Date) => {
 			return !plans
-				.filter(
-					(plan) =>
-						new Date(plan.date).toLocaleDateString('en') !==
-						new Date(moment().add(1, 'days').toDate()).toLocaleDateString('en')
-				)
 				.map((plan) => new Date(plan.date))
 				.some(
 					(date) => new Date(date).toLocaleDateString('en') == new Date(dateToCheck).toLocaleDateString('en')
@@ -266,13 +277,18 @@ const FuturePlansCalendar = memo(function FuturePlansCalendar(props: ICalendarPr
 			initialFocus
 			disabled={isDateUnplanned}
 			modifiers={{
-				booked: sortedPlans?.map((plan) => new Date(plan.date))
+				booked: sortedPlans?.map((plan) => new Date(plan.date)),
+				pastDay: pastPlans?.map((plan) => new Date(plan.date))
 			}}
 			modifiersClassNames={{
 				booked: clsxm(
 					'relative after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-1.5 after:h-1.5 after:bg-primary after:rounded-full'
 				),
-				selected: clsxm('bg-primary text-white !rounded-full')
+				selected: clsxm('bg-primary after:hidden text-white !rounded-full'),
+
+				pastDay: clsxm(
+					'relative after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-1.5 after:h-1.5 after:bg-yellow-600 after:rounded-full'
+				)
 			}}
 			fromYear={new Date(sortedPlans?.[0]?.date ?? Date.now())?.getFullYear()}
 			toYear={new Date(sortedPlans?.[sortedPlans?.length - 1]?.date ?? Date.now())?.getFullYear() + 5}