tried async import and am running into issues with imports, attemptin…

…g to make static imports work
Nounspace · May 4, 2024 · 6212d1a · 6212d1a
1 parent 9766fff
commit 6212d1a
Show file tree

Hide file tree

Showing 15 changed files with 223 additions and 92 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,7 +5,7 @@ import { rainbowKitTheme, config } from "@/common/ui/templates/rainboxkit";
 import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { PostHogProvider } from "posthog-js/react";
-import React from "react"
+import React, { Suspense } from "react"
 import { WagmiProvider } from "wagmi";
 
 export const metadata = {
@@ -54,18 +54,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <PostHogProvider client={posthog}>
-          <WagmiProvider config={config}>
-            <QueryClientProvider client={queryClient}>
-              <RainbowKitProvider theme={rainbowKitTheme}>
-                <CommandPalette />
-                <Home>
-                  { children }
-                </Home>
-              </RainbowKitProvider>
-            </QueryClientProvider>
-          </WagmiProvider>
-        </PostHogProvider>  
+        <Suspense>
+          { children }
+        </Suspense>
       </body>
     </html>
   );

diff --git a/src/app/sandbox/fidgets/[fidgetName]/FidgetViewer.tsx b/src/app/sandbox/fidgets/[fidgetName]/FidgetViewer.tsx
diff --git a/src/app/sandbox/fidgets/[fidgetName]/page.tsx b/src/app/sandbox/fidgets/[fidgetName]/page.tsx
@@ -1,5 +1,7 @@
-import { importFidget } from "@/fidgets";
-import React, { use } from "react";
+import React from "react";
+import FidgetViewer from "@/common/fidgets/FidgetViewer";
+import CompleteFidgets from "@/fidgets";
+import { GenericFidget } from "@/common/fidgets/makeFidget";
 
 type PageParams = {
   params: {
@@ -8,5 +10,13 @@ type PageParams = {
 };
 
 export default function Page({ params }: PageParams) {
-  const { fidget, fieldConfig } = use(importFidget(params.fidgetName));
+  const fidget = CompleteFidgets[params.fidgetName] as GenericFidget;
+
+  return (
+  <>
+    {
+      fidget ? <FidgetViewer fidget={fidget} /> : <div>Error Loading Fidget</div>
+    }
+  </>
+  );
 }
diff --git a/src/common/fidgets/FidgetViewer.tsx b/src/common/fidgets/FidgetViewer.tsx
@@ -0,0 +1,40 @@
+"use client"
+import React, { useState } from "react";
+import { FidgetConfig, FidgetSettings, GenericFidget } from "@/common/fidgets/makeFidget";
+import { reduce } from "lodash";
+import { FidgetWrapper, FidgetWrapperConfig } from "@/common/fidgets/FidgetWrapper";
+
+
+export default function LazyFidgetViewer({ fidget }: { fidget: GenericFidget }) {
+  const defaultConfig: FidgetWrapperConfig = {
+    editConfig: fidget.fieldConfig,
+    fidgetConfig: {
+      editable: true,
+      size: [1, 2],
+      settings: reduce(
+        fidget.fieldConfig.fields,
+        (acc, f) => ({
+          ...acc,
+          [f.fieldName]: f.default || null,
+        }),
+        {},
+      )
+    },
+  };
+  const [config, setConfig] = useState<FidgetWrapperConfig>(defaultConfig);  
+  const saveConifg = async (conf: FidgetConfig<FidgetSettings>) => {
+    setConfig({
+      editConfig: config.editConfig,
+      fidgetConfig: conf,
+    });
+    return true;
+  };
+
+  return (
+    <FidgetWrapper
+      config={config}
+      saveConfig={saveConifg}
+      fidget={fidget}
+    />
+  );
+}
diff --git a/src/common/fidgets/FidgetWrapper.tsx b/src/common/fidgets/FidgetWrapper.tsx
@@ -1,11 +1,11 @@
+"use client"
 import React, { useState } from "react";
-import { FidgetConfig, FidgetEditConfig, FidgetSettings } from "@/fidgets";
+import { FidgetConfig, FidgetEditConfig, FidgetSettings } from "@/common/fidgets/makeFidget";
 import { Card, CardContent, CardHeader } from "../ui/atoms/card";
 import { Button } from "../ui/atoms/button";
 import FidgetWrapperEditMode from "./FidgetWrapperEditMode";
 import { toast } from "sonner";
 
-
 export type FidgetWrapperConfig = {
   fidgetConfig: FidgetConfig<FidgetSettings>;
   readonly editConfig: FidgetEditConfig;
@@ -18,6 +18,7 @@ type FidgetWrapperProps = {
 };
 
 export function FidgetWrapper({ fidget, config, saveConfig }: FidgetWrapperProps) {
+  console.log(fidget);
   const [saving, setSaving] = useState(false);
   const [editing, setEditing] = useState(false);
   const [viewEditor, setViewEditor] = useState(false);

diff --git a/src/common/fidgets/FidgetWrapperEditMode.tsx b/src/common/fidgets/FidgetWrapperEditMode.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { FidgetEditConfig, FidgetSettings } from "@/fidgets";
+import { FidgetEditConfig, FidgetSettings } from "@/common/fidgets/makeFidget";
 
 type FidgetWrapperSettingsEditorProps = {
   readonly editConfig: FidgetEditConfig;

diff --git a/src/common/fidgets/LazyFidgetViewer.tsx b/src/common/fidgets/LazyFidgetViewer.tsx
@@ -0,0 +1,65 @@
+"use client"
+import React, { useEffect, useState } from "react";
+import { FidgetConfig, FidgetSettings, Fidget } from "@/common/fidgets/makeFidget";
+import { reduce } from "lodash";
+import { FidgetWrapper, FidgetWrapperConfig } from "@/common/fidgets/FidgetWrapper";
+import { useLazyFidget } from "./useLazyFidget";
+
+
+export default function LazyFidgetViewer({ fidgetPath }: { fidgetPath: string }) {
+  // This doesn't work if the FidgetPath is relative
+  // Building a separate Fidget's package might solve the issue
+  // But that will take testing
+  const lazyFidget = useLazyFidget(fidgetPath);
+  const [config, setConfig] = useState<FidgetWrapperConfig>({
+    editConfig: { fields: [] },
+    fidgetConfig: { editable: true, size: [1,1], settings: {} }
+  });  
+  const saveConifg = async (conf: FidgetConfig<FidgetSettings>) => {
+    setConfig({
+      editConfig: config.editConfig,
+      fidgetConfig: conf,
+    });
+    return true;
+  };
+
+  useEffect(() => {
+    if (lazyFidget.status === "Success") {
+      const fidget = lazyFidget.result;
+      const defaultConfig: FidgetWrapperConfig = {
+        editConfig: fidget.fieldConfig,
+        fidgetConfig: {
+          editable: true,
+          size: [1, 2],
+          settings: reduce(
+            fidget.fieldConfig.fields,
+            (acc, f) => ({
+              ...acc,
+              [f.fieldName]: f.default || null,
+            }),
+            {},
+          )
+        },
+      };
+      setConfig(defaultConfig);
+    } 
+  }, [lazyFidget]);
+
+  return (
+    <>
+    { 
+      lazyFidget.status === "Loading" ? 
+        <div>Loading...</div>
+      : (
+        lazyFidget.status === "Success" ?
+          <FidgetWrapper
+            config={config}
+            saveConfig={saveConifg}
+            fidget={lazyFidget.result}
+          />
+        : <div>Error!</div>
+      )
+    }
+    </>
+  );
+}
diff --git a/src/fidgets/index.tsx → src/common/fidgets/makeFidget.tsx b/src/fidgets/index.tsx → src/common/fidgets/makeFidget.tsx
@@ -1,7 +1,10 @@
+import React from "react";
+
 export interface FidgetSettings {
+  // TO DO: infer values here backed off the related config file
 }
 
-export type FidgetConfig<S> = {
+export type FidgetConfig<S extends FidgetSettings> = {
   editable: boolean;
   size: [number, number];
   settings: S;
@@ -19,12 +22,15 @@ export type FidgetFieldConfig = {
 export type FidgetEditConfig = {
   fields: FidgetFieldConfig[];
 };
-
-export type FidgetModule<P> = {
-  fidget: React.FC<P>;
+
+export interface Fidget<P> extends React.FC<P> {
   fieldConfig: FidgetEditConfig;
-};
-
-export async function importFidget(fidgetName) {
-  return await import(`./${fidgetName}`) as FidgetModule<FidgetSettings>;
 }
+
+export type GenericFidget = Fidget<FidgetSettings>;
+
+export function makeFidget<S>(component: React.FC<S>, fieldConfig: FidgetEditConfig): Fidget<S> {
+  const componentAny: any = component;
+  componentAny.fieldConfig = fieldConfig;
+  return componentAny;
+}
diff --git a/src/common/fidgets/useLazyFidget.ts b/src/common/fidgets/useLazyFidget.ts
@@ -0,0 +1,45 @@
+import { useState, useEffect } from "react";
+import { GenericFidget } from "@/common/fidgets/makeFidget";
+
+type LazyFidgetResult<T> = T | Error | null;
+type LazyFidgetStatus = "Loading" | "Error" | "Success";
+
+type LazyFidgetPending = {
+  status: "Loading",
+  result: null,
+}
+
+type LazyFidgetError = {
+  status: "Error",
+  result: Error,
+}
+
+type LazyFidgetLoaded<T> = {
+  status: "Success",
+  result: T,
+}
+
+export type LazyFidget<T extends GenericFidget> = LazyFidgetError | LazyFidgetPending | LazyFidgetLoaded<T>;
+
+export function useLazyFidget<T extends GenericFidget>(fidgetPath: string): LazyFidget<T> {
+  const [result, setResult] = useState<LazyFidgetResult<T>>(null);
+  const [status, setStatus] = useState<LazyFidgetStatus>("Loading");
+
+  useEffect(() => {
+      import(fidgetPath).then(
+      moduleData => {
+        setResult(moduleData.default);
+        setStatus("Success");
+      },
+      error => {
+        setResult(error);
+        setStatus("Error");
+        console.log(error);
+      }
+    );
+  }, []);
+
+  return {
+    status, result
+  } as LazyFidget<T>;
+}
diff --git a/src/common/ui/components/CommandPalette/index.tsx b/src/common/ui/components/CommandPalette/index.tsx
@@ -1,3 +1,4 @@
+"use client"
 import React, { Fragment, useState } from 'react';
 import { CommandType } from "@/constants/commands";
 import { classNames } from "@/styles/utils/css";

diff --git a/src/common/ui/templates/home/index.tsx b/src/common/ui/templates/home/index.tsx
@@ -1,3 +1,4 @@
+"use client"
 import React from "react";
 import { Fragment, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";

diff --git a/src/fidgets/example/ExampleFidget.tsx b/src/fidgets/example/ExampleFidget.tsx
diff --git a/src/fidgets/example/index.ts b/src/fidgets/example/index.ts
diff --git a/src/fidgets/example/index.tsx b/src/fidgets/example/index.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { FidgetEditConfig, makeFidget } from "../../common/fidgets/makeFidget";
+import TextInput from "@/common/ui/molecules/TextInput";
+
+export type ExampleFidgetSettings = {
+  text: string,
+}
+
+const exampleConfig: FidgetEditConfig = {
+  fields: [
+    {
+      fieldName: "displayText",
+      default: "Hello World!",
+      required: true,
+      inputSelector: TextInput,
+    }
+  ],
+};
+
+const Example: React.FC<ExampleFidgetSettings> = ({ text }: ExampleFidgetSettings) => {
+  return (
+    <div className="">
+      { text }
+    </div>
+  );
+};
+
+const ExampleFidget = makeFidget<ExampleFidgetSettings>(Example, exampleConfig);
+
+export default ExampleFidget;
diff --git a/src/fidgets/index.ts b/src/fidgets/index.ts
@@ -0,0 +1,6 @@
+// TO DO: Figure out how to do this importing dynamically
+import ExampleFidget from "./example";
+
+export default {
+  example: ExampleFidget,
+};