save default sort for the user

src/components/Table/ColumnHeader/useSaveTableSorts.tsx

@@ -6,11 +6,18 @@ import LoadingButton from "@mui/lab/LoadingButton";
 import CheckIcon from "@mui/icons-material/Check";
 
 import CircularProgressOptical from "@src/components/CircularProgressOptical";
-import { tableScope, updateTableSchemaAtom } from "@src/atoms/tableScope";
+import {
+  tableIdAtom,
+  tableScope,
+  updateTableSchemaAtom,
+} from "@src/atoms/tableScope";
+import { projectScope, updateUserSettingsAtom } from "@src/atoms/projectScope";
 import { TableSort } from "@src/types/table";
 
 function useSaveTableSorts(canEditColumns: boolean) {
   const [updateTableSchema] = useAtom(updateTableSchemaAtom, tableScope);
+  const [updateUserSettings] = useAtom(updateUserSettingsAtom, projectScope);
+  const [tableId] = useAtom(tableIdAtom, tableScope);
   if (!updateTableSchema) throw new Error("Cannot update table schema");
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
   const [snackbarId, setSnackbarId] = useState<SnackbarKey | null>(null);
@@ -18,8 +25,14 @@ function useSaveTableSorts(canEditColumns: boolean) {
   // Offer to save when table sorts changes
   const trigger = useCallback(
     (sorts: TableSort[]) => {
+      if (updateUserSettings) {
+        updateUserSettings({
+          tables: {
+            [`${tableId}`]: { sorts },
+          },
+        });
+      }
       if (!canEditColumns) return;
-      console.log(snackbarId);
       if (snackbarId) {
         closeSnackbar(snackbarId);
       }
@@ -27,9 +40,7 @@ function useSaveTableSorts(canEditColumns: boolean) {
         enqueueSnackbar("Apply this sorting for all users?", {
           action: (
             <SaveTableSortButton
-              updateTable={async () =>
-                await updateTableSchema({ sorts: sorts })
-              }
+              updateTable={async () => await updateTableSchema({ sorts })}
             />
           ),
           anchorOrigin: { horizontal: "center", vertical: "top" },
@@ -39,9 +50,11 @@ function useSaveTableSorts(canEditColumns: boolean) {
       return () => (snackbarId ? closeSnackbar(snackbarId) : null);
     },
     [
-      snackbarId,
+      updateUserSettings,
       canEditColumns,
+      snackbarId,
       enqueueSnackbar,
+      tableId,
       closeSnackbar,
       updateTableSchema,
     ]

src/pages/Table/TablePage.tsx

@@ -1,5 +1,5 @@
-import { Suspense, lazy, useEffect, useState } from "react";
-import { useAtom, useSetAtom } from "jotai";
+import { Suspense, lazy } from "react";
+import { useAtom } from "jotai";
 import { ErrorBoundary } from "react-error-boundary";
 import { isEmpty, intersection } from "lodash-es";
 
@@ -78,7 +78,6 @@ export default function TablePage({
   const [tableId] = useAtom(tableIdAtom, tableScope);
   const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
   const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
-  const setTableSorts = useSetAtom(tableSortsAtom, tableScope);
   const snackLogContext = useSnackLogContext();
 
   // Set permissions here so we can pass them to the `Table` component, which
@@ -98,15 +97,6 @@ export default function TablePage({
   useBeforeUnload(columnModalAtom, tableScope);
   useBeforeUnload(tableModalAtom, tableScope);
 
-  // Initially set the TableSorts values from table schema
-  const [applySort, setApplySort] = useState(true);
-  useEffect(() => {
-    if (applySort && Object.keys(tableSchema).length) {
-      setTableSorts(tableSchema.sorts || []);
-      setApplySort(false);
-    }
-  }, [tableSchema, applySort, setTableSorts, setApplySort]);
-
   if (!(tableSchema as any)._rowy_ref)
     return (
       <>

src/sources/TableSourceFirestore/TableSourceFirestore.tsx

@@ -39,6 +39,7 @@ import { getTableSchemaPath } from "@src/utils/table";
 import { TableSchema } from "@src/types/table";
 import { firebaseDbAtom } from "@src/sources/ProjectSourceFirebase";
 import { projectScope } from "@src/atoms/projectScope";
+import useApplySorts from "./useApplySorts";
 
 /**
  * When rendered, provides atom values for top-level tables and sub-tables
@@ -141,6 +142,7 @@ export const TableSourceFirestore = memo(function TableSourceFirestore() {
     }
   );
 
+  useApplySorts();
   useAuditChange();
   useBulkWriteDb();
 

src/sources/TableSourceFirestore/useApplySorts.ts

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { useAtom, useSetAtom } from "jotai";
+
+import { projectScope, userSettingsAtom } from "@src/atoms/projectScope";
+import {
+  tableIdAtom,
+  tableSchemaAtom,
+  tableScope,
+  tableSortsAtom,
+} from "@src/atoms/tableScope";
+
+/**
+ * Sets the value of tableSortsAtom
+ */
+export default function useApplySorts() {
+  // Apply the sorts
+
+  const setTableSorts = useSetAtom(tableSortsAtom, tableScope);
+  const [userSettings] = useAtom(userSettingsAtom, projectScope);
+  const [tableId] = useAtom(tableIdAtom, tableScope);
+  const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
+
+  // Apply only once
+  const [applySort, setApplySort] = useState(true);
+
+  useEffect(() => {
+    if (applySort && Object.keys(tableSchema).length) {
+      console.log("useApplySorts");
+      const userDefaultSort = userSettings.tables?.[tableId]?.sorts || [];
+      console.log({
+        userDefaultSort,
+        tableSchemaSorts: tableSchema.sorts,
+      });
+      setTableSorts(
+        userDefaultSort.length ? userDefaultSort : tableSchema.sorts || []
+      );
+      setApplySort(false);
+    }
+  }, [setTableSorts, userSettings, tableId, applySort, tableSchema]);
+}