From f75bb1d4791fa180185918d0567d189ac0f819e9 Mon Sep 17 00:00:00 2001
From: keerthi <keerthi.sree2105@gmail.com>
Date: Sun, 27 Apr 2025 12:11:32 +0530
Subject: [PATCH] refactor(LibrarySortMenu): Optimize component with
 memoization and mapping improvements

---
 .../components/library/library-sort-menu.tsx  | 40 +++++++++----------
 1 file changed, 18 insertions(+), 22 deletions(-)

diff --git a/autogpt_platform/frontend/src/components/library/library-sort-menu.tsx b/autogpt_platform/frontend/src/components/library/library-sort-menu.tsx
index 0d6080f9c7..2310ebb48e 100644
--- a/autogpt_platform/frontend/src/components/library/library-sort-menu.tsx
+++ b/autogpt_platform/frontend/src/components/library/library-sort-menu.tsx
@@ -10,11 +10,19 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { useMemo } from "react";
+
+const SORT_LABELS: Record<LibraryAgentSortEnum, string> = {
+  [LibraryAgentSortEnum.CREATED_AT]: "Creation Date",
+  [LibraryAgentSortEnum.UPDATED_AT]: "Last Modified",
+  [LibraryAgentSortEnum.LAST_EXECUTION]: "Last Run",
+};
 
 export default function LibrarySortMenu(): React.ReactNode {
   const api = useBackendAPI();
   const { setAgentLoading, setAgents, setLibrarySort, searchTerm, librarySort } =
     useLibraryPageContext();
+
   const handleSortChange = async (value: LibraryAgentSortEnum) => {
     setLibrarySort(value);
     setAgentLoading(true);
@@ -28,18 +36,10 @@ export default function LibrarySortMenu(): React.ReactNode {
     setAgentLoading(false);
   };
 
-  const getPlaceholderText = () => {
-    switch (librarySort) {
-      case LibraryAgentSortEnum.CREATED_AT:
-        return "Creation Date";
-      case LibraryAgentSortEnum.UPDATED_AT:
-        return "Last Modified";
-      case LibraryAgentSortEnum.LAST_EXECUTION:
-        return "Last Run";
-      default:
-        return "Last Modified";
-    }
-  };
+  const placeholderText = useMemo(
+    () => SORT_LABELS[librarySort] || SORT_LABELS[LibraryAgentSortEnum.UPDATED_AT],
+    [librarySort]
+  );
 
   return (
     <div className="flex items-center">
@@ -47,19 +47,15 @@ export default function LibrarySortMenu(): React.ReactNode {
       <Select onValueChange={handleSortChange} defaultValue={librarySort}>
         <SelectTrigger className="ml-1 w-fit space-x-1 border-none px-0 text-base underline underline-offset-4 shadow-none">
           <ArrowDownNarrowWideIcon className="h-4 w-4 sm:hidden" />
-          <SelectValue placeholder={getPlaceholderText()} />
+          <SelectValue placeholder={placeholderText} />
         </SelectTrigger>
         <SelectContent>
           <SelectGroup>
-            <SelectItem value={LibraryAgentSortEnum.CREATED_AT}>
-              Creation Date
-            </SelectItem>
-            <SelectItem value={LibraryAgentSortEnum.UPDATED_AT}>
-              Last Modified
-            </SelectItem>
-            <SelectItem value={LibraryAgentSortEnum.LAST_EXECUTION}>
-              Last Run
-            </SelectItem>
+            {Object.entries(SORT_LABELS).map(([value, label]) => (
+              <SelectItem key={value} value={value}>
+                {label}
+              </SelectItem>
+            ))}
           </SelectGroup>
         </SelectContent>
       </Select>