Skip to content

Commit

Permalink
fix(web): fix params not update & change function list type (#1535)
Browse files Browse the repository at this point in the history
  • Loading branch information
@newfish-cmyk
newfish-cmyk authored Sep 14, 2023
1 parent d3a2e65 commit 5366201
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 42 deletions.
8 changes: 8 additions & 0 deletions web/src/apis/typing.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,14 @@ export type TFunction = {
params: any;
};

export type TFunctionNode = {
_id: string;
name: string;
level?: number;
isExpanded?: boolean;
children: TreeNode[];
};

export type TFunctionList = {
list: TFunction[];
total: number;
Expand Down
22 changes: 17 additions & 5 deletions web/src/pages/app/functions/mods/DebugPanel/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,17 @@ const HAS_BODY_PARAMS_METHODS: (TMethod | undefined)[] = ["POST", "PUT", "PATCH"

export default function DebugPanel(props: { containerRef: any }) {
const { t } = useTranslation();
const { getFunctionUrl, currentFunction, setCurrentFunction, setCurrentRequestId } =
useFunctionStore((state: any) => state);
const {
getFunctionUrl,
currentFunction,
setCurrentRequestId,
allFunctionList,
setAllFunctionList,
setCurrentFunction,
} = useFunctionStore((state: any) => state);
const updateDebugFunctionMutation = useUpdateDebugFunctionMutation();
const globalStore = useGlobalStore((state) => state);
const siteSettings = useSiteSettingStore((state) => state.siteSettings);
console.log(siteSettings);

const functionCache = useFunctionCache();

Expand Down Expand Up @@ -118,12 +123,19 @@ export default function DebugPanel(props: { containerRef: any }) {
runningMethod: runningMethod,
};

updateDebugFunctionMutation.mutateAsync({
const res = await updateDebugFunctionMutation.mutateAsync({
name: currentFunction?.name,
params: params,
});

setCurrentFunction({ ...currentFunction, params: params });
if (!res.error) {
setCurrentFunction({ ...currentFunction, params: params });
setAllFunctionList(
allFunctionList.map((item: any) =>
item._id === currentFunction._id ? { ...currentFunction, params: params } : item,
),
);
}

if (!compileRes.error) {
const _funcData = JSON.stringify(compileRes.data);
Expand Down
62 changes: 28 additions & 34 deletions web/src/pages/app/functions/mods/FunctionPanel/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* cloud functions list sidebar
***************************/

import React, { useEffect, useState } from "react";
import React, { useEffect, useMemo, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { AddIcon, Search2Icon } from "@chakra-ui/icons";
import { Badge, HStack, Input, InputGroup, InputLeftElement, useColorMode } from "@chakra-ui/react";
Expand Down Expand Up @@ -33,7 +33,7 @@ import CreateModal from "./CreateModal";

import "./index.css";

import { TFunction } from "@/apis/typing";
import { TFunction, TFunctionNode } from "@/apis/typing";
import useFunctionCache from "@/hooks/useFunctionCache";
import RecycleBinModal from "@/pages/app/functions/mods/RecycleBinModal";
import useGlobalStore from "@/pages/globalStore";
Expand All @@ -43,14 +43,6 @@ type TagItem = {
selected: boolean;
};

export type TreeNode = {
_id: string;
name: string;
level?: number;
isExpanded?: boolean;
children: (TreeNode | TFunction)[];
};

export default function FunctionList() {
const {
setCurrentFunction,
Expand All @@ -62,7 +54,7 @@ export default function FunctionList() {
} = useFunctionStore((store) => store);

const functionCache = useFunctionCache();
const [functionRoot, setFunctionRoot] = useState<TreeNode>({
const [functionRoot, setFunctionRoot] = useState<TFunctionNode>({
_id: "",
name: "",
level: 0,
Expand All @@ -83,28 +75,34 @@ export default function FunctionList() {

const [currentTag, setCurrentTag] = useState<TagItem | null>(null);

const filterFunctions = allFunctionList.filter((item: TFunction) => {
let flag = item?.name.includes(keywords);
if (tagsList.length > 0 && currentTag) {
flag = flag && item.tags.includes(currentTag?.tagName);
}
return flag;
});
const filterFunctions = useMemo(() => {
return allFunctionList.filter((item: any) => {
let flag = item?.name.includes(keywords);

function generateRoot(data: TFunction[]) {
if (tagsList.length > 0 && currentTag) {
flag = flag && item.tags.includes(currentTag?.tagName);
}

return flag;
});
}, [allFunctionList, keywords, tagsList, currentTag]);

function generateRoot(data: TFunctionNode[]) {
const root = functionRoot;
data.forEach((item) => {
const nameParts = item.name.split("/");
let currentNode: TreeNode = root;
let currentNode = root;
nameParts.forEach((part, index) => {
if (currentNode.children.find((node) => node.name === item.name)) {
const index = currentNode.children.findIndex((node) => node.name === item.name);
currentNode.children[index] = item;
return;
} else if (index === nameParts.length - 1) {
currentNode.children.push(item);
return;
}
let existingNode = currentNode.children.find(
(node) => node.name === part && (node as TreeNode).level === index,
(node) => node.name === part && node.level === index,
);
if (!existingNode) {
const newNode = {
Expand All @@ -117,22 +115,22 @@ export default function FunctionList() {
currentNode.children.push(newNode);
existingNode = newNode;
}
currentNode = existingNode as TreeNode;
currentNode = existingNode;
});
});
pruneTree(root, data);
return root;
}

function pruneTree(node: TreeNode, data: TFunction[]): void {
function pruneTree(node: TFunctionNode, data: TFunctionNode[]): void {
node.children = node.children.filter((child) => pruneChildTree(child, data));
}

function pruneChildTree(node: any, data: TFunction[]): boolean {
function pruneChildTree(node: TFunctionNode, data: TFunctionNode[]): boolean {
if (!node.children || node.children.length === 0) {
return data.some((item) => item.name === node.name);
}
node.children = node.children.filter((child: TreeNode) => pruneChildTree(child, data));
node.children = node.children.filter((child) => pruneChildTree(child, data));
return node.children.length > 0 || data.some((item) => item.name === node.name);
}

Expand Down Expand Up @@ -205,8 +203,8 @@ export default function FunctionList() {
) : null;
};

function renderSectionItems(items: TreeNode[], isFuncList = false) {
const sortedItems = [...items].sort((a: TreeNode, b: TreeNode) => {
function renderSectionItems(items: TFunctionNode[], isFuncList = false) {
const sortedItems = [...items].sort((a, b) => {
const isFolderA = a.children && a.children.length > 0;
const isFolderB = b.children && b.children.length > 0;
if (isFolderA && !isFolderB) {
Expand Down Expand Up @@ -297,9 +295,7 @@ export default function FunctionList() {
</HStack>
)}
</SectionList.Item>
{item.isExpanded &&
item?.children?.length &&
renderSectionItems(item.children as TreeNode[])}
{item.isExpanded && item?.children?.length && renderSectionItems(item.children)}
</React.Fragment>
);
});
Expand Down Expand Up @@ -358,11 +354,9 @@ export default function FunctionList() {

<div className="funcList flex-grow" style={{ overflowY: "auto" }}>
{keywords || currentTag ? (
<SectionList>
{renderSectionItems(filterFunctions as unknown as TreeNode[], true)}
</SectionList>
<SectionList>{renderSectionItems(filterFunctions, true)}</SectionList>
) : functionRoot.children?.length ? (
<SectionList>{renderSectionItems(functionRoot.children as TreeNode[])}</SectionList>
<SectionList>{renderSectionItems(functionRoot.children)}</SectionList>
) : (
<EmptyBox hideIcon>
<p>{t("FunctionPanel.EmptyFunctionTip")}</p>
Expand Down
6 changes: 3 additions & 3 deletions web/src/pages/app/functions/store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@ import { create } from "zustand";
import { devtools } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";

import { TFunction } from "@/apis/typing";
import { TFunction, TFunctionNode } from "@/apis/typing";
import useGlobalStore from "@/pages/globalStore";

type State = {
allFunctionList: TFunction[];
allFunctionList: TFunctionNode[];
recentFunctionList: TFunction[];
currentFunction: TFunction | { [key: string]: any };
currentRequestId: string | undefined;
functionCodes: { [key: string]: string };
isFetchButtonClicked: Boolean;
getFunctionUrl: () => string;
setCurrentRequestId: (requestId: string | undefined) => void;
setAllFunctionList: (functionList: TFunction[]) => void;
setAllFunctionList: (functionList: TFunctionNode[]) => void;
setRecentFunctionList: (functionList: TFunction[]) => void;
setCurrentFunction: (currentFunction: TFunction | { [key: string]: any }) => void;
updateFunctionCode: (current: TFunction | { [key: string]: any }, codes: string) => void;
Expand Down

0 comments on commit 5366201

Please sign in to comment.