feat: useSafeAreaEnv, date store

trevorpfiz · Aug 7, 2024 · bd712ab · bd712ab
1 parent bb316ed
commit bd712ab
Show file tree

Hide file tree

Showing 8 changed files with 161 additions and 110 deletions.
diff --git a/apps/expo/package.json b/apps/expo/package.json
@@ -97,7 +97,9 @@
     "react-native-keyboard-controller": "^1.12.7",
     "react-native-mmkv": "^2.12.2",
     "react-native-openai": "^0.6.1",
+    "react-native-pager-view": "6.3.0",
     "react-native-reanimated": "~3.14.0",
+    "react-native-reanimated-carousel": "^3.5.1",
     "react-native-redash": "^18.1.3",
     "react-native-root-siblings": "^5.0.1",
     "react-native-root-toast": "^3.6.0",

diff --git a/apps/expo/src/app/_layout.tsx b/apps/expo/src/app/_layout.tsx
@@ -5,7 +5,8 @@ import "@bacons/text-decoder/install";
 
 import type { Theme } from "@react-navigation/native";
 import { useEffect, useState } from "react";
-import { Platform } from "react-native";
+import { Platform, View } from "react-native";
+import { useSafeAreaEnv } from "react-native-css-interop/dist/runtime/api";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import {
   initialWindowMetrics,
@@ -90,43 +91,46 @@ const InitialLayout = () => {
 
   return (
     <>
-      <Stack>
-        <Stack.Screen
-          name="index"
-          options={{
-            headerShown: false,
-          }}
-        />
-        <Stack.Screen
-          name="(auth)/signup"
-          options={{
-            presentation: "modal",
-            title: "Sign Up",
-            headerTitle: "",
-            headerLeft: HeaderCloseButton,
-          }}
-        />
-        <Stack.Screen
-          name="(auth)/signin"
-          options={{
-            presentation: "modal",
-            title: "Sign In",
-            headerTitle: "",
-            headerLeft: HeaderCloseButton,
-          }}
-        />
-        <Stack.Screen
-          name="(auth)/reset-password"
-          options={{
-            presentation: "modal",
-            title: "Reset Password",
-            headerTitle: "",
-            headerLeft: HeaderCloseButton,
-          }}
-        />
-        <Stack.Screen name="(app)" options={{ headerShown: false }} />
-      </Stack>
-      <PortalHost />
+      <SafeAreaEnv>
+        <Stack>
+          <Stack.Screen
+            name="index"
+            options={{
+              headerShown: false,
+            }}
+          />
+          <Stack.Screen
+            name="(auth)/signup"
+            options={{
+              presentation: "modal",
+              title: "Sign Up",
+              headerTitle: "",
+              headerLeft: HeaderCloseButton,
+            }}
+          />
+          <Stack.Screen
+            name="(auth)/signin"
+            options={{
+              presentation: "modal",
+              title: "Sign In",
+              headerTitle: "",
+              headerLeft: HeaderCloseButton,
+            }}
+          />
+          <Stack.Screen
+            name="(auth)/reset-password"
+            options={{
+              presentation: "modal",
+              title: "Reset Password",
+              headerTitle: "",
+              headerLeft: HeaderCloseButton,
+            }}
+          />
+          <Stack.Screen name="(app)" options={{ headerShown: false }} />
+        </Stack>
+
+        <PortalHost />
+      </SafeAreaEnv>
     </>
   );
 };
@@ -194,3 +198,8 @@ export default function RootLayout() {
     </SessionContextProvider>
   );
 }
+
+function SafeAreaEnv({ children }: { children: React.ReactNode }) {
+  // Add the safe area insets to the render tree
+  return <View style={[{ flex: 1 }, useSafeAreaEnv()]}>{children}</View>;
+}
diff --git a/apps/expo/src/components/calendar.tsx → apps/expo/src/components/basic-calendar.tsx b/apps/expo/src/components/calendar.tsx → apps/expo/src/components/basic-calendar.tsx
diff --git a/apps/expo/src/components/home/home-calendar.tsx b/apps/expo/src/components/home/home-calendar.tsx
@@ -8,18 +8,21 @@ import { fromDateId, toDateId } from "@marceloterreiro/flash-calendar";
 import { add, sub } from "date-fns";
 import { format } from "date-fns/fp";
 
-import { BasicCalendar } from "~/components/calendar";
+import { BasicCalendar } from "~/components/basic-calendar";
+import { useDateStore } from "~/stores/dateStore";
 
 export function HomeCalendar() {
-  const [currentCalendarMonth, setCurrentCalendarMonth] = useState(new Date());
-  const [selectedDate, setSelectedDate] = useState<Date>(
-    sub(new Date(), { days: 1 }),
-  );
+  const { selectedDate, setSelectedDate } = useDateStore();
+  const [currentCalendarMonth, setCurrentCalendarMonth] =
+    useState(selectedDate);
 
-  const handleDayPress = useCallback<CalendarOnDayPress>((dateId) => {
-    setCurrentCalendarMonth(fromDateId(dateId));
-    setSelectedDate(fromDateId(dateId));
-  }, []);
+  const handleDayPress = useCallback<CalendarOnDayPress>(
+    (dateId) => {
+      setCurrentCalendarMonth(fromDateId(dateId));
+      setSelectedDate(fromDateId(dateId));
+    },
+    [setSelectedDate],
+  );
 
   const calendarActiveDateRanges = useMemo<CalendarActiveDateRange[]>(
     () => [

diff --git a/apps/expo/src/components/home/home-header.tsx b/apps/expo/src/components/home/home-header.tsx
@@ -24,7 +24,7 @@ export default function HomeHeader() {
         </DialogTrigger>
         <DialogContent
           className="rounded-none border-0"
-          overlayClassName="justify-start p-0"
+          overlayClassName="justify-start px-0 py-safe"
           noClose
         >
           <View className="max-h-80">

diff --git a/apps/expo/src/components/ui/dialog.tsx b/apps/expo/src/components/ui/dialog.tsx
@@ -2,7 +2,6 @@ import type { StyleProp, ViewStyle } from "react-native";
 import * as React from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
-import { SafeAreaView } from "react-native-safe-area-context";
 import * as DialogPrimitive from "@rn-primitives/dialog";
 
 import { X } from "~/lib/icons/x";
@@ -44,7 +43,7 @@ const DialogOverlayNative = React.forwardRef<
 >(({ className, children, ...props }, ref) => {
   return (
     <DialogPrimitive.Overlay
-      style={StyleSheet.absoluteFill}
+      style={StyleSheet.absoluteFill} // TODO: can allow tab bar to be interacted with
       className={cn(
         "z-50 flex items-center justify-center bg-black/80 p-2",
         className,
@@ -87,36 +86,34 @@ const DialogContent = React.forwardRef<
     return (
       <DialogPortal hostName={portalHost}>
         <DialogOverlay className={overlayClassName}>
-          <SafeAreaView>
-            <DialogPrimitive.Content
-              ref={ref}
-              className={cn(
-                "web:cursor-default web:duration-200 z-50 max-w-lg gap-4 rounded-lg border border-border bg-background p-6 shadow-lg",
-                open
-                  ? "web:animate-in web:fade-in-0 web:zoom-in-95"
-                  : "web:animate-out web:fade-out-0 web:zoom-out-95",
-                className,
-              )}
-              {...props}
-            >
-              {children}
-              {!noClose && (
-                <DialogPrimitive.Close
-                  className={
-                    "web:group web:ring-offset-background web:transition-opacity web:hover:opacity-100 web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2 web:disabled:pointer-events-none absolute right-4 top-4 rounded-sm p-0.5 opacity-70"
-                  }
-                >
-                  <X
-                    size={Platform.OS === "web" ? 16 : 18}
-                    className={cn(
-                      "text-muted-foreground",
-                      open && "text-accent-foreground",
-                    )}
-                  />
-                </DialogPrimitive.Close>
-              )}
-            </DialogPrimitive.Content>
-          </SafeAreaView>
+          <DialogPrimitive.Content
+            ref={ref}
+            className={cn(
+              "web:cursor-default web:duration-200 z-50 max-w-lg gap-4 rounded-lg border border-border bg-background p-6 shadow-lg",
+              open
+                ? "web:animate-in web:fade-in-0 web:zoom-in-95"
+                : "web:animate-out web:fade-out-0 web:zoom-out-95",
+              className,
+            )}
+            {...props}
+          >
+            {children}
+            {!noClose && (
+              <DialogPrimitive.Close
+                className={
+                  "web:group web:ring-offset-background web:transition-opacity web:hover:opacity-100 web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2 web:disabled:pointer-events-none absolute right-4 top-4 rounded-sm p-0.5 opacity-70"
+                }
+              >
+                <X
+                  size={Platform.OS === "web" ? 16 : 18}
+                  className={cn(
+                    "text-muted-foreground",
+                    open && "text-accent-foreground",
+                  )}
+                />
+              </DialogPrimitive.Close>
+            )}
+          </DialogPrimitive.Content>
         </DialogOverlay>
       </DialogPortal>
     );

diff --git a/apps/expo/src/stores/dateStore.ts b/apps/expo/src/stores/dateStore.ts
@@ -0,0 +1,25 @@
+import { create } from "zustand";
+
+interface DateState {
+  selectedDate: Date;
+  setSelectedDate: (date: Date) => void;
+}
+
+export const useDateStore = create<DateState>((set) => ({
+  selectedDate: new Date(),
+  setSelectedDate: (date: Date) => set({ selectedDate: date }),
+}));
+
+// Example persist-middleware with MMKV
+// export const useDateStore = create<DateState>()(
+//   persist(
+//     (set) => ({
+//       selectedDate: new Date(),
+//       setSelectedDate: (date: Date) => set({ selectedDate: date }),
+//     }),
+//     {
+//       name: "date-storage", // unique name
+//       storage: createJSONStorage(() => zustandStorage),
+//     },
+//   ),
+// );