From 63c6f5a8a1953fe4e2bbc0f6ec56b6c502cb1064 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Sun, 4 Aug 2024 22:31:31 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20add=20unique=20key=20t?=
 =?UTF-8?q?o=20'popover'=20items?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Close issue #91. Each <li> element in a list should have a unique key
to avoid React warnings.

Added unique keys to 'popover' items. Although the 'lang' keys are generated
by i18n dependencies and are expected to be unique, this implementation
ensures keys are unique and not based on indexes.
---
 src/frontend/src/i18n/useLanguageLabels.ts  | 1 +
 src/frontend/src/layout/Header.tsx          | 2 +-
 src/frontend/src/primitives/PopoverList.tsx | 5 +++--
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/i18n/useLanguageLabels.ts b/src/frontend/src/i18n/useLanguageLabels.ts
index aa2f10e2..31980bb5 100644
--- a/src/frontend/src/i18n/useLanguageLabels.ts
+++ b/src/frontend/src/i18n/useLanguageLabels.ts
@@ -13,6 +13,7 @@ export const useLanguageLabels = () => {
     (lang) => lang !== 'cimode'
   )
   const languagesList = supportedLanguages.map((lang) => ({
+    key: lang,
     value: lang,
     label: languageLabels[lang],
   }))
diff --git a/src/frontend/src/layout/Header.tsx b/src/frontend/src/layout/Header.tsx
index 36fc41c7..103f4bab 100644
--- a/src/frontend/src/layout/Header.tsx
+++ b/src/frontend/src/layout/Header.tsx
@@ -74,7 +74,7 @@ export const Header = () => {
                   {user.email}
                 </Button>
                 <PopoverList
-                  items={[{ value: 'logout', label: t('logout') }]}
+                  items={[{ key: 'logout', value: 'logout', label: t('logout') }]}
                   onAction={(value) => {
                     if (value === 'logout') {
                       window.location.href = logoutUrl()
diff --git a/src/frontend/src/primitives/PopoverList.tsx b/src/frontend/src/primitives/PopoverList.tsx
index 61d74fc4..fd393d0c 100644
--- a/src/frontend/src/primitives/PopoverList.tsx
+++ b/src/frontend/src/primitives/PopoverList.tsx
@@ -42,7 +42,7 @@ export const PopoverList = <T extends string | number = string>({
 }: {
   closeOnAction?: boolean
   onAction: (key: T) => void
-  items: Array<string | { value: T; label: ReactNode }>
+  items: Array<string | { key: string, value: T; label: ReactNode }>
 } & ButtonProps) => {
   const popoverState = useContext(OverlayTriggerStateContext)!
   return (
@@ -50,8 +50,9 @@ export const PopoverList = <T extends string | number = string>({
       {items.map((item) => {
         const value = typeof item === 'string' ? item : item.value
         const label = typeof item === 'string' ? item : item.label
+        const key = typeof item === 'string' ? item : item.key
         return (
-          <li>
+          <li key={key}>
             <ListItem
               key={value}
               onPress={() => {