Make sure existing headers also have an unique ID

.changeset/lemon-glasses-glow.md

@@ -0,0 +1,5 @@
+---
+"headertweaker": patch
+---
+
+Make sure existing headers also have a unique ID

src/components/header-list/header-item.tsx

@@ -16,7 +16,7 @@ interface HeaderItemProps extends Header {
 
 export const HeaderItem = ({ id, name, value, enabled, openDrawer }: HeaderItemProps) => {
   const [headerToDelete, setHeaderToDelete] = useState<Header | null>(null);
-  const { isDisabled, selectedHeader, setSelectedHeader, updateHeader } = useHeaderTweakerContext();
+  const { isDisabled, setSelectedHeader, updateHeader } = useHeaderTweakerContext();
 
   return (
     <>
@@ -46,7 +46,7 @@ export const HeaderItem = ({ id, name, value, enabled, openDrawer }: HeaderItemP
               disabled={isDisabled}
               aria-label="Edit header"
               onClick={() => {
-                setSelectedHeader(selectedHeader ?? { id, name, value, enabled });
+                setSelectedHeader({ id, name, value, enabled });
                 openDrawer(true);
               }}
             >

src/components/header-list/header-list.tsx

@@ -43,7 +43,7 @@ export const HeaderList = () => {
             </tr>
           ) : (
             headers.map((header) => (
-              <HeaderItem key={`header-${header.name}`} openDrawer={openDrawer} {...header} />
+              <HeaderItem key={header.id} openDrawer={openDrawer} {...header} />
             ))
           )}
         </tbody>

src/components/import-headers/import-headers.tsx

@@ -45,7 +45,6 @@ export const ImportHeaders = () => {
             .filter(
               ({ name }) => !currentHeaders.some((existingHeader) => existingHeader.name === name)
             );
-          validHeaders.forEach(console.log);
           setImportedHeaders(validHeaders.length);
           await importHeaders(validHeaders);
         }

src/helpers/header.helper.ts

@@ -1,18 +1,23 @@
-import { isFirefox, storage } from '@constants/index';
+import { storage } from '@constants/index';
 import type { Header } from '@interfaces/index';
 import { v4 as uuidv4 } from 'uuid';
 
 const setHeaders = async (headers: Header[]) => {
-  if (isFirefox) {
-    await storage.local.set({ headers });
-  } else {
-    storage.local.set({ headers });
-  }
+  await storage.local.set({ headers });
 };
 
 export const getHeaders = async (): Promise<Header[]> => {
   const result = await storage.local.get('headers');
-  return result.headers || [];
+  const headers: Header[] = result.headers || [];
+  const headersWithoutId = headers.some(({ id }) => !id);
+
+  if (headersWithoutId) {
+    const headersWithId = headers.map((h) => (h.id ? h : { ...h, id: uuidv4() }));
+    await setHeaders(headersWithId);
+    return headersWithId;
+  }
+
+  return headers;
 };
 
 const getSelectedHeader = async (header: Header) => {

src/helpers/headertweaker.helper.ts

@@ -1,15 +1,10 @@
-import { isFirefox, storage } from '@constants/index';
+import { storage } from '@constants/index';
 import type { Status } from '@interfaces/index';
 
 const STATUS_KEY = 'isDisabled';
 
 export const setStatus = async (status: Status) => {
-  if (isFirefox) {
-    await storage.local.set({ [STATUS_KEY]: status === 'disabled' });
-  } else {
-    storage.local.set({ [STATUS_KEY]: status === 'disabled' });
-  }
-
+  await storage.local.set({ [STATUS_KEY]: status === 'disabled' });
   return status;
 };