fix(media-request): inconsistent sorting and reordering (#2464)

homarr-labs · Mar 1, 2025 · 43619e0 · 43619e0
1 parent 6fad48f
commit 43619e0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 16 deletions.
diff --git a/packages/api/src/router/widgets/media-requests.ts b/packages/api/src/router/widgets/media-requests.ts
@@ -2,7 +2,7 @@ import { observable } from "@trpc/server/observable";
 import { z } from "zod";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
-import { integrationCreator, MediaRequestStatus } from "@homarr/integrations";
+import { integrationCreator } from "@homarr/integrations";
 import type { MediaRequest } from "@homarr/integrations/types";
 import { mediaRequestListRequestHandler } from "@homarr/request-handler/media-request-list";
 import { mediaRequestStatsRequestHandler } from "@homarr/request-handler/media-request-stats";
@@ -30,14 +30,12 @@ export const mediaRequestsRouter = createTRPCRouter({
       );
       return results
         .flatMap(({ data, integration }) => data.map((request) => ({ ...request, integrationId: integration.id })))
-        .sort(({ status: statusA }, { status: statusB }) => {
-          if (statusA === MediaRequestStatus.PendingApproval) {
-            return -1;
+        .sort((dataA, dataB) => {
+          if (dataA.status === dataB.status) {
+            return dataB.createdAt.getTime() - dataA.createdAt.getTime();
           }
-          if (statusB === MediaRequestStatus.PendingApproval) {
-            return 1;
-          }
-          return 0;
+
+          return dataA.status - dataB.status;
         });
     }),
   subscribeToLatestRequests: publicProcedure

diff --git a/packages/widgets/src/media-requests/list/component.tsx b/packages/widgets/src/media-requests/list/component.tsx
@@ -41,14 +41,12 @@ export default function MediaServerWidget({
           const newData = filteredData.concat(
             data.requests.map((request) => ({ ...request, integrationId: data.integrationId })),
           );
-          return newData.sort(({ status: statusA }, { status: statusB }) => {
-            if (statusA === MediaRequestStatus.PendingApproval) {
-              return -1;
+          return newData.sort((dataA, dataB) => {
+            if (dataA.status === dataB.status) {
+              return dataB.createdAt.getTime() - dataA.createdAt.getTime();
             }
-            if (statusB === MediaRequestStatus.PendingApproval) {
-              return 1;
-            }
-            return 0;
+
+            return dataA.status - dataB.status;
           });
         });
       },
@@ -69,7 +67,7 @@ export default function MediaServerWidget({
         {mediaRequests.map((mediaRequest) => (
           <Card
             className={`mediaRequests-list-item-wrapper mediaRequests-list-item-${mediaRequest.type} mediaRequests-list-item-${mediaRequest.status}`}
-            key={mediaRequest.id}
+            key={`${mediaRequest.integrationId}-${mediaRequest.id}`}
             h="20cqmin"
             radius="2cqmin"
             p="2cqmin"