From d82031eec15e37e7b69cb634d27433d5526c4d17 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 7 Aug 2024 17:38:58 +1000
Subject: [PATCH] fix(ui): ip adapter list item

---
 .../components/IPAdapter/IPA.tsx              | 34 +++++++++++--------
 .../components/IPAdapter/IPAHeader.tsx        | 26 +++-----------
 .../components/IPAdapter/IPASettings.tsx      |  8 ++---
 3 files changed, 28 insertions(+), 40 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPA.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPA.tsx
index ab1cdc987e..af3d3aa6c3 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPA.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPA.tsx
@@ -1,28 +1,34 @@
-import { useDisclosure } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { Spacer, useDisclosure } from '@invoke-ai/ui-library';
 import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
-import { IPAHeader } from 'features/controlLayers/components/IPAdapter/IPAHeader';
+import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton';
+import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
+import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
+import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle';
 import { IPASettings } from 'features/controlLayers/components/IPAdapter/IPASettings';
-import { entitySelected } from 'features/controlLayers/store/canvasV2Slice';
-import { memo, useCallback } from 'react';
+import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
+import { memo, useMemo } from 'react';
 
 type Props = {
   id: string;
 };
 
 export const IPA = memo(({ id }: Props) => {
-  const dispatch = useAppDispatch();
-  const isSelected = useAppSelector((s) => s.canvasV2.selectedEntityIdentifier?.id === id);
+  const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id, type: 'ip_adapter' }), [id]);
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
-  const onSelect = useCallback(() => {
-    dispatch(entitySelected({ entityIdentifier: { id, type: 'ip_adapter' } }));
-  }, [dispatch, id]);
 
   return (
-    <CanvasEntityContainer isSelected={isSelected} onSelect={onSelect}>
-      <IPAHeader id={id} isSelected={isSelected} onToggleVisibility={onToggle} />
-      {isOpen && <IPASettings id={id} />}
-    </CanvasEntityContainer>
+    <EntityIdentifierContext.Provider value={entityIdentifier}>
+      <CanvasEntityContainer>
+        <CanvasEntityHeader onToggle={onToggle}>
+          <CanvasEntityEnabledToggle />
+          <CanvasEntityTitle />
+          <Spacer />
+          <CanvasEntityDeleteButton />
+        </CanvasEntityHeader>
+        {isOpen && <IPASettings />}
+      </CanvasEntityContainer>
+    </EntityIdentifierContext.Provider>
   );
 });
 
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAHeader.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAHeader.tsx
index 81e63929e8..d220bcbc0c 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAHeader.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAHeader.tsx
@@ -1,37 +1,21 @@
 import { Spacer } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton';
 import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
 import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle';
-import { ipaDeleted, ipaIsEnabledToggled } from 'features/controlLayers/store/canvasV2Slice';
-import { selectIPAOrThrow } from 'features/controlLayers/store/ipAdaptersReducers';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
+import { memo } from 'react';
 
 type Props = {
-  id: string;
-  isSelected: boolean;
   onToggleVisibility: () => void;
 };
 
-export const IPAHeader = memo(({ id, isSelected, onToggleVisibility }: Props) => {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const isEnabled = useAppSelector((s) => selectIPAOrThrow(s.canvasV2, id).isEnabled);
-  const onToggleIsEnabled = useCallback(() => {
-    dispatch(ipaIsEnabledToggled({ id }));
-  }, [dispatch, id]);
-  const onDelete = useCallback(() => {
-    dispatch(ipaDeleted({ id }));
-  }, [dispatch, id]);
-
+export const IPAHeader = memo(({ onToggleVisibility }: Props) => {
   return (
     <CanvasEntityHeader onToggle={onToggleVisibility}>
-      <CanvasEntityEnabledToggle isEnabled={isEnabled} onToggle={onToggleIsEnabled} />
-      <CanvasEntityTitle title={t('controlLayers.ipAdapter')} isSelected={isSelected} />
+      <CanvasEntityEnabledToggle />
+      <CanvasEntityTitle />
       <Spacer />
-      <CanvasEntityDeleteButton onDelete={onDelete} />
+      <CanvasEntityDeleteButton />
     </CanvasEntityHeader>
   );
 });
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPASettings.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPASettings.tsx
index b051c7b9b5..5121bc27dc 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPASettings.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPASettings.tsx
@@ -4,6 +4,7 @@ import { BeginEndStepPct } from 'features/controlLayers/components/common/BeginE
 import { CanvasEntitySettings } from 'features/controlLayers/components/common/CanvasEntitySettings';
 import { Weight } from 'features/controlLayers/components/common/Weight';
 import { IPAMethod } from 'features/controlLayers/components/IPAdapter/IPAMethod';
+import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import {
   ipaBeginEndStepPctChanged,
   ipaCLIPVisionModelChanged,
@@ -21,12 +22,9 @@ import type { ImageDTO, IPAdapterModelConfig, IPALayerImagePostUploadAction } fr
 import { IPAImagePreview } from './IPAImagePreview';
 import { IPAModelCombobox } from './IPAModelCombobox';
 
-type Props = {
-  id: string;
-};
-
-export const IPASettings = memo(({ id }: Props) => {
+export const IPASettings = memo(() => {
   const dispatch = useAppDispatch();
+  const { id } = useEntityIdentifierContext();
   const ipAdapter = useAppSelector((s) => selectIPAOrThrow(s.canvasV2, id));
 
   const onChangeBeginEndStepPct = useCallback(