From 872b2f741f53f5c2f56e6795eb76d7f0924a29b9 Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Fri, 4 Aug 2023 11:27:52 +0200
Subject: [PATCH] WIP: Upgrade to THREE 155: Fix the double key error in r3f

---
 .../src/extension/components/ProxyManager.tsx | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/r3f/src/extension/components/ProxyManager.tsx b/packages/r3f/src/extension/components/ProxyManager.tsx
index 5bed892..863624a 100644
--- a/packages/r3f/src/extension/components/ProxyManager.tsx
+++ b/packages/r3f/src/extension/components/ProxyManager.tsx
@@ -1,4 +1,4 @@
-import type {VFC} from 'react'
+import type {FC} from 'react'
 import React, {useLayoutEffect, useMemo, useRef, useState} from 'react'
 import type {Editable} from '../../main/store'
 import {createPortal} from '@react-three/fiber'
@@ -25,7 +25,7 @@ type IEditableProxy<T> = {
   editable: Editable<T>
 }
 
-const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
+const ProxyManager: FC<ProxyManagerProps> = ({orbitControlsRef}) => {
   const isBeingEdited = useRef(false)
   const editorObject = getEditorSheetObject()
   const [sceneSnapshot, editables] = useExtensionStore(
@@ -69,9 +69,18 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
           object.parent!.remove(object)
         } else {
           editableProxies[theatreKey] = {
-            portal: createPortal(
-              <EditableProxy storeKey={theatreKey} object={object} />,
-              object.parent!,
+            portal: (
+              // we gotta wrap the portal because as of [this commit](https://github.com/pmndrs/react-three-fiber/commit/5d1652ce5b63397ad79c39d3dd100b26a465c41f)
+              // in react-three-fiber, portals use the uuid of their parent object as their own key. Since many of these objects are nested
+              // inside the same parent, they end up having the same react key. We avoid this issue by wrapping the portal in a component
+              // so that its react key is unique within its parent component.
+              <PortalWrapper
+                portal={createPortal(
+                  <EditableProxy storeKey={theatreKey} object={object} />,
+                  object.parent!,
+                )}
+                key={`portal-wrapper-${theatreKey}`}
+              />
             ),
             object: object,
             editable: editables[theatreKey]!,
@@ -246,4 +255,8 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
   )
 }
 
+const PortalWrapper: React.FC<{portal: React.ReactNode}> = ({portal}) => {
+  return <>{portal}</>
+}
+
 export default ProxyManager