From e678812d0f7ab5ce21cbab9745cf903bc40d72d8 Mon Sep 17 00:00:00 2001 From: Dennis Lustre Date: Sat, 3 Aug 2024 07:40:48 -0700 Subject: [PATCH] add docs, remove import cycle, simplify home logic --- apps/expo/app.config.ts | 3 + apps/expo/src/__tests__/app.test.js | 2 +- apps/expo/src/app/_layout.tsx | 4 +- apps/expo/src/app/events/index.tsx | 19 ++-- apps/expo/src/app/index.tsx | 103 +++++++++++------- apps/expo/src/app/item/[id].tsx | 2 +- apps/expo/src/app/settings/index.tsx | 2 +- apps/expo/src/components/index.ts | 2 - .../components/navigation/RestaurantTabs.tsx | 38 ++++--- apps/expo/src/components/ui/DevInfo.tsx | 1 + apps/expo/src/components/ui/DishCard.tsx | 2 +- .../components/ui/UniversalDatePicker.web.tsx | 24 ++-- apps/expo/src/utils/useZotmealStore.tsx | 4 +- packages/ui/src/templates/index.ts | 5 +- 14 files changed, 119 insertions(+), 92 deletions(-) delete mode 100644 apps/expo/src/components/index.ts diff --git a/apps/expo/app.config.ts b/apps/expo/app.config.ts index 6a6202d2..1d529b1e 100644 --- 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 index 9be6cd03..f8c3d293 100644 --- 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("", () => { it("has 1 child", () => { diff --git a/apps/expo/src/app/_layout.tsx b/apps/expo/src/app/_layout.tsx index 26dbcac6..ce220a94 100644 --- 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 index a89e0e38..e9179def 100644 --- 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 = () => ( + + + No events found + + ); + const EventsContent = () => { // if (query.isLoading) return ; @@ -105,10 +112,7 @@ export default function Events() { ))} ) : ( - - - No events found - + )} @@ -119,10 +123,7 @@ export default function Events() { ))} ) : ( - - - No events found - + )} diff --git a/apps/expo/src/app/index.tsx b/apps/expo/src/app/index.tsx index 335f27a7..64162ebe 100644 --- 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(new Date()); - const [period, setPeriod] = React.useState(null); + const [brandywinePeriod, setBrandywinePeriod] = React.useState( + null, + ); + const [anteateryPeriod, setAnteateryPeriod] = React.useState( + null, + ); const [restaurant, setRestaurant] = React.useState("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 = () => ( + + + Menu not found + + ); + // TODO: make it not possible to click into the menu if it's loading const MenuContent = () => ( <> @@ -114,22 +123,33 @@ export default function Home() { zIndex={10} marginTop="$10" position="absolute" + alignSelf="center" marginVertical={200} /> ) : null} + + period.name)} + period={brandywinePeriod} + setPeriod={setBrandywinePeriod} + color={theme.color?.val as string} + /> + + {brandywineInfo && brandywineStations ? ( ) : query.isPending ? null : ( - - - Menu not found - + )} @@ -139,16 +159,28 @@ export default function Home() { zIndex={10} marginTop="$10" position="absolute" + alignSelf="center" marginVertical={200} /> ) : null} + + period.name)} + period={anteateryPeriod} + setPeriod={setAnteateryPeriod} + color={theme.color?.val as string} + /> + + {anteateryInfo && anteateryStations ? ( ) : query.isPending ? null : ( - - - Menu not found - + )} @@ -177,18 +209,6 @@ export default function Home() { > - - period.name)} - period={period} - setPeriod={setPeriod} - color={theme.color?.val as string} - /> - - {/* @@ -215,7 +235,6 @@ export default function Home() { /> */} - diff --git a/apps/expo/src/app/item/[id].tsx b/apps/expo/src/app/item/[id].tsx index 6fbc6f94..5137c679 100644 --- 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 index 400bf7cf..4758ad72 100644 --- 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 deleted file mode 100644 index bb8c6b8d..00000000 --- a/apps/expo/src/components/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./navigation"; -export * from "./ui"; diff --git a/apps/expo/src/components/navigation/RestaurantTabs.tsx b/apps/expo/src/components/navigation/RestaurantTabs.tsx index 6c861540..fbc51b0e 100644 --- a/apps/expo/src/components/navigation/RestaurantTabs.tsx +++ b/apps/expo/src/components/navigation/RestaurantTabs.tsx @@ -10,6 +10,13 @@ import { import { RestaurantInfo, useZotmealColorScheme } from "~/utils"; +type ImageProps = GetProps; + +/** + * Tabs to select between the two restaurants. + * + * Uses the state given by its parent to determine which restaurant is selected. + */ export function RestaurantTabs({ restaurant, setRestaurant, @@ -23,21 +30,19 @@ export function RestaurantTabs({ brandywineStatus: "closed" | "open"; children: React.ReactNode; }>) { - type ImageProps = GetProps; - // TODO: maybe scale each image accordingly const imageProps = [ { source: { uri: "https://s3-media0.fl.yelpcdn.com/bphoto/P0DIhR8cO-JxYygc3V3aaQ/348s.jpg", }, - display: restaurant === "brandywine" ? "block" : "none", + opacity: restaurant === "brandywine" ? 1 : 0, }, { source: { uri: "https://images.rsmdesign.com/7321bb55-579f-47fd-9f27-a6abf3e9826e.jpg", }, - display: restaurant === "anteatery" ? "block" : "none", + opacity: restaurant === "anteatery" ? 1 : 0, }, ] as const satisfies ImageProps[]; @@ -67,18 +72,22 @@ export function RestaurantTabs({ @@ -88,13 +97,16 @@ export function RestaurantTabs({ ); -} // Uses the svg from Figma +} +/** Tab component for a restaurant. Uses the tab svg from Figma. */ export const TabSvg = ({ title, status, }: Readonly<{ + /** The title of the restaurant, e.g. `Brandywine`. */ title: string; + /** The status of the restaurant, e.g. `closed`. */ status: "closed" | "open"; }>) => { const colorScheme = useZotmealColorScheme(); @@ -111,26 +123,26 @@ export const TabSvg = ({ /> {title} {status.toUpperCase()} diff --git a/apps/expo/src/components/ui/DevInfo.tsx b/apps/expo/src/components/ui/DevInfo.tsx index 2761894b..224ada25 100644 --- a/apps/expo/src/components/ui/DevInfo.tsx +++ b/apps/expo/src/components/ui/DevInfo.tsx @@ -6,6 +6,7 @@ import { Button, Text, View } from "tamagui"; import { getBaseUrl } from "~/utils/api"; import { env } from "~/utils/env"; +/** Utility component to show dev info in the bottom right corner. */ export function DevInfo() { const [open, setOpen] = React.useState(false); diff --git a/apps/expo/src/components/ui/DishCard.tsx b/apps/expo/src/components/ui/DishCard.tsx index f36764ef..a58e48d0 100644 --- a/apps/expo/src/components/ui/DishCard.tsx +++ b/apps/expo/src/components/ui/DishCard.tsx @@ -3,8 +3,8 @@ import { StarFull } from "@tamagui/lucide-icons"; import { Image, ListItem, Text, View, XStack, YGroup, YStack } from "tamagui"; import type { Dish } from "~/utils"; -import { PinButton } from "~/components"; import { testDishImages } from "../menu/testDishImages"; +import { PinButton } from "./PinButton"; export const DishCard = ({ dish, diff --git a/apps/expo/src/components/ui/UniversalDatePicker.web.tsx b/apps/expo/src/components/ui/UniversalDatePicker.web.tsx index 909eabed..6771f744 100644 --- a/apps/expo/src/components/ui/UniversalDatePicker.web.tsx +++ b/apps/expo/src/components/ui/UniversalDatePicker.web.tsx @@ -36,20 +36,16 @@ const CustomInput = ( ); -/** - * Universal date picker for web. - */ +/** Universal date picker for web. */ export const UniversalDatePicker = ({ date, setDate, -}: Readonly) => { - return ( - setDate(prev ?? new Date())} - /> - ); -}; +}: Readonly) => ( + setDate(prev ?? new Date())} + /> +); diff --git a/apps/expo/src/utils/useZotmealStore.tsx b/apps/expo/src/utils/useZotmealStore.tsx index dcf3a2f3..2c171fde 100644 --- a/apps/expo/src/utils/useZotmealStore.tsx +++ b/apps/expo/src/utils/useZotmealStore.tsx @@ -4,7 +4,7 @@ import { appRouter } from "@zotmeal/api"; import { api } from "./api"; -export type ZotmealData = Awaited>; +export type ZotmealData = Awaited>; export type RestaurantInfo = ZotmealData[keyof ZotmealData]; export type Event = RestaurantInfo["events"][number]; export type Menu = RestaurantInfo["menus"][number]; @@ -14,7 +14,7 @@ export type DietRestriction = Dish["dietRestriction"]; export type NutritionInfo = Dish["nutritionInfo"]; export const useZotmealQuery = (date: Date) => - api.getZotmeal.useQuery( + api.zotmeal.useQuery( { date }, { retry: false, diff --git a/packages/ui/src/templates/index.ts b/packages/ui/src/templates/index.ts index 8f19b1e8..3dc9f018 100644 --- a/packages/ui/src/templates/index.ts +++ b/packages/ui/src/templates/index.ts @@ -1,9 +1,6 @@ -import type { CxOptions } from "class-variance-authority"; import { cx } from "class-variance-authority"; import { twMerge } from "tailwind-merge"; -function cn(...inputs: CxOptions) { - return twMerge(cx(inputs)); -} +const cn = (...inputs: Parameters) => twMerge(cx(inputs)); export { cn };