Fix custom props panel (#73)

src/App.tsx

@@ -11,6 +11,7 @@ import { HotKeys } from 'react-hotkeys'
 import useShortcuts, { keyMap } from './hooks/useShortcuts'
 import EditorErrorBoundary from './components/errorBoundaries/EditorErrorBoundary'
 import useProducthunt from './hooks/useProducthunt'
+import { InspectorProvider } from './contexts/inspector-context'
 
 const App = () => {
   const { handlers } = useShortcuts()
@@ -46,7 +47,9 @@ const App = () => {
             overflowX="visible"
             borderLeft="1px solid #cad5de"
           >
-            <Inspector />
+            <InspectorProvider>
+              <Inspector />
+            </InspectorProvider>
           </Box>
         </Flex>
       </DndProvider>

src/components/inspector/Inspector.tsx

@@ -15,7 +15,7 @@ import {
 import ActionButton from './ActionButton'
 import { generateComponentCode } from '../../utils/code'
 import useClipboard from '../../hooks/useClipboard'
-import { useInspectorContext } from '../../contexts/inspector-context'
+import { useInspectorUpdate } from '../../contexts/inspector-context'
 
 const CodeActionButton = memo(() => {
   const [isLoading, setIsLoading] = useState(false)
@@ -49,7 +49,7 @@ const Inspector = () => {
   const dispatch = useDispatch()
   const component = useSelector(getSelectedComponent)
 
-  let { activePropsRef } = useInspectorContext()
+  const { clearActiveProps } = useInspectorUpdate()
 
   const { type, rootParentType, id, children } = component
 
@@ -60,8 +60,8 @@ const Inspector = () => {
   const componentHasChildren = children.length > 0
 
   useEffect(() => {
-    activePropsRef.current = []
-  }, [activePropsRef])
+    clearActiveProps()
+  }, [clearActiveProps])
 
   return (
     <>

src/components/inspector/panels/CustomPropsPanel.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useState, FormEvent, ChangeEvent, useRef } from 'react'
-import { useInspectorContext } from '../../../contexts/inspector-context'
+import { useInspectorState } from '../../../contexts/inspector-context'
 import { getSelectedComponent } from '../../../core/selectors/components'
 import { useSelector } from 'react-redux'
 import { IoIosFlash } from 'react-icons/io'
@@ -22,7 +22,7 @@ const CustomPropsPanel = () => {
   const dispatch = useDispatch()
   const inputRef = useRef<HTMLInputElement>(null)
 
-  const { activePropsRef } = useInspectorContext()
+  const activePropsRef = useInspectorState()
   const { props, id } = useSelector(getSelectedComponent)
   const { setValue } = useForm()
 
@@ -36,7 +36,7 @@ const CustomPropsPanel = () => {
     })
   }
 
-  const activeProps = activePropsRef.current || []
+  const activeProps = activePropsRef || []
   const customProps = Object.keys(props).filter(
     propsName => !activeProps.includes(propsName),
   )
@@ -76,6 +76,7 @@ const CustomPropsPanel = () => {
 
       {customProps.map((propsName, i) => (
         <Flex
+          key={propsName}
           alignItems="center"
           px={2}
           bg={i % 2 === 0 ? 'white' : 'gray.50'}

src/contexts/inspector-context.tsx

@@ -1,32 +1,54 @@
-import React, { useContext, useRef, MutableRefObject } from 'react'
+import React, {
+  useContext,
+  createContext,
+  useState,
+  useCallback,
+  useMemo,
+} from 'react'
 
-interface InspectorContextInterface {
-  activePropsRef: MutableRefObject<string[] | null>
+type UpdateProps = {
+  addActiveProps: (propsName: string) => void
+  clearActiveProps: () => void
 }
 
-const InspectorContext = React.createContext<InspectorContextInterface>({
-  activePropsRef: React.createRef(),
+type InspectorProviderProps = { children: React.ReactNode }
+
+const InspectorStateContext = createContext<string[]>([])
+const InspectorUpdateContext = createContext<UpdateProps>({
+  addActiveProps: () => {},
+  clearActiveProps: () => {},
 })
 
-interface InspectorProviderProps {
-  children: React.ReactNode
-}
+function InspectorProvider({ children }: InspectorProviderProps) {
+  const [activeProps, setActiveProps] = useState<string[]>([])
+
+  const addActiveProps = useCallback((propsName: string) => {
+    setActiveProps(prevActiveProps => [...prevActiveProps, propsName])
+  }, [])
 
-function InspectorProvider(props: InspectorProviderProps) {
-  const activePropsRef = useRef<string[] | null>(null)
+  const clearActiveProps = useCallback(() => {
+    setActiveProps([])
+  }, [])
+
+  const values = useMemo(() => {
+    return { clearActiveProps, addActiveProps }
+  }, [addActiveProps, clearActiveProps])
 
   return (
-    <InspectorContext.Provider
-      value={{
-        activePropsRef,
-      }}
-      {...props}
-    />
+    <InspectorStateContext.Provider value={activeProps}>
+      <InspectorUpdateContext.Provider value={values}>
+        {children}
+      </InspectorUpdateContext.Provider>
+    </InspectorStateContext.Provider>
   )
 }
 
-function useInspectorContext() {
-  return useContext(InspectorContext)
+function useInspectorState() {
+  return useContext(InspectorStateContext)
+}
+
+function useInspectorUpdate() {
+  return useContext(InspectorUpdateContext)
 }
 
-export { InspectorProvider, useInspectorContext }
+export { InspectorProvider, useInspectorState, useInspectorUpdate }

src/hooks/usePropsSelector.ts

@@ -1,14 +1,16 @@
 import { useSelector } from 'react-redux'
 import { RootState } from '../core/store'
 import { getDefaultFormProps } from '../utils/defaultProps'
-import { useInspectorContext } from '../contexts/inspector-context'
+import { useInspectorUpdate } from '../contexts/inspector-context'
+import { useEffect } from 'react'
 
 const usePropsSelector = (propsName: string) => {
-  const { activePropsRef } = useInspectorContext()
+  const { addActiveProps } = useInspectorUpdate()
 
-  if (activePropsRef.current) {
-    activePropsRef.current.push(propsName)
-  }
+  useEffect(() => {
+    // Register form props name for custom props panel
+    addActiveProps(propsName)
+  }, [addActiveProps, propsName])
 
   const value = useSelector((state: RootState) => {
     const component =