From 9490a3a616f526ee7b495abab27af111df16bbb4 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Tue, 5 Mar 2024 15:14:38 +0000
Subject: extension: Allow deleting and opening newly saved bookmarks

---
 packages/browser-extension/src/App.tsx             | 40 ----------------
 .../browser-extension/src/BookmarkDeletedPage.tsx  |  3 ++
 .../browser-extension/src/BookmarkSavedPage.tsx    | 56 ++++++++++++++++++++++
 packages/browser-extension/src/Layout.tsx          | 51 ++++++++++++++++++++
 packages/browser-extension/src/SavePage.tsx        | 29 ++++++-----
 packages/browser-extension/src/main.tsx            | 40 +++++++++-------
 6 files changed, 148 insertions(+), 71 deletions(-)
 delete mode 100644 packages/browser-extension/src/App.tsx
 create mode 100644 packages/browser-extension/src/BookmarkDeletedPage.tsx
 create mode 100644 packages/browser-extension/src/BookmarkSavedPage.tsx
 create mode 100644 packages/browser-extension/src/Layout.tsx

(limited to 'packages/browser-extension/src')

diff --git a/packages/browser-extension/src/App.tsx b/packages/browser-extension/src/App.tsx
deleted file mode 100644
index 279c8b7a..00000000
--- a/packages/browser-extension/src/App.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { RefreshCw, Settings, X } from "lucide-react";
-import SavePage from "./SavePage";
-import usePluginSettings from "./utils/settings";
-import { useNavigate } from "react-router-dom";
-
-function App() {
-  const navigate = useNavigate();
-  const [settings, _1, _2, _3, isInit] = usePluginSettings();
-
-  if (!isInit) {
-    return <div className="p-4">Loading ... </div>;
-  }
-
-  if (!settings.apiKey || !settings.address) {
-    navigate("/notconfigured");
-    return;
-  }
-
-  return (
-    <div className="flex flex-col space-y-2">
-      <SavePage />
-      <hr />
-      <div className="flex justify-end space-x-3">
-        {process.env.NODE_ENV == "development" && (
-          <button onClick={() => navigate(0)}>
-            <RefreshCw className="w-4" />
-          </button>
-        )}
-        <button onClick={() => navigate("/options")}>
-          <Settings className="w-4" />
-        </button>
-        <button onClick={() => window.close()}>
-          <X className="w-4" />
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export default App;
diff --git a/packages/browser-extension/src/BookmarkDeletedPage.tsx b/packages/browser-extension/src/BookmarkDeletedPage.tsx
new file mode 100644
index 00000000..23e1d9da
--- /dev/null
+++ b/packages/browser-extension/src/BookmarkDeletedPage.tsx
@@ -0,0 +1,3 @@
+export default function BookmarkDeletedPage() {
+  return <p className="text-lg">Bookmark Deleted!</p>;
+}
diff --git a/packages/browser-extension/src/BookmarkSavedPage.tsx b/packages/browser-extension/src/BookmarkSavedPage.tsx
new file mode 100644
index 00000000..52c09b2c
--- /dev/null
+++ b/packages/browser-extension/src/BookmarkSavedPage.tsx
@@ -0,0 +1,56 @@
+import { useNavigate, useParams } from "react-router-dom";
+import { api } from "./utils/trpc";
+import usePluginSettings from "./utils/settings";
+import { ArrowUpRightFromSquare, Trash } from "lucide-react";
+import Spinner from "./Spinner";
+
+export default function BookmarkSavedPage() {
+  const { bookmarkId } = useParams();
+  const navigate = useNavigate();
+
+  const { mutate: deleteBookmark, isPending } =
+    api.bookmarks.deleteBookmark.useMutation({
+      onSuccess: () => {
+        navigate("/bookmarkdeleted");
+      },
+      onError: () => {},
+    });
+
+  const [settings] = usePluginSettings();
+
+  if (!bookmarkId) {
+    return <div>NOT FOUND</div>;
+  }
+
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <p className="text-lg">Bookmarked!</p>
+      <div className="flex gap-2">
+        <a
+          className="flex gap-2 rounded-md p-3 text-black hover:text-black"
+          target="_blank"
+          href={`${settings.address}/dashboard/preview/${bookmarkId}`}
+        >
+          <ArrowUpRightFromSquare className="my-auto" size="20" />
+          <p className="my-auto">Open</p>
+        </a>
+        <a
+          onClick={() => deleteBookmark({ bookmarkId: bookmarkId })}
+          className="flex gap-2 text-red-500 hover:text-red-500"
+          href="#"
+        >
+          {!isPending ? (
+            <>
+              <Trash className="my-auto" size="20" />
+              <p className="my-auto">Delete</p>
+            </>
+          ) : (
+            <span className="m-auto">
+              <Spinner />
+            </span>
+          )}
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/browser-extension/src/Layout.tsx b/packages/browser-extension/src/Layout.tsx
new file mode 100644
index 00000000..b7768d1a
--- /dev/null
+++ b/packages/browser-extension/src/Layout.tsx
@@ -0,0 +1,51 @@
+import { Outlet } from "react-router-dom";
+import { Home, RefreshCw, Settings, X } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import usePluginSettings from "./utils/settings";
+
+export default function Layout() {
+  const navigate = useNavigate();
+  const [settings, _1, _2, _3, isInit] = usePluginSettings();
+  if (!isInit) {
+    return <div className="p-4">Loading ... </div>;
+  }
+
+  if (!settings.apiKey || !settings.address) {
+    navigate("/notconfigured");
+    return;
+  }
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <div className="rounded-md bg-yellow-100 p-4">
+        <Outlet />
+      </div>
+      <hr />
+      <div className="flex justify-between space-x-3">
+        <div className="my-auto">
+          <a
+            className="flex gap-2 text-black"
+            target="_blank"
+            href={`${settings.address}/dashboard/bookmarks`}
+          >
+            <Home />
+            <span className="text-md my-auto">Bookmarks</span>
+          </a>
+        </div>
+        <div className="flex space-x-3">
+          {process.env.NODE_ENV == "development" && (
+            <button onClick={() => navigate(0)}>
+              <RefreshCw className="w-4" />
+            </button>
+          )}
+          <button onClick={() => navigate("/options")}>
+            <Settings className="w-4" />
+          </button>
+          <button onClick={() => window.close()}>
+            <X className="w-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/browser-extension/src/SavePage.tsx b/packages/browser-extension/src/SavePage.tsx
index 003d4025..8d9266a1 100644
--- a/packages/browser-extension/src/SavePage.tsx
+++ b/packages/browser-extension/src/SavePage.tsx
@@ -1,16 +1,21 @@
 import { useEffect, useState } from "react";
 import Spinner from "./Spinner";
 import { api } from "./utils/trpc";
+import { useNavigate } from "react-router-dom";
 
 export default function SavePage() {
+  const navigator = useNavigate();
   const [error, setError] = useState<string | undefined>(undefined);
 
-  const { mutate: createBookmark, status } =
-    api.bookmarks.createBookmark.useMutation({
-      onError: (e) => {
-        setError("Something went wrong: " + e.message);
-      },
-    });
+  const {
+    data,
+    mutate: createBookmark,
+    status,
+  } = api.bookmarks.createBookmark.useMutation({
+    onError: (e) => {
+      setError("Something went wrong: " + e.message);
+    },
+  });
 
   useEffect(() => {
     async function runSave() {
@@ -39,21 +44,19 @@ export default function SavePage() {
       return <div className="text-red-500">{error}</div>;
     }
     case "success": {
-      return <div className="m-auto text-lg">Bookmark Saved</div>;
+      navigator(`/bookmark/${data.id}`);
+      break;
     }
     case "pending": {
       return (
-        <div className="m-auto">
+        <div className="flex justify-between text-lg">
+          <span>Saving Bookmark </span>
           <Spinner />
         </div>
       );
     }
     case "idle": {
-      return (
-        <div className="m-auto">
-          <Spinner />
-        </div>
-      );
+      return <div />;
     }
   }
 }
diff --git a/packages/browser-extension/src/main.tsx b/packages/browser-extension/src/main.tsx
index 3e269982..cebbde34 100644
--- a/packages/browser-extension/src/main.tsx
+++ b/packages/browser-extension/src/main.tsx
@@ -1,32 +1,36 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
 import "./index.css";
-import { createHashRouter, RouterProvider } from "react-router-dom";
 import OptionsPage from "./OptionsPage.tsx";
 import NotConfiguredPage from "./NotConfiguredPage.tsx";
 import { Providers } from "./utils/providers.tsx";
-
-const router = createHashRouter([
-  {
-    path: "/",
-    element: <App />,
-  },
-  {
-    path: "/notconfigured",
-    element: <NotConfiguredPage />,
-  },
-  {
-    path: "/options",
-    element: <OptionsPage />,
-  },
-]);
+import BookmarkSavedPage from "./BookmarkSavedPage.tsx";
+import { HashRouter, Routes, Route } from "react-router-dom";
+import Layout from "./Layout.tsx";
+import SavePage from "./SavePage.tsx";
+import BookmarkDeletedPage from "./BookmarkDeletedPage.tsx";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <div className="w-96 p-4">
       <Providers>
-        <RouterProvider router={router} />
+        <HashRouter>
+          <Routes>
+            <Route element={<Layout />}>
+              <Route path="/" element={<SavePage />} />
+              <Route
+                path="/bookmark/:bookmarkId"
+                element={<BookmarkSavedPage />}
+              />
+              <Route
+                path="/bookmarkdeleted"
+                element={<BookmarkDeletedPage />}
+              />
+            </Route>
+            <Route path="/notconfigured" element={<NotConfiguredPage />} />
+            <Route path="/options" element={<OptionsPage />} />
+          </Routes>
+        </HashRouter>
       </Providers>
     </div>
   </React.StrictMode>,
-- 
cgit v1.2.3-70-g09d2