Skip to content

Commit

Permalink
fix(web): fix navigate & func delete & title overflow (labring#1331)
Browse files Browse the repository at this point in the history 
* fix(web): fix navigate & func delete & overflow

* fix(web):fix template query & ui
  • Loading branch information
@newfish-cmyk
newfish-cmyk authored Jun 29, 2023
1 parent 9d85c50 commit 55507f3
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 36 deletions.
4 changes: 1 addition & 3 deletions web/src/pages/functionTemplate/FuncTemplateItem/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ import { ChevronRightIcon } from "@chakra-ui/icons";
import { useColorMode } from "@chakra-ui/react";
import clsx from "clsx";

import { changeURL } from "@/utils/format";

import TemplateInfo from "../Mods/TemplateInfo";
import { useGetFunctionTemplateUsedByQuery, useGetOneFunctionTemplateQuery } from "../service";

Expand Down Expand Up @@ -57,7 +55,7 @@ const FuncTemplateItem = (props: { setSelectedItem: any; selectedItem: any; isMo
<span
className="cursor-pointer text-second"
onClick={() => {
navigate(changeURL(`/recommended`));
navigate(-1);
setSelectedItem({ text: t("Template.Recommended"), value: "recommended" });
}}
>
Expand Down
2 changes: 1 addition & 1 deletion web/src/pages/functionTemplate/Mods/MonacoEditor/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ const MonacoEditor = (props: {
(func: any) => func.name !== currentFunction?.name,
);
setFunctionList(updatedFunctionList);
setCurrentFunction(functionList[0]);
setCurrentFunction(updatedFunctionList[0]);
}}
headerText={String(t("Delete"))}
bodyText={String(t("FunctionPanel.DeleteConfirm"))}
Expand Down
19 changes: 11 additions & 8 deletions web/src/pages/functionTemplate/Mods/TemplateCard/TemplateCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,16 @@ const TemplateCard = (props: IProps) => {
>
<div className="mx-5" onClick={onClick}>
<div className={clsx("mb-3 flex justify-between pt-4")}>
<div className="flex items-center text-2xl font-semibold">
<div
className={clsx(
"flex items-center text-2xl font-semibold",
templateCategory === "my" ? "w-9/12" : "w-full",
)}
>
<div className="truncate">{template.name}</div>
</div>
<div className="flex items-center">
{templateCategory === "my" && (
{templateCategory === "my" && (
<div className="flex items-center">
<span
className={clsx(
"mr-3 px-2 font-semibold",
Expand All @@ -60,8 +65,6 @@ const TemplateCard = (props: IProps) => {
>
{template.private ? "Private" : "Public"}
</span>
)}
{templateCategory === "my" && (
<Menu placement="bottom-end">
<MenuButton
onClick={(e) => {
Expand Down Expand Up @@ -92,8 +95,8 @@ const TemplateCard = (props: IProps) => {
</MenuItem>
</MenuList>
</Menu>
)}
</div>
</div>
)}
</div>

<div
Expand All @@ -110,7 +113,7 @@ const TemplateCard = (props: IProps) => {
return (
<div
key={item.name}
className="mr-2 rounded-md bg-blue-100 px-2 py-1 font-medium text-blue-700 "
className="mr-2 whitespace-nowrap rounded-md bg-blue-100 px-2 py-1 font-medium text-blue-700"
>
{item.name}
</div>
Expand Down
69 changes: 45 additions & 24 deletions web/src/pages/functionTemplate/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
import { AddIcon, ChevronDownIcon, Search2Icon } from "@chakra-ui/icons";
import {
Button,
Center,
Input,
InputGroup,
InputLeftElement,
Expand All @@ -12,12 +13,14 @@ import {
MenuButton,
MenuItem,
MenuList,
Spinner,
useColorMode,
} from "@chakra-ui/react";
import clsx from "clsx";
import { debounce } from "lodash";

import EmptyBox from "@/components/EmptyBox";
import { changeURL } from "@/utils/format";

import TemplateCard from "./Mods/TemplateCard/TemplateCard";
import TemplatePopOver from "./Mods/TemplatePopover/TemplatePopover";
Expand Down Expand Up @@ -63,9 +66,6 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
sort: "hot",
};

const [selectedItem, setSelectedItem] = useState(
isModal ? { text: "", value: "" } : { text: t("Template.Recommended"), value: "recommended" },
);
const [queryData, setQueryData] = useState(defaultQueryData);
const setQueryDataDebounced = useMemo(
() =>
Expand All @@ -83,25 +83,28 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
const { colorMode } = useColorMode();
const darkMode = colorMode === "dark";

useEffect(() => {
const getInitialSelectedItem = () => {
const match = window.location.href.match(/\/([^/]+)\/?$/);
if (match && match[1]) {
const foundItem = sideBar_data.find((item) => item.value === match[1]);
if (foundItem) {
setSelectedItem(foundItem);
if (foundItem.value === "stared") {
setQueryData({ ...queryData, type: "stared" });
} else if (foundItem.value === "recent") {
setQueryData({ ...queryData, type: "recentUsed" });
}
} else {
setSelectedItem({ text: "", value: "" });
return foundItem;
}
}
return { text: "", value: "" };
};

const [selectedItem, setSelectedItem] = useState(getInitialSelectedItem);

useEffect(() => {
const newSelectedItem = getInitialSelectedItem();
if (newSelectedItem.value !== selectedItem.value) {
setSelectedItem(newSelectedItem);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [window.location.href]);

useGetFunctionTemplatesQuery(
const functionTemplatesQuery = useGetFunctionTemplatesQuery(
{
...queryData,
page: page,
Expand All @@ -114,7 +117,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
},
);

useGetRecommendFunctionTemplatesQuery(
const recommendFunctionTemplatesQuery = useGetRecommendFunctionTemplatesQuery(
{
...queryData,
page: page,
Expand All @@ -127,7 +130,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
},
);

useGetMyFunctionTemplatesQuery(
const myFunctionTemplatesQuery = useGetMyFunctionTemplatesQuery(
{
...queryData,
page: page,
Expand All @@ -141,6 +144,21 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
},
);

function getLoadingStatus(selectedValue: any, queryMapping: any) {
const defaultLoadingStatus = false;
return queryMapping[selectedValue]?.isLoading ?? defaultLoadingStatus;
}

const queryMapping = {
all: functionTemplatesQuery,
recommended: recommendFunctionTemplatesQuery,
my: myFunctionTemplatesQuery,
stared: myFunctionTemplatesQuery,
recent: myFunctionTemplatesQuery,
};

let isLoading = getLoadingStatus(selectedItem.value, queryMapping);

const handleSideBarClick = (item: any) => {
setSelectedItem(item);
setSorting(sortList[0]);
Expand Down Expand Up @@ -264,10 +282,12 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
<span className="whitespace-nowrap text-lg text-grayModern-400">
{t("Template.SortOrd")}{" "}
</span>
<span className="whitespace-nowrap pl-2 text-lg">{sorting}</span>
<Menu>
<MenuButton className="cursor-pointer">
<ChevronDownIcon boxSize={6} color="gray.400" />
<MenuButton className="flex cursor-pointer">
<span className="whitespace-nowrap pl-2 text-lg">
{sorting}
<ChevronDownIcon boxSize={6} color="gray.400" />
</span>
</MenuButton>
<MenuList>
{sortList.map((item) => {
Expand All @@ -283,7 +303,11 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
</div>
</div>
<div className={clsx("flex flex-wrap", isModal ? "pl-52" : "pl-72 pr-8")}>
{templateList && templateList.list.length > 0 ? (
{isLoading ? (
<Center className="h-full w-full">
<Spinner />
</Center>
) : templateList && templateList.list.length > 0 ? (
templateList.list.map((item) => (
<section
className={clsx(
Expand All @@ -297,15 +321,12 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
<TemplatePopOver template={item}>
<TemplateCard
onClick={() => {
const currentURL = window.location.pathname;
const lastIndex = currentURL.lastIndexOf("/");
const newURL = currentURL.substring(0, lastIndex) + `/${item._id}`;
navigate(newURL);
navigate(changeURL(`/${item._id}`));
setSelectedItem({ text: "", value: "" });
}}
template={item}
templateCategory={selectedItem.value}
></TemplateCard>
/>
</TemplatePopOver>
</section>
))
Expand Down

0 comments on commit 55507f3

Please sign in to comment.