feat(market): Remove unused MultiSelect component and refactor query logic

Author: lazhenyi

src/app/(default)/marketplace/page.tsx

@@ -1,57 +1,54 @@
 'use client'
 
 import {MarketTitle} from "@/component/market/marketTitle";
-import {useEffect, useState} from "react";
+import {useState} from "react";
 import {MarketItem} from "@/component/market/marketItem";
 import {ProductList, ProductListParam} from "@/server/types";
 import {ProductApi} from "@/server/ProductApi";
 import {AppWrite} from "@/server/Client";
 
-export default function MarketPlacePage(){
-    const [ItemData,setItemData] = useState<ProductList[]>([])
-    const [Query,setQuery] = useState<ProductListParam>({
+export default function MarketPlacePage() {
+    const [ItemData, setItemData] = useState<ProductList[]>([]);
+    const [Query, setQuery] = useState<ProductListParam>({
         limit: 50,
         page: 1,
         order: "created_at",
         search: ""
-        } as ProductListParam
-    )
+    });
     const [Tags, setTags] = useState<string[]>([]);
     const api = new ProductApi();
-    useEffect(() => {
-        api
-            .List(
-                Query.limit,
-                Query.page,
-                Query.order,
-                Query.search
-            )
-            .then((data) => {
-                if (data.status === 200 && data.data) {
-                    const json: AppWrite<ProductList[]> = JSON.parse(data.data);
-                    if (json.code === 200 && json.data) {
-                        setItemData(json.data)
-                        setTags(json.data.map((item) => {
-                            return item.data.type.split(",").map((tag) => {
-                                return tag
-                            })
-                        }).flat())
-                    }
+
+
+
+    const InitData = async (query: ProductListParam) => {
+        try {
+            const response = await api.List(query.limit, query.page, query.order, query.search);
+            if (response.status === 200 && response.data) {
+                const json: AppWrite<ProductList[]> = JSON.parse(response.data);
+                if (json.code === 200 && json.data) {
+                    setItemData(json.data);
+                    setTags(json.data.flatMap(item => item.data.type.split(",")));
                 }
-            })
-    }, [Query]);
+            }
+        } catch (error) {
+            console.error("Failed to fetch data", error);
+        }
+    };
+
+    const setQuerys = (newQuery: ProductListParam) => {
+        setQuery(newQuery);
+        InitData(newQuery);
+    };
+    InitData(Query);
+
     return (
         <div className="market">
-            <MarketTitle tags={Tags} query={setQuery}/>
+            <MarketTitle tags={Tags} query={setQuerys} value={Query} />
             <div className="market-display">
-                {
-                    ItemData.map((item,index) => {
-                        return (
-                            <MarketItem key={index} data={item}/>
-                        )
-                    })
-                }
+                {ItemData.map((item, index) => (
+                    <MarketItem key={index + item.data.uid} data={item} />
+                ))}
             </div>
         </div>
-    )
+    );
 }

src/component/market/marketItem.tsx

@@ -8,7 +8,6 @@ export interface MarketItemProps {
 export const MarketItem = ({data}: MarketItemProps) => {
     const product = data.data;
     const owner = data.owner;
-    // const repo = data.repo;
     return (
         <div className="market-item">
 

src/component/market/marketTitle.tsx

@@ -1,12 +1,17 @@
-import {Button, Input, MultiSelect, Select} from "@mantine/core";
+import {Button, Input, Select} from "@mantine/core";
 import {ProductListParam} from "@/server/types";
 
 interface MarketTitleProps {
     tags: string[],
-    query: (value: (((prevState: ProductListParam) => ProductListParam) | ProductListParam)) => void
+    query: (query: ProductListParam) => void,
+    value: ProductListParam
 }
 
-export const MarketTitle = ({tags, query}: MarketTitleProps) => {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const MarketTitle = (props: MarketTitleProps) => {
+    // const handleMultiSelectChange = debounce((selected: string[]) => {
+    //     query({      ...value,      search: selected.join(","),    });
+    //     }, 300);
     return (
         <div className="market-title">
             <div className="market-image">
@@ -34,25 +39,18 @@ export const MarketTitle = ({tags, query}: MarketTitleProps) => {
                         data={['Most popular', 'Recently Updated', 'Most relevant', 'Most expensive', 'Most Cheapest']}
                     />
                 </div>
-                <div style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: ".5rem"
-                }}>
-                    <a>Type</a>
-                    <MultiSelect
-                        defaultValue={['All']}
-                        data={['All',...tags]}
-                        onChange={(value) => {
-                            query((prev) => {
-                                return {
-                                    ...prev,
-                                    search: value.join(',')
-                                }
-                            })
-                        }}
-                    />
-                </div>
+                {/*<div style={{*/}
+                {/*    display: "flex",*/}
+                {/*    alignItems: "center",*/}
+                {/*    gap: ".5rem"*/}
+                {/*}}>*/}
+                {/*    <a>Type</a>*/}
+                {/*    <MultiSelect      */}
+                {/*        defaultValue={['All']} */}
+                {/*        data={['All', ...tags]} */}
+                {/*        onChange={(x) => handleMultiSelectChange(x)}*/}
+                {/*    />*/}
+                {/*</div>*/}
             </div>
         </div>
     )