Skip to content

Commit

Permalink
refactor(web): show template usedBy total & refactor template list qu…
Browse files Browse the repository at this point in the history 
…ery (#1429)

* fix(web): fix template used by total number

* fix(web): fix template list query
  • Loading branch information
@newfish-cmyk
newfish-cmyk authored Jul 28, 2023
1 parent f490bc4 commit 9189f19
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 36 deletions.
4 changes: 2 additions & 2 deletions web/src/pages/functionTemplate/FuncTemplateItem/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const FuncTemplateItem = (props: { isModal: boolean }) => {
const navigate = useNavigate();

const [template, setTemplate] = useState<TFunctionTemplate>();
const [usedBy, setUsedBy] = useState<any[]>([]);
const [usedBy, setUsedBy] = useState();
const pathname = window.location.href;
const id = pathname.split("/").pop();

Expand All @@ -38,7 +38,7 @@ const FuncTemplateItem = (props: { isModal: boolean }) => {
{
enabled: (id as string)?.length > 12,
onSuccess: (data: any) => {
setUsedBy(data.data.list);
setUsedBy(data.data);
},
},
);
Expand Down
8 changes: 4 additions & 4 deletions web/src/pages/functionTemplate/Mods/TemplateInfo/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import UseTemplate from "./UseTemplate";

import { TFunctionTemplate } from "@/apis/typing";

const TemplateInfo = (props: { functionTemplate: TFunctionTemplate; usedBy: any[] }) => {
const TemplateInfo = (props: { functionTemplate: TFunctionTemplate; usedBy: any }) => {
const { functionTemplate, usedBy } = props;
const { items: functionList, environments, dependencies: packageList } = functionTemplate;

Expand Down Expand Up @@ -94,7 +94,7 @@ const TemplateInfo = (props: { functionTemplate: TFunctionTemplate; usedBy: any[
})}
</Box>
</Box>
<Box className={clsx("border-b-[1px]", usedBy.length === 0 && "pb-2")}>
<Box className={clsx("border-b-[1px]", usedBy?.list?.length === 0 && "pb-2")}>
<div className="flex items-center pt-5">
<span className="text-xl font-bold">{t("Template.UsedBy")}</span>
<span
Expand All @@ -103,11 +103,11 @@ const TemplateInfo = (props: { functionTemplate: TFunctionTemplate; usedBy: any[
darkMode ? "bg-gray-700" : "bg-gray-100",
)}
>
{usedBy.length}
{usedBy?.total}
</span>
</div>
<AvatarGroup size={"sm"} max={10}>
{usedBy.map((item) => {
{usedBy?.list.map((item: { uid: string }) => {
return (
<Box className="my-5 mr-2" key={item.uid}>
<Avatar size="sm" name={item.uid} src={getAvatarUrl(item.uid)} />
Expand Down
54 changes: 24 additions & 30 deletions web/src/pages/functionTemplate/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,20 +51,18 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
const sideBar_data = [
{ text: t("Template.Recommended"), value: "recommended" },
{ text: t("Template.CommunityTemplate"), value: "all" },
{ text: t("Template.My"), value: "my" },
{ text: t("Template.My"), value: "default" },
{ text: t("Template.StaredTemplate"), value: "stared" },
{ text: t("Template.Recent"), value: "recent" },
{ text: t("Template.Recent"), value: "recentUsed" },
];

const defaultQueryData: queryData = {
page: 1,
pageSize: 12,
keyword: "",
type: "default",
type: "",
asc: 1,
sort: "hot",
};

const [queryData, setQueryData] = useState(defaultQueryData);
const setQueryDataDebounced = useMemo(
() =>
Expand All @@ -73,7 +71,6 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
}, 500),
[queryData],
);
const [sorting, setSorting] = useState(sortList[0]);
const [templateList, setTemplateList] = useState<TemplateList>();
const [searchKey, setSearchKey] = useState("");

Expand All @@ -92,12 +89,10 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
return { text: "", value: "" };
};

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

useEffect(() => {
const newSelectedItem = getInitialSelectedItem();
if (newSelectedItem.value !== selectedItem.value) {
setSelectedItem(newSelectedItem);
if (newSelectedItem.value !== queryData.type) {
setQueryData({ ...queryData, type: newSelectedItem.value });
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [window.location.href]);
Expand All @@ -107,7 +102,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
...queryData,
},
{
enabled: selectedItem.value === "all",
enabled: queryData.type === "all",
onSuccess: (data: any) => {
setTemplateList(data.data);
},
Expand All @@ -119,7 +114,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
...queryData,
},
{
enabled: selectedItem.value === "recommended",
enabled: queryData.type === "recommended",
onSuccess: (data: any) => {
setTemplateList(data.data);
},
Expand All @@ -132,7 +127,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
pageSize: 8,
},
{
enabled: ["my", "stared", "recent"].includes(selectedItem.value),
enabled: ["default", "stared", "recentUsed"].includes(queryData.type),
onSuccess: (data: any) => {
setTemplateList(data.data);
},
Expand All @@ -147,20 +142,18 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
const queryMapping = {
all: functionTemplatesQuery,
recommended: recommendFunctionTemplatesQuery,
my: myFunctionTemplatesQuery,
default: myFunctionTemplatesQuery,
stared: myFunctionTemplatesQuery,
recent: myFunctionTemplatesQuery,
recentUsed: myFunctionTemplatesQuery,
};

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

const handleSideBarClick = (item: any) => {
setSelectedItem(item);
setSorting(sortList[0]);
setSearchKey("");
if (item.value === "stared") {
setQueryData({ ...defaultQueryData, type: "stared" });
} else if (item.value === "recent") {
} else if (item.value === "recentUsed") {
setQueryData({ ...defaultQueryData, type: "recentUsed" });
} else {
setQueryData(defaultQueryData);
Expand All @@ -169,7 +162,6 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
};

const handleSortListClick = (e: any) => {
setSorting(e.currentTarget.value);
if (e.currentTarget.value === sortList[1]) {
setQueryData({ ...queryData, asc: 1, sort: null });
} else if (e.currentTarget.value === sortList[0]) {
Expand All @@ -179,7 +171,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {

return (
<div className="pt-4">
{selectedItem.value ? (
{queryData.type ? (
<>
<div
className={clsx(
Expand All @@ -196,7 +188,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
key={item.value}
className={clsx(
styles.explore_item,
item.value === selectedItem.value
item.value === queryData.type
? "bg-primary-100 text-primary-600"
: !darkMode && "text-[#5A646E]",
)}
Expand All @@ -210,7 +202,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
<div
className={clsx("flex items-center justify-between py-5", isModal ? "pl-52" : "pl-72")}
>
{selectedItem.value === "my" ? (
{queryData.type === "default" ? (
<Button
onClick={() => {
navigate("/market/templates/create");
Expand All @@ -223,7 +215,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
</Button>
) : null}
<div className="flex w-full">
{selectedItem.value === "all" || selectedItem.value === "recommended" ? (
{queryData.type === "all" || queryData.type === "recommended" ? (
<InputGroup className="flex">
<InputLeftElement children={<Search2Icon />} height={"2.5rem"} />
<Input
Expand Down Expand Up @@ -275,7 +267,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
<Menu>
<MenuButton className="flex cursor-pointer">
<span className="whitespace-nowrap pl-2 text-lg">
{sorting}
{queryData.sort === "hot" ? sortList[0] : sortList[1]}
<ChevronDownIcon boxSize={6} color="gray.400" />
</span>
</MenuButton>
Expand All @@ -294,8 +286,10 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
</div>
<div className={isModal ? "pl-52" : "pl-72 pr-8"}>
{isLoading ? (
<Center className="w-full pt-36">
<Spinner />
<Center className="min-h-[400px] flex-grow">
<span>
<Spinner />
</span>
</Center>
) : templateList && templateList.list.length > 0 ? (
<>
Expand All @@ -304,7 +298,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
<section
className={clsx(
"mb-3 min-w-[18rem]",
selectedItem.value === "all" || selectedItem.value === "recommended"
queryData.type === "all" || queryData.type === "recommended"
? "w-1/3"
: "w-1/2",
)}
Expand All @@ -313,10 +307,10 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
<TemplateCard
onClick={() => {
navigate(changeURL(`/${item._id}`));
setSelectedItem({ text: "", value: "" });
setQueryData({ ...queryData, type: "" });
}}
template={item}
templateCategory={selectedItem.value}
templateCategory={queryData.type}
/>
</section>
))}
Expand Down

0 comments on commit 9189f19

Please sign in to comment.