From 0a99a5074654dc235c52808f07a18f3fe95ad47b Mon Sep 17 00:00:00 2001
From: Nikolaj Frey <nikolaj@dotdev.com.au>
Date: Sun, 2 Jul 2023 00:49:01 +1000
Subject: [PATCH] feat: main Added click away logic to commander

---
 remix/app/components/Commander/Commander.tsx | 214 ++++++++++---------
 remix/package.json                           |   1 +
 remix/pnpm-lock.yaml                         |  13 ++
 3 files changed, 125 insertions(+), 103 deletions(-)

diff --git a/remix/app/components/Commander/Commander.tsx b/remix/app/components/Commander/Commander.tsx
index e81ca4b..23d0e2e 100644
--- a/remix/app/components/Commander/Commander.tsx
+++ b/remix/app/components/Commander/Commander.tsx
@@ -3,6 +3,7 @@ import { Center, Box, Flex, Input } from '@chakra-ui/react'
 import { useThingtime } from '../Thingtime/useThingtime'
 import { Thingtime } from '../Thingtime/Thingtime'
 import { sanitise } from '~/functions/path'
+import ClickAwayListener from 'react-click-away-listener'
 
 export const Commander = props => {
   const { thingtime, setThingtime, getThingtime, thingtimeRef } = useThingtime()
@@ -175,7 +176,12 @@ export const Commander = props => {
             const fn = `() => { return ${escapedCommandValue} }`
             const evalFn = eval(fn)
             const realVal = evalFn()
+            const prevVal = getThingtime(commandPath)
             setThingtime(commandPath, realVal)
+            if (!prevVal) {
+              setContextPath(commandPath)
+              setShowContext(true, 'commandIsAction check')
+            }
           } catch (err) {
             console.log('setThingtime errored in Commander', err)
           }
@@ -277,123 +283,125 @@ export const Commander = props => {
   }, [])
 
   return (
-    <Flex
-      id='commander'
-      // display={['flex', showCommander ? 'flex' : 'none']}
-      justifyContent={['flex-start', 'center']}
-      // zIndex={99999}
-      // position='fixed'
-      // top='100px'
-      pointerEvents={'none'}
-      position='absolute'
-      h='100%'
-      top={0}
-      left={0}
-      right={0}
-      py={1}
-      px={1}
-      maxW='100%'
-    >
+    <ClickAwayListener onClickAway={closeCommander}>
       <Flex
-        alignItems={['flex-start', 'center']}
+        id='commander'
+        // display={['flex', showCommander ? 'flex' : 'none']}
+        justifyContent={['flex-start', 'center']}
+        // zIndex={99999}
+        // position='fixed'
+        // top='100px'
+        pointerEvents={'none'}
         position='absolute'
-        top={'100%'}
-        maxH='90vh'
-        overflowY='scroll'
+        h='100%'
+        top={0}
         left={0}
         right={0}
-        h='auto'
-        mt={2}
-        mx={1}
+        py={1}
+        px={1}
         maxW='100%'
-        borderRadius={'12px'}
-        flexDir='column'
       >
         <Flex
-          display={renderedSuggestions?.length ? 'flex' : 'none'}
-          w={['100%', '400px']}
-          maxW={'100%'}
-          bg='grey'
+          alignItems={['flex-start', 'center']}
+          position='absolute'
+          top={'100%'}
+          maxH='90vh'
+          overflowY='scroll'
+          left={0}
+          right={0}
+          h='auto'
+          mt={2}
+          mx={1}
+          maxW='100%'
           borderRadius={'12px'}
           flexDir='column'
-          id='commander-suggestions'
-          py={3}
-          mb={3}
-          pointerEvents={'all'}
         >
-          {renderedSuggestions.map((suggestion, i) => {
-            return (
-              <Flex
-                cursor='pointer'
-                px={4}
-                _hover={{
-                  bg: 'greys.medium'
-                }}
-                key={i}
-                onClick={() => selectSuggestion(suggestion)}
-              >
-                {suggestion}
-              </Flex>
-            )
-          })}
+          <Flex
+            display={renderedSuggestions?.length ? 'flex' : 'none'}
+            w={['100%', '400px']}
+            maxW={'100%'}
+            bg='grey'
+            borderRadius={'12px'}
+            flexDir='column'
+            id='commander-suggestions'
+            py={3}
+            mb={3}
+            pointerEvents={'all'}
+          >
+            {renderedSuggestions.map((suggestion, i) => {
+              return (
+                <Flex
+                  cursor='pointer'
+                  px={4}
+                  _hover={{
+                    bg: 'greys.medium'
+                  }}
+                  key={i}
+                  onClick={() => selectSuggestion(suggestion)}
+                >
+                  {suggestion}
+                </Flex>
+              )
+            })}
+          </Flex>
+          <Flex
+            display={showContext ? 'flex' : 'none'}
+            maxW='100%'
+            py={3}
+            borderRadius={'12px'}
+            bg='grey'
+            pointerEvents={'all'}
+          >
+            <Thingtime thing={contextValue}></Thingtime>
+          </Flex>
         </Flex>
-        <Flex
-          display={showContext ? 'flex' : 'none'}
-          maxW='100%'
-          py={3}
-          borderRadius={'12px'}
+        <Center
+          position='relative'
           bg='grey'
+          w={['100%', '400px']}
+          maxW={[mobileVW, '100%']}
+          h='100%'
+          outline={'none'}
+          overflow='hidden'
+          p={'1px'}
+          borderRadius={'6px'}
           pointerEvents={'all'}
         >
-          <Thingtime thing={contextValue}></Thingtime>
-        </Flex>
-      </Flex>
-      <Center
-        position='relative'
-        bg='grey'
-        w={['100%', '400px']}
-        maxW={[mobileVW, '100%']}
-        h='100%'
-        outline={'none'}
-        overflow='hidden'
-        p={'1px'}
-        borderRadius={'6px'}
-        pointerEvents={'all'}
-      >
-        <Box
-          position='absolute'
-          width='105%'
-          pb={'105%'}
-          bg={
-            'conic-gradient(#f34a4a, #ffbc48, #58ca70, #47b5e6, #a555e8, #f34a4a)'
-          }
-          sx={{
-            '@keyframes rainbow-conical': {
-              '100%': {
-                transform: 'rotate(-360deg)'
-              }
-            },
-            animation: 'rainbow-conical 1s linear infinite'
-          }}
-        ></Box>
-        <Input
-          ref={inputRef}
-          h='100%'
-          borderRadius={'5px'}
-          outline={'none'}
-          border={'none'}
-          value={value}
-          onChange={onChange}
-          onKeyDown={onKeyDown}
-          w='100%'
-          sx={{
-            '&::placeholder': {
-              color: 'greys.dark'
+          <Box
+            position='absolute'
+            width='105%'
+            pb={'105%'}
+            bg={
+              'conic-gradient(#f34a4a, #ffbc48, #58ca70, #47b5e6, #a555e8, #f34a4a)'
             }
-          }}
-          placeholder={"What's on your mind?"}
-        ></Input>
-      </Center>
-    </Flex>
+            sx={{
+              '@keyframes rainbow-conical': {
+                '100%': {
+                  transform: 'rotate(-360deg)'
+                }
+              },
+              animation: 'rainbow-conical 1s linear infinite'
+            }}
+          ></Box>
+          <Input
+            ref={inputRef}
+            h='100%'
+            borderRadius={'5px'}
+            outline={'none'}
+            border={'none'}
+            value={value}
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            w='100%'
+            sx={{
+              '&::placeholder': {
+                color: 'greys.dark'
+              }
+            }}
+            placeholder={"What's on your mind?"}
+          ></Input>
+        </Center>
+      </Flex>
+    </ClickAwayListener>
   )
 }
diff --git a/remix/package.json b/remix/package.json
index 4613270..9a1b4de 100644
--- a/remix/package.json
+++ b/remix/package.json
@@ -15,6 +15,7 @@
     "isbot": "latest",
     "lodash-es": "^4.17.21",
     "react": "^18.2.0",
+    "react-click-away-listener": "^2.2.3",
     "react-dom": "^18.2.0",
     "uuid": "^9.0.0"
   },
diff --git a/remix/pnpm-lock.yaml b/remix/pnpm-lock.yaml
index be18f3f..bd3d494 100644
--- a/remix/pnpm-lock.yaml
+++ b/remix/pnpm-lock.yaml
@@ -32,6 +32,9 @@ dependencies:
   react:
     specifier: ^18.2.0
     version: 18.2.0
+  react-click-away-listener:
+    specifier: ^2.2.3
+    version: 2.2.3(react-dom@18.2.0)(react@18.2.0)
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
@@ -7644,6 +7647,16 @@ packages:
       iconv-lite: 0.4.24
       unpipe: 1.0.0
 
+  /react-click-away-listener@2.2.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-p63JRQtK9d085+QHUJ2Pje22P/N4tEaXsS2x7tbbptriQqZ9o8xEk7G1JrxwND5YmEVc/VO4fC3+cSBsqqgLUQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /react-clientside-effect@1.2.6(react@18.2.0):
     resolution: {integrity: sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==}
     peerDependencies: