diff --git a/remix/app/Providers/ThingtimeProvider.tsx b/remix/app/Providers/ThingtimeProvider.tsx index 1c69ea9..3c17397 100644 --- a/remix/app/Providers/ThingtimeProvider.tsx +++ b/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)) { diff --git a/remix/app/components/Thingtime/Thingtime.tsx b/remix/app/components/Thingtime/Thingtime.tsx index 1953823..8250d2a 100644 --- a/remix/app/components/Thingtime/Thingtime.tsx +++ b/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) => { ) - 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, ])