feat: even better context

Author: drew-harris

frontends/dashboard/src/contexts/DatasetContext.tsx

@@ -1,71 +1,40 @@
-import {
-  Accessor,
-  JSX,
-  createEffect,
-  createContext,
-  createSignal,
-  useContext,
-} from "solid-js";
-import { Dataset } from "shared/types";
-import { UserContext } from "./UserContext";
 import { useParams } from "@solidjs/router";
-import { createToast } from "../components/ShowToasts";
-
-export interface DatasetStoreContextProps {
-  children: JSX.Element;
-}
+import { Accessor, createContext, createMemo, useContext } from "solid-js";
+import { JSX } from "solid-js";
+import { DatasetAndUsage } from "trieve-ts-sdk";
+import { UserContext } from "./UserContext";
 
-export interface DatasetStore {
-  dataset: Accessor<Dataset | null> | null;
-}
+type DatasetStore = {
+  dataset: Accessor<DatasetAndUsage | null>;
+  datasetId: string;
+};
 
 export const DatasetContext = createContext<DatasetStore>({
-  dataset: null,
+  dataset: () => null as unknown as DatasetAndUsage,
+  datasetId: "",
 });
 
-export const DatasetContextWrapper = (props: DatasetStoreContextProps) => {
-  const apiHost = import.meta.env.VITE_API_HOST as string;
-  const userContext = useContext(UserContext);
-  const [dataset, setDataset] = createSignal<Dataset | null>(null);
-
-  createEffect(() => {
-    if (userContext?.user?.()) {
-      const id = useParams().dataset_id;
-      if (!id) return;
-
-      if (!id || !id.match(/^[a-f0-9-]+$/)) {
-        console.error("Invalid dataset id for fetch");
-        return;
-      }
-
-      fetch(`${apiHost}/dataset/${id}`, {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-          "TR-Organization": userContext.selectedOrganizationId?.() as string,
-        },
-        credentials: "include",
-      })
-        .then((res) => res.json())
-        .then((data) => {
-          setDataset(data);
-        })
-        .catch(() => {
-          createToast({
-            title: "Error",
-            type: "error",
-            message: "Failed to fetch the dataset",
-          });
-        });
+export const DatasetContextProvider = (props: { children: JSX.Element }) => {
+  const datasetId = useParams().id;
+  const orgContext = useContext(UserContext);
+
+  const dataset = createMemo(() => {
+    const possDatasets = orgContext.orgDatasets();
+    if (possDatasets) {
+      return (
+        possDatasets.find((dataset) => dataset.dataset.id === datasetId) || null
+      );
+    } else {
+      return null;
     }
   });
-
-  const datasetStore: DatasetStore = {
-    dataset,
-  };
-
   return (
-    <DatasetContext.Provider value={datasetStore}>
+    <DatasetContext.Provider
+      value={{
+        dataset: dataset,
+        datasetId: datasetId,
+      }}
+    >
       {props.children}
     </DatasetContext.Provider>
   );

frontends/dashboard/src/index.tsx

@@ -12,6 +12,7 @@ import { NavbarLayout } from "./layouts/NavbarLayout.tsx";
 import { OrganizationHomepage } from "./pages/OrganizationHomepage.tsx";
 import { DatasetHomepage } from "./pages/dataset/DatasetHomepage.tsx";
 import { DatasetLayout } from "./layouts/DatasetSidebarLayout.tsx";
+import { DatasetContextProvider } from "./contexts/DatasetContext.tsx";
 
 if (!DEV) {
   Sentry.init({
@@ -53,7 +54,11 @@ const routes: RouteDefinition[] = [
           },
           {
             path: "/dataset/:id",
-            component: DatasetLayout,
+            component: (props) => (
+              <DatasetContextProvider>
+                <DatasetLayout>{props.children}</DatasetLayout>
+              </DatasetContextProvider>
+            ),
             // ANY CHILD will have access to datasetID
             children: [
               {

frontends/dashboard/src/layouts/DatasetSidebarLayout.tsx

@@ -1,50 +1,15 @@
-import { useParams } from "@solidjs/router";
-import { Accessor, createContext, JSX, useContext } from "solid-js";
-import { UserContext } from "../contexts/UserContext";
-import { createMemo } from "solid-js/types/server/reactive.js";
-import { DatasetAndUsage } from "trieve-ts-sdk";
+import { JSX } from "solid-js";
 
 interface Props {
   children?: JSX.Element;
 }
 
-type DatasetStore = {
-  dataset: Accessor<DatasetAndUsage | null>;
-  datasetId: string;
-};
-
-const DatasetContext = createContext<DatasetStore>({
-  dataset: () => null as unknown as DatasetAndUsage,
-  datasetId: "",
-});
-
 // Needs to ensure dataset and org don't desync
 export const DatasetLayout = (props: Props) => {
-  const datasetId = useParams().id;
-  const orgContext = useContext(UserContext);
-
-  const dataset = createMemo(() => {
-    const possDatasets = orgContext.orgDatasets();
-    if (possDatasets) {
-      return (
-        possDatasets.find((dataset) => dataset.dataset.id === datasetId) || null
-      );
-    } else {
-      return null;
-    }
-  });
-
   return (
-    <DatasetContext.Provider
-      value={{
-        dataset,
-        datasetId,
-      }}
-    >
-      <div class="grid max-h-full grow grid-cols-[200px_1fr] overflow-hidden bg-green-500">
-        <div class="h-full bg-red-500">sidebar</div>
-        <div class="overflow-scroll">{props.children}</div>
-      </div>
-    </DatasetContext.Provider>
+    <div class="grid max-h-full grow grid-cols-[200px_1fr] overflow-hidden">
+      <div class="h-full bg-red-500">sidebar</div>
+      <div class="overflow-scroll">{props.children}</div>
+    </div>
   );
 };

frontends/dashboard/src/pages/dataset/DatasetHomepage.tsx

@@ -1,11 +1,12 @@
-import { useParams } from "@solidjs/router";
+import { useContext } from "solid-js";
+import { DatasetContext } from "../../contexts/DatasetContext";
 
 export const DatasetHomepage = () => {
-  const datasetId = useParams().id;
+  const { datasetId } = useContext(DatasetContext);
   return (
     <div>
       <div>Dataset Homepage</div>
-      <div class="m-3 h-[4000px] bg-orange-700">{datasetId}</div>
+      <div class="m-3 bg-orange-700">ID: {datasetId}</div>
     </div>
   );
 };