From e608a7db918acd014b02469af1ba8dc24a8403ff Mon Sep 17 00:00:00 2001
From: xfja <franjimenezaguilera@gmail.com>
Date: Tue, 6 Aug 2024 22:21:19 +0200
Subject: [PATCH] refactor(web): use label in Dropdown selected option display

---
 apps/web/src/components/Dropdown/Dropdown.tsx            | 6 +++---
 apps/web/src/components/Dropdown/components/Option.tsx   | 6 +++---
 apps/web/src/components/Layouts/PaginatedListLayout.tsx  | 9 ++++++---
 .../web/src/components/PaginatedTable/PaginatedTable.tsx | 9 ++++++---
 apps/web/src/pages/blob/[hash].tsx                       | 7 +++++--
 5 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/components/Dropdown/Dropdown.tsx b/apps/web/src/components/Dropdown/Dropdown.tsx
index ed953127d..5af33c9a0 100644
--- a/apps/web/src/components/Dropdown/Dropdown.tsx
+++ b/apps/web/src/components/Dropdown/Dropdown.tsx
@@ -15,9 +15,9 @@ export interface Option {
 
 export interface DropdownProps {
   options: Option[];
-  selected: string | number;
+  selected: Option;
   width?: string;
-  onChange(newValue: string | number): void;
+  onChange(newOption: Option): void;
 }
 
 const DEFAULT_WIDTH = "w-32";
@@ -37,7 +37,7 @@ export const Dropdown: React.FC<DropdownProps> = function ({
           } cursor-pointer rounded-lg border border-transparent bg-controlBackground-light pl-2 pr-8 text-left text-sm shadow-md hover:border hover:border-controlBackground-light focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white active:border-controlBorderHighlight-dark ui-open:border-controlActive-light dark:bg-controlBackground-dark dark:hover:border-controlBorderHighlight-dark dark:ui-open:border-controlActive-dark`}
         >
           <span className="block truncate align-middle font-normal">
-            {selected}
+            {selected.label}
           </span>
           <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
             <ChevronUpDownIcon
diff --git a/apps/web/src/components/Dropdown/components/Option.tsx b/apps/web/src/components/Dropdown/components/Option.tsx
index 2a3e8e076..ad3712f13 100644
--- a/apps/web/src/components/Dropdown/components/Option.tsx
+++ b/apps/web/src/components/Dropdown/components/Option.tsx
@@ -2,7 +2,7 @@ import { ListboxOption } from "@headlessui/react";
 
 import type { Option as OptionProps } from "../Dropdown";
 
-export const Option: React.FC<OptionProps> = function ({ label, value }) {
+export const Option: React.FC<OptionProps> = function (props) {
   return (
     <ListboxOption
       className={({ focus }) =>
@@ -12,14 +12,14 @@ export const Option: React.FC<OptionProps> = function ({ label, value }) {
             : "text-contentSecondary-light dark:text-contentSecondary-dark"
         }`
       }
-      value={value}
+      value={props}
     >
       {({ selected }) => (
         <div className="flex items-center">
           <span
             className={`block truncate text-sm ${selected ? "font-bold" : ""}`}
           >
-            {label}
+            {props.label}
           </span>
         </div>
       )}
diff --git a/apps/web/src/components/Layouts/PaginatedListLayout.tsx b/apps/web/src/components/Layouts/PaginatedListLayout.tsx
index 7c8c4c3ad..7b71178b2 100644
--- a/apps/web/src/components/Layouts/PaginatedListLayout.tsx
+++ b/apps/web/src/components/Layouts/PaginatedListLayout.tsx
@@ -47,7 +47,7 @@ export const PaginatedListLayout: FC<PaginatedListLayoutProps> = function ({
   const hasItems = !items || items.length;
 
   const handlePageSizeSelection = useCallback<DropdownProps["onChange"]>(
-    (newPageSize: number) =>
+    ({ value: newPageSize }) =>
       void router.push({
         pathname: router.pathname,
         query: {
@@ -56,7 +56,10 @@ export const PaginatedListLayout: FC<PaginatedListLayoutProps> = function ({
            * Update the selected page to a lower value if we require less pages to show the
            * new amount of elements per page.
            */
-          p: Math.min(Math.ceil(totalItems ?? 0 / newPageSize), page),
+          p: Math.min(
+            Math.ceil(totalItems ?? 0 / (newPageSize as number)),
+            page
+          ),
           ps: newPageSize,
         },
       }),
@@ -116,7 +119,7 @@ export const PaginatedListLayout: FC<PaginatedListLayoutProps> = function ({
                 Displayed items:
                 <Dropdown
                   options={PAGE_SIZES_OPTIONS}
-                  selected={pageSize}
+                  selected={{ value: pageSize, label: pageSize.toString() }}
                   width="w-full"
                   onChange={handlePageSizeSelection}
                 />
diff --git a/apps/web/src/components/PaginatedTable/PaginatedTable.tsx b/apps/web/src/components/PaginatedTable/PaginatedTable.tsx
index aab3f9e8d..c9424640d 100644
--- a/apps/web/src/components/PaginatedTable/PaginatedTable.tsx
+++ b/apps/web/src/components/PaginatedTable/PaginatedTable.tsx
@@ -70,7 +70,7 @@ export const PaginatedTable: FC<PaginatedTableProps> = function ({
       : undefined;
 
   const handlePageSizeSelection = useCallback<DropdownProps["onChange"]>(
-    (newPageSize: number) =>
+    ({ value: newPageSize }) =>
       void router.push({
         pathname: router.pathname,
         query: {
@@ -79,7 +79,10 @@ export const PaginatedTable: FC<PaginatedTableProps> = function ({
            * Update the selected page to a lower value if we require less pages to show the
            * new amount of elements per page.
            */
-          p: Math.min(Math.ceil(totalItems ?? 0 / newPageSize), page),
+          p: Math.min(
+            Math.ceil(totalItems ?? 0 / (newPageSize as number)),
+            page
+          ),
           ps: newPageSize,
         },
       }),
@@ -136,7 +139,7 @@ export const PaginatedTable: FC<PaginatedTableProps> = function ({
               Displayed items:
               <Dropdown
                 options={PAGE_SIZES_OPTIONS}
-                selected={pageSize}
+                selected={{ value: pageSize, label: pageSize.toString() }}
                 width="w-full"
                 onChange={handlePageSizeSelection}
               />
diff --git a/apps/web/src/pages/blob/[hash].tsx b/apps/web/src/pages/blob/[hash].tsx
index c8de30d70..c5a71dfe5 100644
--- a/apps/web/src/pages/blob/[hash].tsx
+++ b/apps/web/src/pages/blob/[hash].tsx
@@ -153,8 +153,11 @@ const Blob: NextPage = function () {
                 </div>
                 <Dropdown
                   options={blobViewModesOptions}
-                  selected={selectedBlobViewMode}
-                  onChange={(newViewMode) =>
+                  selected={{
+                    value: selectedBlobViewMode,
+                    label: selectedBlobViewMode,
+                  }}
+                  onChange={({ value: newViewMode }) =>
                     setSelectedBlobViewMode(newViewMode as BlobViewMode)
                   }
                 />