feat(product): add product post and list and info

Author: lazhenyi

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

@@ -2,17 +2,47 @@
 
 import {MarketTitle} from "@/component/market/marketTitle";
 import {useEffect, useState} from "react";
-import {marketplace_data, MarketplaceData} from "@/app/(default)/marketplace/data";
 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<MarketplaceData[]>([])
+    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(() => {
-        setItemData(marketplace_data)
-    }, []);
+        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())
+                    }
+                }
+            })
+    }, [Query]);
     return (
         <div className="market">
-            <MarketTitle/>
+            <MarketTitle tags={Tags} query={setQuery}/>
             <div className="market-display">
                 {
                     ItemData.map((item,index) => {

src/app/(default)/r/[owner]/[repo]/(default)/layout.tsx

@@ -52,6 +52,7 @@ export default function RepoLayout(props: { children: React.ReactNode, params: P
             setNotFound(true);
             return;
         }
+        const products = json.data.products;
         setRepo(json.data);
         let branches: BranchModel[] = [];
         context.setRepoCtx({
@@ -60,6 +61,7 @@ export default function RepoLayout(props: { children: React.ReactNode, params: P
             repoName: repo,
             repoInfo: json.data,
             branches: branches,
+            products: products
         })
         const branchesRes = await api.Bhtc(owner, repo);
         if (branchesRes.status !== 200 || !branchesRes.data) {
@@ -91,6 +93,7 @@ export default function RepoLayout(props: { children: React.ReactNode, params: P
                 repoName: repo,
                 repoInfo: json.data,
                 branches: branches,
+                products: products
             })
         }
 

src/app/(default)/r/[owner]/[repo]/post/page.tsx

@@ -6,7 +6,18 @@ import {Form, useForm} from "@mantine/form";
 import {CommitModel, DataProductPostParam} from "@/server/types";
 import {RepoApi} from "@/server/RepoApi";
 import {AppWrite} from "@/server/Client";
-import {Box, Button, Divider, Input, InputLabel, LoadingOverlay, Select} from "@mantine/core";
+import {
+    Box,
+    Button,
+    Divider,
+    Input,
+    InputLabel,
+    LoadingOverlay,
+    Pill,
+    PillGroup, PillsInput,
+    PillsInputField,
+    Select
+} from "@mantine/core";
 import {notifications} from "@mantine/notifications";
 import {ProductApi} from "@/server/ProductApi";
 
@@ -76,22 +87,19 @@ export default function ProductPostPage(){
                 }
                 return null;
             },
-            type: (value) => {
-                if (!value) {
-                    return "Type is required";
-                }
-                return null;
-            },
             price: (value) => {
-                if (!value) {
-                    return "Price is required";
+                if (value % 1 !== 0 && value !== 0) {
+                    return "Price is invalid, it is integer";
                 }
                 if (value < 0){
                     return "Price is invalid, it is eqt 0";
                 }
             },
         }
     });
+
+    const [Topics,setTopics] = useState<string[]>([]);
+    const [Topic,setTopic] = useState<string>("");
     const onSubmit = () => {
         if (Publishing) return;
         setPublishing(true);
@@ -109,18 +117,19 @@ export default function ProductPostPage(){
             name: form.getValues().name,
             description: form.getValues().description,
             license: form.getValues().license,
-            price: form.getValues().price,
+            price: Number(form.getValues().price),
             hash: form.getValues().hash,
-            type: form.getValues().type,
+            type: Topics.join(","),
         }
+        console.log(param);
         product_api.Post(Parma!.owner, Parma!.repo, param)
             .then((res) => {
                 if (res.status === 200) {
                     const json:AppWrite<string> = JSON.parse(res.data);
-                    if (json.code === 200 && json.data) {
+                    if (json.code === 200 ) {
                         notifications.show({
                             title: "Success",
-                            message: "Post success"
+                            message: "Post Jobs Submit success, Please You wait"
                         })
                         setTimeout(() => {
                             window.location.href = "/r/" + Parma!.owner + "/" + Parma!.repo;
@@ -139,7 +148,7 @@ export default function ProductPostPage(){
                 POST
             </h1>
             <Box pos="relative">
-                <LoadingOverlay visible={Publishing} loaderProps={{ children: 'Forking...' }} />
+                <LoadingOverlay visible={Publishing} loaderProps={{ children: 'Publish...' }} />
                 <Form
                     form={form}
                     id="LayoutModelRepositoryPOST"
@@ -158,7 +167,7 @@ export default function ProductPostPage(){
                                 }
                             })
                         }
-                        {...form.getInputProps("owner")}
+                        {...form.getInputProps("hash")}
                     />
                     <InputLabel className="w-full">
                         name<a style={{color: 'red'}}> *</a>
@@ -208,14 +217,39 @@ export default function ProductPostPage(){
                     </InputLabel>
                     <InputLabel className="w-full">
                         type<a style={{color: 'red'}}> *</a>
-                        <Input
-                            name="type"
-                            placeholder="Enter product type"
-                            type="tel"
-                            aria-autocomplete={"none"}
-                            key={form.key("type")}
-                            {...form.getInputProps("type")}
-                        />
+                        <PillsInput>
+                            <PillGroup>
+                                {Topics.map((item, index) => (
+                                    <Pill key={index}>{item}</Pill>
+                                ))}
+                                <PillsInputField
+                                    value={Topic}
+                                    placeholder="Add a Type"
+                                    onChange={(e) => {
+                                        setTopic(e.target.value)
+                                    }}
+                                    onKeyDown={(e) => {
+                                        if (e.key === "Enter") {
+                                            if (Topic.length > 0) {
+                                                setTopics([...Topics, Topic])
+                                                setTopic("")
+                                            }
+                                        }
+                                        if (e.key === "Backspace") {
+                                            if (Topic.length === 0) {
+                                                setTopics(Topics.slice(0, -1))
+                                            }
+                                        }
+                                        if (e.key === "Tab") {
+                                            if (Topic.length > 0) {
+                                                setTopics([...Topics, Topic])
+                                                setTopic("")
+                                            }
+                                        }
+                                    }}
+                                />
+                            </PillGroup>
+                        </PillsInput>
                     </InputLabel>
                     <Divider/>
                     <div style={{

src/app/(default)/u/[username]/(default)/page.tsx

@@ -6,6 +6,7 @@ import React, {useEffect, useState} from "react";
 import {AppWrite} from "@/server/Client";
 import {UserDashBored} from "@/server/types";
 import {UserApi} from "@/server/UserApi";
+import {ProductList} from "@/component/user/productlist";
 
 export default function UserPage(props: { params: Promise<{ username: string}> }) {
     const api = new UserApi();
@@ -38,7 +39,7 @@ export default function UserPage(props: { params: Promise<{ username: string}> }
                            <UserRepoList userDash={userDash}/>
                        </TabsPanel>
                        <TabsPanel value="product">
-                           product
+                           <ProductList userDash={userDash}/>
                        </TabsPanel>
                        <TabsPanel value="team">
                            team

src/component/market/marketItem.tsx

@@ -1,11 +1,14 @@
-import {MarketplaceData} from "@/app/(default)/marketplace/data";
+import {ProductList} from "@/server/types";
 
 export interface MarketItemProps {
-    data: MarketplaceData;
+    data: ProductList;
 }
 
 
 export const MarketItem = ({data}: MarketItemProps) => {
+    const product = data.data;
+    const owner = data.owner;
+    // const repo = data.repo;
     return (
         <div className="market-item">
 
@@ -14,14 +17,28 @@ export const MarketItem = ({data}: MarketItemProps) => {
                     display: "flex",
                     gap: "1rem"
                 }}>
-                    <img src={data.image} alt={data.name}/>
-                    <span>{data.name}</span>
+                    <img style={{
+                        borderRadius: "50%",
+                    }} src={owner.avatar || ""} alt={data.owner.uid}/>
+                    <span>{product.name}</span>
                 </div>
-                <span className="price">{data.price}</span>
+                <span className="price">{product.price === 0 ? <a style={{
+                    color: "green"
+                }}>
+                    Free
+                </a> : <a style={{
+                    color: "red"
+                }}>
+                    {`$${product.price}`}
+                </a>}</span>
             </div>
             <div className="market-item-info">
-                <p>{data.description.substring(0,50)} {data.description.length > 50 ? "..." : ""}</p>
-                <p className="tags">{data.tags.map((tag) => <span key={tag}>{tag}</span>)}</p>
+                {
+                    product.description && (
+                        <p>{product.description.substring(0,50)} {product.description.length > 50 ? "..." : ""}</p>
+                    )
+                }
+                <p className="tags">{product.type.split(",").map((tag) => <span key={tag}>{tag}</span>)}</p>
             </div>
         </div>
     )

src/component/market/marketTitle.tsx

@@ -1,6 +1,12 @@
 import {Button, Input, MultiSelect, Select} from "@mantine/core";
+import {ProductListParam} from "@/server/types";
 
-export const MarketTitle = () => {
+interface MarketTitleProps {
+    tags: string[],
+    query: (value: (((prevState: ProductListParam) => ProductListParam) | ProductListParam)) => void
+}
+
+export const MarketTitle = ({tags, query}: MarketTitleProps) => {
     return (
         <div className="market-title">
             <div className="market-image">
@@ -25,7 +31,7 @@ export const MarketTitle = () => {
                     <a>Sort</a>
                     <Select
                         defaultValue={'Most popular'}
-                        data={['Most popular', 'Recently Updated', 'Most relevant', 'Most expensive','Most Cheapest']}
+                        data={['Most popular', 'Recently Updated', 'Most relevant', 'Most expensive', 'Most Cheapest']}
                     />
                 </div>
                 <div style={{
@@ -36,7 +42,15 @@ export const MarketTitle = () => {
                     <a>Type</a>
                     <MultiSelect
                         defaultValue={['All']}
-                        data={['All', 'Data', 'Code', 'Book', 'Image', 'Video', 'Audio',]}
+                        data={['All',...tags]}
+                        onChange={(value) => {
+                            query((prev) => {
+                                return {
+                                    ...prev,
+                                    search: value.join(',')
+                                }
+                            })
+                        }}
                     />
                 </div>
             </div>

src/component/repo/fileaction.tsx

@@ -3,6 +3,7 @@ import {BranchModel, CommitModel, Repository} from "@/server/types";
 import {useDisclosure} from "@mantine/hooks";
 import {CloneModel} from "@/component/repo/clone";
 import dayjs from "dayjs";
+import {useRouter} from "next/navigation";
 
 interface FileActionProps {
     branch: BranchModel[],
@@ -15,6 +16,7 @@ interface FileActionProps {
 
 export const FileAction = ({branch, default_branch, echange, repo, owner, head}: FileActionProps) => {
     const [opened, {open, close}] = useDisclosure(false);
+    const nav = useRouter().replace;
     const relative_time = () => {
         if (head) {
             const date = new Date(Number(head.time) * 1000);
@@ -70,7 +72,7 @@ export const FileAction = ({branch, default_branch, echange, repo, owner, head}:
             </div>
             <div className="file-action-right">
                 <Button onClick={open}>Clone</Button>
-                <Button>Publish</Button>
+                <Button onClick={()=>nav(`/r/${owner}/${repo.name}/post`)}>Publish</Button>
                 <div className="cmt">
                     <a>{head.id.substring(0, 7)} {relative_time()}</a>
                     <a>{repo.nums_commit} commits</a>

src/component/repo/repointro.tsx

@@ -7,6 +7,7 @@ import {Button, Input} from "@mantine/core";
 import ClipboardJS from "clipboard";
 import {notifications} from "@mantine/notifications";
 import {FaRegClipboard} from "react-icons/fa";
+import usePageContext from "@/store/usePageContext";
 
 interface RepoIntroProps {
     repo: Repository,
@@ -20,6 +21,7 @@ export const RepoIntro = ({repo, owner, head}: RepoIntroProps) => {
     const api = new RepoApi();
     const http = "https://" + window.location.host + "/git/" + owner + "/" + repo.name + ".git"
     const ssh = "git@" + window.location.host.split(":")[0] + ":" + owner + "/" + repo.name + ".git";
+    const context = usePageContext();
     const Init = async () => {
         const readme = await api.File(owner, repo.name, "README.md",head.id);
         if (readme.status === 200 && readme.data) {
@@ -142,6 +144,16 @@ export const RepoIntro = ({repo, owner, head}: RepoIntroProps) => {
                         </span>
                         <a>{repo.nums_release}</a>
                     </div>
+                    {
+                        context.repoCtx && (
+                            <div className="repo-intro-card-list-item">
+                                <span>
+                                    Product
+                                </span>
+                                <a>{context.repoCtx.products.length}</a>
+                            </div>
+                        )
+                    }
                 </div>
 
             </div>