feat(market): add market page

Author: lazhenyi

src/app/(default)/m/[uid]/layout.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import React, {useEffect, useState} from "react";
+import {notifications} from "@mantine/notifications";
+import {AppWrite} from "@/server/Client";
+import {ProductList} from "@/server/types";
+import usePageContext from "@/store/usePageContext";
+import {ProductApi} from "@/server/ProductApi";
+
+
+export default function RepoLayout(props: { children: React.ReactNode, params: Promise<{ uid: string }> }) {
+    const api = new ProductApi();
+    const [Loading, setLoading] = useState(false);
+    const [NotFound, setNotFound] = useState(false);
+    const [Product,setProduct] = useState<ProductList | undefined>();
+    const [Parma,setParma] = useState<{ uid: string } | undefined>();
+    const context = usePageContext();
+
+    const Init = async () => {
+        const {uid} = await props.params;
+        setParma({uid});
+        const basic = await api.Info(uid);
+        if (basic.status !== 200){
+            notifications
+                .show({
+                    title: '数据请求失败',
+                    message: 'Repo Not Found',
+                    color: 'red',
+                });
+        }
+        const json: AppWrite<ProductList> = JSON.parse(basic.data);
+        if (json.code !== 200 || !json.data) {
+            setNotFound(true);
+            return;
+        }
+        setProduct(json.data);
+        context.setProduct(json.data);
+        setLoading(true);
+    }
+    useEffect(() => {
+        Init().then().catch();
+    }, []);
+
+    return (
+        <div className="market">
+            {
+                NotFound && (
+                    <div className="not-found">
+                        <h1>404</h1>
+                        <span>Repo Not Found</span>
+                    </div>
+                )
+            }
+            {
+                (Product && Loading && Parma) && (
+                    <>
+                        {props.children}
+                    </>
+                )
+            }
+        </div>
+    );
+}

src/app/(default)/m/[uid]/page.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import usePageContext from "@/store/usePageContext";
+import {ProductList} from "@/server/types";
+import {useEffect, useState} from "react";
+import {Button} from "@mantine/core";
+import {RepoApi} from "@/server/RepoApi";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import dayjs from "dayjs"
+import relativeTime from "dayjs/plugin/relativeTime"
+import {useRouter} from "next/navigation";
+dayjs.extend(relativeTime)
+export default function MarketPage() {
+    const context = usePageContext();
+    const [Product, setProduct] = useState<ProductList | undefined>();
+    const [Readme, setReadme] = useState<string>("")
+    const repo_api = new RepoApi();
+    const nav = useRouter().replace;
+
+    useEffect(() => {
+        if (context.productCTX) {
+            const ctx = context.productCTX;
+            setProduct(ctx);
+            repo_api.File(
+                ctx.owner.username,
+                ctx.repo.name,
+                "README.md",
+                ctx.data.hash,
+            )
+                .then(res=>{
+                    if (res.status === 200) {
+                        setReadme(res.data.toString())
+                    }
+                })
+        }
+    }, []);
+
+    return(
+        <>
+            {
+                Product && <div className={'market-page'}>
+                    <div className="market-page-title">
+                        <div style={{
+                            display: "flex"
+                        }}>
+                            <img src={Product.owner.avatar || ""} alt={Product.data.name}/>
+                            <div>
+                                <h1>{Product.data.name}</h1>
+                                <span>{Product.data.description}</span>
+                            </div>
+                        </div>
+
+
+                    </div>
+                    <div className={'market-page-body'}>
+                        <div className={'market-page-markdown'}>
+                            <ReactMarkdown
+                                rehypePlugins={[rehypeRaw]}
+                                components={{
+                                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                    // @ts-expect-error
+                                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                                    code: ({node, inline, className, children, ...props}) => {
+                                        const match = /language-(\w+)/.exec(className || '');
+                                        return !inline && match ? (
+                                            <div className="code-block">
+                                                <code className={className}>{children}</code>
+                                            </div>
+                                        ) : (
+                                            <code className={className} {...props}>
+                                                {children}
+                                            </code>
+                                        );
+                                    }
+                                }}
+                            >
+                                {Readme}
+                            </ReactMarkdown>
+                        </div>
+                        <div className="market-page-info">
+                            <div style={{
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "space-between",
+                                flexDirection: "row"
+                            }}>
+                                Price: {
+                                Product.data.price === 0 ? <a style={{
+                                    color: "green"
+                                }}>Free</a> : <a style={{
+                                    color: "red"
+                                }}>{Product.data.price}</a>
+                            }
+                                <div className="access">
+                                    <Button>Get Access</Button>
+                                </div>
+                            </div>
+
+                            <div>
+                                License: {Product.data.license}
+                            </div>
+                            <div className="hover" onClick={()=>{
+                                nav(`/r/${Product?.owner.username}/${Product?.repo.name}?tab=intro`)
+                            }}>
+                                Repo: {Product.owner.username} / {Product.repo.name}
+                            </div>
+                            <div className="hover" onClick={()=>{
+                                nav(`/u/${Product?.owner.username}`)
+                            }}>
+                                Owner: {Product.owner.username}
+                            </div>
+                            <div>
+                                Created At: {Product.data.created_at.toString().split(".")[0]}
+                            </div>
+                            <div style={{
+                                display: 'flex',
+                                gap: '5px'
+                            }}>
+                                Tags: {
+                                Product.data.type.split(",").map((value, index)=>{
+                                    return <span style={{
+                                        color: "black",
+                                        backgroundColor: "orangered",
+                                        borderRadius: "5px",
+                                        padding: "0 5px",
+                                    }} key={index}>{value}</span>
+                                })
+                            }
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            }
+        </>
+    )
+}

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

@@ -1,12 +1,11 @@
 'use client'
 
 import {MarketTitle} from "@/component/market/marketTitle";
-import {useState} from "react";
+import {useEffect, 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>({
@@ -20,6 +19,7 @@ export default function MarketPlacePage() {
 
 
 
+
     const InitData = async (query: ProductListParam) => {
         try {
             const response = await api.List(query.limit, query.page, query.order, query.search);
@@ -39,7 +39,9 @@ export default function MarketPlacePage() {
         setQuery(newQuery);
         InitData(newQuery);
     };
-    InitData(Query);
+    useEffect(() => {
+        InitData(Query);
+    }, []);
 
     return (
         <div className="market">

src/component/market/marketItem.tsx

@@ -1,4 +1,5 @@
 import {ProductList} from "@/server/types";
+import {useRouter} from "next/navigation";
 
 export interface MarketItemProps {
     data: ProductList;
@@ -8,8 +9,11 @@ export interface MarketItemProps {
 export const MarketItem = ({data}: MarketItemProps) => {
     const product = data.data;
     const owner = data.owner;
+    const nav = useRouter().replace;
     return (
-        <div className="market-item">
+        <div className="market-item" onClick={()=>{
+            nav(`/m/${product.uid}`)
+        }}>
 
             <div className="market-item-image">
                 <div style={{

src/server/ProductApi.tsx

@@ -14,7 +14,7 @@ export class ProductApi extends HttpClient {
         })
     }
     async Info(uid: string) {
-        return await this.get<string>(`/product/info/${uid}`, {})
+        return await this.get<string>(`/product/info/${uid}`)
     }
     async Download(uid: string) {
         return await this.get<string>(`/product/down/${uid}`, {})

src/store/usePageContext.tsx

@@ -18,12 +18,14 @@ export interface PageState {
         user: UserDashBored,
         username: string
     };
+    productCTX?: ProductList,
     reset: () => void;
     setTab: (tab: string) => void;
     setUrl: (url: string) => void;
     setRepoCtx: (repoCtx: { repo: Repository, owner: string, repoName: string, repoInfo: RepoInfo, branches: BranchModel[],products: ProductList[]}) => void;
     setUserCtx: (userCtx: { user: UserDashBored, username: string }) => void;
     setUrlAndTab: (url: string, tab: string) => void;
+    setProduct: (product: ProductList) => void,
 }
 
 
@@ -36,12 +38,14 @@ const usePageContext = create<PageState>()(
                     tab: '',
                     repoCtx: undefined,
                     userCtx: undefined,
+                    productCTX: undefined,
                     reset: () => set({url: '', tab: ''}),
                     setTab: (tab: string) => set({tab: tab}),
                     setUrl: (url: string) => set({url: url}),
                     setRepoCtx: (repoCtx: { repo: Repository, owner: string, repoName: string , repoInfo: RepoInfo, branches: BranchModel[],products: ProductList[]}) => set({repoCtx: repoCtx}),
                     setUserCtx: (userCtx: { user: UserDashBored, username: string }) => set({userCtx: userCtx}),
                     setUrlAndTab: (url: string, tab: string) => set({url: url, tab: tab}),
+                    setProduct: (product: ProductList) => set({productCTX: product}),
                 }
             ),
             {

src/style/product.css

@@ -45,4 +45,48 @@
             }
         }
     }
+}
+
+.market-page {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    .market-page-title {
+        display: flex;
+        justify-content: space-between;
+        align-content: center;
+        img {
+            margin-top: 2rem;
+            margin-left: 2rem;
+            height: 3rem;
+            width: 3rem;
+        }
+    }
+    .access {
+        margin-right: 2rem;
+    }
+    .market-page-body {
+        display: grid;
+        grid-template-columns: 4fr 300px;
+        .market-page-markdown {
+            margin-top: 2rem;
+            padding: 1rem;
+            border: 1px #d6d6d6 solid;
+        }
+        .market-page-info {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            gap: 1rem;
+            padding: 2rem;
+            max-height: 50vh;
+            margin-top: 2rem;
+            div {
+                cursor: pointer;
+            }
+            .hover:hover {
+                color: #f15108;
+            }
+        }
+    }
 }