Refactor compose

apps/expo/.env.development

@@ -0,0 +1,3 @@
+
+EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_ZXRoaWNhbC1zbmFwcGVyLTk0LmNsZXJrLmFjY291bnRzLmRldiQ
+EXPO_PUBLIC_API_URL="localhost:3000"

apps/expo/app.config.ts

@@ -32,6 +32,7 @@ const defineConfig = (): ExpoConfig => ({
     eas: {
       projectId: "e5b5d2cd-098b-4fe4-85ed-ac05e395552d", // dennis' project id for now
     },
+    clerkPublishableKey: process.env.CLERK_PUBLISHABLE_KEY,
   },
   experiments: {
     tsconfigPaths: true,

apps/expo/package.json

@@ -15,6 +15,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@clerk/clerk-expo": "^1.1.4",
     "@expo/metro-config": "^0.17.6",
     "@react-native-async-storage/async-storage": "1.21.0",
     "@react-native-community/datetimepicker": "7.6.1",
@@ -52,6 +53,7 @@
     "react-native-svg": "^15.1.0",
     "superjson": "2.2.1",
     "tamagui": "^1.94.4",
+    "zod": "^3.22.4",
     "zustand": "^4.5.2"
   },
   "devDependencies": {

apps/expo/src/app/_layout.tsx

@@ -8,13 +8,15 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useFonts } from "expo-font";
 import { Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
+import { ClerkProvider } from "@clerk/clerk-expo";
 import InterBold from "@tamagui/font-inter/otf/Inter-Bold.otf";
 import Inter from "@tamagui/font-inter/otf/Inter-Medium.otf";
 import { ToastProvider, ToastViewport } from "@tamagui/toast";
 import { createTamagui, TamaguiProvider, Theme } from "tamagui";
 
 import { HamburgerMenu, Logo } from "~/components";
 import { TRPCProvider } from "~/utils";
+import { env } from "../utils/env";
 
 // Main layout of the app
 // It wraps your pages with the providers they need
@@ -37,37 +39,39 @@ export default function RootLayout() {
   return (
     <TRPCProvider>
       <TamaguiProvider config={tamaguiConfig}>
-        <ToastProvider>
-          <Theme name={colorScheme}>
-            <Stack
-              screenOptions={{
-                headerTitle: () => <Logo />,
-                headerRight: () => <HamburgerMenu />,
-                headerStyle: {
-                  backgroundColor: "#1A1B1D",
-                },
-                contentStyle: {
-                  backgroundColor:
-                    colorScheme === "dark" ? "#1A1B1D" : "#FFFFFF",
-                },
-              }}
-            >
-              {/* <Stack.Screen
+        <ClerkProvider publishableKey={env.CLERK_PUBLISHABLE_KEY}>
+          <ToastProvider>
+            <Theme name={colorScheme}>
+              <Stack
+                screenOptions={{
+                  headerTitle: () => <Logo />,
+                  headerRight: () => <HamburgerMenu />,
+                  headerStyle: {
+                    backgroundColor: "#1A1B1D",
+                  },
+                  contentStyle: {
+                    backgroundColor:
+                      colorScheme === "dark" ? "#1A1B1D" : "#FFFFFF",
+                  },
+                }}
+              >
+                {/* <Stack.Screen
                 name="events"
                 options={{
                   presentation: "modal",
                 }}
               /> */}
-            </Stack>
-            <StatusBar style="light" />
-          </Theme>
-          <ToastViewport
-            flexDirection="column"
-            bottom={bottom}
-            left={left}
-            right={right}
-          />
-        </ToastProvider>
+              </Stack>
+              <StatusBar style="light" />
+            </Theme>
+            <ToastViewport
+              flexDirection="column"
+              bottom={bottom}
+              left={left}
+              right={right}
+            />
+          </ToastProvider>
+        </ClerkProvider>
       </TamaguiProvider>
     </TRPCProvider>
   );

apps/expo/src/app/auth/index.tsx

@@ -0,0 +1,5 @@
+import { Text } from "tamagui";
+
+export default function Auth() {
+  return <Text>Auth</Text>;
+}

apps/expo/src/app/home/_components/dish-card.tsx

@@ -0,0 +1,80 @@
+import { Link } from "expo-router";
+import { StarFull } from "@tamagui/lucide-icons";
+import { Image, ListItem, Text, XStack, YGroup, YStack } from "tamagui";
+
+import type { MenuWithRelations } from "@zotmeal/db";
+
+import { PinButton } from "~/components";
+
+type Station = MenuWithRelations["stations"][0];
+type Dish = MenuWithRelations["stations"][0]["dishes"][0];
+
+export const DishCard = ({
+  dish,
+  stationId,
+}: Readonly<{
+  dish: Dish;
+  stationId: Station["id"];
+}>) => (
+  <YGroup.Item>
+    <Link
+      asChild
+      href={{
+        pathname: "/home/item/[id]",
+        params: {
+          id: dish.id,
+          stationId,
+        },
+      }}
+    >
+      <ListItem pressTheme>
+        <XStack justifyContent="space-between" paddingRight="$4">
+          <Image
+            resizeMode="contain"
+            alignSelf="center"
+            width="18%"
+            height={65}
+            marginRight="$3"
+            source={{
+              uri: "https://images.rawpixel.com/image_png_1100/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIzLTExL2ZyZWVpbWFnZXNjb21wYW55X3Bob3RvX29mX2Nob2NvbGF0ZV9jaGlwX2Nvb2tpZV90b3Bfdmlld19pc29sYV8xOGVkY2ZiYS00ZTJjLTQ5MWItYjZiOC02ZGZjNmY1M2Y0OWIucG5n.png",
+            }}
+          />
+          <YStack
+            gap="$1"
+            width={"75%"}
+            justifyContent="space-between"
+            paddingTop="$4"
+            paddingBottom="$3"
+          >
+            <XStack justifyContent="space-between">
+              <Text fontWeight={"800"} fontSize={"$5"}>
+                {dish.name}
+              </Text>
+              <Text textAlign="right" fontSize="$5" fontWeight={"800"}>
+                {dish.nutritionInfo.calories} cal
+              </Text>
+            </XStack>
+            <XStack justifyContent="space-between">
+              <XStack alignItems="center" gap="$1" width={"70%"}>
+                <StarFull color="gold" scale={0.8} />
+                <Text>
+                  <Text fontWeight="800" fontSize="$4">
+                    5.0
+                  </Text>{" "}
+                  <Text color="gray">(10,000 reviews)</Text>
+                </Text>
+              </XStack>
+              <PinButton
+                dishName={dish.name}
+                scale={0.8}
+                minWidth="48%"
+                borderRadius="$10"
+                fontWeight="800"
+              />
+            </XStack>
+          </YStack>
+        </XStack>
+      </ListItem>
+    </Link>
+  </YGroup.Item>
+);

apps/expo/src/app/home/_components/event-toast.tsx

@@ -0,0 +1,52 @@
+import { Link } from "expo-router";
+import { ArrowRight, CalendarDays } from "@tamagui/lucide-icons";
+import { Toast, useToastState } from "@tamagui/toast";
+import { Button } from "tamagui";
+import { LinearGradient } from "tamagui/linear-gradient";
+
+
+
+export function EventToast() {
+  const currentToast = useToastState();
+  if (!currentToast || currentToast.isHandledNatively) return null;
+  return (
+    <Toast
+      key={currentToast.id}
+      duration={currentToast.duration}
+      enterStyle={{ opacity: 0, scale: 1, y: 50 }}
+      exitStyle={{ opacity: 0, scale: 1, y: -20 }}
+      // y={0}
+      opacity={1}
+      scale={1}
+      animation="quicker"
+      viewportName={currentToast.viewportName}
+      borderRadius="$4"
+      flexDirection="row"
+      width="90%"
+      height="$6"
+      alignItems="center"
+      justifyContent="space-between"
+    >
+      <CalendarDays />
+      <Toast.Title fontWeight="800">{currentToast.title}</Toast.Title>
+      <LinearGradient
+        colors={["cornflowerblue", "blueviolet"]}
+        borderRadius="$20"
+      >
+        <Toast.Action altText="See Events" asChild>
+          <Link href="/events/" asChild replace>
+            <Button
+              backgroundColor={0}
+              pressTheme
+              size="$4"
+              circular
+              color="white"
+              icon={ArrowRight}
+              scaleIcon={1.5}
+            />
+          </Link>
+        </Toast.Action>
+      </LinearGradient>
+    </Toast>
+  );
+}

apps/expo/src/app/home/_components/period-picker.tsx

@@ -0,0 +1,37 @@
+import { Picker } from "@react-native-picker/picker";
+
+import type { PeriodName } from "@zotmeal/utils";
+import { PeriodEnum } from "@zotmeal/utils";
+
+interface PeriodPickerProps {
+  periodName: PeriodName;
+  setPeriodName: (periodName: PeriodName) => void;
+  color: string;
+}
+
+export const PeriodPicker = ({
+  periodName,
+  setPeriodName,
+  color,
+}: Readonly<PeriodPickerProps>) => (
+  <Picker
+    style={{
+      width: 150,
+    }}
+    itemStyle={{
+      height: 50,
+      paddingVertical: 50,
+      fontSize: 18,
+      color,
+    }}
+    selectedValue={periodName}
+    onValueChange={(itemValue, _) => {
+      setPeriodName(itemValue);
+    }}
+  >
+    {/* Create a Picker.Item for each period */}
+    {Object.entries(PeriodEnum).map(([period, id]) => (
+      <Picker.Item key={id} label={period} value={period} />
+    ))}
+  </Picker>
+);

apps/expo/src/app/home/_components/station-tabs.tsx

@@ -0,0 +1,91 @@
+import { H3, ScrollView, Separator, Tabs, Text, YGroup, YStack } from "tamagui";
+
+import type { MenuWithRelations } from "@zotmeal/db";
+
+import { groupBy } from "~/utils";
+import { DishCard } from './dish-card';
+
+type Station = MenuWithRelations["stations"][0];
+type Dish = MenuWithRelations["stations"][0]["dishes"][0];
+
+export const StationTabs = ({
+  stations,
+}: Readonly<{ stations: Station[] }>) => (
+  <Tabs
+    defaultValue={stations?.[0]?.name}
+    orientation="horizontal"
+    flexDirection="column"
+    width={"100%"}
+    height={"100%"}
+  >
+    <Tabs.List>
+      <ScrollView
+        horizontal
+        bounces={false}
+        showsHorizontalScrollIndicator={false}
+      >
+        {stations.map((station) => (
+          <Tabs.Tab
+            key={station.name}
+            flex={1}
+            value={station.name}
+            borderRadius="$10"
+            height={"$3"}
+            marginHorizontal="$1"
+            marginBottom="$3"
+          >
+            <Text fontSize={"$5"}>{station.name}</Text>
+          </Tabs.Tab>
+        ))}
+      </ScrollView>
+    </Tabs.List>
+
+    {stations.map((station) => (
+      <Tabs.Content key={station.name} value={station.name}>
+        <ScrollView
+          padding="$2"
+          contentContainerStyle={{
+            alignItems: "center",
+          }}
+          contentInset={{
+            top: 0,
+            bottom: 200, // Make space at the bottom of the ScrollView
+          }}
+        >
+          {/* group dishes by category */}
+          {Object.entries(
+            groupBy(station.dishes, (dish) => dish.category as keyof Dish),
+          ).map(([category, dishes]) => (
+            <Category
+              key={category}
+              stationId={station.id}
+              category={category}
+              dishes={dishes}
+            />
+          ))}
+        </ScrollView>
+      </Tabs.Content>
+    ))}
+  </Tabs>
+);
+
+const Category = ({
+  stationId,
+  category,
+  dishes,
+}: Readonly<{
+  stationId: Station["id"];
+  category: string;
+  dishes: Dish[];
+}>) => (
+  <YStack key={category} width={"100%"}>
+    <H3 fontWeight={"800"} marginTop="$5" paddingLeft="$2">
+      {category}
+    </H3>
+    <YGroup bordered separator={<Separator borderWidth={1} />}>
+      {dishes.map((dish) => (
+        <DishCard key={dish.id} dish={dish} stationId={stationId} />
+      ))}
+    </YGroup>
+  </YStack>
+);