feat: feature/mvp-sprint-1 Fixed a commander bug where root level values where not rendering the value in popup window correctly and fixed some overflow scroll issues on commander suggestions box

Browse Source
This commit is contained in:
Nikolaj Frey 2023-07-24 13:02:27 +10:00
parent ae8e066c4f
commit 804f356adc
2 changed files with 62 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -168,6 +168,11 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
(...args) => { (...args) => {
const rawPath = args[0] const rawPath = args[0]
const path = rawPath const path = rawPath
if (!path) {
return thingtime
}
// do we need to sanitise? // do we need to sanitise?
// const path = sanitise(rawPath) // const path = sanitise(rawPath)
console.log("Getting thingtime at path", path) console.log("Getting thingtime at path", path)

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

@ -269,22 +269,18 @@ export const Commander = (props) => {
if (commandIsAction) { if (commandIsAction) {
// nothing // nothing
const prevVal = getThingtime(commandPath)
const parentPath = getParentPath(commandPath) || "thingtime"
try { try {
// first try to execute literal javscript // first try to execute literal javscript
const fn = `() => { return ${commandValue} }` const fn = `() => { return ${commandValue} }`
const evalFn = eval(fn) const evalFn = eval(fn)
const realVal = evalFn() const realVal = evalFn()
const prevVal = getThingtime(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) {
setContextPath(parentPath)
setShowContext(true, "commandIsAction check")
}
} catch (err) { } catch (err) {
console.log( console.log(
"Caught error after trying to execute literal javascript", "Caught error after trying to execute literal javascript",
@ -299,10 +295,6 @@ export const Commander = (props) => {
const prevVal = getThingtime(commandPath) const prevVal = getThingtime(commandPath)
const parentPath = getParentPath(commandPath) const parentPath = getParentPath(commandPath)
setThingtime(commandPath, realVal) setThingtime(commandPath, realVal)
if (!prevVal) {
setContextPath(parentPath)
setShowContext(true, "commandIsAction check")
}
} catch { } catch {
// something very bad went wrong // something very bad went wrong
console.log( console.log(
@ -311,7 +303,13 @@ export const Commander = (props) => {
) )
} }
} }
} else if (commandContainsPath) { if (!prevVal) {
setContextPath(commandPath)
setShowContext(true, "commandIsAction check")
}
}
// if (commandContainsPath)
else {
// const prevValue = getThingtime(commandPath) // const prevValue = getThingtime(commandPath)
// const newValue = setThingtime(commandPath, prevValue) // const newValue = setThingtime(commandPath, prevValue)
@ -392,54 +390,65 @@ export const Commander = (props) => {
left={0} left={0}
alignItems={["flex-start", "center"]} alignItems={["flex-start", "center"]}
flexDirection="column" flexDirection="column"
overflowY="scroll"
maxWidth="100%" maxWidth="100%"
height="auto" height="auto"
maxHeight="90vh"
marginTop={2} marginTop={2}
borderRadius="12px" borderRadius="12px"
marginX={1} marginX={1}
> >
<Flex <Flex
alignItems={["flex-start", "center"]}
flexDirection="column" flexDirection="column"
display={showSuggestions ? "flex" : "none"} overflowY="scroll"
width={["100%", "400px"]} width="auto"
maxWidth="100%" maxWidth="100%"
marginBottom={3} maxHeight="90vh"
background="grey"
borderRadius="12px" borderRadius="12px"
pointerEvents="all"
id="commander-suggestions"
onMouseLeave={() => setHoveredSuggestion(null)}
paddingY={3}
> >
{suggestions?.map((suggestion, i) => { <Flex
return ( flexDirection="column"
<Flex flexShrink={0}
key={i} display={showSuggestions ? "flex" : "none"}
background={hoveredSuggestion === i ? "greys.lightt" : null} overflowY="scroll"
_hover={{ width={["100%", "400px"]}
background: "greys.lightt", maxWidth="100%"
}} maxHeight="300px"
cursor="pointer" marginBottom={3}
onClick={() => selectSuggestion(i)} background="grey"
onMouseEnter={() => setHoveredSuggestion(i)} borderRadius="12px"
paddingX={4} pointerEvents="all"
> id="commander-suggestions"
{suggestion} onMouseLeave={() => setHoveredSuggestion(null)}
</Flex> paddingY={3}
) >
})} {suggestions?.map((suggestion, i) => {
</Flex> return (
<Flex <Flex
display={showContext ? "flex" : "none"} key={i}
maxWidth="100%" background={hoveredSuggestion === i ? "greys.lightt" : null}
background="grey" _hover={{
borderRadius="12px" background: "greys.lightt",
pointerEvents="all" }}
paddingY={3} cursor="pointer"
> onClick={() => selectSuggestion(i)}
<Thingtime thing={contextValue}></Thingtime> onMouseEnter={() => setHoveredSuggestion(i)}
paddingX={4}
>
{suggestion}
</Flex>
)
})}
</Flex>
<Flex
display={showContext ? "flex" : "none"}
maxWidth="100%"
background="grey"
borderRadius="12px"
pointerEvents="all"
paddingY={3}
>
<Thingtime path={contextPath} thing={contextValue}></Thingtime>
</Flex>
</Flex> </Flex>
</Flex> </Flex>
<Center <Center