From 49dc06e1a3e47892dc93b6c3c9dcc3c7d892430e Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Mon, 26 Aug 2024 17:07:10 +0300
Subject: [PATCH] ui(mobile): Merge the editors for notes and links

---
 apps/mobile/app/dashboard/(tabs)/index.tsx    | 17 ++-------
 apps/mobile/app/dashboard/_layout.tsx         |  7 ----
 .../components/bookmarks/NewBookmarkModal.tsx | 38 +++++++++++++------
 3 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/apps/mobile/app/dashboard/(tabs)/index.tsx b/apps/mobile/app/dashboard/(tabs)/index.tsx
index 994ebb45..dc9871e7 100644
--- a/apps/mobile/app/dashboard/(tabs)/index.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/index.tsx
@@ -2,7 +2,6 @@ import { useRef } from "react";
 import { Platform, View } from "react-native";
 import * as Haptics from "expo-haptics";
 import * as ImagePicker from "expo-image-picker";
-import { useRouter } from "expo-router";
 import NoteEditorModal from "@/components/bookmarks/NewBookmarkModal";
 import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
@@ -20,7 +19,6 @@ function HeaderRight({
   openNewBookmarkModal: () => void;
 }) {
   const { toast } = useToast();
-  const router = useRouter();
   const { settings } = useAppSettings();
   const { uploadAsset } = useUploadAsset(settings, {
     onError: (e) => {
@@ -31,10 +29,8 @@ function HeaderRight({
     <MenuView
       onPressAction={async ({ nativeEvent }) => {
         Haptics.selectionAsync();
-        if (nativeEvent.event === "note") {
+        if (nativeEvent.event === "new") {
           openNewBookmarkModal();
-        } else if (nativeEvent.event === "link") {
-          router.navigate("dashboard/add-link");
         } else if (nativeEvent.event === "library") {
           const result = await ImagePicker.launchImageLibraryAsync({
             mediaTypes: ImagePicker.MediaTypeOptions.Images,
@@ -52,15 +48,8 @@ function HeaderRight({
       }}
       actions={[
         {
-          id: "link",
-          title: "New Link",
-          image: Platform.select({
-            ios: "link",
-          }),
-        },
-        {
-          id: "note",
-          title: "New Note",
+          id: "new",
+          title: "New Bookmark",
           image: Platform.select({
             ios: "note.text",
           }),
diff --git a/apps/mobile/app/dashboard/_layout.tsx b/apps/mobile/app/dashboard/_layout.tsx
index e8733fe0..db4fd251 100644
--- a/apps/mobile/app/dashboard/_layout.tsx
+++ b/apps/mobile/app/dashboard/_layout.tsx
@@ -54,13 +54,6 @@ export default function Dashboard() {
           headerTransparent: true,
         }}
       />
-      <Stack.Screen
-        name="add-link"
-        options={{
-          title: "New link",
-          presentation: "modal",
-        }}
-      />
     </StyledStack>
   );
 }
diff --git a/apps/mobile/components/bookmarks/NewBookmarkModal.tsx b/apps/mobile/components/bookmarks/NewBookmarkModal.tsx
index 6915c663..218c54b8 100644
--- a/apps/mobile/components/bookmarks/NewBookmarkModal.tsx
+++ b/apps/mobile/components/bookmarks/NewBookmarkModal.tsx
@@ -14,6 +14,7 @@ import { BookmarkTypes } from "@hoarder/shared/types/bookmarks";
 import { Button } from "../ui/Button";
 import { Input } from "../ui/Input";
 import PageTitle from "../ui/PageTitle";
+import { useToast } from "../ui/Toast";
 
 const NoteEditorModal = React.forwardRef<
   BottomSheetModal,
@@ -23,14 +24,18 @@ const NoteEditorModal = React.forwardRef<
 
   const [text, setText] = useState("");
   const [error, setError] = useState<string | undefined>();
-
-  const onSuccess = () => {
-    setText("");
-    dismiss();
-  };
+  const { toast } = useToast();
 
   const { mutate: createBookmark } = useCreateBookmark({
-    onSuccess,
+    onSuccess: (resp) => {
+      if (resp.alreadyExists) {
+        toast({
+          message: "Bookmark already exists",
+        });
+      }
+      setText("");
+      dismiss();
+    },
     onError: (e) => {
       let message;
       if (e.data?.zodError) {
@@ -43,6 +48,19 @@ const NoteEditorModal = React.forwardRef<
     },
   });
 
+  const onSubmit = () => {
+    const data = text.trim();
+    try {
+      const url = new URL(data);
+      if (url.protocol != "http:" && url.protocol != "https:") {
+        throw new Error(`Unsupported URL protocol: ${url.protocol}`);
+      }
+      createBookmark({ type: BookmarkTypes.LINK, url: data });
+    } catch (e: unknown) {
+      createBookmark({ type: BookmarkTypes.TEXT, text: data });
+    }
+  };
+
   return (
     <View>
       <BottomSheetModal
@@ -56,7 +74,7 @@ const NoteEditorModal = React.forwardRef<
         )}
         {...props}
       >
-        <PageTitle title="New Note" />
+        <PageTitle title="New Bookmark" />
         <BottomSheetView className="gap-2 p-4">
           {error && (
             <Text className="w-full text-center text-red-500">{error}</Text>
@@ -66,12 +84,10 @@ const NoteEditorModal = React.forwardRef<
             multiline
             placeholder="What's on your mind?"
             autoFocus
+            autoCapitalize={"none"}
             textAlignVertical="top"
           />
-          <Button
-            onPress={() => createBookmark({ type: BookmarkTypes.TEXT, text })}
-            label="Add Note"
-          />
+          <Button onPress={onSubmit} label="Save" />
         </BottomSheetView>
       </BottomSheetModal>
     </View>