From f56af5e6b4713040e0e085ad2c0e33f00f36c044 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 27 Apr 2026 01:44:11 +0100
Subject: [PATCH] refactor(base): rename baseId to pageId in client components
---
.../features/base/components/base-table.tsx | 36 +++++++++----------
.../features/base/components/base-toolbar.tsx | 2 +-
.../base/components/cells/cell-file.tsx | 4 +--
.../components/cells/cell-multi-select.tsx | 2 +-
.../base/components/cells/cell-page.tsx | 2 +-
.../base/components/cells/cell-select.tsx | 2 +-
.../base/components/grid/grid-container.tsx | 18 +++++-----
.../base/components/grid/grid-header.tsx | 8 ++---
.../components/grid/selection-action-bar.tsx | 6 ++--
.../property/create-property-popover.tsx | 14 ++++----
.../components/property/property-menu.tsx | 6 ++--
.../base/components/views/view-tabs.tsx | 12 +++----
12 files changed, 56 insertions(+), 56 deletions(-)
diff --git a/apps/client/src/features/base/components/base-table.tsx b/apps/client/src/features/base/components/base-table.tsx
index cfd81beb5..17a8b5250 100644
--- a/apps/client/src/features/base/components/base-table.tsx
+++ b/apps/client/src/features/base/components/base-table.tsx
@@ -42,15 +42,15 @@ import { BaseTableSkeleton } from "@/features/base/components/base-table-skeleto
import classes from "@/features/base/styles/grid.module.css";
type BaseTableProps = {
- baseId: string;
+ pageId: string;
};
-export function BaseTable({ baseId }: BaseTableProps) {
+export function BaseTable({ pageId }: BaseTableProps) {
const { t } = useTranslation();
// Subscribe to the base's realtime room so other clients' edits,
// schema changes, and async-job completions reconcile into our cache.
- useBaseSocket(baseId);
- const { data: base, isLoading: baseLoading, error: baseError } = useBaseQuery(baseId);
+ useBaseSocket(pageId);
+ const { data: base, isLoading: baseLoading, error: baseError } = useBaseQuery(pageId);
const [activeViewId, setActiveViewId] = useAtom(activeViewIdAtom) as unknown as [string | null, (val: string | null) => void];
@@ -72,7 +72,7 @@ export function BaseTable({ baseId }: BaseTableProps) {
buildPromotedConfig,
} = useViewDraft({
userId: currentUser?.user.id,
- baseId,
+ pageId,
viewId: activeView?.id,
baselineFilter: activeView?.config?.filter,
baselineSorts: activeView?.config?.sorts,
@@ -119,7 +119,7 @@ export function BaseTable({ baseId }: BaseTableProps) {
// active view's config resolves — doubling network traffic on every
// base open for any view that has sort or filter.
const { data: rowsData, isLoading: rowsLoading, fetchNextPage, hasNextPage, isFetchingNextPage } =
- useBaseRowsQuery(base ? baseId : undefined, activeFilter, activeSorts);
+ useBaseRowsQuery(base ? pageId : undefined, activeFilter, activeSorts);
// Fire the count request alongside the rows query. Not rendered yet —
// this mounts the query so its cache is warm for when the toolbar
@@ -129,7 +129,7 @@ export function BaseTable({ baseId }: BaseTableProps) {
// filter and fire with baseline-only (or nothing).
const canFetchCount = !!base && !!currentUser;
useBaseRowsCountQuery(
- canFetchCount ? baseId : undefined,
+ canFetchCount ? pageId : undefined,
activeFilter,
);
@@ -148,7 +148,7 @@ export function BaseTable({ baseId }: BaseTableProps) {
const { clear: clearSelection } = useRowSelection();
useEffect(() => {
clearSelection();
- }, [baseId, activeView?.id, clearSelection]);
+ }, [pageId, activeView?.id, clearSelection]);
const rows = useMemo(() => {
const flat = flattenRows(rowsData);
@@ -175,16 +175,16 @@ export function BaseTable({ baseId }: BaseTableProps) {
(rowId: string, propertyId: string, value: unknown) => {
updateRowMutation.mutate({
rowId,
- baseId,
+ pageId,
cells: { [propertyId]: value },
});
},
- [baseId, updateRowMutation],
+ [pageId, updateRowMutation],
);
const handleAddRow = useCallback(() => {
- createRowMutation.mutate({ baseId });
- }, [baseId, createRowMutation]);
+ createRowMutation.mutate({ pageId });
+ }, [pageId, createRowMutation]);
const handleViewChange = useCallback(
(viewId: string) => {
@@ -195,11 +195,11 @@ export function BaseTable({ baseId }: BaseTableProps) {
const handleAddView = useCallback(() => {
createViewMutation.mutate({
- baseId,
+ pageId,
name: t("New view"),
type: "table",
});
- }, [baseId, createViewMutation, t]);
+ }, [pageId, createViewMutation, t]);
const handleColumnReorder = useCallback(
(activeId: string, overId: string) => {
@@ -242,7 +242,7 @@ export function BaseTable({ baseId }: BaseTableProps) {
try {
await updateViewMutation.mutateAsync({
viewId: activeView.id,
- baseId: base.id,
+ pageId: base.id,
config,
});
resetDraft();
@@ -288,14 +288,14 @@ export function BaseTable({ baseId }: BaseTableProps) {
reorderRowMutation.mutate({
rowId,
- baseId,
+ pageId,
position: newPosition,
});
} catch {
// Position computation failed — skip silently
}
},
- [rows, baseId, reorderRowMutation],
+ [rows, pageId, reorderRowMutation],
);
if (baseLoading || rowsLoading) {
@@ -338,7 +338,7 @@ export function BaseTable({ baseId }: BaseTableProps) {
properties={base.properties}
onCellUpdate={handleCellUpdate}
onAddRow={handleAddRow}
- baseId={baseId}
+ pageId={pageId}
onColumnReorder={handleColumnReorder}
onResizeEnd={handleResizeEnd}
onRowReorder={handleRowReorder}
diff --git a/apps/client/src/features/base/components/base-toolbar.tsx b/apps/client/src/features/base/components/base-toolbar.tsx
index fe39dd3d1..953c50bd6 100644
--- a/apps/client/src/features/base/components/base-toolbar.tsx
+++ b/apps/client/src/features/base/components/base-toolbar.tsx
@@ -163,7 +163,7 @@ export function BaseToolbar({
diff --git a/apps/client/src/features/base/components/cells/cell-file.tsx b/apps/client/src/features/base/components/cells/cell-file.tsx
index 72a8f793c..ce4d5cb2c 100644
--- a/apps/client/src/features/base/components/cells/cell-file.tsx
+++ b/apps/client/src/features/base/components/cells/cell-file.tsx
@@ -72,7 +72,7 @@ export function CellFile({
try {
const formData = new FormData();
formData.append("file", file);
- formData.append("baseId", property.baseId);
+ formData.append("pageId", property.pageId);
const res = await api.post(
"/bases/files/upload",
@@ -98,7 +98,7 @@ export function CellFile({
setUploading(false);
onCommit(newFiles.length > 0 ? newFiles : null);
},
- [files, property.baseId, onCommit],
+ [files, property.pageId, onCommit],
);
const handleKeyDown = useCallback(
diff --git a/apps/client/src/features/base/components/cells/cell-multi-select.tsx b/apps/client/src/features/base/components/cells/cell-multi-select.tsx
index 74fb3c37a..59f5e1588 100644
--- a/apps/client/src/features/base/components/cells/cell-multi-select.tsx
+++ b/apps/client/src/features/base/components/cells/cell-multi-select.tsx
@@ -105,7 +105,7 @@ export function CellMultiSelect({
const newChoices = [...choices, newChoice];
updatePropertyMutation.mutate({
propertyId: property.id,
- baseId: property.baseId,
+ pageId: property.pageId,
typeOptions: {
...typeOptions,
choices: newChoices,
diff --git a/apps/client/src/features/base/components/cells/cell-page.tsx b/apps/client/src/features/base/components/cells/cell-page.tsx
index 536b2d2a4..025521c90 100644
--- a/apps/client/src/features/base/components/cells/cell-page.tsx
+++ b/apps/client/src/features/base/components/cells/cell-page.tsx
@@ -44,7 +44,7 @@ export function CellPage({
onCancel,
}: CellPageProps) {
const pageId = parsePageId(value);
- const { data: base } = useBaseQuery(property.baseId);
+ const { data: base } = useBaseQuery(property.pageId);
const ids = useMemo(() => (pageId ? [pageId] : []), [pageId]);
const { pages } = useResolvedPages(ids);
diff --git a/apps/client/src/features/base/components/cells/cell-select.tsx b/apps/client/src/features/base/components/cells/cell-select.tsx
index 441cebcaa..8d1f09fcb 100644
--- a/apps/client/src/features/base/components/cells/cell-select.tsx
+++ b/apps/client/src/features/base/components/cells/cell-select.tsx
@@ -102,7 +102,7 @@ export function CellSelect({
const newChoices = [...choices, newChoice];
updatePropertyMutation.mutate({
propertyId: property.id,
- baseId: property.baseId,
+ pageId: property.pageId,
typeOptions: {
...typeOptions,
choices: newChoices,
diff --git a/apps/client/src/features/base/components/grid/grid-container.tsx b/apps/client/src/features/base/components/grid/grid-container.tsx
index 41e716c08..3f396fad3 100644
--- a/apps/client/src/features/base/components/grid/grid-container.tsx
+++ b/apps/client/src/features/base/components/grid/grid-container.tsx
@@ -37,7 +37,7 @@ type GridContainerProps = {
properties: IBaseProperty[];
onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
onAddRow?: () => void;
- baseId?: string;
+ pageId?: string;
onColumnReorder?: (columnId: string, overColumnId: string) => void;
onResizeEnd?: () => void;
onRowReorder?: (rowId: string, targetRowId: string, position: "above" | "below") => void;
@@ -51,7 +51,7 @@ export function GridContainer({
properties,
onCellUpdate,
onAddRow,
- baseId,
+ pageId,
onColumnReorder,
onResizeEnd,
onRowReorder,
@@ -72,7 +72,7 @@ export function GridContainer({
const closeRequestCounterRef = useRef(0);
const { selectionCount, clear: clearSelection } = useRowSelection();
- const { deleteSelected } = useDeleteSelectedRows(baseId ?? "");
+ const { deleteSelected } = useDeleteSelectedRows(pageId ?? "");
useEffect(() => {
const handleMouseDown = (e: MouseEvent) => {
@@ -134,7 +134,7 @@ export function GridContainer({
useEffect(() => {
const el = scrollRef.current;
- if (!el || !baseId) return;
+ if (!el || !pageId) return;
const handler = (e: KeyboardEvent) => {
if (editingCell) return;
const active = document.activeElement as HTMLElement | null;
@@ -154,13 +154,13 @@ export function GridContainer({
};
el.addEventListener("keydown", handler);
return () => el.removeEventListener("keydown", handler);
- }, [editingCell, selectionCount, clearSelection, deleteSelected, baseId]);
+ }, [editingCell, selectionCount, clearSelection, deleteSelected, pageId]);
const gridTemplateColumns = useMemo(() => {
const visibleColumns = table.getVisibleLeafColumns();
const columnWidths = visibleColumns.map((col) => `${col.getSize()}px`);
- return columnWidths.join(" ") + (baseId ? " 40px" : "");
- }, [table, table.getState().columnSizing, table.getState().columnVisibility, table.getState().columnOrder, baseId]);
+ return columnWidths.join(" ") + (pageId ? " 40px" : "");
+ }, [table, table.getState().columnSizing, table.getState().columnVisibility, table.getState().columnOrder, pageId]);
const totalHeight = virtualizer.getTotalSize();
@@ -252,7 +252,7 @@ export function GridContainer({
>
- {baseId && }
+ {pageId && }
diff --git a/apps/client/src/features/base/components/grid/grid-header.tsx b/apps/client/src/features/base/components/grid/grid-header.tsx
index c934419db..6c0585935 100644
--- a/apps/client/src/features/base/components/grid/grid-header.tsx
+++ b/apps/client/src/features/base/components/grid/grid-header.tsx
@@ -7,7 +7,7 @@ import classes from "@/features/base/styles/grid.module.css";
type GridHeaderProps = {
table: Table;
- baseId?: string;
+ pageId?: string;
// Passed explicitly to break memo when columns change
// (table ref is stable from useReactTable, so memo won't fire without these)
columnOrder: ColumnOrderState;
@@ -19,7 +19,7 @@ type GridHeaderProps = {
export const GridHeader = memo(function GridHeader({
table,
- baseId,
+ pageId,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
columnOrder: _columnOrder,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -45,9 +45,9 @@ export const GridHeader = memo(function GridHeader({
loadedRowIds={loadedRowIds}
/>
))}
- {baseId && (
+ {pageId && (
diff --git a/apps/client/src/features/base/components/grid/selection-action-bar.tsx b/apps/client/src/features/base/components/grid/selection-action-bar.tsx
index f9ba1b984..adab15301 100644
--- a/apps/client/src/features/base/components/grid/selection-action-bar.tsx
+++ b/apps/client/src/features/base/components/grid/selection-action-bar.tsx
@@ -7,15 +7,15 @@ import { useDeleteSelectedRows } from "@/features/base/hooks/use-delete-selected
import classes from "@/features/base/styles/grid.module.css";
type SelectionActionBarProps = {
- baseId: string;
+ pageId: string;
};
export const SelectionActionBar = memo(function SelectionActionBar({
- baseId,
+ pageId,
}: SelectionActionBarProps) {
const { t } = useTranslation();
const { selectionCount, clear } = useRowSelection();
- const { deleteSelected, isPending } = useDeleteSelectedRows(baseId);
+ const { deleteSelected, isPending } = useDeleteSelectedRows(pageId);
const isOpen = selectionCount > 0;
diff --git a/apps/client/src/features/base/components/property/create-property-popover.tsx b/apps/client/src/features/base/components/property/create-property-popover.tsx
index 1120fc4a9..5a12125cc 100644
--- a/apps/client/src/features/base/components/property/create-property-popover.tsx
+++ b/apps/client/src/features/base/components/property/create-property-popover.tsx
@@ -25,7 +25,7 @@ import { FormulaEditor } from "../formula/formula-editor";
import classes from "@/features/base/styles/grid.module.css";
type CreatePropertyPopoverProps = {
- baseId: string;
+ pageId: string;
properties?: IBaseProperty[];
onPropertyCreated?: () => void;
};
@@ -44,7 +44,7 @@ const typesWithOptions = new Set([
"person",
]);
-export function CreatePropertyPopover({ baseId, properties, onPropertyCreated }: CreatePropertyPopoverProps) {
+export function CreatePropertyPopover({ pageId, properties, onPropertyCreated }: CreatePropertyPopoverProps) {
const { t } = useTranslation();
const [opened, setOpened] = useState(false);
const [panel, setPanel] = useState("typePicker");
@@ -141,7 +141,7 @@ export function CreatePropertyPopover({ baseId, properties, onPropertyCreated }:
const finalName = name.trim() || fallbackName;
createPropertyMutation.mutate(
{
- baseId,
+ pageId,
name: finalName,
type: selectedType,
typeOptions: Object.keys(typeOptions).length > 0
@@ -155,7 +155,7 @@ export function CreatePropertyPopover({ baseId, properties, onPropertyCreated }:
},
);
handleClose();
- }, [selectedType, nameTaken, name, fallbackName, typeOptions, baseId, createPropertyMutation, handleClose, onPropertyCreated]);
+ }, [selectedType, nameTaken, name, fallbackName, typeOptions, pageId, createPropertyMutation, handleClose, onPropertyCreated]);
const handleBackToTypePicker = useCallback(() => {
setPanel("typePicker");
@@ -198,7 +198,7 @@ export function CreatePropertyPopover({ baseId, properties, onPropertyCreated }:
const syntheticProperty: IBaseProperty = useMemo(() => ({
id: "",
- baseId,
+ pageId,
name: name || "",
type: selectedType ?? "text",
position: "",
@@ -207,7 +207,7 @@ export function CreatePropertyPopover({ baseId, properties, onPropertyCreated }:
workspaceId: "",
createdAt: "",
updatedAt: "",
- }), [baseId, name, selectedType, typeOptions]);
+ }), [pageId, name, selectedType, typeOptions]);
const TypeIcon = selectedTypeIcon;
const showOptions = selectedType && typesWithOptions.has(selectedType);
@@ -279,7 +279,7 @@ export function CreatePropertyPopover({ baseId, properties, onPropertyCreated }:
if (nameTaken) return;
createPropertyMutation.mutate(
{
- baseId,
+ pageId,
name: name.trim() || fallbackName,
type: "formula",
typeOptions: {
diff --git a/apps/client/src/features/base/components/property/property-menu.tsx b/apps/client/src/features/base/components/property/property-menu.tsx
index b2e0d2189..322922326 100644
--- a/apps/client/src/features/base/components/property/property-menu.tsx
+++ b/apps/client/src/features/base/components/property/property-menu.tsx
@@ -94,7 +94,7 @@ export function PropertyMenuContent({
if (trimmed && trimmed !== property.name) {
updatePropertyMutation.mutate({
propertyId: property.id,
- baseId: property.baseId,
+ pageId: property.pageId,
name: trimmed,
});
}
@@ -138,7 +138,7 @@ export function PropertyMenuContent({
(typeOptions: Record) => {
updatePropertyMutation.mutate({
propertyId: property.id,
- baseId: property.baseId,
+ pageId: property.pageId,
typeOptions,
});
setOptionsDirty(false);
@@ -149,7 +149,7 @@ export function PropertyMenuContent({
const handleDelete = useCallback(() => {
deletePropertyMutation.mutate({
propertyId: property.id,
- baseId: property.baseId,
+ pageId: property.pageId,
});
onClose();
}, [property, deletePropertyMutation, onClose]);
diff --git a/apps/client/src/features/base/components/views/view-tabs.tsx b/apps/client/src/features/base/components/views/view-tabs.tsx
index 4f9ef7697..75d2b6a77 100644
--- a/apps/client/src/features/base/components/views/view-tabs.tsx
+++ b/apps/client/src/features/base/components/views/view-tabs.tsx
@@ -22,7 +22,7 @@ import cellClasses from "@/features/base/styles/cells.module.css";
type ViewTabsProps = {
views: IBaseView[];
activeViewId: string | undefined;
- baseId: string;
+ pageId: string;
onViewChange: (viewId: string) => void;
onAddView?: () => void;
};
@@ -30,7 +30,7 @@ type ViewTabsProps = {
export function ViewTabs({
views,
activeViewId,
- baseId,
+ pageId,
onViewChange,
onAddView,
}: ViewTabsProps) {
@@ -56,12 +56,12 @@ export function ViewTabs({
if (trimmed && view && trimmed !== view.name) {
updateViewMutation.mutate({
viewId: editingViewId,
- baseId,
+ pageId,
name: trimmed,
});
}
setEditingViewId(null);
- }, [editingViewId, editingName, views, baseId, updateViewMutation]);
+ }, [editingViewId, editingName, views, pageId, updateViewMutation]);
const handleRenameKeyDown = useCallback(
(e: React.KeyboardEvent) => {
@@ -80,13 +80,13 @@ export function ViewTabs({
const handleDelete = useCallback(
(viewId: string) => {
if (views.length <= 1) return;
- deleteViewMutation.mutate({ viewId, baseId });
+ deleteViewMutation.mutate({ viewId, pageId });
if (viewId === activeViewId && views.length > 1) {
const remaining = views.filter((v) => v.id !== viewId);
onViewChange(remaining[0].id);
}
},
- [views, baseId, activeViewId, deleteViewMutation, onViewChange],
+ [views, pageId, activeViewId, deleteViewMutation, onViewChange],
);
return (