feat: feature/mvp-sprint-1 Fixed nested path not being reactive when setThingtime is run

Browse Source
This commit is contained in:
Nikolaj Frey 2023-07-24 11:36:25 +10:00
parent 39a0973b7c
commit cda2a88ba3
4 changed files with 108 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
remix/app/Providers/ThingtimeProvider.tsx
View File

@ -83,53 +83,76 @@ const initialThingtime = smarts.merge(initialValues, force)
// console.error("Caught error restoring thingtime from localstorage", err) // console.error("Caught error restoring thingtime from localstorage", err)
// } // }
initialThingtime.thingtime = initialThingtime
initialThingtime.tt = initialThingtime
export const ThingtimeProvider = (props: any): JSX.Element => { export const ThingtimeProvider = (props: any): JSX.Element => {
const [thingtime, rawSet] = React.useState(initialThingtime) const [thingtime, rawSet] = React.useState(initialThingtime)
const set = React.useCallback((newThingtime) => {
newThingtime.tt = newThingtime
newThingtime.thingtime = newThingtime
rawSet(newThingtime)
}, [])
const thingtimeRef = React.useRef(thingtime) const thingtimeRef = React.useRef(thingtime)
const stateRef = React.useRef({ const stateRef = React.useRef({
c: 1, c: 1,
}) })
const set = React.useCallback((newThingtime) => {
const thingtimeReference = {
...newThingtime,
}
thingtimeReference.tt = thingtimeReference
thingtimeReference.thingtime = thingtimeReference
rawSet(thingtimeReference)
}, [])
const setThingtime = React.useCallback( const setThingtime = React.useCallback(
(path, value) => { (path, value) => {
const prevThingtime = thingtime const newThingtime = thingtime
const newThingtime = { const paths = smarts.parsePropertyPath(path)
...prevThingtime,
}
newThingtime.tt = newThingtime console.log("nik paths", paths)
newThingtime.thingtime = newThingtime
// check if first characters of path starts with thingtime or tt and strip from path // 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
// and is an object itself
// so that react will detect the change and re-render
// "path1" = { ...thingtime["path1"] } if path1.path2 undefined
// "path1.path2" = { ...thingtime["path1"]["path2"] } if path1.path2.path3 undefined
// "path1.path2.path3" = { ...thingtime["path1"]["path2"]["path3"] }
// etc
let done = false
paths.forEach((pathPart, index) => {
if (!done) {
const pathParts = paths.slice(0, index + 1)
const tmpPath = pathParts.join(".")
const parentPath = pathParts.slice(0, -1).join(".")
// path = sanitise(path) const valAtPath = smarts.getsmart(newThingtime, tmpPath)
console.log("nik setting newThingtime value at path", path, value)
smarts.setsmart(newThingtime, path, value)
// subtract last path part from dot delimitted path
// prop1.prop2.prop3 => prop1.prop2
const pathParts = path.split(".")
pathParts.pop()
const parentPath = pathParts.join(".")
if (parentPath?.length) {
console.log("nik updating parentPath dependancies", parentPath)
const parent = smarts.getsmart(newThingtime, parentPath)
const newParent = Array.isArray(parent) ? [...parent] : { ...parent }
if (parentPath) {
if (typeof valAtPath !== "object" || valAtPath === null) {
const parentVal = smarts.getsmart(newThingtime, parentPath)
if (typeof parentVal === "object") {
const newParent = Array.isArray(parentVal)
? [...parentVal]
: { ...parentVal }
smarts.setsmart(newThingtime, parentPath, newParent) smarts.setsmart(newThingtime, parentPath, newParent)
} }
done = true
}
}
}
})
console.log(
"nik setting newThingtime value at path",
path,
"value: ",
value
)
smarts.setsmart(newThingtime, path, value)
set(newThingtime) set(newThingtime)
}, },
@ -150,6 +173,7 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
) )
const populatePaths = React.useCallback((obj, path, paths, seen = []) => { const populatePaths = React.useCallback((obj, path, paths, seen = []) => {
try {
Object.keys(obj).forEach((key) => { Object.keys(obj).forEach((key) => {
const val = obj[key] const val = obj[key]
const newPath = path ? `${path}${path ? "." : ""}${key}` : key const newPath = path ? `${path}${path ? "." : ""}${key}` : key
@ -163,6 +187,9 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
paths.push(newPath) paths.push(newPath)
} }
}) })
} catch {
// nothing
}
}, []) }, [])
const paths = React.useMemo(() => { const paths = React.useMemo(() => {
@ -180,6 +207,8 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
try { try {
const thingtimeFromLocalStorage = window.localStorage.getItem("thingtime") const thingtimeFromLocalStorage = window.localStorage.getItem("thingtime")
console.log("nik thingtimeFromLocalStorage", thingtimeFromLocalStorage)
if (thingtimeFromLocalStorage) { if (thingtimeFromLocalStorage) {
const parsed = parse(thingtimeFromLocalStorage) const parsed = parse(thingtimeFromLocalStorage)
if (parsed) { if (parsed) {
@ -192,7 +221,10 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
const withVersionUpdates = smarts.merge(newVersionData, parsed) const withVersionUpdates = smarts.merge(newVersionData, parsed)
newThingtime = smarts.merge(force, withVersionUpdates) newThingtime = smarts.merge(force, withVersionUpdates)
} }
console.log("nik setting new thingtime", newThingtime) console.log(
"nik setting new thingtime from localStorage",
newThingtime
)
console.log("nik localIsValid", localIsValid) console.log("nik localIsValid", localIsValid)
set(newThingtime) set(newThingtime)
} }
@ -249,7 +281,7 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
return () => { return () => {
window.removeEventListener("keydown", keyListener) window.removeEventListener("keydown", keyListener)
} }
}, [setThingtime, thingtime]) }, [setThingtime, thingtime, set])
const value = { const value = {
thingtime, thingtime,

34
remix/app/components/Commander/Commander.tsx
View File

@ -48,7 +48,7 @@ export const Commander = (props) => {
return thingtime?.settings?.commanderActive return thingtime?.settings?.commanderActive
}, [thingtime?.settings?.commanderActive]) }, [thingtime?.settings?.commanderActive])
console.log("nik commanderActive", commanderActive) // console.log("nik commanderActive", commanderActive)
// commanderActive useEffect // commanderActive useEffect
React.useEffect(() => { React.useEffect(() => {
@ -109,7 +109,7 @@ export const Commander = (props) => {
] ]
return [pathRaw?.trim(), valRaw?.trim()] return [pathRaw?.trim(), valRaw?.trim()]
} }
console.log("nik sanitizedCommand", sanitizedCommand) // console.log("nik sanitizedCommand", sanitizedCommand)
return [sanitizedCommand] return [sanitizedCommand]
}, [ }, [
// inputValue, // inputValue,
@ -180,28 +180,28 @@ export const Commander = (props) => {
) )
const commandContainsPath = React.useMemo(() => { const commandContainsPath = React.useMemo(() => {
console.log("nik command", commandPath) // console.log("nik command", commandPath)
console.log("nik suggestions", suggestions) // console.log("nik suggestions", suggestions)
const commandIncludesSuggestion = suggestions?.find((suggestion) => { const commandIncludesSuggestion = suggestions?.find((suggestion) => {
return commandPath?.includes(suggestion) return commandPath?.includes(suggestion)
}) })
console.log("nik commandIncludesSuggestion", commandIncludesSuggestion) // console.log("nik commandIncludesSuggestion", commandIncludesSuggestion)
// return false // return false
return commandIncludesSuggestion return commandIncludesSuggestion
}, [commandPath, suggestions]) }, [commandPath, suggestions])
const openCommander = React.useCallback(() => { const openCommander = React.useCallback(() => {
console.log("nik commander opening commander") // console.log("nik commander opening commander")
setThingtime("settings.commanderActive", true) setThingtime("settings.commanderActive", true)
}, [setThingtime]) }, [setThingtime])
const closeCommander = React.useCallback( const closeCommander = React.useCallback(
(e?: any) => { (e?: any) => {
if (!e?.defaultPrevented) { if (!e?.defaultPrevented) {
console.log("nik 123123 commander event closeCommander ", e) // console.log("nik 123123 commander event closeCommander ", e)
if (thingtime?.settings?.commanderActive) { if (thingtime?.settings?.commanderActive) {
console.log("nik commander closing commander") // console.log("nik commander closing commander")
console.log("nik setting commanderActive to false") // console.log("nik setting commanderActive to false")
setThingtime("settings.commanderActive", false) setThingtime("settings.commanderActive", false)
} }
} }
@ -261,11 +261,11 @@ export const Commander = (props) => {
} }
if (commanderActive) { if (commanderActive) {
try { try {
console.log("nik Commander onEnter") // console.log("nik Commander onEnter")
console.log("nik commandIsAction", commandIsAction) // console.log("nik commandIsAction", commandIsAction)
console.log("nik commandContainsPath", commandContainsPath) // console.log("nik commandContainsPath", commandContainsPath)
console.log("nik onEnter commandPath", commandPath) // console.log("nik onEnter commandPath", commandPath)
if (commandIsAction) { if (commandIsAction) {
// nothing // nothing
@ -276,10 +276,10 @@ export const Commander = (props) => {
const realVal = evalFn() const realVal = evalFn()
const prevVal = getThingtime(commandPath) const prevVal = getThingtime(commandPath)
const parentPath = getParentPath(commandPath) const parentPath = getParentPath(commandPath)
console.log("nik realVal", realVal) // console.log("nik realVal", realVal)
console.log("nik prevVal", prevVal) // console.log("nik prevVal", prevVal)
console.log("nik parentPath", parentPath) // console.log("nik parentPath", parentPath)
console.log("nik commandPath", commandPath) // console.log("nik commandPath", commandPath)
setThingtime(commandPath, realVal) setThingtime(commandPath, realVal)
if (!prevVal) { if (!prevVal) {
setContextPath(parentPath) setContextPath(parentPath)

6
remix/app/components/Rainbow/Rainbow.tsx
View File

@ -183,9 +183,9 @@ export const Rainbow = (allProps: any): JSX.Element => {
const render = true const render = true
useTrace("Rainbow", { // useTrace("Rainbow", {
props, // props,
}) // })
return ( return (
<> <>

12
remix/app/components/Thingtime/Thingtime.tsx
View File

@ -73,8 +73,12 @@ export const Thingtime = (props) => {
const keys = React.useMemo(() => { const keys = React.useMemo(() => {
if (validKeyTypes?.includes(typeof thing)) { if (validKeyTypes?.includes(typeof thing)) {
try {
const keysRet = Object.keys(thing) const keysRet = Object.keys(thing)
return keysRet return keysRet
} catch {
// nothing
}
} else { } else {
return [] return []
} }
@ -136,7 +140,11 @@ export const Thingtime = (props) => {
// err, // err,
// thing // thing
// ) // )
return <Box onClick={() => setCircular(false)}>Click to Expand</Box> return (
<Box cursor="pointer" onClick={() => setCircular(false)}>
Click to Expand
</Box>
)
} }
} else { } else {
return "Something!" return "Something!"
@ -271,7 +279,7 @@ export const Thingtime = (props) => {
}, 1) }, 1)
}} }}
> >
<Switch colorScheme="red" isChecked={thing}></Switch> <Switch isChecked={thing}></Switch>
</Box> </Box>
</AtomicWrapper> </AtomicWrapper>
) )