Merge pull request #264 from icssc/category-filter

hamburger menu, category filter, date & period picker, etc.
icssc · Apr 10, 2024 · fa9c7e8 · fa9c7e8
2 parents 061bb1a + 06e2b67
commit fa9c7e8
Show file tree

Hide file tree

Showing 28 changed files with 5,382 additions and 3,078 deletions.
diff --git a/apps/expo/package.json b/apps/expo/package.json
@@ -16,18 +16,22 @@
   },
   "dependencies": {
     "@expo/metro-config": "^0.17.6",
-    "@react-navigation/drawer": "^6.6.15",
-    "@shopify/flash-list": "1.6.4",
-    "@tamagui/babel-plugin": "^1.94.1",
-    "@tamagui/config": "^1.94.2",
-    "@tamagui/lucide-icons": "^1.94.2",
-    "@tanstack/react-query": "^5.28.14",
+    "@react-native-community/datetimepicker": "7.6.1",
+    "@react-native-picker/picker": "2.6.1",
+    "@react-navigation/drawer": "^6.6.11",
+    "@shopify/flash-list": "1.6.3",
+    "@tamagui/babel-plugin": "^1.94.3",
+    "@tamagui/config": "^1.94.3",
+    "@tamagui/lucide-icons": "^1.94.3",
+    "@tanstack/react-query": "^5.25.0",
     "@trpc/client": "11.0.0-rc.330",
     "@trpc/react-query": "11.0.0-rc.330",
     "@trpc/server": "11.0.0-rc.330",
     "@zotmeal/api": "workspace:^",
+    "@zotmeal/utils": "workspace:^",
     "expo": "~50.0.8",
     "expo-constants": "~15.4.5",
+    "expo-font": "^11.10.3",
     "expo-linking": "~6.2.2",
     "expo-router": "~3.4.8",
     "expo-splash-screen": "~0.26.4",
@@ -42,7 +46,8 @@
     "react-native-screens": "~3.30.1",
     "react-native-svg": "^15.1.0",
     "superjson": "2.2.1",
-    "tamagui": "^1.94.2"
+    "tamagui": "^1.94.3",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -69,4 +74,4 @@
     ]
   },
   "prettier": "@zotmeal/prettier-config"
-}
+}
diff --git a/apps/expo/src/app/_layout.tsx b/apps/expo/src/app/_layout.tsx
@@ -1,9 +1,15 @@
 import { config } from '@tamagui/config/v3';
 import '@tamagui/core/reset.css';
-import { Stack } from "expo-router";
+import InterBold from "@tamagui/font-inter/otf/Inter-Bold.otf";
+import Inter from "@tamagui/font-inter/otf/Inter-Medium.otf";
+import { Menu } from '@tamagui/lucide-icons';
+import type { FontSource } from "expo-font";
+import { useFonts } from "expo-font";
+import { Link, Stack, useSegments } from "expo-router";
+import type { Href } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { useColorScheme } from "react-native";
-import { H3, Image, TamaguiProvider, Theme, View, createTamagui } from "tamagui";
+import { Adapt, Button, H3, Image, Popover, Separator, TamaguiProvider, Theme, View, YGroup, createTamagui } from "tamagui";
 import { TRPCProvider } from "~/utils/api";
 // import { GestureHandlerRootView } from "react-native-gesture-handler";
 // import { Drawer } from "expo-router/drawer";
@@ -13,69 +19,172 @@ import { TRPCProvider } from "~/utils/api";
 
 const tamaguiConfig = createTamagui(config);
 
-const Logo = () => (
+// TODO: linking should only push to stack when the screen isn't home
+export function HamburgerMenu() {
+  const currentSegment = useSegments()[0] ?? "";
+  const screens: Record<string, Href<"pathname">> = {
+    "Home": "/",
+    "Events": "/events/",
+    "Settings": "/settings/",
+    "About": "/about/",
+    "Privacy Policy": "/privacy-policy/",
+  };
+
+  return (
+    <Popover placement="top">
+      <Popover.Trigger asChild>
+        <Button backgroundColor={0} padding={0}>
+          <Menu color="white" size="$2" />
+        </Button>
+      </Popover.Trigger>
+      <Adapt when={"sm" as unknown as undefined} platform="touch">
+        <Popover.Sheet modal dismissOnSnapToBottom snapPoints={[50]}>
+          <Popover.Sheet.Frame padding="$4">
+            <Adapt.Contents />
+          </Popover.Sheet.Frame>
+          <Popover.Sheet.Overlay
+            animation="quickest"
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }} />
+        </Popover.Sheet>
+      </Adapt>
+      <Popover.Content
+        borderWidth={1}
+        borderColor="$borderColor"
+        enterStyle={{ y: -10, opacity: 0 }}
+        exitStyle={{ y: -10, opacity: 0 }}
+        elevate
+        animation={[
+          'quickest',
+          {
+            opacity: {
+              overshootClamping: true,
+            },
+          },
+        ]}
+      >
+        <YGroup separator={<Separator />}>
+          {Object
+            .entries(screens)
+            .map(([name, path]) => (
+              <YGroup.Item key={name}>
+                <Popover.Close asChild disabled={path.replaceAll("/", "") === currentSegment}>
+                  <Link
+                    replace
+                    href={path}
+                    asChild
+                    disabled={path.replaceAll("/", "") === currentSegment}
+                  >
+                    <Button
+                      size="$5"
+                      fontWeight={"800"}
+                      paddingHorizontal="$5"
+                      borderRadius="$10"
+                      disabled={path.replaceAll("/", "") === currentSegment}
+                      disabledStyle={{
+                        opacity: 0.3,
+                      }}
+                    >
+                      {name}
+                    </Button>
+                  </Link>
+                </Popover.Close>
+              </YGroup.Item>
+            ))}
+          <YGroup.Item>
+            <Popover.Close asChild>
+              <Button
+                size="$5"
+                fontWeight={"800"}
+                paddingHorizontal="$5"
+                borderRadius="$10"
+              >
+                Close
+              </Button>
+            </Popover.Close>
+          </YGroup.Item>
+        </YGroup>
+      </Popover.Content>
+    </Popover>
+  );
+}
+
+export const Logo = () => (
   <View flexDirection="row">
     <Image
       resizeMode="contain"
       alignSelf="center"
       source={
         {
-          width: 50,
-          height: 50,
-          uri: "https://www.clipartmax.com/png/middle/432-4326703_uci-peter-the-anteater-sticker.png"
+          width: 43,
+          height: 43,
+          // uri: "https://www.clipartmax.com/png/middle/432-4326703_uci-peter-the-anteater-sticker.png"
+          uri: "https://c.tenor.com/MBn4pz0PYgMAAAAd/tenor.gif"
         }
       }
     />
     <H3
-      color="#FFFFFF"
-      fontWeight={"bold"}
+      color="white"
+      fontWeight={"800"}
     >
       ZotMeal
     </H3>
   </View>
 )
 
 export default function RootLayout() {
+  const [loaded] = useFonts({
+    Inter: Inter as FontSource,
+    InterBold: InterBold as FontSource,
+  });
+
   const colorScheme = useColorScheme();
+
+  if (!loaded) {
+    return null;
+  }
+
   return (
     <TRPCProvider>
       <TamaguiProvider config={tamaguiConfig}>
         <Theme name={colorScheme}>
+
           {/* <GestureHandlerRootView style={{ flex: 1 }}>
             <Drawer>
-              <Drawer.Screen
-                name="index"
-                options={{
-                  drawerLabel: 'Home',
-                  title: 'overview',
-                }}
-              />
-              <Drawer.Screen
-                name="settings"
-                options={{
-                  drawerLabel: 'Settings',
-                  title: 'Settings',
-                }}
-              />
-              <Drawer.Screen
-                name="about"
-                options={{
-                  drawerLabel: 'About',
-                  title: 'About',
-                }}
-              />
-              <Drawer.Screen
-                name="privacy-policy"
-                options={{
-                  drawerLabel: 'Privacy Policy',
-                  title: 'Privacy Policy',
-                }}
-              />
+            <Drawer.Screen
+            name="index"
+            options={{
+              drawerLabel: 'Home',
+              title: 'overview',
+            }}
+            />
+            <Drawer.Screen
+            name="settings"
+            options={{
+              drawerLabel: 'Settings',
+              title: 'Settings',
+            }}
+            />
+            <Drawer.Screen
+            name="about"
+            options={{
+              drawerLabel: 'About',
+              title: 'About',
+            }}
+            />
+            <Drawer.Screen
+            name="privacy-policy"
+            options={{
+              drawerLabel: 'Privacy Policy',
+              title: 'Privacy Policy',
+            }}
+            />
             </Drawer>
           </GestureHandlerRootView> */}
           <Stack
             screenOptions={{
               headerTitle: () => <Logo />,
+              headerRight: () => <HamburgerMenu />,
               headerStyle: {
                 backgroundColor: "#1A1B1D",
               },

diff --git a/apps/expo/src/app/events/event/[id].tsx b/apps/expo/src/app/events/event/[id].tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { ScrollView, Text } from 'tamagui'
+
+export default function Event() {
+  return (
+    <ScrollView>
+      <Text>Event</Text>
+    </ScrollView>
+  )
+}
diff --git a/apps/expo/src/app/events/index.tsx b/apps/expo/src/app/events/index.tsx
@@ -0,0 +1,17 @@
+import { Text } from "tamagui";
+import { api } from "~/utils/api";
+
+export default function Events() {
+  const { data, error } = api.event.get.useQuery({});
+
+  if (!data) {
+    return <Text>Loading...</Text>;
+  }
+
+  if (error) {
+    return <Text>Error: {error.message}</Text>;
+  }
+  return (
+    <Text>Events</Text>
+  );
+}