From 95f15707962f73fd062d53d5f6455a26664ba00d Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sun, 21 Jan 2024 17:33:21 +0800
Subject: [PATCH] feat: allow to create shortcut if not found

---
 frontend/web/src/pages/ShortcutSpace.tsx | 39 ++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/frontend/web/src/pages/ShortcutSpace.tsx b/frontend/web/src/pages/ShortcutSpace.tsx
index 0ac74cb..feade62 100644
--- a/frontend/web/src/pages/ShortcutSpace.tsx
+++ b/frontend/web/src/pages/ShortcutSpace.tsx
@@ -1,15 +1,23 @@
+import { Button } from "@mui/joy";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { useParams } from "react-router-dom";
+import CreateShortcutDrawer from "@/components/CreateShortcutDrawer";
 import { isURL } from "@/helpers/utils";
+import useNavigateTo from "@/hooks/useNavigateTo";
 import useShortcutStore from "@/stores/v1/shortcut";
+import useUserStore from "@/stores/v1/user";
 import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
 
 const ShortcutSpace = () => {
   const params = useParams();
   const shortcutName = params["*"] || "";
+  const navigateTo = useNavigateTo();
+  const userStore = useUserStore();
+  const currentUser = userStore.getCurrentUser();
   const shortcutStore = useShortcutStore();
   const [shortcut, setShortcut] = useState<Shortcut>();
+  const [showCreateShortcutDrawer, setShowCreateShortcutDrawer] = useState(false);
 
   useEffect(() => {
     (async () => {
@@ -24,15 +32,40 @@ const ShortcutSpace = () => {
   }, [shortcutName]);
 
   if (!shortcut) {
-    return null;
+    if (!currentUser) {
+      navigateTo("/404");
+      return null;
+    }
+    console.log("currentUser", currentUser);
+    return (
+      <>
+        <div className="w-full h-[100svh] flex flex-col justify-center items-center p-4">
+          <p className="text-xl">
+            Shortcut <span className="font-mono">{shortcutName}</span> Not Found.
+          </p>
+          <div className="mt-4">
+            <Button variant="plain" size="sm" onClick={() => setShowCreateShortcutDrawer(true)}>
+              👉 Click here to create it
+            </Button>
+          </div>
+        </div>
+        {showCreateShortcutDrawer && (
+          <CreateShortcutDrawer
+            initialShortcut={{ name: shortcutName }}
+            onClose={() => setShowCreateShortcutDrawer(false)}
+            onConfirm={() => navigateTo("/")}
+          />
+        )}
+      </>
+    );
   }
-
+  // If shortcut is a URL, redirect to it directly.
   if (isURL(shortcut.link)) {
     window.document.title = "Redirecting...";
     window.location.href = shortcut.link;
     return null;
   }
-
+  // Otherwise, render the shortcut link as plain text.
   return <div>{shortcut.link}</div>;
 };