From f1d86812e9a045b474f4a1c8cd3621fe17b8b806 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Wed, 13 Mar 2024 00:58:37 +0000
Subject: mobile: Introduce a tab layout and move the sharing page into a modal

---
 packages/mobile/app/[bookmark]/[slug].tsx         |  9 ---
 packages/mobile/app/_layout.tsx                   | 17 +++++-
 packages/mobile/app/dashboard.tsx                 | 38 -------------
 packages/mobile/app/dashboard/(tabs)/_layout.tsx  | 24 ++++++++
 packages/mobile/app/dashboard/(tabs)/index.tsx    |  8 +++
 packages/mobile/app/dashboard/(tabs)/settings.tsx | 38 +++++++++++++
 packages/mobile/app/dashboard/_layout.tsx         |  9 +++
 packages/mobile/app/error.tsx                     |  2 +-
 packages/mobile/app/sharing.tsx                   | 69 ++++++++++++++++++-----
 pnpm-lock.yaml                                    |  3 +
 10 files changed, 153 insertions(+), 64 deletions(-)
 delete mode 100644 packages/mobile/app/[bookmark]/[slug].tsx
 delete mode 100644 packages/mobile/app/dashboard.tsx
 create mode 100644 packages/mobile/app/dashboard/(tabs)/_layout.tsx
 create mode 100644 packages/mobile/app/dashboard/(tabs)/index.tsx
 create mode 100644 packages/mobile/app/dashboard/(tabs)/settings.tsx
 create mode 100644 packages/mobile/app/dashboard/_layout.tsx

diff --git a/packages/mobile/app/[bookmark]/[slug].tsx b/packages/mobile/app/[bookmark]/[slug].tsx
deleted file mode 100644
index 2ca88701..00000000
--- a/packages/mobile/app/[bookmark]/[slug].tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { View, Text } from "react-native";
-
-export default function Bookmark() {
-  return (
-    <View className="flex-1 items-center justify-center gap-4">
-      <Text className="text-4xl">Hoarded!</Text>
-    </View>
-  );
-}
diff --git a/packages/mobile/app/_layout.tsx b/packages/mobile/app/_layout.tsx
index bd269060..e8244867 100644
--- a/packages/mobile/app/_layout.tsx
+++ b/packages/mobile/app/_layout.tsx
@@ -1,11 +1,12 @@
 import "@/globals.css";
 import "expo-dev-client";
 
-import { Slot, useRouter } from "expo-router";
+import { useRouter } from "expo-router";
 import { useShareIntent } from "expo-share-intent";
 import { StatusBar } from "expo-status-bar";
 import { useEffect } from "react";
 import { View } from "react-native";
+import { Stack } from "expo-router/stack";
 
 import { Providers } from "@/lib/providers";
 
@@ -22,10 +23,22 @@ export default function RootLayout() {
       resetShareIntent();
     }
   }, [hasShareIntent]);
+
   return (
     <Providers>
       <View className="h-full w-full bg-white">
-        <Slot />
+        <Stack
+          screenOptions={{
+            headerShown: false,
+          }}
+        >
+          <Stack.Screen
+            name="sharing"
+            options={{
+              presentation: "modal",
+            }}
+          />
+        </Stack>
         <StatusBar style="auto" />
       </View>
     </Providers>
diff --git a/packages/mobile/app/dashboard.tsx b/packages/mobile/app/dashboard.tsx
deleted file mode 100644
index b4f535c5..00000000
--- a/packages/mobile/app/dashboard.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useRouter } from "expo-router";
-import { useEffect } from "react";
-import { Text, View } from "react-native";
-
-import Logo from "@/components/Logo";
-import { Button } from "@/components/ui/Button";
-import { useSession } from "@/lib/session";
-import { api } from "@/lib/trpc";
-
-export default function Dashboard() {
-  const router = useRouter();
-
-  const { isLoggedIn, logout } = useSession();
-
-  useEffect(() => {
-    if (isLoggedIn !== undefined && !isLoggedIn) {
-      router.replace("signin");
-    }
-  }, [isLoggedIn]);
-
-  const { data, error, isLoading } = api.users.whoami.useQuery();
-
-  useEffect(() => {
-    if (error?.data?.code === "UNAUTHORIZED") {
-      logout();
-    }
-  }, [error]);
-
-  return (
-    <View className="flex h-full items-center justify-center gap-4 px-4">
-      <Logo />
-      <Text className="justify-center">
-        Logged in as: {isLoading ? "Loading ..." : data?.email}
-      </Text>
-      <Button label="Log Out" onPress={logout} />
-    </View>
-  );
-}
diff --git a/packages/mobile/app/dashboard/(tabs)/_layout.tsx b/packages/mobile/app/dashboard/(tabs)/_layout.tsx
new file mode 100644
index 00000000..49d95b35
--- /dev/null
+++ b/packages/mobile/app/dashboard/(tabs)/_layout.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { Tabs } from "expo-router";
+import { Home, Settings } from "lucide-react-native";
+
+export default function TabLayout() {
+  return (
+    <Tabs screenOptions={{ tabBarActiveTintColor: "blue" }}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Home",
+          tabBarIcon: ({ color }) => <Home color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="settings"
+        options={{
+          title: "Settings",
+          tabBarIcon: ({ color }) => <Settings color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}
diff --git a/packages/mobile/app/dashboard/(tabs)/index.tsx b/packages/mobile/app/dashboard/(tabs)/index.tsx
new file mode 100644
index 00000000..d043a9c4
--- /dev/null
+++ b/packages/mobile/app/dashboard/(tabs)/index.tsx
@@ -0,0 +1,8 @@
+import { View } from "react-native";
+
+export default function Home() {
+  return (
+    <View className="flex h-full items-center justify-center gap-4 px-4">
+    </View>
+  );
+}
diff --git a/packages/mobile/app/dashboard/(tabs)/settings.tsx b/packages/mobile/app/dashboard/(tabs)/settings.tsx
new file mode 100644
index 00000000..b4f535c5
--- /dev/null
+++ b/packages/mobile/app/dashboard/(tabs)/settings.tsx
@@ -0,0 +1,38 @@
+import { useRouter } from "expo-router";
+import { useEffect } from "react";
+import { Text, View } from "react-native";
+
+import Logo from "@/components/Logo";
+import { Button } from "@/components/ui/Button";
+import { useSession } from "@/lib/session";
+import { api } from "@/lib/trpc";
+
+export default function Dashboard() {
+  const router = useRouter();
+
+  const { isLoggedIn, logout } = useSession();
+
+  useEffect(() => {
+    if (isLoggedIn !== undefined && !isLoggedIn) {
+      router.replace("signin");
+    }
+  }, [isLoggedIn]);
+
+  const { data, error, isLoading } = api.users.whoami.useQuery();
+
+  useEffect(() => {
+    if (error?.data?.code === "UNAUTHORIZED") {
+      logout();
+    }
+  }, [error]);
+
+  return (
+    <View className="flex h-full items-center justify-center gap-4 px-4">
+      <Logo />
+      <Text className="justify-center">
+        Logged in as: {isLoading ? "Loading ..." : data?.email}
+      </Text>
+      <Button label="Log Out" onPress={logout} />
+    </View>
+  );
+}
diff --git a/packages/mobile/app/dashboard/_layout.tsx b/packages/mobile/app/dashboard/_layout.tsx
new file mode 100644
index 00000000..590c82b1
--- /dev/null
+++ b/packages/mobile/app/dashboard/_layout.tsx
@@ -0,0 +1,9 @@
+import { Stack } from "expo-router/stack";
+
+export default function Dashboard() {
+  return (
+    <Stack>
+      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+    </Stack>
+  );
+}
diff --git a/packages/mobile/app/error.tsx b/packages/mobile/app/error.tsx
index a6a18023..2ca227a4 100644
--- a/packages/mobile/app/error.tsx
+++ b/packages/mobile/app/error.tsx
@@ -1,6 +1,6 @@
 import { View, Text } from "react-native";
 
-export default function Error() {
+export default function ErrorPage() {
   return (
     <View className="flex-1 items-center justify-center gap-4">
       <Text className="text-4xl">Error!</Text>
diff --git a/packages/mobile/app/sharing.tsx b/packages/mobile/app/sharing.tsx
index 948fed05..c9b6c0bb 100644
--- a/packages/mobile/app/sharing.tsx
+++ b/packages/mobile/app/sharing.tsx
@@ -1,12 +1,16 @@
-import { useLocalSearchParams, useRouter } from "expo-router";
+import { Link, useLocalSearchParams, useRouter } from "expo-router";
 import { ShareIntent } from "expo-share-intent";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { View, Text } from "react-native";
 
 import { api } from "@/lib/trpc";
 
-export default function Sharing() {
-  const router = useRouter();
+type Mode =
+  | { type: "idle" }
+  | { type: "success"; bookmarkId: string }
+  | { type: "error" };
+
+function SaveBookmark({ setMode }: { setMode: (mode: Mode) => void }) {
   const params = useLocalSearchParams();
 
   const shareIntent = useMemo(() => {
@@ -18,30 +22,67 @@ export default function Sharing() {
     return null;
   }, [params]);
 
+  useEffect(() => {
+    if (!isPending && shareIntent?.text) {
+      mutate({ type: "link", url: shareIntent.text });
+    }
+  }, []);
+
   const { mutate, isPending } = api.bookmarks.createBookmark.useMutation({
     onSuccess: (d) => {
-      router.replace(`bookmark/${d.id}`);
+      setMode({ type: "success", bookmarkId: d.id });
     },
     onError: () => {
-      router.replace("error");
+      setMode({ type: "error" });
     },
   });
 
-  useEffect(() => {
-    if (!isPending && shareIntent?.text) {
-      mutate({ type: "link", url: shareIntent.text });
+  return <Text className="text-4xl">Hoarding ...</Text>;
+}
+
+export default function Sharing() {
+  const router = useRouter();
+  const [mode, setMode] = useState<Mode>({ type: "idle" });
+
+  const isInModal = router.canGoBack();
+
+  let comp;
+  switch (mode.type) {
+    case "idle": {
+      comp = <SaveBookmark setMode={setMode} />;
+      break;
     }
-  }, []);
+    case "success": {
+      comp = <Text className="text-4xl">Hoarded!</Text>;
+      break;
+    }
+    case "error": {
+      comp = <Text className="text-4xl">Error!</Text>;
+      break;
+    }
+  }
 
+  // Auto dismiss the modal after saving.
   useEffect(() => {
-    if (!shareIntent) {
-      router.replace("/");
+    if (mode.type === "idle") {
+      return;
     }
-  }, []);
+
+    if (!isInModal) {
+      return;
+    }
+
+    const timeoutId = setTimeout(() => {
+      router.replace("../");
+    }, 2000);
+
+    return () => clearTimeout(timeoutId);
+  }, [mode.type]);
 
   return (
     <View className="flex-1 items-center justify-center gap-4">
-      <Text className="text-4xl">Hoarding ...</Text>
+      {comp}
+      {isInModal ? <Link href="../">Dismiss</Link> : <Link href="/">Home</Link>}
     </View>
   );
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 670c936f..2b2ae33a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -232,6 +232,9 @@ importers:
       lucide-react-native:
         specifier: ^0.354.0
         version: 0.354.0(react-native-svg@15.1.0)(react-native@0.73.4)(react@18.2.0)
+      metro-cache:
+        specifier: ^0.80.6
+        version: 0.80.6
       nativewind:
         specifier: ^4.0.1
         version: 4.0.36(@babel/core@7.23.9)(react-native-reanimated@3.8.0)(react-native-safe-area-context@4.8.2)(react-native-svg@15.1.0)(react-native@0.73.4)(react@18.2.0)(tailwindcss@3.3.2)
-- 
cgit v1.2.3-70-g09d2