Fixed duplicate IDs in languages profile itemsv1.4.5-beta.5

2 files changed, 42 insertions, 4 deletions

diff --git a/frontend/src/Router/index.tsx b/frontend/src/Router/index.tsx
index d600fc87d..8ccea87f9 100644
--- a/frontend/src/Router/index.tsx
+++ b/frontend/src/Router/index.tsx
@@ -270,6 +270,7 @@ function useRoutes(): CustomRouteObject[] {
               {
                 path: "status",
                 name: "Status",
+                badge: data?.status,
                 element: (
                   <Lazy>
                     <SystemStatusView></SystemStatusView>
@@ -309,6 +310,7 @@ function useRoutes(): CustomRouteObject[] {
       data?.sonarr_signalr,
       data?.radarr_signalr,
       data?.announcements,
+      data?.status,
       radarr,
       sonarr,
     ],
diff --git a/frontend/src/pages/Settings/Languages/table.tsx b/frontend/src/pages/Settings/Languages/table.tsx
index 03971a5cc..5cfefdfa9 100644
--- a/frontend/src/pages/Settings/Languages/table.tsx
+++ b/frontend/src/pages/Settings/Languages/table.tsx
@@ -2,7 +2,7 @@ import { FunctionComponent, useCallback, useMemo } from "react";
 import { Badge, Button, Group } from "@mantine/core";
 import { faTrash, faWrench } from "@fortawesome/free-solid-svg-icons";
 import { ColumnDef } from "@tanstack/react-table";
-import { cloneDeep } from "lodash";
+import { cloneDeep, includes, maxBy } from "lodash";
 import { Action } from "@/components";
 import {
   anyCutoff,
@@ -79,10 +79,10 @@ const Table: FunctionComponent = () => {
         }) => {
           return (
             <Group gap="xs" wrap="nowrap">
-              {items.map((v) => {
+              {items.map((v, i) => {
                 const isCutoff = v.id === cutoff || cutoff === anyCutoff;
                 return (
-                  <ItemBadge key={v.id} cutoff={isCutoff} item={v}></ItemBadge>
+                  <ItemBadge key={i} cutoff={isCutoff} item={v}></ItemBadge>
                 );
               })}
             </Group>
@@ -148,9 +148,45 @@ const Table: FunctionComponent = () => {
                 icon={faWrench}
                 c="gray"
                 onClick={() => {
+                  const lastId = maxBy(profile.items, "id")?.id || 0;
+
+                  // We once had an issue on the past where there were duplicated
+                  // item ids that needs to become unique upon editing.
+                  const sanitizedProfile = {
+                    ...cloneDeep(profile),
+                    items: profile.items.reduce(
+                      (acc, value) => {
+                        const { ids, duplicatedIds, items } = acc;
+
+                        // We once had an issue on the past where there were duplicated
+                        // item ids that needs to become unique upon editing.
+                        if (includes(ids, value.id)) {
+                          duplicatedIds.push(value.id);
+                          items.push({
+                            ...value,
+                            id: lastId + duplicatedIds.length,
+                          });
+
+                          return acc;
+                        }
+
+                        ids.push(value.id);
+                        items.push(value);
+
+                        return acc;
+                      },
+                      {
+                        ids: [] as number[],
+                        duplicatedIds: [] as number[],
+                        items: [] as typeof profile.items,
+                      },
+                    ).items,
+                    tag: profile.tag || undefined,
+                  };
+
                   modals.openContextModal(ProfileEditModal, {
                     languages,
-                    profile: cloneDeep(profile),
+                    profile: sanitizedProfile,
                     onComplete: updateProfile,
                   });
                 }}