Merge 5772c61 into 0471465

teableio · May 29, 2024 · 487e691 · 487e691
2 parents 0471465 + 5772c61
commit 487e691
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 39 deletions.
diff --git a/apps/nextjs-app/src/backend/api/rest/table.ssr.ts b/apps/nextjs-app/src/backend/api/rest/table.ssr.ts
@@ -15,7 +15,7 @@ import type {
 import {
   ACCEPT_INVITATION_LINK,
   GET_BASE,
-  GET_BASE_LIST,
+  GET_BASE_ALL,
   GET_DEFAULT_VIEW_ID,
   GET_FIELD_LIST,
   GET_RECORD_URL,
@@ -88,10 +88,8 @@ export class SsrApi {
       .then(({ data }) => data);
   }
 
-  async getBaseListBySpaceId(spaceId: string) {
-    return await this.axios
-      .get<IGetBaseVo[]>(urlBuilder(GET_BASE_LIST, { spaceId }))
-      .then(({ data }) => data);
+  async getBaseList() {
+    return await this.axios.get<IGetBaseVo[]>(GET_BASE_ALL).then(({ data }) => data);
   }
 
   async getSpaceCollaboratorList(spaceId: string) {

diff --git a/apps/nextjs-app/src/features/app/blocks/space/SpaceInnerPage.tsx b/apps/nextjs-app/src/features/app/blocks/space/SpaceInnerPage.tsx
@@ -1,15 +1,16 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { PinType, deleteSpace, getBaseAll, getSpaceById, updateSpace } from '@teable/openapi';
+import { PinType, deleteSpace, getSpaceById, updateSpace } from '@teable/openapi';
 import { ReactQueryKeys } from '@teable/sdk/config';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { spaceConfig } from '@/features/i18n/space.config';
 import { Collaborators } from '../../components/collaborator-manage/space-inner/Collaborators';
 import { SpaceActionBar } from '../../components/space/SpaceActionBar';
 import { SpaceRenaming } from '../../components/space/SpaceRenaming';
 import { DraggableBaseGrid } from './DraggableBaseGrid';
 import { StarButton } from './space-side-bar/StarButton';
+import { useBaseList } from './useBaseList';
 
 export const SpaceInnerPage: React.FC = () => {
   const router = useRouter();
@@ -26,10 +27,11 @@ export const SpaceInnerPage: React.FC = () => {
     queryFn: ({ queryKey }) => getSpaceById(queryKey[1]).then(({ data }) => data),
   });
 
-  const { data: bases } = useQuery({
-    queryKey: ReactQueryKeys.baseAll(),
-    queryFn: getBaseAll,
-  });
+  const bases = useBaseList();
+
+  const basesInSpace = useMemo(() => {
+    return bases?.filter((base) => base.spaceId === spaceId);
+  }, [bases, spaceId]);
 
   const { mutate: deleteSpaceMutator } = useMutation({
     mutationFn: deleteSpace,
@@ -68,7 +70,7 @@ export const SpaceInnerPage: React.FC = () => {
 
   return (
     space && (
-      <div ref={ref} className="flex size-full min-w-[760px] px-12 pt-8">
+      <div ref={ref} className="flex size-full min-w-[760px] overflow-y-auto px-12 pt-8">
         <div className="w-full flex-1 space-y-6">
           <div className="flex items-center gap-2 pb-6">
             <SpaceRenaming
@@ -82,8 +84,8 @@ export const SpaceInnerPage: React.FC = () => {
             <StarButton className="opacity-100" id={space.id} type={PinType.Space} />
           </div>
 
-          {bases?.data?.length ? (
-            <DraggableBaseGrid bases={bases?.data} />
+          {basesInSpace?.length ? (
+            <DraggableBaseGrid bases={basesInSpace} />
           ) : (
             <div className="flex items-center justify-center">
               <h1>{t('space:spaceIsEmpty')}</h1>

diff --git a/apps/nextjs-app/src/features/app/blocks/space/SpacePage.tsx b/apps/nextjs-app/src/features/app/blocks/space/SpacePage.tsx
@@ -1,5 +1,5 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { createSpace, getBaseAll, getSpaceList } from '@teable/openapi';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { createSpace } from '@teable/openapi';
 import { ReactQueryKeys } from '@teable/sdk/config';
 import { Spin } from '@teable/ui-lib/base';
 import { Button } from '@teable/ui-lib/shadcn';
@@ -10,6 +10,8 @@ import { GUIDE_CREATE_SPACE } from '@/components/Guide';
 import { spaceConfig } from '@/features/i18n/space.config';
 import { useTemplateMonitor } from '../base/duplicate/useTemplateMonitor';
 import { SpaceCard } from './SpaceCard';
+import { useBaseList } from './useBaseList';
+import { useSpaceListOrdered } from './useSpaceListOrdered';
 
 export const SpacePage: FC = () => {
   const queryClient = useQueryClient();
@@ -18,14 +20,9 @@ export const SpacePage: FC = () => {
   const { t } = useTranslation(spaceConfig.i18nNamespaces);
   useTemplateMonitor();
 
-  const { data: spaceList } = useQuery({
-    queryKey: ReactQueryKeys.spaceList(),
-    queryFn: getSpaceList,
-  });
-  const { data: baseList } = useQuery({
-    queryKey: ReactQueryKeys.baseAll(),
-    queryFn: getBaseAll,
-  });
+  const orderedSpaceList = useSpaceListOrdered();
+
+  const baseList = useBaseList();
 
   const { mutate: createSpaceMutator, isLoading } = useMutation({
     mutationFn: createSpace,
@@ -55,11 +52,11 @@ export const SpacePage: FC = () => {
         </Button>
       </div>
       <div className="flex-1 space-y-8 overflow-y-auto px-8 pt-8 sm:px-12">
-        {spaceList?.data.map((space) => (
+        {orderedSpaceList.map((space) => (
           <SpaceCard
             key={space.id}
             space={space}
-            bases={baseList?.data.filter(({ spaceId }) => spaceId === space.id)}
+            bases={baseList?.filter(({ spaceId }) => spaceId === space.id)}
           />
         ))}
       </div>

diff --git a/apps/nextjs-app/src/features/app/blocks/space/space-side-bar/PinList.tsx b/apps/nextjs-app/src/features/app/blocks/space/space-side-bar/PinList.tsx
@@ -1,7 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { DraggableHandle, Star } from '@teable/icons';
 import type { GetPinListVo, IGetBaseVo, IGetSpaceVo } from '@teable/openapi';
-import { getBaseAll, getPinList, getSpaceList, updatePinOrder } from '@teable/openapi';
+import { getPinList, getSpaceList, updatePinOrder } from '@teable/openapi';
 import { ReactQueryKeys } from '@teable/sdk/config';
 import type { DragEndEvent } from '@teable/ui-lib/base';
 import { DndKitContext, Draggable, Droppable } from '@teable/ui-lib/base';
@@ -14,6 +14,7 @@ import {
 import { useTranslation } from 'next-i18next';
 import { useEffect, useMemo, useState } from 'react';
 import { spaceConfig } from '@/features/i18n/space.config';
+import { useBaseList } from '../useBaseList';
 import { PinItem } from './PinItem';
 import { StarButton } from './StarButton';
 
@@ -38,10 +39,7 @@ export const PinList = () => {
     queryKey: ReactQueryKeys.spaceList(),
     queryFn: getSpaceList,
   });
-  const { data: baseList } = useQuery({
-    queryKey: ReactQueryKeys.baseAll(),
-    queryFn: getBaseAll,
-  });
+  const baseList = useBaseList();
 
   const { mutate: updateOrder } = useMutation({
     mutationFn: updatePinOrder,
@@ -63,11 +61,11 @@ export const PinList = () => {
 
   const baseMap = useMemo(() => {
     const map: { [key in string]: IGetBaseVo } = {};
-    baseList?.data.forEach((base) => {
+    baseList?.forEach((base) => {
       map[base.id] = base;
     });
     return map;
-  }, [baseList?.data]);
+  }, [baseList]);
 
   const onDragEndHandler = async (event: DragEndEvent) => {
     const { over, active } = event;
@@ -109,7 +107,12 @@ export const PinList = () => {
           </div>
         </AccordionTrigger>
         <AccordionContent>
-          <div className="flex flex-col gap-2">
+          <div className="flex flex-col">
+            {pinList.length === 0 && (
+              <div className="text-center text-xs text-muted-foreground">
+                {t('space:pin.empty')}
+              </div>
+            )}
             <DndKitContext onDragEnd={onDragEndHandler}>
               <Droppable
                 items={pinList.map(({ id }) => id)}

diff --git a/apps/nextjs-app/src/features/app/blocks/space/useBaseList.tsx b/apps/nextjs-app/src/features/app/blocks/space/useBaseList.tsx
@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+import { getBaseAll } from '@teable/openapi';
+import { ReactQueryKeys } from '@teable/sdk/config';
+
+export const useBaseList = () => {
+  const { data: baseList } = useQuery({
+    queryKey: ReactQueryKeys.baseAll(),
+    queryFn: () => getBaseAll().then((res) => res.data),
+  });
+
+  return baseList;
+};
diff --git a/apps/nextjs-app/src/features/app/blocks/space/useSpaceListOrdered.tsx b/apps/nextjs-app/src/features/app/blocks/space/useSpaceListOrdered.tsx
@@ -0,0 +1,31 @@
+import { useQuery } from '@tanstack/react-query';
+import { getSpaceList } from '@teable/openapi';
+import { ReactQueryKeys } from '@teable/sdk/config';
+import { useMemo } from 'react';
+import { usePinMap } from './usePinMap';
+
+export const useSpaceListOrdered = () => {
+  const { data: spaceList } = useQuery({
+    queryKey: ReactQueryKeys.spaceList(),
+    queryFn: getSpaceList,
+  });
+
+  const pinMap = usePinMap();
+
+  return useMemo(() => {
+    if (!spaceList?.data || !pinMap) {
+      return [];
+    }
+    return [...spaceList.data].sort((a, b) => {
+      const aPin = pinMap[a.id];
+      const bPin = pinMap[b.id];
+      if (!bPin) {
+        return -1;
+      }
+      if (!aPin && bPin) {
+        return 1;
+      }
+      return aPin.order - bPin.order;
+    });
+  }, [pinMap, spaceList?.data]);
+};
diff --git a/apps/nextjs-app/src/pages/space/[spaceId].tsx b/apps/nextjs-app/src/pages/space/[spaceId].tsx
@@ -20,8 +20,8 @@ export const getServerSideProps: GetServerSideProps = withAuthSSR(async (context
   });
 
   await queryClient.fetchQuery({
-    queryKey: ['base-list', spaceId as string],
-    queryFn: ({ queryKey }) => ssrApi.getBaseListBySpaceId(queryKey[1]),
+    queryKey: ReactQueryKeys.baseAll(),
+    queryFn: () => ssrApi.getBaseList(),
   });
 
   await queryClient.fetchQuery({

diff --git a/packages/common-i18n/src/locales/en/space.json b/packages/common-i18n/src/locales/en/space.json
@@ -28,6 +28,7 @@
   "pin": {
     "add": "Add to pin",
     "remove": "Remove from pin",
-    "pin": "Pin"
+    "pin": "Pin",
+    "empty": "Your pined bases and space will appear here"
   }
 }
diff --git a/packages/common-i18n/src/locales/zh/space.json b/packages/common-i18n/src/locales/zh/space.json
@@ -28,6 +28,7 @@
   "pin": {
     "add": "添加到收藏",
     "remove": "从收藏中移除",
-    "pin": "收藏"
+    "pin": "收藏",
+    "empty": "您收藏的数据库和空间将显示在这里"
   }
 }
diff --git a/packages/ui-lib/src/shadcn/ui/accordion.tsx b/packages/ui-lib/src/shadcn/ui/accordion.tsx
@@ -54,7 +54,7 @@ const AccordionContent = React.forwardRef<
     )}
     {...props}
   >
-    <div className="pb-4 pt-0">{children}</div>
+    <div className="pb-3">{children}</div>
   </AccordionPrimitive.Content>
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;