deps(mobile): Upgrade to Expo 52 (#692)

* fix(mobile): Sharing bookmark modal * WIP: Upgrade to 52 * post ugprade fixes * more fixes * fix padding in tabbar
hoarder-app · Nov 24, 2024 · fd4a996 · fd4a996
1 parent d32457e
commit fd4a996
Show file tree

Hide file tree

Showing 15 changed files with 3,830 additions and 4,802 deletions.
diff --git a/apps/browser-extension/package.json b/apps/browser-extension/package.json
@@ -29,8 +29,8 @@
     "clsx": "^2.1.0",
     "cmdk": "^1.0.0",
     "lucide-react": "^0.330.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router-dom": "^6.22.0",
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.2.1",

diff --git a/apps/landing/package.json b/apps/landing/package.json
@@ -20,8 +20,8 @@
     "clsx": "^2.1.0",
     "lucide-react": "^0.330.0",
     "next": "14.2.13",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-select": "^5.8.0",
     "sharp": "^0.33.3",
     "tailwind-merge": "^2.2.1",

diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
@@ -33,9 +33,9 @@ export default function RootLayout() {
   }, [settings.theme]);
 
   return (
-    <ShareIntentProvider>
-      <Providers>
-        <GestureHandlerRootView style={{ flex: 1 }}>
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <ShareIntentProvider>
+        <Providers>
           <View
             className={cn(
               "w-full flex-1 bg-gray-100 text-foreground dark:bg-background",
@@ -60,10 +60,7 @@ export default function RootLayout() {
                 }}
               />
               <Stack.Screen name="server-address" />
-              <Stack.Screen
-                name="sharing"
-                options={{ presentation: "modal" }}
-              />
+              <Stack.Screen name="sharing" />
               <Stack.Screen
                 name="test-connection"
                 options={{
@@ -75,8 +72,8 @@ export default function RootLayout() {
             </StyledStack>
             <StatusBar style="auto" />
           </View>
-        </GestureHandlerRootView>
-      </Providers>
-    </ShareIntentProvider>
+        </Providers>
+      </ShareIntentProvider>
+    </GestureHandlerRootView>
   );
 }
diff --git a/apps/mobile/app/dashboard/(tabs)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
@@ -6,8 +6,8 @@ import { ClipboardList, Home, Settings } from "lucide-react-native";
 export default function TabLayout() {
   return (
     <StyledTabs
-      tabBarClassName="bg-gray-100 dark:bg-background pt-3"
-      sceneContainerClassName="bg-gray-100 dark:bg-background"
+      tabBarClassName="bg-gray-100 dark:bg-background"
+      sceneClassName="bg-gray-100 dark:bg-background"
       screenOptions={{
         headerShown: false,
       }}

diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx
@@ -2,55 +2,56 @@ import React from "react";
 import {
   Keyboard,
   Pressable,
+  ScrollView,
   Text,
   TouchableWithoutFeedback,
   View,
 } from "react-native";
-import { ScrollView } from "react-native-gesture-handler";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import TagPill from "@/components/bookmarks/TagPill";
 import FullPageError from "@/components/FullPageError";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import { Input } from "@/components/ui/Input";
 import { Skeleton } from "@/components/ui/Skeleton";
-import { api } from "@/lib/trpc";
 import { ChevronRight } from "lucide-react-native";
 
-import { useUpdateBookmark } from "@hoarder/shared-react/hooks/bookmarks";
+import {
+  useAutoRefreshingBookmarkQuery,
+  useUpdateBookmark,
+} from "@hoarder/shared-react/hooks/bookmarks";
 import { isBookmarkStillTagging } from "@hoarder/shared-react/utils/bookmarkUtils";
 import { BookmarkTypes, ZBookmark } from "@hoarder/shared/types/bookmarks";
 
 function TagList({ bookmark }: { bookmark: ZBookmark }) {
   return (
     <View className="flex gap-4">
       <Text className="text-lg text-foreground">Tags</Text>
-      {isBookmarkStillTagging(bookmark) ? (
-        <>
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-full" />
-        </>
-      ) : bookmark.tags.length > 0 ? (
-        <View className="flex flex-col gap-2">
+      <View className="flex gap-2">
+        {isBookmarkStillTagging(bookmark) ? (
+          <View className="flex gap-4 pb-3">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-full" />
+          </View>
+        ) : bookmark.tags.length > 0 ? (
           <View className="flex flex-row flex-wrap gap-2 rounded-lg bg-background p-4">
             {bookmark.tags.map((t) => (
               <TagPill key={t.id} tag={t} />
             ))}
           </View>
-
-          <Pressable
-            onPress={() =>
-              router.push(`/dashboard/bookmarks/${bookmark.id}/manage_tags`)
-            }
-            className="flex w-full flex-row justify-between gap-3 rounded-lg bg-white px-4 py-2 dark:bg-accent"
-          >
-            <Text className="text-lg text-accent-foreground">Manage Tags</Text>
-            <ChevronRight color="rgb(0, 122, 255)" />
-          </Pressable>
-        </View>
-      ) : (
-        <Text className="text-foreground">No tags</Text>
-      )}
+        ) : (
+          <Text className="text-foreground">No tags</Text>
+        )}
+        <Pressable
+          onPress={() =>
+            router.push(`/dashboard/bookmarks/${bookmark.id}/manage_tags`)
+          }
+          className="flex w-full flex-row justify-between gap-3 rounded-lg bg-white px-4 py-2 dark:bg-accent"
+        >
+          <Text className="text-lg text-accent-foreground">Manage Tags</Text>
+          <ChevronRight color="rgb(0, 122, 255)" />
+        </Pressable>
+      </View>
     </View>
   );
 }
@@ -133,11 +134,12 @@ const ViewBookmarkPage = () => {
   if (typeof slug !== "string") {
     throw new Error("Unexpected param type");
   }
+
   const {
     data: bookmark,
     isPending,
     refetch,
-  } = api.bookmarks.getBookmark.useQuery({ bookmarkId: slug });
+  } = useAutoRefreshingBookmarkQuery({ bookmarkId: slug });
 
   if (isPending) {
     return <FullPageSpinner />;
@@ -167,6 +169,19 @@ const ViewBookmarkPage = () => {
         options={{
           headerShown: true,
           headerTitle: title ?? "Untitled",
+          headerRight: () => (
+            <Pressable
+              onPress={() => {
+                if (router.canGoBack()) {
+                  router.back();
+                } else {
+                  router.replace("dashboard");
+                }
+              }}
+            >
+              <Text className="text-foreground">Done</Text>
+            </Pressable>
+          ),
         }}
       />
       <ScrollView className="h-screen w-full p-4">

diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/manage_tags.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/manage_tags.tsx
@@ -8,7 +8,10 @@ import { Input } from "@/components/ui/Input";
 import { useToast } from "@/components/ui/Toast";
 import { Check, Plus } from "lucide-react-native";
 
-import { useUpdateBookmarkTags } from "@hoarder/shared-react/hooks/bookmarks";
+import {
+  useAutoRefreshingBookmarkQuery,
+  useUpdateBookmarkTags,
+} from "@hoarder/shared-react/hooks/bookmarks";
 import { api } from "@hoarder/shared-react/trpc";
 
 const NEW_TAG_ID = "new-tag";
@@ -47,28 +50,21 @@ const ListPickerPage = () => {
       ),
     },
   );
-  const { data: existingTags } = api.bookmarks.getBookmark.useQuery(
-    {
-      bookmarkId,
-    },
-    {
-      select: React.useCallback(
-        (data: { tags: { id: string; name: string }[] }) =>
-          data.tags.map((t) => ({
-            id: t.id,
-            name: t.name,
-            lowered: t.name.toLowerCase(),
-          })),
-        [],
-      ),
-    },
-  );
+  const { data: existingTags } = useAutoRefreshingBookmarkQuery({
+    bookmarkId,
+  });
 
-  const [optimisticTags, setOptimisticTags] = React.useState(
-    existingTags ?? [],
-  );
+  const [optimisticTags, setOptimisticTags] = React.useState<
+    { id: string; name: string; lowered: string }[]
+  >([]);
   React.useEffect(() => {
-    setOptimisticTags(existingTags ?? []);
+    setOptimisticTags(
+      existingTags?.tags.map((t) => ({
+        id: t.id,
+        name: t.name,
+        lowered: t.name.toLowerCase(),
+      })) ?? [],
+    );
   }, [existingTags]);
 
   const { mutate: updateTags } = useUpdateBookmarkTags({

diff --git a/apps/mobile/app/sharing.tsx b/apps/mobile/app/sharing.tsx
@@ -52,7 +52,7 @@ function SaveBookmark({ setMode }: { setMode: (mode: Mode) => void }) {
       }
     } else if (!isPending && shareIntent?.files) {
       uploadAsset({
-        type: shareIntent.files[0].type,
+        type: shareIntent.files[0].mimeType,
         name: shareIntent.files[0].fileName ?? "",
         uri: shareIntent.files[0].path,
       });
@@ -96,30 +96,15 @@ export default function Sharing() {
           <Text className="text-4xl text-foreground">
             {mode.type === "alreadyExists" ? "Already Hoarded!" : "Hoarded!"}
           </Text>
-          <View className="flex flex-row gap-2">
-            <Button
-              label="Add to List"
-              onPress={() => {
-                router.push(
-                  `/dashboard/bookmarks/${mode.bookmarkId}/manage_lists`,
-                );
-                if (autoCloseTimeoutId) {
-                  clearTimeout(autoCloseTimeoutId);
-                }
-              }}
-            />
-            <Button
-              label="Manage Tags"
-              onPress={() => {
-                router.push(
-                  `/dashboard/bookmarks/${mode.bookmarkId}/manage_tags`,
-                );
-                if (autoCloseTimeoutId) {
-                  clearTimeout(autoCloseTimeoutId);
-                }
-              }}
-            />
-          </View>
+          <Button
+            label="Manage"
+            onPress={() => {
+              router.replace(`/dashboard/bookmarks/${mode.bookmarkId}/info`);
+              if (autoCloseTimeoutId) {
+                clearTimeout(autoCloseTimeoutId);
+              }
+            }}
+          />
           <Pressable onPress={() => router.replace("dashboard")}>
             <Text className="text-muted-foreground">Dismiss</Text>
           </Pressable>

diff --git a/apps/mobile/components/navigation/tabs.tsx b/apps/mobile/components/navigation/tabs.tsx
@@ -5,21 +5,24 @@ import { cssInterop } from "nativewind";
 function StyledTabsImpl({
   tabBarStyle,
   headerStyle,
+  sceneStyle,
   ...props
 }: React.ComponentProps<typeof Tabs> & {
   tabBarStyle?: ViewStyle;
   headerStyle?: ViewStyle;
+  sceneStyle?: ViewStyle;
 }) {
   props.screenOptions = {
     ...props.screenOptions,
     tabBarStyle,
     headerStyle,
+    sceneStyle,
   };
   return <Tabs {...props} />;
 }
 
 export const StyledTabs = cssInterop(StyledTabsImpl, {
   tabBarClassName: "tabBarStyle",
   headerClassName: "headerStyle",
-  sceneContainerClassName: "sceneContainerStyle",
+  sceneClassName: "sceneStyle",
 });
diff --git a/apps/mobile/components/ui/Toast.tsx b/apps/mobile/components/ui/Toast.tsx
@@ -52,7 +52,7 @@ function Toast({
     <Animated.View
       className={`
         ${toastVariants[variant]}
-        m-2 mb-1 transform rounded-lg p-4 shadow-md transition-all
+        m-2 mb-1 transform rounded-lg p-4 transition-all
       `}
       style={{
         opacity,

diff --git a/apps/mobile/package.json b/apps/mobile/package.json
@@ -16,41 +16,40 @@
     "@hoarder/shared": "workspace:^0.1.0",
     "@hoarder/shared-react": "workspace:^0.1.0",
     "@hoarder/trpc": "workspace:^0.1.0",
-    "@react-native-menu/menu": "^0.9.1",
+    "@react-native-menu/menu": "^1.1.6",
     "@tanstack/react-query": "^5.24.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "expo": "~50.0.11",
-    "expo-build-properties": "^0.11.1",
-    "expo-checkbox": "^3.0.0",
-    "expo-clipboard": "^5.0.1",
-    "expo-config-plugin-ios-share-extension": "^0.0.4",
-    "expo-constants": "~15.4.5",
-    "expo-dev-client": "^3.3.9",
-    "expo-haptics": "^12.8.1",
-    "expo-image": "^1.10.6",
-    "expo-image-picker": "^14.7.1",
-    "expo-linking": "~6.2.2",
-    "expo-navigation-bar": "~2.8.1",
-    "expo-router": "~3.4.8",
-    "expo-secure-store": "^12.8.1",
-    "expo-share-intent": "1.1.0",
-    "expo-status-bar": "~1.11.1",
-    "expo-system-ui": "^2.9.3",
-    "expo-web-browser": "^12.8.2",
+    "expo": "~52.0.11",
+    "expo-build-properties": "^0.13.1",
+    "expo-checkbox": "^4.0.0",
+    "expo-clipboard": "^7.0.0",
+    "expo-constants": "~17.0.3",
+    "expo-dev-client": "^5.0.4",
+    "expo-haptics": "^14.0.0",
+    "expo-image": "^2.0.2",
+    "expo-image-picker": "^16.0.3",
+    "expo-linking": "~7.0.3",
+    "expo-navigation-bar": "~4.0.4",
+    "expo-router": "~4.0.9",
+    "expo-secure-store": "^14.0.0",
+    "expo-share-intent": "3.0.0",
+    "expo-status-bar": "~2.0.0",
+    "expo-system-ui": "^4.0.4",
+    "expo-web-browser": "^14.0.1",
     "lucide-react-native": "^0.354.0",
-    "nativewind": "^4.0.1",
-    "react": "^18.2.0",
-    "react-native": "0.73.4",
+    "nativewind": "^4.1.23",
+    "react": "^18.3.1",
+    "react-native": "0.76.3",
     "react-native-awesome-slider": "^2.5.3",
-    "react-native-gesture-handler": "~2.14.0",
+    "react-native-gesture-handler": "~2.21.2",
     "react-native-image-viewing": "^0.2.2",
     "react-native-markdown-display": "^7.0.2",
-    "react-native-reanimated": "^3.8.0",
-    "react-native-safe-area-context": "4.8.2",
-    "react-native-screens": "~3.29.0",
-    "react-native-svg": "^15.1.0",
-    "react-native-webview": "^13.12.3",
+    "react-native-reanimated": "^3.16.2",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.1.0",
+    "react-native-svg": "^15.8.0",
+    "react-native-webview": "^13.12.2",
     "tailwind-merge": "^2.2.1",
     "use-debounce": "^10.0.0",
     "zod": "^3.22.4",