feat: feature/999

remix/app/Providers/ThingtimeProvider.tsx

@@ -82,33 +82,6 @@ Content.Nested Content = New Nested Content!
 // const initialThingtime = createInitialThingtime()
 const initialThingtime = smarts.merge(initialValues, force)
 
-// TODO: Make localStorage be loaded first before initialValues if local version exists
-// and is valid
-// Issue seems to be server id is different to client hydration
-
-// let thingtimeToUse = initialThingtime
-
-// try {
-//   const thingtimeFromLocalStorage = window.localStorage.getItem("thingtime")
-
-//   if (thingtimeFromLocalStorage) {
-//     const parsed = parse(thingtimeFromLocalStorage)
-//     if (parsed) {
-//       const localIsValid = !parsed.version || parsed.version >= force.version
-//       if (localIsValid) {
-//         const newThingtime = smarts.merge(force, parsed)
-//         thingtimeToUse = newThingtime
-//       } else {
-//         const withVersionUpdates = smarts.merge(newVersionData, parsed)
-//         const newThingtime = smarts.merge(force, withVersionUpdates)
-//         thingtimeToUse = newThingtime
-//       }
-//     }
-//   }
-// } catch (err) {
-//   console.error("Caught error restoring thingtime from localstorage", err)
-// }
-
 // initialise thingtime
 initialThingtime.thingtime = initialThingtime
 initialThingtime.tt = initialThingtime
@@ -151,20 +124,8 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
           // nothing
         }
         // if last undoHistory does not equal new undo history
-        // console.log(
-        //   "ThingtimeProvider saving to undo history undoHistory[undoHistory.length - 1]?.value",
-        //   undoHistory[undoHistory.length - 1]?.value
-        // )
-        // console.log(
-        //   "ThingtimeProvider saving to undo history stringified",
-        //   stringified
-        // )
         if (undoHistory[undoHistory.length - 1]?.value !== stringified) {
           try {
-            // console.log(
-            //   "ThingtimeProvider saving to undo history undoHistory",
-            //   undoHistory
-            // )
             const limit = newThingtimeReference?.settings?.undoLimit || 999
 
             if (undoHistory?.length > limit) {
@@ -181,8 +142,6 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
             // nothing
           }
         }
-        // window.localStorage.setItem("thingtime", stringified)
-        // }, 600)
       } catch (err) {
         console.error("There was an error saving thingtime to localStorage")
       }
@@ -205,21 +164,8 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
           } catch {
             // nothing
           }
-          // if last redoHistory does not equal new redo history
-          // console.log(
-          //   "ThingtimeProvider saving to redo history redoHistory[redoHistory.length - 1]?.value",
-          //   redoHistory[redoHistory.length - 1]?.value
-          // )
-          // console.log(
-          //   "ThingtimeProvider saving to redo history stringified",
-          //   stringified
-          // )
           if (redoHistory[redoHistory.length - 1]?.value !== stringified) {
             try {
-              // console.log(
-              //   "ThingtimeProvider saving to redo history redoHistory",
-              //   redoHistory
-              // )
               const limit = newThingtimeReference?.settings?.redoLimit || 999
 
               if (redoHistory?.length > limit) {
@@ -236,8 +182,6 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
               // nothing
             }
           }
-          // window.localStorage.setItem("thingtime", stringified)
-          // }, 600)
         } catch (err) {
           console.error("There was an error saving thingtime to localStorage")
         }

remix/app/components/Thingtime/Thingtime.tsx

@@ -287,13 +287,24 @@ export const Thingtime = (props) => {
     }
   }, [thing, thingDep, type, chakras, keys])
 
+  const hasChakraChildren = React.useMemo(() => {
+    return !props?.edit && chakra && render && thing?.children
+  }, [chakra, props?.edit, render, thing?.children])
+
+  const renderChakra = React.useMemo(() => {
+    if (!props?.edit && chakra && render) {
+      return true
+    }
+    return false
+  }, [chakra, props?.edit, render])
+
   const keysToUse = React.useMemo(() => {
-    if (!props?.edit && chakra) {
+    if (renderChakra) {
       return ["children"]
     }
 
     return keys
-  }, [chakra, keys, props?.edit])
+  }, [hasChakraChildren, keys])
   // const keysToUse = flattenedKeys
 
   const template1Modes = React.useMemo(() => {
@@ -357,7 +368,7 @@ export const Thingtime = (props) => {
                   notRoot
                   fullPath={fullPath + "." + key?.key}
                   path={key}
-                  chakra={chakra}
+                  chakraChildren={chakra}
                   thing={nextThing}
                   // thing={{ infinite: { yes: true } }}
                   valuePl={pl}
@@ -383,11 +394,9 @@ export const Thingtime = (props) => {
             console.log("Thingtime found thing?.props", fullPath, thing?.props)
 
             const ret = (
-              <Safe {...props}>
+              <ChakraComponent {...(thing?.props || {})}>
-                <ChakraComponent {...(thing?.props || {})}>
+                {inner}
-                  {inner}
+              </ChakraComponent>
-                </ChakraComponent>
-              </Safe>
             )
             return ret
           }
@@ -396,22 +405,27 @@ export const Thingtime = (props) => {
         }
       }
 
+      // TODO: Is it safe to spread props
+      // because having props as a dependency will cause a re-render every time
+
+      if (props?.chakraChildren) {
+        return inner
+      }
+
       return (
-        <Safe {...props}>
+        <Flex
-          <Flex
+          className="nested-things"
-            className="nested-things"
+          position="relative"
-            position="relative"
+          flexDirection="column"
-            flexDirection="column"
+          rowGap={!chakra ? 9 : 0}
-            rowGap={9}
+          // w={'500px'}
-            // w={'500px'}
+          // w={['200px', '500px']}
-            // w={['200px', '500px']}
+          maxWidth="100%"
-            maxWidth="100%"
+          paddingLeft={valuePl}
-            paddingLeft={valuePl}
+          paddingY={!chakra && props?.path ? 4 : 0}
-            paddingY={props?.path ? 4 : 0}
+        >
-          >
+          {inner}
-            {inner}
+        </Flex>
-          </Flex>
-        </Safe>
       )
     }
   }, [
@@ -420,13 +434,15 @@ export const Thingtime = (props) => {
     circular,
     seen,
     type,
+    props?.chakraChildren,
+    props?.path,
+    props?.edit,
     chakra,
     fullPath,
     render,
     depth,
     thing,
     thingDep,
-    props,
     valuePl,
     pl,
     keys,
@@ -697,9 +713,9 @@ export const Thingtime = (props) => {
 
   const [showContextIcon, setShowContextIcon] = React.useState(false)
 
-  // if (render && depth >= 1) {
+  if (props?.chakraChildren) {
-  //   return thingtimeChildren
+    return thingtimeChildren
-  // }
+  }
 
   return (
     <Safe {...props} depth={depth} uuid={uuid}>
@@ -720,7 +736,7 @@ export const Thingtime = (props) => {
         data-path={props?.path}
       >
         {/* {uuid?.current} */}
-        {!chakras && (
+        {!chakras && !chakra && (
           <Flex position="relative" flexDirection="row">
             <Flex
               alignItems="center"

remix/app/components/Thingtime/ThingtimeURL.tsx

@@ -70,7 +70,6 @@ export const ThingtimeURL = (props) => {
           path={path}
           thing={thing}
           render
-          chakra
           chakras={{ marginY: 200 }}
           width="600px"
         ></Thingtime>