add docs, remove import cycle, simplify home logic

icssc · Aug 3, 2024 · e678812 · e678812
1 parent 5162304
commit e678812
Show file tree

Hide file tree

Showing 14 changed files with 119 additions and 92 deletions.
diff --git a/apps/expo/app.config.ts b/apps/expo/app.config.ts
@@ -33,6 +33,9 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
       backgroundColor,
     },
   },
+  web: {
+    favicon: image,
+  },
   extra: {
     eas: {
       projectId: "e5b5d2cd-098b-4fe4-85ed-ac05e395552d", // dennis' project id for now

diff --git a/apps/expo/src/__tests__/app.test.js b/apps/expo/src/__tests__/app.test.js
@@ -1,7 +1,7 @@
 import React from "react";
 import renderer from "react-test-renderer";
 
-import { Logo } from "~/components";
+import { Logo } from "~/components/ui";
 
 describe("<App />", () => {
   it("has 1 child", () => {

diff --git a/apps/expo/src/app/_layout.tsx b/apps/expo/src/app/_layout.tsx
@@ -10,8 +10,8 @@ import { ClerkProvider } from "@clerk/clerk-expo";
 import { ToastProvider, ToastViewport } from "@tamagui/toast";
 import { createTamagui, TamaguiProvider, Theme } from "tamagui";
 
-import { DevInfo, Logo } from "~/components";
-import { HamburgerMenu } from "~/components/navigation/HamburgerMenu";
+import { HamburgerMenu } from "~/components/navigation";
+import { DevInfo, Logo } from "~/components/ui";
 import { TRPCProvider, useZotmealColorScheme } from "~/utils";
 import { tokenCache } from "~/utils/tokenCache";
 import { env } from "../utils/env";

diff --git a/apps/expo/src/app/events/index.tsx b/apps/expo/src/app/events/index.tsx
@@ -5,7 +5,7 @@ import { format, isWithinInterval } from "date-fns";
 import { H3, Image, Tabs, Text, View, YStack } from "tamagui";
 
 import type { Event } from "~/utils";
-import { RestaurantTabs } from "~/components";
+import { RestaurantTabs } from "~/components/navigation";
 import { useZotmealStore } from "~/utils";
 
 const EventCard = ({ event }: Readonly<{ event: Event }>) => (
@@ -92,6 +92,13 @@ export default function Events() {
 
   // TODO: show a toast if there is an error
 
+  const NotFound = () => (
+    <View alignItems="center" gap="$3">
+      <CalendarX2 size="$5" />
+      <Text>No events found</Text>
+    </View>
+  );
+
   const EventsContent = () => {
     // if (query.isLoading) return <Spinner size="large" marginTop="$10" />;
 
@@ -105,10 +112,7 @@ export default function Events() {
               ))}
             </YStack>
           ) : (
-            <View alignItems="center">
-              <CalendarX2 size="$10" />
-              <Text>No events found</Text>
-            </View>
+            <NotFound />
           )}
         </Tabs.Content>
         <Tabs.Content value="anteatery">
@@ -119,10 +123,7 @@ export default function Events() {
               ))}
             </YStack>
           ) : (
-            <View alignItems="center">
-              <CalendarX2 size="$10" />
-              <Text>No events found</Text>
-            </View>
+            <NotFound />
           )}
         </Tabs.Content>
       </>

diff --git a/apps/expo/src/app/index.tsx b/apps/expo/src/app/index.tsx
@@ -13,7 +13,7 @@ import {
   XStack,
 } from "tamagui";
 
-import { RestaurantTabs } from "~/components";
+import { RestaurantTabs } from "~/components/navigation";
 import { useZotmealQuery, useZotmealStore, ZotmealData } from "~/utils";
 import { EventToast } from "../components/ui/EventToast";
 import { PeriodPicker } from "../components/ui/PeriodPicker";
@@ -23,7 +23,12 @@ import { UniversalDatePicker } from "../components/ui/UniversalDatePicker";
 export default function Home() {
   const theme = useTheme();
   const [date, setDate] = React.useState<Date>(new Date());
-  const [period, setPeriod] = React.useState<string | null>(null);
+  const [brandywinePeriod, setBrandywinePeriod] = React.useState<string | null>(
+    null,
+  );
+  const [anteateryPeriod, setAnteateryPeriod] = React.useState<string | null>(
+    null,
+  );
   const [restaurant, setRestaurant] =
     React.useState<keyof ZotmealData>("brandywine");
   const { setZotmeal } = useZotmealStore();
@@ -34,32 +39,30 @@ export default function Home() {
     setZotmeal(query.data);
 
     // set initial period to the current period or the first period if the current period is not found
-    setPeriod(currentPeriod?.name ?? periods[restaurant][0]?.name ?? null);
+    setBrandywinePeriod(
+      currentBrandywinePeriod?.name ?? brandywinePeriods[0]?.name ?? null,
+    );
+    setAnteateryPeriod(
+      currentAnteateryPeriod?.name ?? anteateryPeriods[0]?.name ?? null,
+    );
   }, [query.data]);
 
   const anteateryInfo = query.data?.anteatery;
-  const brandywineInfo = query.data?.anteatery;
+  const brandywineInfo = query.data?.brandywine;
 
-  const periods = {
-    anteatery: anteateryInfo?.menus.map((menu) => menu.period) ?? [],
-    brandywine: brandywineInfo?.menus.map((menu) => menu.period) ?? [],
-  };
+  const anteateryPeriods =
+    anteateryInfo?.menus.map((menu) => menu.period) ?? [];
+  const brandywinePeriods =
+    brandywineInfo?.menus.map((menu) => menu.period) ?? [];
 
-  const currentPeriod = periods[restaurant].find((period) =>
+  const currentAnteateryPeriod = anteateryPeriods.find((period) =>
     isWithinInterval(new Date(), {
       start: period.startTime,
       end: period.endTime,
     }),
   );
 
-  const currentAnteateryPeriod = periods.anteatery.find((period) =>
-    isWithinInterval(new Date(), {
-      start: period.startTime,
-      end: period.endTime,
-    }),
-  );
-
-  const currentBrandywinePeriod = periods.brandywine.find((period) =>
+  const currentBrandywinePeriod = brandywinePeriods.find((period) =>
     isWithinInterval(new Date(), {
       start: period.startTime,
       end: period.endTime,
@@ -92,19 +95,25 @@ export default function Home() {
 
   // Get the stations for the current period
   const brandywineStations = brandywineInfo?.menus.find(
-    (menu) => menu.period.name === period,
+    (menu) => menu.period.name === brandywinePeriod,
   )?.stations;
   const anteateryStations = anteateryInfo?.menus.find(
-    (menu) => menu.period.name === period,
+    (menu) => menu.period.name === anteateryPeriod,
   )?.stations;
 
+  const NotFound = () => (
+    <View alignItems="center" gap="$3">
+      <AlertTriangle size="$5" />
+      <Text>Menu not found</Text>
+    </View>
+  );
+
   // TODO: make it not possible to click into the menu if it's loading
   const MenuContent = () => (
     <>
       <Tabs.Content
         key="brandywine"
         value="brandywine"
-        alignItems="center"
         flex={1}
         opacity={query.isLoading ? 0.5 : 1}
       >
@@ -114,22 +123,33 @@ export default function Home() {
             zIndex={10}
             marginTop="$10"
             position="absolute"
+            alignSelf="center"
             marginVertical={200}
           />
         ) : null}
+        <XStack
+          justifyContent={Platform.OS === "web" ? "unset" : "space-around"}
+          columnGap={Platform.OS === "web" ? 20 : 0}
+          marginLeft={Platform.OS === "web" ? "$5" : 0}
+          marginTop="$3"
+        >
+          <PeriodPicker
+            periods={brandywinePeriods.map((period) => period.name)}
+            period={brandywinePeriod}
+            setPeriod={setBrandywinePeriod}
+            color={theme.color?.val as string}
+          />
+          <UniversalDatePicker date={date} setDate={setDate} />
+        </XStack>
         {brandywineInfo && brandywineStations ? (
           <StationTabs stations={brandywineStations} />
         ) : query.isPending ? null : (
-          <View alignItems="center">
-            <AlertTriangle size="$10" />
-            <Text>Menu not found</Text>
-          </View>
+          <NotFound />
         )}
       </Tabs.Content>
       <Tabs.Content
         key="anteatery"
         value="anteatery"
-        alignItems="center"
         flex={1}
         opacity={query.isLoading ? 0.5 : 1}
       >
@@ -139,16 +159,28 @@ export default function Home() {
             zIndex={10}
             marginTop="$10"
             position="absolute"
+            alignSelf="center"
             marginVertical={200}
           />
         ) : null}
+        <XStack
+          justifyContent={Platform.OS === "web" ? "unset" : "space-around"}
+          columnGap={Platform.OS === "web" ? 20 : 0}
+          marginLeft={Platform.OS === "web" ? "$5" : 0}
+          marginTop="$3"
+        >
+          <PeriodPicker
+            periods={anteateryPeriods.map((period) => period.name)}
+            period={anteateryPeriod}
+            setPeriod={setAnteateryPeriod}
+            color={theme.color?.val as string}
+          />
+          <UniversalDatePicker date={date} setDate={setDate} />
+        </XStack>
         {anteateryInfo && anteateryStations ? (
           <StationTabs stations={anteateryStations} />
         ) : query.isPending ? null : (
-          <View alignItems="center">
-            <AlertTriangle size="$10" />
-            <Text>Menu not found</Text>
-          </View>
+          <NotFound />
         )}
       </Tabs.Content>
     </>
@@ -177,18 +209,6 @@ export default function Home() {
       >
         <EventToast />
 
-        <XStack
-          justifyContent={Platform.OS === "web" ? "center" : "space-around"}
-          columnGap={Platform.OS === "web" ? 20 : 0}
-        >
-          <PeriodPicker
-            periods={periods[restaurant].map((period) => period.name)}
-            period={period}
-            setPeriod={setPeriod}
-            color={theme.color?.val as string}
-          />
-          <UniversalDatePicker date={date} setDate={setDate} />
-        </XStack>
         {/*
         <ScrollView horizontal>
           <XStack gap={10}>
@@ -215,7 +235,6 @@ export default function Home() {
             />
           </XStack>
         </ScrollView> */}
-
         <MenuContent />
       </ScrollView>
     </RestaurantTabs>

diff --git a/apps/expo/src/app/item/[id].tsx b/apps/expo/src/app/item/[id].tsx
@@ -15,7 +15,7 @@ import {
   YStack,
 } from "tamagui";
 
-import { PinButton } from "~/components";
+import { PinButton } from "~/components/ui";
 import { NutritionInfo, useZotmealStore } from "~/utils";
 import { testDishImages } from "../../components/menu/testDishImages";
 import RateItem from "./RateItem";

diff --git a/apps/expo/src/app/settings/index.tsx b/apps/expo/src/app/settings/index.tsx
@@ -1,6 +1,6 @@
 import { H3, RadioGroup, Separator, YStack } from "tamagui";
 
-import { RadioGroupItemWithLabel, SwitchWithLabel } from "~/components";
+import { RadioGroupItemWithLabel, SwitchWithLabel } from "~/components/ui";
 import { useSettingsStore } from "~/utils";
 
 export default function Settings() {

diff --git a/apps/expo/src/components/index.ts b/apps/expo/src/components/index.ts