From c42ccdfc6fa4e47e2ceab6bfe345f63192c10682 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=87=91=E4=BC=9F=E5=BC=BA?= <iamjoel007@gmail.com>
Date: Thu, 18 May 2023 11:08:55 +0800
Subject: [PATCH] feat: explore list use api

---
 web/app/components/explore/app-card/index.tsx | 12 +--
 web/app/components/explore/app-list/index.tsx | 87 +++++++------------
 .../explore/app-list/style.module.css         |  9 +-
 web/models/explore.ts                         | 23 +++++
 4 files changed, 63 insertions(+), 68 deletions(-)
 create mode 100644 web/models/explore.ts

diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
index 8a95378710..97906abd7f 100644
--- a/web/app/components/explore/app-card/index.tsx
+++ b/web/app/components/explore/app-card/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
+import { App } from '@/models/explore'
 import AppModeLabel from '@/app/(commonLayout)/apps/AppModeLabel'
-import type { App } from '@/types/app'
 import AppIcon from '@/app/components/base/app-icon'
 import { PlusIcon } from '@heroicons/react/20/solid'
 import Button from '../../base/button'
@@ -27,23 +27,23 @@ const AppCard = ({
   onAddToWorkspace
 }: AppCardProps) => {
   const { t } = useTranslation()
-
+  const {app: appBasicInfo} = app
   return (
     <div className={s.wrap}>
       <div className='col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'>
         <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
           <AppIcon size='small' />
           <div className='relative h-8 text-sm font-medium leading-8 grow'>
-            <div className='absolute top-0 left-0 w-full h-full overflow-hidden text-ellipsis whitespace-nowrap'>{app.name}</div>
+            <div className='absolute top-0 left-0 w-full h-full overflow-hidden text-ellipsis whitespace-nowrap'>{appBasicInfo.name}</div>
           </div>
         </div>
-        <div className='mb-3 px-[14px] h-9 text-xs leading-normal text-gray-500 line-clamp-2'>{app.model_config?.pre_prompt}</div>
+        <div className='mb-3 px-[14px] h-9 text-xs leading-normal text-gray-500 line-clamp-2'>{app.description}</div>
         <div className='flex items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px]'>
           <div className={s.mode}>
-            <AppModeLabel mode={app.mode} />
+            <AppModeLabel mode={appBasicInfo.mode} />
           </div>
           <div className={cn(s.opWrap, 'flex items-center w-full space-x-2')}>
-            <Button type='primary' className='grow flex items-center !h-7' onClick={() => onAddToWorkspace(app.id)}>
+            <Button type='primary' className='grow flex items-center !h-7' onClick={() => onAddToWorkspace(appBasicInfo.id)}>
               <PlusIcon className='w-4 h-4 mr-1' />
               <span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
             </Button>
diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index d0fc92c8c7..0c5c5658c9 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -1,70 +1,34 @@
 'use client'
 import React, { FC, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
+import { App } from '@/models/explore'
 import Category from '@/app/components/explore/category'
 import AppCard from '@/app/components/explore/app-card'
 import { fetchAppList } from '@/service/explore'
 import CreateAppModal from '@/app/components/explore/create-app-modal'
+import Loading from '@/app/components/base/loading'
 
 import s from './style.module.css'
 
-const mockList = [
-  {
-    id: 1,
-    name: 'Story Bot',
-    mode: 'chat',
-    category: 'music',
-    model_config: {
-      pre_prompt: 'I need you to play the role of a storyteller, and generate creative and vivid short stories based on the keywords I provide.',
-    }
-  },
-  {
-    id: 2,
-    name: 'Code Translate',
-    mode: 'completion',
-    category: 'news',
-  },
-  {
-    id: 3,
-    name: 'Code Translate',
-    mode: 'completion',
-    category: 'news',
-  },
-  {
-    id: 4,
-    name: 'Code Translate',
-    mode: 'completion',
-    category: 'news',
-  },
-  {
-    id: 5,
-    name: 'Code Translate',
-    mode: 'completion',
-    category: 'news',
-  },
-]
-
-const mockCategories = ['music', 'news']
-
-const isMock = true
 const Apps: FC = ({ }) => {
   const { t } = useTranslation()
 
   const [currCategory, setCurrCategory] = React.useState('')
-  const [allList, setAllList] = React.useState(isMock ? mockList : [])
+  const [allList, setAllList] = React.useState<App[]>([])
+  const [isLoaded, setIsLoaded] = React.useState(false)
+
   const currList = (() => {
     if(currCategory === '') return allList
     return allList.filter(item => item.category === currCategory)
   })()
-  const [categories, setCategories] = React.useState(isMock ? mockCategories : [])
+  const [categories, setCategories] = React.useState([])
   useEffect(() => {
-    if(!isMock) {
-      (async () => {
-        const {categories, recommended_apps}:any = await fetchAppList()
-        setCategories(categories)
-        setAllList(recommended_apps)
-      })()
-    }
+    (async () => {
+      const {categories, recommended_apps}:any = await fetchAppList()
+      setCategories(categories)
+      setAllList(recommended_apps)
+      setIsLoaded(true)
+    })()
   }, [])
 
   const handleAddToWorkspace =  (appId: string) => {
@@ -76,6 +40,15 @@ const Apps: FC = ({ }) => {
   const onCreate = ({name}: any) => {
     console.log({id: currApp.id, name})
   }
+
+  if(!isLoaded) {
+    return (
+      <div className='flex h-full items-center'>
+        <Loading type='area' />
+      </div>
+    )
+  }
+
   return (
     <div className='h-full flex flex-col'>
       <div className='shrink-0 pt-6 px-12'>
@@ -88,14 +61,20 @@ const Apps: FC = ({ }) => {
         value={currCategory}
         onChange={setCurrCategory}
       />
-      <div className='flex flex-col overflow-auto bg-gray-100 shrink-0 grow'>
-        <nav className={`${s.appList} grid content-start grid-cols-1 gap-4 px-12 pt-6 md:grid-cols-2 grow shrink-0`}>
-          {currList.map(item => (
+      <div 
+        className='flex mt-6 flex-col overflow-auto bg-gray-100 shrink-0 grow'
+        style={{
+          maxHeight: 'calc(100vh - 243px)'
+        }}
+      >
+        <nav
+          className={`${s.appList} grid content-start grid-cols-1 gap-4 px-12 pb-10 md:grid-cols-2 grow shrink-0`}>
+          {currList.map(app => (
             <AppCard 
-              key={item.id}
-              app={item as any}
+              key={app.app_id}
+              app={app}
               onCreate={() => {
-                setCurrApp(item)
+                setCurrApp(app)
                 setIsShowCreateModal(true)
               }}
               onAddToWorkspace={handleAddToWorkspace}
diff --git a/web/app/components/explore/app-list/style.module.css b/web/app/components/explore/app-list/style.module.css
index 33066d2916..1e393041e4 100644
--- a/web/app/components/explore/app-list/style.module.css
+++ b/web/app/components/explore/app-list/style.module.css
@@ -2,11 +2,4 @@
   .appList {
     grid-template-columns: repeat(4, minmax(0, 1fr))
   }
-}
-
-
-/* @media (min-width: 1624px) {
-  .appList {
-    grid-template-columns: repeat(3, minmax(0, 1fr))
-  }
-} */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/web/models/explore.ts b/web/models/explore.ts
new file mode 100644
index 0000000000..ac3ae2a40b
--- /dev/null
+++ b/web/models/explore.ts
@@ -0,0 +1,23 @@
+import { AppMode } from "./app";
+
+export type AppBasicInfo = {
+  id: string;
+  name: string;
+  mode: AppMode;
+  icon: null;
+  icon_background: null;
+}
+
+export type App = {
+  app: AppBasicInfo;
+  app_id: string;
+  description: string;
+  copyright: string;
+  privacy_policy: string;
+  category: string;
+  position: number;
+  is_listed: boolean;
+  install_count: number;
+  installed: boolean;
+  editable: boolean;
+}
\ No newline at end of file