fix: link crash (teableio#757)

AliceLanniste · Sep 1, 2024 · b5dd94f · b5dd94f
1 parent e178c17
commit b5dd94f
Show file tree

Hide file tree

Showing 23 changed files with 147 additions and 131 deletions.
diff --git a/apps/nextjs-app/src/features/app/blocks/db-connection/Panel.tsx b/apps/nextjs-app/src/features/app/blocks/db-connection/Panel.tsx
@@ -1,7 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Copy, Database, HelpCircle } from '@teable/icons';
 import { deleteDbConnection, getDbConnection, createDbConnection } from '@teable/openapi';
-import { useBase, useBasePermission } from '@teable/sdk/hooks';
+import { useBaseId, useBasePermission } from '@teable/sdk/hooks';
 import {
   Button,
   Card,
@@ -17,23 +17,23 @@ import { Trans, useTranslation } from 'next-i18next';
 import { tableConfig } from '@/features/i18n/table.config';
 
 const ContentCard = () => {
-  const base = useBase();
+  const baseId = useBaseId() as string;
   const queryClient = useQueryClient();
   const { t } = useTranslation(tableConfig.i18nNamespaces);
   const { data, isLoading } = useQuery({
-    queryKey: ['connection', base.id],
+    queryKey: ['connection', baseId],
     queryFn: ({ queryKey }) => getDbConnection(queryKey[1]).then((data) => data.data),
   });
 
   const mutationCreate = useMutation(createDbConnection, {
     onSuccess: () => {
-      queryClient.invalidateQueries(['connection', base.id]);
+      queryClient.invalidateQueries(['connection', baseId]);
     },
   });
 
   const mutationDelete = useMutation(deleteDbConnection, {
     onSuccess: () => {
-      queryClient.invalidateQueries(['connection', base.id]);
+      queryClient.invalidateQueries(['connection', baseId]);
     },
   });
   const dataArray = data?.dsn
@@ -135,11 +135,11 @@ const ContentCard = () => {
           )}
           <div className="flex justify-end">
             {data ? (
-              <Button size="sm" onClick={() => mutationDelete.mutate(base.id)}>
+              <Button size="sm" onClick={() => mutationDelete.mutate(baseId)}>
                 {t('common:actions.delete')}
               </Button>
             ) : (
-              <Button size="sm" onClick={() => mutationCreate.mutate(base.id)}>
+              <Button size="sm" onClick={() => mutationCreate.mutate(baseId)}>
                 {t('common:actions.create')}
               </Button>
             )}

diff --git a/apps/nextjs-app/src/features/app/blocks/graph/CellGraph.tsx b/apps/nextjs-app/src/features/app/blocks/graph/CellGraph.tsx
@@ -2,7 +2,7 @@ import { useMutation } from '@tanstack/react-query';
 import { ColorUtils } from '@teable/core';
 import { DraggableHandle, X } from '@teable/icons';
 import { IdReturnType, getGraph, getIdsFromRanges } from '@teable/openapi';
-import { useBase, useTableId, useViewId } from '@teable/sdk';
+import { useBaseId, useTableId, useViewId } from '@teable/sdk';
 import { Button } from '@teable/ui-lib/shadcn';
 import { useEffect, useRef, useState } from 'react';
 import { Rnd } from 'react-rnd';
@@ -15,7 +15,7 @@ export const CellGraph: React.FC = () => {
   const { selection } = useGridViewStore();
   const { mutateAsync: getGraphMutator, data, isLoading } = useMutation({ mutationFn: getGraph });
   const tableId = useTableId();
-  const base = useBase();
+  const baseId = useBaseId();
   const viewId = useViewId();
   const ref = useRef<HTMLDivElement>(null);
   const [width, setWidth] = useState(500);
@@ -38,7 +38,7 @@ export const CellGraph: React.FC = () => {
   useEffect(() => {
     const cell = selection?.ranges?.[0];
     const isCell = selection?.isCellSelection;
-    if (!selection || !cell || !isCell || !tableId || !viewId || !base.id) {
+    if (!selection || !cell || !isCell || !tableId || !viewId || !baseId) {
       return;
     }
     getIdsFromRanges(tableId, {
@@ -52,7 +52,7 @@ export const CellGraph: React.FC = () => {
         return;
       }
 
-      getGraphMutator({ baseId: base.id, tableId, cell: [fieldId, recordId] }).then((res) => {
+      getGraphMutator({ baseId, tableId, cell: [fieldId, recordId] }).then((res) => {
         if (res.data) {
           const { nodes, edges, combos } = res.data;
           const cache: Record<string, string> = {};
@@ -88,7 +88,7 @@ export const CellGraph: React.FC = () => {
         }
       });
     });
-  }, [base.id, getGraphMutator, selection, tableId, updateGraph, viewId]);
+  }, [baseId, getGraphMutator, selection, tableId, updateGraph, viewId]);
 
   return (
     <Rnd

diff --git a/...ures/app/blocks/import-table/field-config-panel/inplace-panel/InplaceFieldConfigPanel.tsx b/...ures/app/blocks/import-table/field-config-panel/inplace-panel/InplaceFieldConfigPanel.tsx
@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import type { IInplaceImportOptionRo, IImportOptionRo } from '@teable/openapi';
 import { getTableById as apiGetTableById, getFields as apiGetFields } from '@teable/openapi';
 import { ReactQueryKeys } from '@teable/sdk/config';
-import { useBase } from '@teable/sdk/hooks';
+import { useBaseId } from '@teable/sdk/hooks';
 import { isEqual } from 'lodash';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -23,7 +23,7 @@ export type IInplaceOption = Pick<
 >;
 
 const InplaceFieldConfigPanel = (props: IInplaceFieldConfigPanel) => {
-  const base = useBase();
+  const baseId = useBaseId() as string;
   const { t } = useTranslation(['table']);
   const { tableId, workSheets, insertConfig, onChange, errorMessage } = props;
 
@@ -36,8 +36,8 @@ const InplaceFieldConfigPanel = (props: IInplaceFieldConfigPanel) => {
   );
 
   const { data: table } = useQuery({
-    queryKey: ReactQueryKeys.tableInfo(base.id, tableId),
-    queryFn: () => apiGetTableById(base.id, tableId).then((data) => data.data),
+    queryKey: ReactQueryKeys.tableInfo(baseId, tableId),
+    queryFn: () => apiGetTableById(baseId, tableId).then((data) => data.data),
   });
 
   const { data: fields } = useQuery({

diff --git a/apps/nextjs-app/src/features/app/blocks/setting/query-builder/QueryBuilder.tsx b/apps/nextjs-app/src/features/app/blocks/setting/query-builder/QueryBuilder.tsx
@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { CellFormat, FieldKeyType, type IFilterSet, type ISortItem } from '@teable/core';
 import { getBaseAll, getTableList } from '@teable/openapi';
 import { ReactQueryKeys } from '@teable/sdk/config';
-import { AnchorProvider } from '@teable/sdk/context';
+import { StandaloneViewProvider } from '@teable/sdk/context';
 import { Selector } from '@teable/ui-lib/base';
 import { Button, ToggleGroup, ToggleGroupItem } from '@teable/ui-lib/shadcn';
 import { ArrowUpRight } from 'lucide-react';
@@ -81,39 +81,39 @@ export const QueryBuilder = () => {
           <>
             <div className="flex flex-col gap-2">
               <h1 className="font-bold">{t('common:noun.view')}</h1>
-              <AnchorProvider baseId={baseId} tableId={tableId}>
+              <StandaloneViewProvider baseId={baseId} tableId={tableId}>
                 <ViewBuilder viewId={viewId} onChange={setViewId} />
-              </AnchorProvider>
+              </StandaloneViewProvider>
             </div>
             <div className="flex flex-col gap-2">
               <h1 className="font-bold">{t('sdk:filter.label')}</h1>
-              <AnchorProvider baseId={baseId} tableId={tableId}>
+              <StandaloneViewProvider baseId={baseId} tableId={tableId}>
                 <FilterBuilder
                   filter={filter}
                   onChange={(f) => {
                     setFilter(f);
                     setFieldKeyType(FieldKeyType.Id);
                   }}
                 />
-              </AnchorProvider>
+              </StandaloneViewProvider>
             </div>
             <div className="flex flex-col gap-2">
               <h1 className="font-bold">{t('sdk:sort.label')}</h1>
-              <AnchorProvider baseId={baseId} tableId={tableId}>
+              <StandaloneViewProvider baseId={baseId} tableId={tableId}>
                 <OrderByBuilder
                   orderBy={orderBy}
                   onChange={(o) => {
                     setOrderBy(o);
                     setFieldKeyType(FieldKeyType.Id);
                   }}
                 />
-              </AnchorProvider>
+              </StandaloneViewProvider>
             </div>
             <div className="flex flex-col gap-2">
               <h1 className="font-bold">{t('common:actions.search')}</h1>
-              <AnchorProvider baseId={baseId} tableId={tableId}>
+              <StandaloneViewProvider baseId={baseId} tableId={tableId}>
                 <SearchBuilder search={search} onChange={setSearch} />
-              </AnchorProvider>
+              </StandaloneViewProvider>
             </div>
             <div className="flex flex-col gap-2">
               <h1 className="font-bold">{t('developer:cellFormat')}</h1>
@@ -176,9 +176,9 @@ export const QueryBuilder = () => {
         {tableId && (
           <div className="flex w-full flex-col gap-4">
             <h1 className="font-bold">{t('developer:previewReturnValue')}</h1>
-            <AnchorProvider baseId={baseId} tableId={tableId}>
+            <StandaloneViewProvider baseId={baseId} tableId={tableId}>
               <PreviewTable query={{ filter, orderBy, viewId, search, cellFormat, fieldKeyType }} />
-            </AnchorProvider>
+            </StandaloneViewProvider>
           </div>
         )}
       </div>

diff --git a/apps/nextjs-app/src/features/app/blocks/share/view/component/kanban/toolbar/Toolbar.tsx b/apps/nextjs-app/src/features/app/blocks/share/view/component/kanban/toolbar/Toolbar.tsx
@@ -19,7 +19,6 @@ export const KanbanToolbar: React.FC<{ disabled?: boolean }> = (props) => {
   const allFields = useFields({ withHidden: true, withDenied: true });
   const { onFilterChange, onSortChange } = useToolbarChange();
   const { stackFieldId } = view?.options ?? {};
-
   const stackFieldName = useMemo(() => {
     if (stackFieldId == null) return '';
     const groupField = allFields.find(({ id }) => id === stackFieldId);

diff --git a/apps/nextjs-app/src/features/app/blocks/view/kanban/context/KanbanProvider.tsx b/apps/nextjs-app/src/features/app/blocks/view/kanban/context/KanbanProvider.tsx
@@ -9,13 +9,13 @@ import {
 import { ExpandRecorder } from '@teable/sdk/components';
 import { ReactQueryKeys } from '@teable/sdk/config';
 import {
-  useBase,
   useView,
   useFields,
   useTableId,
   useGroupPoint,
   useTablePermission,
   useFieldPermission,
+  useBaseId,
 } from '@teable/sdk/hooks';
 import type {
   KanbanView,
@@ -40,7 +40,7 @@ export const KanbanProvider = ({ children }: { children: ReactNode }) => {
   const view = useView() as KanbanView | undefined;
   const { shareId } = useContext(ShareViewPageContext) ?? {};
   const { sort, filter } = view ?? {};
-  const { id: baseId } = useBase() ?? {};
+  const baseId = useBaseId() as string;
   const permission = useTablePermission();
   const fields = useFields();
   const allFields = useFields({ withHidden: true, withDenied: true });

diff --git a/apps/nextjs-app/src/features/app/blocks/view/tool-bar/Others.tsx b/apps/nextjs-app/src/features/app/blocks/view/tool-bar/Others.tsx
@@ -1,6 +1,6 @@
 import { ViewType } from '@teable/core';
 import { ArrowUpRight, Code2, Component, Database, MoreHorizontal, Share2 } from '@teable/icons';
-import { useBase, useTableId, useTablePermission, useView } from '@teable/sdk/hooks';
+import { useBaseId, useTableId, useTablePermission, useView } from '@teable/sdk/hooks';
 import { Button, cn, Popover, PopoverContent, PopoverTrigger } from '@teable/ui-lib/shadcn';
 import Link from 'next/link';
 import { useTranslation } from 'next-i18next';
@@ -22,7 +22,7 @@ const OthersList = ({
   const view = useView();
   const permission = useTablePermission();
   const { t } = useTranslation('table');
-  const base = useBase();
+  const baseId = useBaseId() as string;
   const tableId = useTableId();
 
   return (
@@ -86,7 +86,7 @@ const OthersList = ({
             <Link
               href={{
                 pathname: '/developer/tool/query-builder',
-                query: { baseId: base.id, tableId },
+                query: { baseId, tableId },
               }}
               target="_blank"
             >

diff --git a/apps/nextjs-app/src/features/app/components/field-setting/lookup-options/LookupOptions.tsx b/apps/nextjs-app/src/features/app/components/field-setting/lookup-options/LookupOptions.tsx
@@ -1,7 +1,7 @@
 import type { ILookupOptionsRo, ILookupOptionsVo } from '@teable/core';
 import { FieldType } from '@teable/core';
-import { AnchorProvider } from '@teable/sdk/context';
-import { useFields, useTable, useFieldStaticGetter } from '@teable/sdk/hooks';
+import { StandaloneViewProvider } from '@teable/sdk/context';
+import { useFields, useTable, useFieldStaticGetter, useBaseId } from '@teable/sdk/hooks';
 import type { IFieldInstance, LinkField } from '@teable/sdk/model';
 import { Selector } from '@teable/ui-lib/base';
 import { Trans, useTranslation } from 'next-i18next';
@@ -64,6 +64,7 @@ export const LookupOptions = (props: {
     linkFieldId: options.linkFieldId,
     lookupFieldId: options.lookupFieldId,
   });
+  const baseId = useBaseId();
 
   const setOptions = useCallback(
     (options: Partial<ILookupOptionsRo>, linkField?: LinkField, lookupField?: IFieldInstance) => {
@@ -102,7 +103,7 @@ export const LookupOptions = (props: {
             />
           </div>
           {innerOptions.foreignTableId && (
-            <AnchorProvider tableId={innerOptions.foreignTableId}>
+            <StandaloneViewProvider baseId={baseId} tableId={innerOptions.foreignTableId}>
               <SelectFieldByTableId
                 selectedId={innerOptions.lookupFieldId}
                 onChange={(lookupField: IFieldInstance) => {
@@ -112,7 +113,7 @@ export const LookupOptions = (props: {
                   setOptions?.({ lookupFieldId: lookupField.id }, linkField, lookupField);
                 }}
               />
-            </AnchorProvider>
+            </StandaloneViewProvider>
           )}
         </>
       ) : (

diff --git a/apps/nextjs-app/src/features/app/components/field-setting/options/LinkOptions.tsx b/apps/nextjs-app/src/features/app/components/field-setting/options/LinkOptions.tsx
@@ -3,7 +3,7 @@ import type { ILinkFieldOptionsRo } from '@teable/core';
 import { Relationship } from '@teable/core';
 import { getTablePermission } from '@teable/openapi';
 import { ReactQueryKeys } from '@teable/sdk/config';
-import { useBase, useTableId, useTables } from '@teable/sdk/hooks';
+import { useBaseId, useTableId, useTables } from '@teable/sdk/hooks';
 import { Selector } from '@teable/ui-lib/base';
 import { Label, Switch } from '@teable/ui-lib/shadcn';
 import { Trans, useTranslation } from 'next-i18next';
@@ -17,7 +17,7 @@ export const LinkOptions = (props: {
   const { options, isLookup, onChange } = props;
   const tableId = useTableId();
   const tables = useTables();
-  const baseId = useBase().id;
+  const baseId = useBaseId() as string;
   const { t } = useTranslation(tableConfig.i18nNamespaces);
 
   const relationship = options?.relationship ?? Relationship.ManyOne;

diff --git a/apps/nextjs-app/src/features/app/dashboard/Pages.tsx b/apps/nextjs-app/src/features/app/dashboard/Pages.tsx
@@ -1,5 +1,6 @@
-import { AnchorProvider } from '@teable/sdk/context';
+import { StandaloneViewProvider } from '@teable/sdk/context';
 import { Button, Tabs } from '@teable/ui-lib/shadcn';
+import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { useLocalStorage } from 'react-use';
@@ -10,10 +11,11 @@ import { GridContent } from './GridContent';
 export function DashboardPage() {
   const { t } = useTranslation(dashboardConfig.i18nNamespaces);
   const [anchor, setAnchor] = useState<{ tableId?: string; viewId?: string }>({});
+  const { query } = useRouter();
   const { viewId, tableId } = anchor;
   const [showDashboard, setShowDashboard] = useLocalStorage('showDashboard', false);
   return (
-    <AnchorProvider viewId={viewId} tableId={tableId}>
+    <StandaloneViewProvider viewId={viewId} tableId={tableId} baseId={query.baseId as string}>
       <div className="h-full flex-col md:flex">
         <div className="flex h-full flex-1 flex-col gap-2 lg:gap-4">
           <div className="items-center justify-between space-y-2 px-8 pb-2 pt-6 lg:flex">
@@ -58,6 +60,6 @@ export function DashboardPage() {
           )}
         </div>
       </div>
-    </AnchorProvider>
+    </StandaloneViewProvider>
   );
 }
diff --git a/packages/sdk/src/components/editor/attachment/upload-attachment/UploadAttachment.tsx b/packages/sdk/src/components/editor/attachment/upload-attachment/UploadAttachment.tsx
@@ -7,7 +7,7 @@ import { toast } from '@teable/ui-lib/src/shadcn/ui/sonner';
 import { map, omit } from 'lodash';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from '../../../../context/app/i18n';
-import { useBase } from '../../../../hooks';
+import { useBaseId } from '../../../../hooks';
 import { UsageLimitModalType, useUsageLimitModalStore } from '../../../billing/store';
 import { FileZone } from '../../../FileZone';
 import { getFileCover, isSystemFileIcon } from '../utils';
@@ -35,7 +35,7 @@ export const UploadAttachment = (props: IUploadAttachment) => {
     readonly,
     attachmentManager = defaultAttachmentManager,
   } = props;
-  const base = useBase();
+  const baseId = useBaseId();
   const [uploadingFiles, setUploadingFiles] = useState<IUploadFileMap>({});
   const listRef = useRef<HTMLDivElement>(null);
   const attachmentsRef = useRef<IAttachmentCellValue>(attachments);
@@ -104,14 +104,14 @@ export const UploadAttachment = (props: IUploadAttachment) => {
             setUploadingFiles((pre) => ({ ...pre, [file.id]: { progress, file: file.instance } }));
           },
         },
-        base?.id
+        baseId
       );
       setUploadingFiles((pre) => ({ ...pre, ...newUploadMap }));
       setTimeout(() => {
         scrollBottom();
       }, 100);
     },
-    [attachmentManager, base?.id, handleSuccess, t, uploadingFiles]
+    [attachmentManager, baseId, handleSuccess, t, uploadingFiles]
   );
 
   const scrollBottom = () => {