From 5522e20104da6afe2e4667cf45dbbbbc0e838865 Mon Sep 17 00:00:00 2001 From: Mohamed Bassem Date: Sat, 23 Nov 2024 20:59:34 +0000 Subject: ui(mobile): Replace bottom sheet with native screens (#690) * Remove bottom sheet from bookmark info page * Remove bottom sheet from manage lists page * Remove bottom sheet from new list page * Remove bottom sheet from new bookmark page * Drop bottom-sheets * Improve the look of the modals * Make the search page fade from bottom --- apps/mobile/components/bookmarks/BookmarkCard.tsx | 15 +-- .../components/bookmarks/ListPickerModal.tsx | 117 -------------------- .../components/bookmarks/NewBookmarkModal.tsx | 98 ----------------- .../components/bookmarks/ViewBookmarkModal.tsx | 119 --------------------- 4 files changed, 2 insertions(+), 347 deletions(-) delete mode 100644 apps/mobile/components/bookmarks/ListPickerModal.tsx delete mode 100644 apps/mobile/components/bookmarks/NewBookmarkModal.tsx delete mode 100644 apps/mobile/components/bookmarks/ViewBookmarkModal.tsx (limited to 'apps/mobile/components/bookmarks') diff --git a/apps/mobile/components/bookmarks/BookmarkCard.tsx b/apps/mobile/components/bookmarks/BookmarkCard.tsx index 5d84ee6f..df5aa666 100644 --- a/apps/mobile/components/bookmarks/BookmarkCard.tsx +++ b/apps/mobile/components/bookmarks/BookmarkCard.tsx @@ -1,4 +1,3 @@ -import { useRef } from "react"; import { ActivityIndicator, Image, @@ -9,10 +8,9 @@ import { View, } from "react-native"; import * as Haptics from "expo-haptics"; -import { useRouter } from "expo-router"; +import { router, useRouter } from "expo-router"; import useAppSettings from "@/lib/settings"; import { api } from "@/lib/trpc"; -import { BottomSheetModal } from "@gorhom/bottom-sheet"; import { MenuView } from "@react-native-menu/menu"; import { Ellipsis, Star } from "lucide-react-native"; @@ -33,7 +31,6 @@ import { Skeleton } from "../ui/Skeleton"; import { useToast } from "../ui/Toast"; import BookmarkAssetImage from "./BookmarkAssetImage"; import BookmarkTextMarkdown from "./BookmarkTextMarkdown"; -import ListPickerModal from "./ListPickerModal"; import TagPill from "./TagPill"; function ActionBar({ bookmark }: { bookmark: ZBookmark }) { @@ -73,8 +70,6 @@ function ActionBar({ bookmark }: { bookmark: ZBookmark }) { onError, }); - const manageListsSheetRef = useRef(null); - return ( {(isArchivePending || isDeletionPending) && } @@ -94,12 +89,6 @@ function ActionBar({ bookmark }: { bookmark: ZBookmark }) { )} - - { Haptics.selectionAsync(); @@ -113,7 +102,7 @@ function ActionBar({ bookmark }: { bookmark: ZBookmark }) { archived: !bookmark.archived, }); } else if (nativeEvent.event === "manage_list") { - manageListsSheetRef?.current?.present(); + router.push(`/dashboard/bookmarks/${bookmark.id}/manage_lists`); } }} actions={[ diff --git a/apps/mobile/components/bookmarks/ListPickerModal.tsx b/apps/mobile/components/bookmarks/ListPickerModal.tsx deleted file mode 100644 index 6079e53d..00000000 --- a/apps/mobile/components/bookmarks/ListPickerModal.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import React from "react"; -import { Pressable, Text, View } from "react-native"; -import Checkbox from "expo-checkbox"; -import { - BottomSheetFlatList, - BottomSheetModal, - BottomSheetModalProps, -} from "@gorhom/bottom-sheet"; - -import { - useAddBookmarkToList, - useBookmarkLists, - useRemoveBookmarkFromList, -} from "@hoarder/shared-react/hooks/lists"; -import { api } from "@hoarder/shared-react/trpc"; - -import PageTitle from "../ui/PageTitle"; -import { useToast } from "../ui/Toast"; - -const ListPickerModal = React.forwardRef< - BottomSheetModal, - Omit & { - bookmarkId: string; - } ->(({ bookmarkId, ...props }, ref) => { - const { toast } = useToast(); - const onError = () => { - toast({ - message: "Something went wrong", - variant: "destructive", - showProgress: false, - }); - }; - const { data: existingLists } = api.lists.getListsOfBookmark.useQuery( - { - bookmarkId, - }, - { - select: (data) => new Set(data.lists.map((l) => l.id)), - }, - ); - const { data } = useBookmarkLists(); - - const { mutate: addToList } = useAddBookmarkToList({ - onSuccess: () => { - toast({ - message: `The bookmark has been added to the list!`, - showProgress: false, - }); - }, - onError, - }); - - const { mutate: removeToList } = useRemoveBookmarkFromList({ - onSuccess: () => { - toast({ - message: `The bookmark has been removed from the list!`, - showProgress: false, - }); - }, - onError, - }); - - const toggleList = (listId: string) => { - if (!existingLists) { - return; - } - if (existingLists.has(listId)) { - removeToList({ bookmarkId, listId }); - } else { - addToList({ bookmarkId, listId }); - } - }; - - const { allPaths } = data ?? {}; - return ( - - - } - className="h-full" - contentContainerStyle={{ - gap: 5, - }} - renderItem={(l) => ( - - toggleList(l.item[l.item.length - 1].id)} - className="flex w-full flex-row justify-between" - > - - {l.item - .map((item) => `${item.icon} ${item.name}`) - .join(" / ")} - - { - toggleList(l.item[l.item.length - 1].id); - }} - /> - - - )} - data={allPaths} - /> - - - ); -}); -ListPickerModal.displayName = "ListPickerModal"; - -export default ListPickerModal; diff --git a/apps/mobile/components/bookmarks/NewBookmarkModal.tsx b/apps/mobile/components/bookmarks/NewBookmarkModal.tsx deleted file mode 100644 index 218c54b8..00000000 --- a/apps/mobile/components/bookmarks/NewBookmarkModal.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import React, { useState } from "react"; -import { Text, View } from "react-native"; -import { - BottomSheetBackdrop, - BottomSheetModal, - BottomSheetModalProps, - BottomSheetView, - useBottomSheetModal, -} from "@gorhom/bottom-sheet"; - -import { useCreateBookmark } from "@hoarder/shared-react/hooks/bookmarks"; -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, - Omit ->(({ ...props }, ref) => { - const { dismiss } = useBottomSheetModal(); - - const [text, setText] = useState(""); - const [error, setError] = useState(); - const { toast } = useToast(); - - const { mutate: createBookmark } = useCreateBookmark({ - onSuccess: (resp) => { - if (resp.alreadyExists) { - toast({ - message: "Bookmark already exists", - }); - } - setText(""); - dismiss(); - }, - onError: (e) => { - let message; - if (e.data?.zodError) { - const zodError = e.data.zodError; - message = JSON.stringify(zodError); - } else { - message = `Something went wrong: ${e.message}`; - } - setError(message); - }, - }); - - 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 ( - - ( - - )} - {...props} - > - - - {error && ( - {error} - )} - -