feat: feature/mvp-sprint-1 Added reactivity to any state change independant of parent object reference value

remix/app/Providers/ThingtimeProvider.tsx

@@ -71,7 +71,6 @@ const initialThingtime = smarts.merge(initialValues, force)
 //       const localIsValid = !parsed.version || parsed.version >= force.version
 //       if (localIsValid) {
 //         const newThingtime = smarts.merge(force, parsed)
-//         console.log("nik comm newThingtime", newThingtime)
 //         thingtimeToUse = newThingtime
 //       } else {
 //         const withVersionUpdates = smarts.merge(newVersionData, parsed)
@@ -114,8 +113,6 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
 
       const paths = smarts.parsePropertyPath(path)
 
-      console.log("nik paths", paths)
-
       // find first parent where a path is undefined
       // paths is array of path parts such as ["path1", "path2", "path3"]
       // we want to create a new reference at the first object which has an undefined part of the path
@@ -161,8 +158,6 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
 
       smarts.setsmart(newThingtime, path, value)
 
-      console.log("nik set the newThingtime", newThingtime)
-
       set(newThingtime)
     },
     [thingtime, set]
@@ -221,7 +216,6 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
     try {
       const thingtimeFromLocalStorage = window.localStorage.getItem("thingtime")
 
-      console.log("nik thingtimeFromLocalStorage", thingtimeFromLocalStorage)
       if (thingtimeFromLocalStorage) {
         const parsed = parse(thingtimeFromLocalStorage)
         if (parsed) {
@@ -238,11 +232,9 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
             "nik setting new thingtime from localStorage",
             newThingtime
           )
-          console.log("nik localIsValid", localIsValid)
           set(newThingtime)
         }
       } else {
-        console.log("nik setting initialThingtime", initialThingtime)
         set(initialThingtime)
       }
     } catch (err) {
@@ -261,8 +253,6 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
       // nothing
     }
 
-    console.log("nik thingtime changed in ThingtimeProvider.tsx", thingtime)
-
     if (stateRef.current.initialized) {
       if (thingtime.thingtime !== thingtime || thingtime.tt !== thingtime) {
         if (!(stateRef?.current?.c >= 10)) {

remix/app/components/Thingtime/Thingtime.tsx

@@ -36,6 +36,31 @@ export const Thingtime = (props) => {
   const contentEditableRef = React.useRef(null)
   const editValueRef = React.useRef({})
 
+  const childrenRef = React.useRef([])
+
+  const [thingDep, setThingDep] = React.useState(childrenRef.current)
+
+  const createDependancies = () => {
+    // push all children into childrenRef.current
+    try {
+      const values = Object.values(props?.thing)
+      // if childrenRef.current does not shallow equal values then replace with array of values
+      const valuesNotEqual =
+        values?.length !== childrenRef.current?.length ||
+        !values?.every?.((value, idx) => {
+          return childrenRef.current[idx] === value
+        })
+      if (valuesNotEqual) {
+        childrenRef.current = values
+        setThingDep(childrenRef.current)
+      }
+    } catch {
+      // nothing
+    }
+  }
+
+  createDependancies()
+
   const depth = React.useMemo(() => {
     return props?.depth || 1
   }, [props?.depth])
@@ -55,7 +80,12 @@ export const Thingtime = (props) => {
 
   const thing = React.useMemo(() => {
     return props.thing
-  }, [props.thing])
+  }, [props.thing, childrenRef.current])
+
+  React.useEffect(() => {
+    console.log("thingtime changed in path", props?.fullPath)
+    createDependancies()
+  }, [thingtime, props?.fullPath, childrenRef])
 
   const fullPath = React.useMemo(() => {
     return props?.fullPath || props?.path
@@ -95,7 +125,7 @@ export const Thingtime = (props) => {
     } else {
       return []
     }
-  }, [thing, validKeyTypes])
+  }, [thing, thingDep, validKeyTypes])
 
   const type = React.useMemo(() => {
     return typeof thing
@@ -162,7 +192,7 @@ export const Thingtime = (props) => {
     } else {
       return "Something!"
     }
-  }, [thing, type, keys])
+  }, [thing, thingDep, type, keys])
 
   const keysToUse = React.useMemo(() => {
     return keys
@@ -225,7 +255,6 @@ export const Thingtime = (props) => {
             </Flex>
           </Safe>
         )
-        console.log("nik root ret", ret)
         return ret
       }
     }
@@ -238,6 +267,7 @@ export const Thingtime = (props) => {
     fullPath,
     depth,
     thing,
+    thingDep,
     props,
     valuePl,
     pl,
@@ -411,8 +441,10 @@ export const Thingtime = (props) => {
     renderableValue,
     pl,
     type,
+    AtomicWrapper,
     props?.edit,
     thing,
+    thingDep,
     updateValue,
   ])