add SnackLogProvider

src/Providers.tsx

@@ -1,5 +1,6 @@
 import { ErrorBoundary } from "react-error-boundary";
 import ErrorFallback from "@src/components/ErrorFallback";
+import SwrProvider from "@src/contexts/SwrContext";
 import { BrowserRouter } from "react-router-dom";
 import { HelmetProvider } from "react-helmet-async";
 import { Provider, Atom } from "jotai";
@@ -8,6 +9,7 @@ import createCache from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
 import RowyThemeProvider from "@src/theme/RowyThemeProvider";
 import SnackbarProvider from "@src/contexts/SnackbarContext";
+import { SnackLogProvider } from "@src/contexts/SnackLogContext";
 
 import { Suspense } from "react";
 import Loading from "@src/components/Loading";
@@ -32,9 +34,11 @@ export default function Providers({
               <RowyThemeProvider>
                 <ErrorBoundary FallbackComponent={ErrorFallback}>
                   <SnackbarProvider>
-                    <Suspense fallback={<Loading fullScreen />}>
-                      {children}
-                    </Suspense>
+                    <SnackLogProvider>
+                      <Suspense fallback={<Loading fullScreen />}>
+                        {children}
+                      </Suspense>
+                    </SnackLogProvider>
                   </SnackbarProvider>
                 </ErrorBoundary>
               </RowyThemeProvider>

src/components/TableSettingsDialog/TableSettingsDialog.tsx

@@ -1,9 +1,8 @@
 import { useAtom, useSetAtom } from "jotai";
 import useSWR from "swr";
 import { useSnackbar } from "notistack";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { find, sortBy, get, isEmpty } from "lodash-es";
-import { FieldValues } from "react-hook-form";
 import { Controller } from "react-hook-form";
 
 import { DialogContentText, Stack, Typography } from "@mui/material";
@@ -31,8 +30,6 @@ import {
 import { TableSettings } from "@src/types/table";
 import { analytics, logEvent } from "@src/analytics";
 
-// TODO:
-// import { useSnackLogContext } from "@src/contexts/SnackLogContext";
 import { runRoutes } from "@src/constants/runRoutes";
 import {
   CONFIG,
@@ -40,6 +37,7 @@ import {
   TABLE_SCHEMAS,
 } from "@src/config/dbPaths";
 import { ROUTES } from "@src/constants/routes";
+import { useSnackLogContext } from "@src/contexts/SnackLogContext";
 
 const customComponents = {
   tableName: {
@@ -70,10 +68,9 @@ export default function TableSettingsDialog() {
   const [tables] = useAtom(tablesAtom, globalScope);
   const [rowyRun] = useAtom(rowyRunAtom, globalScope);
 
-  const location = useLocation();
   const navigate = useNavigate();
   const confirm = useSetAtom(confirmDialogAtom, globalScope);
-  // const snackLogContext = useSnackLogContext();
+  const snackLogContext = useSnackLogContext();
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
 
   const sectionNames = Array.from(
@@ -81,8 +78,11 @@ export default function TableSettingsDialog() {
   );
 
   const { data: collections } = useSWR(
-    "firebaseCollections",
-    () => rowyRun({ route: runRoutes.listCollections }),
+    "collectionsList",
+    async () => {
+      const result = await rowyRun({ route: runRoutes.listCollections });
+      return result || [];
+    },
     {
       revalidateOnMount: true,
       revalidateOnFocus: false,
@@ -130,8 +130,7 @@ export default function TableSettingsDialog() {
 
             if (hasExtensions) {
               // find derivative, default value
-              // TODO:
-              // snackLogContext.requestSnackLog();
+              snackLogContext.requestSnackLog();
               rowyRun({
                 route: runRoutes.buildFunction,
                 body: {

src/contexts/SnackLogContext.tsx

@@ -0,0 +1,49 @@
+import { createContext, useContext, useState } from "react";
+
+const DEFAULT_STATE = {
+  isSnackLogOpen: false,
+  latestBuildTimestamp: 0,
+};
+const DEFAULT_FUNCTIONS = {
+  requestSnackLog: () => {},
+  closeSnackLog: () => {},
+};
+
+export const SnackLogContext = createContext({
+  ...DEFAULT_STATE,
+  ...DEFAULT_FUNCTIONS,
+});
+export const useSnackLogContext = () => useContext(SnackLogContext);
+
+export function SnackLogProvider({ children }: React.PropsWithChildren<{}>) {
+  const [state, setState] = useState(DEFAULT_STATE);
+
+  const requestSnackLog: typeof DEFAULT_FUNCTIONS.requestSnackLog = () => {
+    setTimeout(() => {
+      setState({
+        ...state,
+        latestBuildTimestamp: Date.now(),
+        isSnackLogOpen: true,
+      });
+    }, 500);
+  };
+
+  const closeSnackLog: typeof DEFAULT_FUNCTIONS.closeSnackLog = () =>
+    setState({
+      ...state,
+      latestBuildTimestamp: 0,
+      isSnackLogOpen: false,
+    });
+
+  return (
+    <SnackLogContext.Provider
+      value={{
+        ...state,
+        requestSnackLog,
+        closeSnackLog,
+      }}
+    >
+      {children}
+    </SnackLogContext.Provider>
+  );
+}

src/contexts/SwrContext.tsx

@@ -0,0 +1,24 @@
+import { SWRConfig } from "swr";
+
+// NOTE: This does not support React 18 yet. See: https://github.com/vercel/swr/issues/1904
+
+// https://swr.vercel.app/docs/advanced/cache#localstorage-based-persistent-cache
+function localStorageProvider() {
+  // When initializing, we restore the data from `localStorage` into a map.
+  const map = new Map(JSON.parse(localStorage.getItem("swr-cache") || "[]"));
+
+  // Before unloading the app, we write back all the data into `localStorage`.
+  window.addEventListener("beforeunload", () => {
+    const appCache = JSON.stringify(Array.from(map.entries()));
+    localStorage.setItem("swr-cache", appCache);
+  });
+
+  // We still use the map for write & read for performance.
+  return map;
+}
+
+export default function SwrProvider({ children }: React.PropsWithChildren<{}>) {
+  return (
+    <SWRConfig value={{ provider: localStorageProvider }}>{children}</SWRConfig>
+  );
+}