feat(web): add custom url for page (#592)

* fix(web): add types request url * feat(web): add custom url for per page * feat(web): add tooltip for menu icon
labring · Jan 1, 2023 · 41916f9 · 41916f9
1 parent a0022eb
commit 41916f9
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 38 deletions.
diff --git a/web/src/components/Editor/typesResolve/index.ts b/web/src/components/Editor/typesResolve/index.ts
@@ -3,9 +3,13 @@ import * as monaco from "monaco-editor";
 
 import { globalDeclare } from "./globals";
 
+import useGlobalStore from "@/pages/globalStore";
+
 async function loadPackageTypings(packageName: string) {
+  const { currentApp } = useGlobalStore.getState();
+  const url = `//${currentApp?.gateway.status.appRoute.domain}`;
   const res = await axios({
-    url: `/api/typing/package?packageName=${packageName}`,
+    url: `${url}/typing/package?packageName=${packageName}`,
     method: "GET",
   });
 

diff --git a/web/src/components/IconWrap/index.tsx b/web/src/components/IconWrap/index.tsx
@@ -4,12 +4,13 @@ import { Center, Tooltip } from "@chakra-ui/react";
 export default function IconWrap(props: {
   size?: number;
   children: React.ReactNode;
+  placement?: "top" | "bottom" | "left" | "right";
   tooltip?: string | undefined;
   onClick?: () => void;
 }) {
-  const { size = 20, tooltip } = props;
+  const { size = 20, tooltip, placement = "top" } = props;
   return (
-    <Tooltip label={tooltip} placement="top">
+    <Tooltip label={tooltip} placement={placement}>
       <Center
         onClick={props.onClick}
         className="hover:bg-slate-200 rounded inline-block cursor-pointer "

diff --git a/web/src/layouts/Function.tsx b/web/src/layouts/Function.tsx
@@ -3,19 +3,21 @@ import { Outlet, useParams } from "react-router-dom";
 import { Badge, Center, Spinner } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
 
-import { APP_PHASE_STATUS, SmallNavHeight } from "@/constants/index";
+import { APP_PHASE_STATUS, Pages, SmallNavHeight } from "@/constants/index";
 
 import Header from "./Header";
 
 import { ApplicationControllerFindOne } from "@/apis/v1/applications";
 import useGlobalStore from "@/pages/globalStore";
 
 export default function FunctionLayout() {
-  const { init, loading, setCurrentApp, currentApp } = useGlobalStore((state) => state);
+  const { init, loading, setCurrentApp, currentApp, setCurrentPage } = useGlobalStore(
+    (state) => state,
+  );
 
   const params = useParams();
 
-  const { appid } = params;
+  const { appid, pageId = Pages.function } = params;
 
   useQuery(
     ["getAppDetailQuery", appid],
@@ -34,8 +36,9 @@ export default function FunctionLayout() {
   useEffect(() => {
     if (currentApp?.appid) {
       init();
+      setCurrentPage(pageId);
     }
-  }, [currentApp, init]);
+  }, [currentApp, init, pageId, setCurrentPage]);
 
   return (
     <div>

diff --git a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
@@ -3,6 +3,7 @@
  ***************************/
 
 import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
 import { DeleteIcon, Search2Icon } from "@chakra-ui/icons";
 import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react";
 import { t } from "i18next";
@@ -12,31 +13,44 @@ import FileTypeIcon, { FileType } from "@/components/FileTypeIcon";
 import IconWrap from "@/components/IconWrap";
 import Panel from "@/components/Panel";
 import SectionList from "@/components/SectionList";
+import { Pages } from "@/constants";
 
 import { useDeleteFunctionMutation, useFunctionListQuery } from "../../service";
 import useFunctionStore from "../../store";
 
 import CreateModal from "./CreateModal";
 
 import { TFunction } from "@/apis/typing";
+import useGlobalStore from "@/pages/globalStore";
 
 export default function FunctionList() {
-  const store = useFunctionStore((store) => store);
-  const { setCurrentFunction } = store;
+  const { setCurrentFunction, currentFunction, setAllFunctionList, allFunctionList } =
+    useFunctionStore((store) => store);
 
   const [keywords, setKeywords] = useState("");
 
+  const { currentApp } = useGlobalStore();
+
+  const { id: functionId } = useParams();
+  const navigate = useNavigate();
+
   useFunctionListQuery({
     onSuccess: (data) => {
-      store.setAllFunctionList(data.data);
-      if (!store.currentFunction?.id && data.data.length > 0) {
-        store.setCurrentFunction(data.data[0]);
+      setAllFunctionList(data.data);
+      if (!currentFunction?.id && data.data.length > 0) {
+        const currentFunction =
+          data.data.find((item: TFunction) => item.id === functionId) || data.data[0];
+        setCurrentFunction(currentFunction);
+        navigate(`/app/${currentApp?.appid}/${Pages.function}/${currentFunction?.name}`, {
+          replace: true,
+        });
       }
     },
   });
 
   useEffect(() => {
     return () => {
+      // clear current function
       setCurrentFunction({});
     };
   }, [setCurrentFunction]);
@@ -67,16 +81,17 @@ export default function FunctionList() {
         </div>
 
         <SectionList style={{ height: "calc(100vh - 400px)", overflowY: "auto" }}>
-          {(store.allFunctionList || [])
+          {(allFunctionList || [])
             .filter((item: TFunction) => item?.name.includes(keywords))
             .map((func: any) => {
               return (
                 <SectionList.Item
-                  isActive={func?.name === store.currentFunction?.name}
+                  isActive={func?.name === currentFunction?.name}
                   key={func?.name || ""}
                   className="group"
                   onClick={() => {
-                    store.setCurrentFunction(func);
+                    setCurrentFunction(func);
+                    navigate(`/app/${currentApp?.appid}/${Pages.function}/${func?.name}`);
                   }}
                 >
                   <div>

diff --git a/web/src/pages/app/index.tsx b/web/src/pages/app/index.tsx
@@ -9,16 +9,11 @@ import LogsPage from "./logs";
 import StoragePage from "./storages";
 
 function AppDetail() {
-  const { visitedViews, currentPageId, setCurrentPage } = useGlobalStore();
+  const { visitedViews, currentPageId } = useGlobalStore();
 
   return (
     <>
-      <SiderBar
-        pageId={currentPageId}
-        setPageId={(pageId: string) => {
-          setCurrentPage(pageId);
-        }}
-      />
+      <SiderBar />
       <div className="h-full" style={{ marginLeft: SiderBarWidth }}>
         {[
           {

diff --git a/web/src/pages/app/mods/SiderBar/index.tsx b/web/src/pages/app/mods/SiderBar/index.tsx
@@ -2,23 +2,57 @@
  * cloud functions siderbar menu
  ***************************/
 
-import React from "react";
 import { AiFillDatabase, AiOutlineFunction } from "react-icons/ai";
 import { GrCatalogOption, GrStorage } from "react-icons/gr";
+import { useNavigate, useParams } from "react-router-dom";
 import { Center } from "@chakra-ui/react";
 import clsx from "clsx";
 
+import IconWrap from "@/components/IconWrap";
 import { Pages, SiderBarWidth } from "@/constants/index";
 
 import styles from "./index.module.scss";
 
-export default function SiderBar(props: { pageId: string; setPageId: (pageId: string) => void }) {
-  const { pageId, setPageId } = props;
+import useGlobalStore from "@/pages/globalStore";
+
+export default function SiderBar() {
+  const { pageId } = useParams();
+  const navigate = useNavigate();
+  const { currentApp, setCurrentPage } = useGlobalStore();
+
   const ICONS = [
-    { pageId: Pages.function, component: <AiOutlineFunction size="24" /> },
-    { pageId: Pages.database, component: <AiFillDatabase size="22" /> },
-    { pageId: Pages.storage, component: <GrStorage size="20" /> },
-    { pageId: Pages.logs, component: <GrCatalogOption size="18" /> },
+    {
+      pageId: Pages.function,
+      component: (
+        <IconWrap tooltip="函数" placement="right">
+          <AiOutlineFunction size="24" />
+        </IconWrap>
+      ),
+    },
+    {
+      pageId: Pages.database,
+      component: (
+        <IconWrap tooltip="数据库" placement="right">
+          <AiFillDatabase size="22" />
+        </IconWrap>
+      ),
+    },
+    {
+      pageId: Pages.storage,
+      component: (
+        <IconWrap tooltip="云存储" placement="right">
+          <GrStorage size="20" />
+        </IconWrap>
+      ),
+    },
+    {
+      pageId: Pages.logs,
+      component: (
+        <IconWrap tooltip="日志" placement="right">
+          <GrCatalogOption size="18" />
+        </IconWrap>
+      ),
+    },
   ];
   return (
     <div
@@ -35,7 +69,10 @@ export default function SiderBar(props: { pageId: string; setPageId: (pageId: st
             style={{
               height: SiderBarWidth,
             }}
-            onClick={() => setPageId(item.pageId)}
+            onClick={() => {
+              setCurrentPage(item.pageId);
+              navigate(`/app/${currentApp?.appid}/${item.pageId}`);
+            }}
           >
             {item.component}
           </Center>

diff --git a/web/src/pages/globalStore.ts b/web/src/pages/globalStore.ts
@@ -3,7 +3,7 @@ import create from "zustand";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 
-import { APP_PHASE_STATUS, Pages } from "@/constants";
+import { APP_PHASE_STATUS } from "@/constants";
 
 import { TApplication } from "@/apis/typing";
 import { ApplicationControllerUpdate } from "@/apis/v1/applications";
@@ -27,7 +27,7 @@ type State = {
 
   restartCurrentApp(): void;
 
-  currentPageId: string;
+  currentPageId: string | undefined;
   setCurrentPage: (pageId: string) => void;
 
   visitedViews: string[];
@@ -46,7 +46,10 @@ const useGlobalStore = create<State>()(
 
       loading: true,
 
-      currentPageId: Pages.function,
+      currentPageId: undefined,
+
+      visitedViews: [],
+
       setCurrentPage(pageId) {
         set((state) => {
           state.currentPageId = pageId;
@@ -106,8 +109,6 @@ const useGlobalStore = create<State>()(
         await AuthControllerGetSigninUrl({});
       },
 
-      visitedViews: [Pages.function],
-
       showSuccess: (text: string | React.ReactNode) => {
         toast({
           position: "top",

diff --git a/web/src/pages/home/index.tsx b/web/src/pages/home/index.tsx
@@ -9,7 +9,7 @@ import ConfirmButton from "@/components/ConfirmButton";
 import CopyText from "@/components/CopyText";
 import { formatDate } from "@/utils/format";
 
-import { APP_PHASE_STATUS } from "../../constants";
+import { APP_PHASE_STATUS, Pages } from "../../constants";
 import useGlobalStore from "../globalStore";
 
 import CreateAppModal from "./mods/CreateAppModal";
@@ -114,7 +114,7 @@ function HomePage() {
                         onClick={(event) => {
                           event?.preventDefault();
                           setCurrentApp(item?.appid);
-                          navigate(`/app/${item?.appid}`);
+                          navigate(`/app/${item?.appid}/${Pages.function}`);
                         }}
                       >
                         进入开发

diff --git a/web/src/routes/index.tsx b/web/src/routes/index.tsx
@@ -40,7 +40,7 @@ const routes = [
         element: <FunctionLayout />,
         children: [
           {
-            path: "/app/:appid",
+            path: "/app/:appid/:pageId/:id?",
             element: () => import("@/pages/app/index"),
           },
         ],