Merge pull request #443 from icssc/dx-improvements

Dx improvements

.env.development

@@ -1 +1 @@
-DATABASE_URL="postgres://admin:admin@localhost:5434/zotmeal"
+DATABASE_URL="postgres://admin:admin@localhost:5433/zotmeal"

apps/expo/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "clean": "git clean -xdf .expo .turbo node_modules",
     "dev": "expo start",
+    "start": "NODE_ENV=production expo start",
     "dev:android": "expo start --android",
     "dev:ios": "expo start --ios",
     "android": "expo run:android",
@@ -21,6 +22,7 @@
     "@react-native-community/datetimepicker": "7.6.1",
     "@react-native-picker/picker": "2.6.1",
     "@react-navigation/drawer": "^6.6.11",
+    "@rehookify/datepicker": "^6.6.1",
     "@shopify/flash-list": "1.6.3",
     "@tamagui/babel-plugin": "^1.94.4",
     "@tamagui/config": "^1.94.4",
@@ -40,6 +42,7 @@
     "expo-linear-gradient": "~12.7.2",
     "expo-linking": "~6.2.2",
     "expo-router": "~3.4.8",
+    "expo-secure-store": "^13.0.1",
     "expo-splash-screen": "~0.26.4",
     "expo-status-bar": "~1.11.1",
     "react": "18.2.0",

apps/expo/src/app/_layout.tsx

@@ -2,19 +2,22 @@ import { config } from "@tamagui/config/v3";
 
 import "@tamagui/core/reset.css";
 
+import type { TokenCache } from "@clerk/clerk-expo/dist/cache";
 import type { FontSource } from "expo-font";
 import { useColorScheme } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useFonts } from "expo-font";
 import { Stack } from "expo-router";
+import * as SecureStore from "expo-secure-store";
 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 Logo from "~/components/Logo";
+import { HamburgerMenu } from "~/components/navigation/HamburgerMenu";
 import { TRPCProvider } from "~/utils";
 import { env } from "../utils/env";
 
@@ -23,6 +26,23 @@ import { env } from "../utils/env";
 
 const tamaguiConfig = createTamagui(config);
 
+const tokenCache: TokenCache = {
+  async getToken(key: string) {
+    try {
+      return SecureStore.getItemAsync(key);
+    } catch (err) {
+      return null;
+    }
+  },
+  async saveToken(key: string, value: string) {
+    try {
+      await SecureStore.setItemAsync(key, value);
+    } catch (err) {
+      console.error(err);
+    }
+  },
+};
+
 export default function RootLayout() {
   const [loaded] = useFonts({
     Inter: Inter as FontSource,
@@ -39,7 +59,10 @@ export default function RootLayout() {
   return (
     <TRPCProvider>
       <TamaguiProvider config={tamaguiConfig}>
-        <ClerkProvider publishableKey={env.CLERK_PUBLISHABLE_KEY}>
+        <ClerkProvider
+          publishableKey={env.CLERK_PUBLISHABLE_KEY}
+          tokenCache={tokenCache}
+        >
           <ToastProvider>
             <Theme name={colorScheme}>
               <Stack
@@ -55,6 +78,7 @@ export default function RootLayout() {
                   },
                 }}
               >
+                <Stack.Screen name="(tabs)" />
                 {/* <Stack.Screen
                 name="events"
                 options={{

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

@@ -1,5 +1,21 @@
+import * as React from "react";
+import { SafeAreaView } from "react-native";
+import { SignedIn, SignedOut, useAuth } from "@clerk/clerk-expo";
 import { Text } from "tamagui";
 
-export default function Auth() {
-  return <Text>Auth</Text>;
+import SignInWithOAuth from "~/components/auth/SignInWithOAuth";
+
+export default function AuthPage() {
+  const auth = useAuth();
+  console.log("is signed in", auth.isSignedIn);
+  return (
+    <SafeAreaView>
+      <SignedIn>
+        <Text>You are Signed in</Text>
+      </SignedIn>
+      <SignedOut>
+        <SignInWithOAuth />
+      </SignedOut>
+    </SafeAreaView>
+  );
 }

apps/expo/src/app/events/_layout.tsx

@@ -15,4 +15,4 @@ export default function EventsLayout() {
             </Stack>
         </EventsProvider>
     )
-}
+}

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

@@ -2,9 +2,9 @@ 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";
+import type { MenuWithRelations } from "@zotmeal/db";
+import { PinButton } from '~/components';
 
 type Station = MenuWithRelations["stations"][0];
 type Dish = MenuWithRelations["stations"][0]["dishes"][0];

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

@@ -1,10 +1,10 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Platform } from "react-native";
 import DateTimePicker from "@react-native-community/datetimepicker";
 import { CalendarDays } from "@tamagui/lucide-icons";
 import { useToastController } from "@tamagui/toast";
 import { endOfWeek, startOfWeek } from "date-fns";
-import { Button, Tabs, Text, useTheme, XStack } from "tamagui";
+import { Button, ScrollView, Tabs, Text, useTheme, XStack } from "tamagui";
 
 import type { PeriodName } from "@zotmeal/utils";
 import {
@@ -14,11 +14,12 @@ import {
 } from "@zotmeal/utils";
 
 import { RestaurantTabs } from "~/components";
+import { CategoryCard } from "~/components/menu/category-card";
 import { useMenuStore } from "~/utils";
 import { api } from "~/utils/api";
+import { EventToast } from "./_components/event-toast";
 import { PeriodPicker } from "./_components/period-picker";
 import { StationTabs } from "./_components/station-tabs";
-import { EventToast } from './_components/event-toast';
 
 export function Home() {
   const { anteateryMenu, brandywineMenu, setAnteateryMenu, setBrandywineMenu } =
@@ -47,8 +48,6 @@ export function Home() {
       }),
     ),
   );
-  console.log(anteateryQuery);
-  console.log(brandywineQuery);
 
   useEffect(() => {
     if (anteateryQuery?.data) {
@@ -103,56 +102,85 @@ export function Home() {
 
   return (
     <RestaurantTabs>
-      <EventToast />
-      <XStack justifyContent="space-around">
-        <PeriodPicker
-          periodName={periodName}
-          setPeriodName={setPeriodName}
-          color={theme.color?.val as string}
-        />
-        {Platform.OS === "android" && (
-          <Button
-            onPress={() => setShowDatePicker(true)}
-            icon={CalendarDays}
-            scaleIcon={1.5}
-            size="$5"
-            borderRadius="$10"
-            pressTheme
-          >
-            {date.toLocaleDateString("en-US")}
-          </Button>
-        )}
-        {showDatePicker && (
-          <DateTimePicker
-            value={date}
-            mode="date"
-            minimumDate={startOfWeek(new Date())}
-            maximumDate={endOfWeek(new Date())}
-            onChange={(_, selectedDate) => {
-              // hide date picker on android
-              setShowDatePicker(Platform.OS === "ios");
-              if (selectedDate) {
-                setDate(selectedDate);
-              }
-            }}
+      <ScrollView>
+        <EventToast />
+
+        <XStack justifyContent="space-around">
+          <PeriodPicker
+            periodName={periodName}
+            setPeriodName={setPeriodName}
+            color={theme.color?.val as string}
           />
-        )}
-      </XStack>
-
-      {[brandywineMenu, anteateryMenu].map((menu) => (
-        <>
-          {menu && (
-            <Tabs.Content
-              key={menu.restaurantId}
-              value={getRestaurantNameById(menu.restaurantId)}
-              alignItems="center"
-              flex={1}
+          {Platform.OS === "android" && (
+            <Button
+              onPress={() => setShowDatePicker(true)}
+              icon={CalendarDays}
+              scaleIcon={1.5}
+              size="$5"
+              borderRadius="$10"
+              pressTheme
             >
-              <StationTabs stations={menu.stations} />
-            </Tabs.Content>
+              {date.toLocaleDateString("en-US")}
+            </Button>
           )}
-        </>
-      ))}
+          {showDatePicker && (
+            <DateTimePicker
+              value={date}
+              mode="date"
+              minimumDate={startOfWeek(new Date())}
+              maximumDate={endOfWeek(new Date())}
+              onChange={(_, selectedDate) => {
+                // hide date picker on android
+                setShowDatePicker(Platform.OS === "ios");
+                if (selectedDate) {
+                  setDate(selectedDate);
+                }
+              }}
+            />
+          )}
+        </XStack>
+
+        <ScrollView horizontal>
+          <XStack gap={10}>
+            <CategoryCard
+              category="Soups"
+              image={""}
+              onPress={function (): void {
+                throw new Error("Function not implemented.");
+              }}
+            />
+            <CategoryCard
+              category="Vegan"
+              image={""}
+              onPress={function (): void {
+                throw new Error("Function not implemented.");
+              }}
+            />
+            <CategoryCard
+              category="Noodles"
+              image={""}
+              onPress={function (): void {
+                throw new Error("Function not implemented.");
+              }}
+            />
+          </XStack>
+        </ScrollView>
+
+        {[brandywineMenu, anteateryMenu].map((menu) => (
+          <>
+            {menu && (
+              <Tabs.Content
+                key={menu.restaurantId}
+                value={getRestaurantNameById(menu.restaurantId)}
+                alignItems="center"
+                flex={1}
+              >
+                <StationTabs stations={menu.stations} />
+              </Tabs.Content>
+            )}
+          </>
+        ))}
+      </ScrollView>
     </RestaurantTabs>
   );
 }

apps/expo/src/components/PinButton.tsx

@@ -8,7 +8,7 @@ interface PinButtonProps extends GetProps<typeof Button> {
   dishName: string;
 }
 
-export default function PinButton({ dishName, ...props }: PinButtonProps) {
+export function PinButton({ dishName, ...props }: PinButtonProps) {
   const [pinnedItems, setPinnedItems] = useState<Record<string, boolean>>({});
   const { getItem, setItem } = useAsyncStorage("pinnedItems");
 

apps/expo/src/components/auth/SignInWithOAuth.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Button } from "react-native";
+import * as WebBrowser from "expo-web-browser";
+import { useOAuth } from "@clerk/clerk-expo";
+
+import { useWarmUpBrowser } from "~/hooks/useWarmUpBrowser";
+
+WebBrowser.maybeCompleteAuthSession();
+
+const SignInWithOAuth = () => {
+  // Warm up the android browser to improve UX
+  // https://docs.expo.dev/guides/authentication/#improving-user-experience
+  useWarmUpBrowser();
+
+  const { startOAuthFlow } = useOAuth({ strategy: "oauth_google" });
+
+  const onPress = React.useCallback(async () => {
+    try {
+      const { createdSessionId, signIn, signUp, setActive } =
+        await startOAuthFlow();
+
+      if (createdSessionId && setActive) {
+        await setActive({ session: createdSessionId }); // Await the setActive function call
+      } else {
+        // Use signIn or signUp for next steps such as MFA
+      }
+    } catch (err) {
+      console.error("OAuth error", err);
+    }
+  }, []);
+
+  return <Button title="Sign in with Google" onPress={onPress} />;
+};
+export default SignInWithOAuth;

apps/expo/src/components/index.ts

@@ -1,6 +1,4 @@
-import HamburgerMenu from "./HamburgerMenu";
-import Logo from "./Logo";
-import PinButton from "./PinButton";
-import RestaurantTabs from "./RestaurantTabs";
-
-export { HamburgerMenu, Logo, PinButton, RestaurantTabs };
+export * from "./navigation/HamburgerMenu";
+export * from "./Logo";
+export * from "./PinButton";
+export * from "./navigation/RestaurantTabs";