feat: main Testing unique dom id system

remix/app/components/Thingtime/Thingtime.tsx

@@ -1,7 +1,13 @@
 import React from 'react'
 import { Box, Flex } from '@chakra-ui/react'
+import { safe } from '~/functions/safe'
 
 export const Thingtime = props => {
+  // const cuid = React.useMemo(() => {
+  //   return Math.random().toString(36).substring(7)
+  // }, [])
+  const cuid = React.useRef(Math.random().toString(36).substring(7))
+
   const thing = React.useMemo(() => {
     return props.thing
   }, [props.thing])
@@ -90,20 +96,8 @@ export const Thingtime = props => {
     return ret
   }, [thing])
 
-  // do not render more than the limit of things to prevent infinite loops
+  let value = null
-  try {
+  let editableValue = null
-    if (
-      typeof window?.thingtime?.things?.count === 'number' &&
-      window?.thingtime?.things?.count > window?.thingtime?.things?.limit
-    ) {
-      console.error('Maximum things reached')
-      return null
-    }
-  } catch (err) {
-    // console.error('Error in Thingtime.tsx checking maximum things', err)
-  }
-
-  let ret = null
 
   const keysToUse = keys
   // const keysToUse = flattenedKeys
@@ -113,7 +107,7 @@ export const Thingtime = props => {
   if (template1Modes?.includes(mode)) {
     console.log('nik keys', keys)
     if (keys?.length) {
-      ret = (
+      value = (
         <Flex
           position='relative'
           flexDir='column'
@@ -144,9 +138,7 @@ export const Thingtime = props => {
         </Flex>
       )
     } else {
-      ret = (
+      editableValue = (
-        <Flex flexDir='column'>
-          <Box>{props?.key?.human}</Box>
         <Box
           contentEditable={mode === 'edit'}
           border='none'
@@ -156,28 +148,52 @@ export const Thingtime = props => {
         >
           {renderableValue}
         </Box>
-        </Flex>
       )
     }
   }
 
   const contextMenu = (
-    <Flex position='absolute' top={0} right={0}>
+    <Flex userSelect={'none'} position='absolute' top={0} right={0}>
       Settings
     </Flex>
   )
 
   const [showContextMenu, setShowContextMenu] = React.useState(false)
 
-  return (
+  const path = React.useMemo(() => {
+    return <Flex fontSize='12px'>{props?.path?.human}</Flex>
+  }, [props?.path])
+
+  const handleMouseEvent = React.useCallback(
+    e => {
+      const target = e?.target
+      // extract cuid from className
+      console.log('nik eh', target?.className, cuid)
+      const className = target?.className
+      if (className?.includes(cuid?.current)) {
+        setShowContextMenu(e?.type === 'mouseenter')
+      }
+    },
+    [cuid]
+  )
+
+  console.log('nik cuid', cuid)
+
+  return safe(
     <Flex
-      onMouseEnter={() => setShowContextMenu(true)}
+      onMouseEnter={handleMouseEvent}
-      onMouseLeave={() => setShowContextMenu(false)}
+      onMouseLeave={handleMouseEvent}
       position='relative'
+      flexDir='column'
+      py={3}
       {...props}
+      className={`thing-${cuid?.current}`}
     >
+      {cuid?.current}
+      {path}
       {showContextMenu && contextMenu}
-      {ret}
+      {editableValue}
+      {value}
     </Flex>
   )
 }

remix/app/components/Thingtime/ThingtimeDemo.tsx

@@ -1,8 +1,7 @@
-import React from "react"
+import React from 'react'
-import { Thingtime } from "./Thingtime"
+import { Thingtime } from './Thingtime'
 
 export const ThingtimeDemo = props => {
-
   const thing = {
     name: 'thing',
     description: 'thing description',
@@ -21,7 +20,9 @@ export const ThingtimeDemo = props => {
 
   const [demoThing, setDemoThing] = React.useState(thing)
 
-  
+  const debug = {
-  return <Thingtime thing={demoThing}></Thingtime>
+    test: 'hey'
-
+  }
+
+  return <Thingtime thing={debug}></Thingtime>
 }

remix/app/functions/safe.tsx

@@ -0,0 +1,16 @@
+export const safe = response => {
+  // do not render more than the limit of things to prevent infinite loops
+  try {
+    if (
+      typeof window?.thingtime?.things?.count === 'number' &&
+      window?.thingtime?.things?.count > window?.thingtime?.things?.limit
+    ) {
+      console.error('Maximum things reached')
+      return null
+    }
+  } catch (err) {
+    // console.error('Error in Thingtime.tsx checking maximum things', err)
+  }
+
+  return response
+}