feat: update shortcut redirector

web/src/components/ShortcutListView.tsx

@@ -1,11 +1,14 @@
 import { Tooltip } from "@mui/joy";
 import copy from "copy-to-clipboard";
 import { useState } from "react";
+import { UNKNOWN_ID } from "../helpers/consts";
 import { shortcutService, workspaceService } from "../services";
 import { useAppSelector } from "../store";
-import { UNKNOWN_ID } from "../helpers/consts";
+import { unknownWorkspace, unknownWorkspaceUser } from "../store/modules/workspace";
+import { absolutifyLink } from "../helpers/utils";
 import { showCommonDialog } from "./Alert";
 import Icon from "./Icon";
+import toastHelper from "./Toast";
 import Dropdown from "./common/Dropdown";
 import CreateShortcutDialog from "./CreateShortcutDialog";
 
@@ -20,14 +23,22 @@ interface State {
 
 const ShortcutListView: React.FC<Props> = (props: Props) => {
   const { workspaceId, shortcutList } = props;
-  const { user } = useAppSelector((state) => state.user);
+  const user = useAppSelector((state) => state.user.user as User);
+  const { workspaceList } = useAppSelector((state) => state.workspace);
   const [state, setState] = useState<State>({
     currentEditingShortcutId: UNKNOWN_ID,
   });
+  const workspace = workspaceList.find((workspace) => workspace.id === workspaceId) ?? unknownWorkspace;
+  const workspaceUser = workspace.workspaceUserList.find((workspaceUser) => workspaceUser.userId === user.id) ?? unknownWorkspaceUser;
+
+  const havePermission = (shortcut: Shortcut) => {
+    return workspaceUser.role === "ADMIN" || shortcut.creatorId === user.id;
+  };
 
   const handleCopyButtonClick = (shortcut: Shortcut) => {
     const workspace = workspaceService.getWorkspaceById(workspaceId);
-    copy(`${location.host}/${workspace?.name}/go/${shortcut.name}`);
+    copy(absolutifyLink(`/${workspace?.name}/${shortcut.name}`));
+    toastHelper.error("Shortcut link copied to clipboard.");
   };
 
   const handleEditShortcutButtonClick = (shortcut: Shortcut) => {
@@ -79,14 +90,14 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
                   actions={
                     <>
                       <button
-                        disabled={shortcut.creatorId !== user?.id}
+                        disabled={!havePermission(shortcut)}
                         className="w-full px-3 text-left leading-10 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                         onClick={() => handleEditShortcutButtonClick(shortcut)}
                       >
                         Edit
                       </button>
                       <button
-                        disabled={shortcut.creatorId !== user?.id}
+                        disabled={!havePermission(shortcut)}
                         className="w-full px-3 text-left leading-10 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                         onClick={() => {
                           handleDeleteShortcutButtonClick(shortcut);

web/src/helpers/utils.ts

@@ -4,49 +4,8 @@ export const isNullorUndefined = (value: any) => {
   return isNull(value) || isUndefined(value);
 };
 
-export function getNowTimeStamp(): number {
-  return Date.now();
-}
-
-export function getOSVersion(): "Windows" | "MacOS" | "Linux" | "Unknown" {
-  const appVersion = navigator.userAgent;
-  let detectedOS: "Windows" | "MacOS" | "Linux" | "Unknown" = "Unknown";
-
-  if (appVersion.indexOf("Win") != -1) {
-    detectedOS = "Windows";
-  } else if (appVersion.indexOf("Mac") != -1) {
-    detectedOS = "MacOS";
-  } else if (appVersion.indexOf("Linux") != -1) {
-    detectedOS = "Linux";
-  }
-
-  return detectedOS;
-}
-
-export function debounce(fn: FunctionType, delay: number) {
-  let timer: number | null = null;
-
-  return () => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = setTimeout(fn, delay);
-    } else {
-      timer = setTimeout(fn, delay);
-    }
-  };
-}
-
-export function throttle(fn: FunctionType, delay: number) {
-  let valid = true;
-
-  return () => {
-    if (!valid) {
-      return false;
-    }
-    valid = false;
-    setTimeout(() => {
-      fn();
-      valid = true;
-    }, delay);
-  };
+export function absolutifyLink(rel: string): string {
+  const anchor = document.createElement("a");
+  anchor.setAttribute("href", rel);
+  return anchor.href;
 }

web/src/pages/ShortcutRedirector.tsx

@@ -1,37 +1,35 @@
 import { useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import Header from "../components/Header";
 import { getShortcutWithNameAndWorkspaceName } from "../helpers/api";
 import useLoading from "../hooks/useLoading";
-import { userService } from "../services";
 
 interface State {
   errMessage?: string;
 }
 
 const ShortcutRedirector: React.FC = () => {
-  const navigate = useNavigate();
   const params = useParams();
   const [state, setState] = useState<State>();
   const loadingState = useLoading();
 
   useEffect(() => {
-    if (!userService.getState().user) {
-      navigate("/user/auth");
-      return;
-    }
-
     const workspaceName = params.workspaceName || "";
     const shortcutName = params.shortcutName || "";
     getShortcutWithNameAndWorkspaceName(workspaceName, shortcutName)
       .then(({ data: { data: shortcut } }) => {
         if (shortcut) {
           window.location.href = shortcut.link;
+        } else {
+          setState({
+            errMessage: "Not found",
+          });
+          loadingState.setFinish();
         }
       })
-      .catch((err) => {
+      .catch((error) => {
         setState({
-          errMessage: err?.message || "Not found",
+          errMessage: error.response.data.error || "Error occurred",
         });
         loadingState.setFinish();
       });

web/src/router/index.tsx

@@ -62,21 +62,8 @@ const router = createBrowserRouter([
     },
   },
   {
-    path: "/:workspaceName/go/:shortcutName",
+    path: "/:workspaceName/:shortcutName",
     element: <ShortcutRedirector />,
-    loader: async () => {
-      try {
-        await userService.initialState();
-        await workspaceService.fetchWorkspaceList();
-      } catch (error) {
-        // do nth
-      }
-
-      const { user } = userService.getState();
-      if (isNullorUndefined(user)) {
-        return redirect("/user/auth");
-      }
-    },
   },
 ]);