wip(calendar): enable switching between day/week

Author: nicholaschiang

components/calendar/index.tsx

@@ -25,7 +25,7 @@ import useSingle from 'lib/hooks/single';
 import useURLParamSync from 'lib/hooks/url-param-sync';
 import { useUser } from 'lib/context/user';
 
-import { CalendarStateContext, DialogPage } from './state';
+import { CalendarDisplay, CalendarStateContext, DialogPage } from './state';
 import CreatePage from './dialog/create-page';
 import DialogSurface from './dialog/surface';
 import DisplayPage from './dialog/display-page';
@@ -35,6 +35,7 @@ import Header from './header';
 import RecurDialog from './recur-dialog';
 import SearchBar from './search-bar';
 import DailyDisplay from './daily-display';
+import WeeklyDisplay from './weekly-display';
 import styles from './calendar.module.scss';
 
 const initialEditData = new Meeting();
@@ -48,6 +49,7 @@ export default function Calendar({
   org: byOrg,
   user: byUser,
 }: CalendarProps): JSX.Element {
+  const [display, setDisplay] = useState<CalendarDisplay>('Week');
   const [filtersOpen, setFiltersOpen] = useState<boolean>(false);
   const [mutatedIds, setMutatedIds] = useState<Set<number>>(new Set());
   const [query, setQuery] = useState<MeetingsQuery>(new MeetingsQuery());
@@ -236,6 +238,8 @@ export default function Calendar({
       dragging,
       setDragging,
       start: query.from,
+      display,
+      setDisplay,
     }),
     [
       editing,
@@ -252,6 +256,8 @@ export default function Calendar({
       dragging,
       setDragging,
       query.from,
+      display,
+      setDisplay,
     ]
   );
 
@@ -370,15 +376,28 @@ export default function Calendar({
             byOrg={byOrg}
           />
           <div className={styles.content}>
-            <DailyDisplay
-              searching={!data}
-              meetings={meetings}
-              filtersOpen={filtersOpen}
-              width={width}
-              setWidth={setWidth}
-              offset={offset}
-              setOffset={setOffset}
-            />
+            {display === 'Day' && (
+              <DailyDisplay
+                searching={!data}
+                meetings={meetings}
+                filtersOpen={filtersOpen}
+                width={width}
+                setWidth={setWidth}
+                offset={offset}
+                setOffset={setOffset}
+              />
+            )}
+            {display === 'Week' && (
+              <WeeklyDisplay
+                searching={!data}
+                meetings={meetings}
+                filtersOpen={filtersOpen}
+                width={width}
+                setWidth={setWidth}
+                offset={offset}
+                setOffset={setOffset}
+              />
+            )}
             <FiltersSheet
               query={query}
               setQuery={setQuery}

components/calendar/search-bar.tsx

@@ -1,5 +1,6 @@
 import { memo, useCallback } from 'react';
 import { IconButton } from '@rmwc/icon-button';
+import { Select } from '@rmwc/select';
 import { TextField } from '@rmwc/textfield';
 import { dequal } from 'dequal/lite';
 
@@ -9,6 +10,7 @@ import FilterListIcon from 'components/icons/filter-list';
 import { Callback } from 'lib/model/callback';
 import { MeetingsQuery } from 'lib/model/query/meetings';
 
+import { CalendarDisplay, useCalendarState } from './state';
 import styles from './search-bar.module.scss';
 
 export interface SearchBarProps {
@@ -27,6 +29,7 @@ function SearchBar({
   const downloadResults = useCallback(() => {
     window.open(query.getURL('/api/meetings/csv'));
   }, [query]);
+  const { display, setDisplay } = useCalendarState();
 
   return (
     <div className={styles.filters}>
@@ -48,6 +51,14 @@ function SearchBar({
         )}
       </div>
       <div className={styles.right}>
+        <div className={styles.select}>
+          <Select
+            enhanced
+            value={display}
+            options={['Day', 'Week']}
+            onChange={(evt) => setDisplay(evt.currentTarget.value as CalendarDisplay)}
+          />
+        </div>
         <TextField
           outlined
           placeholder='Search by description'

components/calendar/state.ts

@@ -10,6 +10,8 @@ export enum DialogPage {
   Create,
 }
 
+export type CalendarDisplay = 'Day' | 'Week';
+
 export interface CalendarState {
   start: Date;
   editing: Meeting;
@@ -26,6 +28,8 @@ export interface CalendarState {
   setDialogPage: Callback<DialogPage>;
   dragging: boolean;
   setDragging: Callback<boolean>;
+  display: CalendarDisplay;
+  setDisplay: Callback<CalendarDisplay>;
 }
 
 export const CalendarStateContext = createContext<CalendarState>({
@@ -44,6 +48,8 @@ export const CalendarStateContext = createContext<CalendarState>({
   setDialogPage: () => {},
   dragging: false,
   setDragging: () => {},
+  display: 'Week',
+  setDisplay: () => {},
 });
 
 export const useCalendarState = (): CalendarState =>