fix(calendar/header): update query prev/next callbacks

Author: nicholaschiang

components/calendar/header.tsx

@@ -8,16 +8,20 @@ import { Callback } from 'lib/model/callback';
 import { MeetingsQuery } from 'lib/model/query/meetings';
 import { useOrg } from 'lib/context/org';
 
+import { useCalendarState } from './state';
+
 export interface CalendarHeaderProps {
   query: MeetingsQuery;
   setQuery: Callback<MeetingsQuery>;
 }
 
 function CalendarHeader({ query, setQuery }: CalendarHeaderProps): JSX.Element {
   const { org } = useOrg();
+  const { display } = useCalendarState();
   const { t, lang: locale } = useTranslation();
 
-  const title = useMemo(() => {
+  const dayTitle = useMemo(() => query.from.toLocaleString(locale, { month: 'long', day: 'numeric', year: 'numeric' }), [query.from, locale]);
+  const weekTitle = useMemo(() => {
     const { from, to } = query;
     if (from.getMonth() !== to.getMonth())
       return `${from.toLocaleString(locale, {
@@ -30,26 +34,21 @@ function CalendarHeader({ query, setQuery }: CalendarHeaderProps): JSX.Element {
     return from.toLocaleString(locale, { month: 'long', year: 'numeric' });
   }, [query, locale]);
 
-  const prevWeek = useCallback(() => {
-    setQuery((prev) => {
-      const to = new Date(prev.from);
-      const from = new Date(to.getFullYear(), to.getMonth(), to.getDate() - 7);
-      return new MeetingsQuery({ ...prev, from, to });
+  const delta = useMemo(() => display === 'Day' ? 1 : 7, [display]);
+  const prev = useCallback(() => {
+    setQuery((p) => {
+      const from = new Date(p.from.getFullYear(), p.from.getMonth(), p.from.getDate() - delta);
+      const to = new Date(p.to.getFullYear(), p.to.getMonth(), p.to.getDate() - delta);
+      return new MeetingsQuery({ ...p, from, to });
     });
-  }, [setQuery]);
-
-  const nextWeek = useCallback(() => {
-    setQuery((prev) => {
-      const from = new Date(prev.to);
-      const to = new Date(
-        from.getFullYear(),
-        from.getMonth(),
-        from.getDate() + 7
-      );
-      return new MeetingsQuery({ ...prev, from, to });
+  }, [setQuery, delta]);
+  const next = useCallback(() => {
+    setQuery((p) => {
+      const from = new Date(p.from.getFullYear(), p.from.getMonth(), p.from.getDate() + delta);
+      const to = new Date(p.to.getFullYear(), p.to.getMonth(), p.to.getDate() + delta);
+      return new MeetingsQuery({ ...p, from, to });
     });
-  }, [setQuery]);
-
+  }, [setQuery, delta]);
   const today = useCallback(() => {
     setQuery((prev) => {
       const { from, to } = new MeetingsQuery();
@@ -60,16 +59,16 @@ function CalendarHeader({ query, setQuery }: CalendarHeaderProps): JSX.Element {
 
   return (
     <Header
-      header={title}
+      header={display === 'Day' ? dayTitle : weekTitle}
       body={t('calendar:subtitle', { name: org ? `${org.name}'s` : 'your' })}
       actions={[
         {
-          label: 'Previous week',
-          onClick: prevWeek,
+          label: display === 'Day' ? 'Previous day' : 'Previous week',
+          onClick: prev,
         },
         {
-          label: 'Next week',
-          onClick: nextWeek,
+          label: display === 'Day' ? 'Next day' : 'Next week',
+          onClick: next,
         },
         {
           label: 'Today',