From f1cbd55007c451b02d54c17bca6704a502b26f1b Mon Sep 17 00:00:00 2001
From: Rozstone <42225395+wststone@users.noreply.github.com>
Date: Tue, 27 Feb 2024 19:16:22 +0800
Subject: [PATCH] =?UTF-8?q?enhancement:=20skip=20fetching=20to=20improve?=
 =?UTF-8?q?=20user=20experience=20when=20switching=20=E2=80=A6=20(#2580)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/app/components/base/logo/logo-site.tsx    |  4 +-
 web/app/components/explore/app-list/index.tsx | 82 ++++++++++++-------
 web/app/components/header/index.tsx           |  2 +-
 web/models/explore.ts                         |  2 +-
 web/service/explore.ts                        |  6 +-
 5 files changed, 61 insertions(+), 35 deletions(-)

diff --git a/web/app/components/base/logo/logo-site.tsx b/web/app/components/base/logo/logo-site.tsx
index 9d9bccfaf8..65569c8c99 100644
--- a/web/app/components/base/logo/logo-site.tsx
+++ b/web/app/components/base/logo/logo-site.tsx
@@ -1,15 +1,17 @@
 import type { FC } from 'react'
+import classNames from 'classnames'
 
 type LogoSiteProps = {
   className?: string
 }
+
 const LogoSite: FC<LogoSiteProps> = ({
   className,
 }) => {
   return (
     <img
       src='/logo/logo-site.png'
-      className={`block w-auto h-10 ${className}`}
+      className={classNames('block w-auto h-10', className)}
       alt='logo'
     />
   )
diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index 6ceabe23bf..d3e90e6212 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -1,13 +1,14 @@
 'use client'
 import type { FC } from 'react'
-import React, { useEffect } from 'react'
+import React from 'react'
 import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
+import useSWR from 'swr'
 import Toast from '../../base/toast'
 import s from './style.module.css'
 import ExploreContext from '@/context/explore-context'
-import type { App, AppCategory } from '@/models/explore'
+import type { App } from '@/models/explore'
 import Category from '@/app/components/explore/category'
 import AppCard from '@/app/components/explore/app-card'
 import { fetchAppDetail, fetchAppList } from '@/service/explore'
@@ -25,34 +26,44 @@ const Apps: FC = () => {
   const { isCurrentWorkspaceManager } = useAppContext()
   const router = useRouter()
   const { hasEditPermission } = useContext(ExploreContext)
+  const allCategoriesEn = t('explore.apps.allCategories', { lng: 'en' })
   const [currCategory, setCurrCategory] = useTabSearchParams({
-    defaultTab: '',
+    defaultTab: allCategoriesEn,
   })
-  const [allList, setAllList] = React.useState<App[]>([])
-  const [isLoaded, setIsLoaded] = React.useState(false)
+  const {
+    data: { categories, allList },
+    isLoading,
+  } = useSWR(
+    ['/explore/apps'],
+    () =>
+      fetchAppList().then(({ categories, recommended_apps }) => ({
+        categories,
+        allList: recommended_apps.sort((a, b) => a.position - b.position),
+      })),
+    {
+      fallbackData: {
+        categories: [],
+        allList: [],
+      },
+    },
+  )
 
   const currList = (() => {
-    if (currCategory === '')
+    if (currCategory === allCategoriesEn)
       return allList
     return allList.filter(item => item.category === currCategory)
   })()
 
-  const [categories, setCategories] = React.useState<AppCategory[]>([])
-  useEffect(() => {
-    (async () => {
-      const { categories, recommended_apps }: any = await fetchAppList()
-      const sortedRecommendedApps = [...recommended_apps]
-      sortedRecommendedApps.sort((a, b) => a.position - b.position) // position from small to big
-      setCategories(categories)
-      setAllList(sortedRecommendedApps)
-      setIsLoaded(true)
-    })()
-  }, [])
-
   const [currApp, setCurrApp] = React.useState<App | null>(null)
   const [isShowCreateModal, setIsShowCreateModal] = React.useState(false)
-  const onCreate: CreateAppModalProps['onConfirm'] = async ({ name, icon, icon_background }) => {
-    const { app_model_config: model_config } = await fetchAppDetail(currApp?.app.id as string)
+  const onCreate: CreateAppModalProps['onConfirm'] = async ({
+    name,
+    icon,
+    icon_background,
+  }) => {
+    const { app_model_config: model_config } = await fetchAppDetail(
+      currApp?.app.id as string,
+    )
 
     try {
       const app = await createApp({
@@ -68,36 +79,45 @@ const Apps: FC = () => {
         message: t('app.newApp.appCreated'),
       })
       localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
-      router.push(`/app/${app.id}/${isCurrentWorkspaceManager ? 'configuration' : 'overview'}`)
+      router.push(
+        `/app/${app.id}/${
+          isCurrentWorkspaceManager ? 'configuration' : 'overview'
+        }`,
+      )
     }
     catch (e) {
       Toast.notify({ type: 'error', message: t('app.newApp.appCreateFailed') })
     }
   }
 
-  if (!isLoaded) {
+  if (!isLoading) {
     return (
-      <div className='flex h-full items-center'>
-        <Loading type='area' />
+      <div className="flex h-full items-center">
+        <Loading type="area" />
       </div>
     )
   }
 
   return (
-    <div className='h-full flex flex-col border-l border-gray-200'>
-      <div className='shrink-0 pt-6 px-12'>
-        <div className={`mb-1 ${s.textGradient} text-xl font-semibold`}>{t('explore.apps.title')}</div>
-        <div className='text-gray-500 text-sm'>{t('explore.apps.description')}</div>
+    <div className="h-full flex flex-col border-l border-gray-200">
+      <div className="shrink-0 pt-6 px-12">
+        <div className={`mb-1 ${s.textGradient} text-xl font-semibold`}>
+          {t('explore.apps.title')}
+        </div>
+        <div className="text-gray-500 text-sm">
+          {t('explore.apps.description')}
+        </div>
       </div>
       <Category
-        className='mt-6 px-12'
+        className="mt-6 px-12"
         list={categories}
         value={currCategory}
         onChange={setCurrCategory}
       />
-      <div className='relative flex flex-1 mt-6 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow'>
+      <div className="relative flex flex-1 mt-6 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow">
         <nav
-          className={`${s.appList} grid content-start gap-4 px-6 sm:px-12 shrink-0`}>
+          className={`${s.appList} grid content-start gap-4 px-6 sm:px-12 shrink-0`}
+        >
           {currList.map(app => (
             <AppCard
               key={app.app_id}
diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
index 3a818903e4..957b1a442f 100644
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@@ -54,7 +54,7 @@ const Header = () => {
         </div>}
         {!isMobile && <>
           <Link href="/apps" className='flex items-center mr-4'>
-            <LogoSite />
+            <LogoSite className='object-contain' />
           </Link>
           <GithubStar />
         </>}
diff --git a/web/models/explore.ts b/web/models/explore.ts
index 1cb98b2a28..c90d9ba22b 100644
--- a/web/models/explore.ts
+++ b/web/models/explore.ts
@@ -16,7 +16,7 @@ export type App = {
   app_id: string
   description: string
   copyright: string
-  privacy_policy: string
+  privacy_policy: string | null
   category: AppCategory
   position: number
   is_listed: boolean
diff --git a/web/service/explore.ts b/web/service/explore.ts
index 60fb8b1128..bb608f7ee5 100644
--- a/web/service/explore.ts
+++ b/web/service/explore.ts
@@ -1,7 +1,11 @@
 import { del, get, patch, post } from './base'
+import type { App, AppCategory } from '@/models/explore'
 
 export const fetchAppList = () => {
-  return get('/explore/apps')
+  return get<{
+    categories: AppCategory[]
+    recommended_apps: App[]
+  }>('/explore/apps')
 }
 
 export const fetchAppDetail = (id: string): Promise<any> => {