Sort cards/companies.

lukasbicus · Nov 15, 2024 · ebf3283 · ebf3283
1 parent 4c0c95d
commit ebf3283
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 15 deletions.
diff --git a/app/(homescreens)/add-cards/predefined-companies-list.tsx b/app/(homescreens)/add-cards/predefined-companies-list.tsx
@@ -3,6 +3,7 @@
 import { getNameFilter } from '@/app/lib/filters';
 import { predefinedCompanies } from '@/app/lib/predefined-companies';
 import { Routes } from '@/app/lib/shared';
+import { sortAlphabetically } from '@/app/lib/sorts';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
@@ -16,20 +17,28 @@ export function PredefinedCompaniesList() {
     : predefinedCompanies;
   return (
     <ul className="menu menu-lg rounded-box text-base-content">
-      {companies.map(company => (
-        <li key={company.name}>
-          <Link
-            href={{
-              pathname: Routes.CreateCard,
-              query: { predefinedCompany: company.name },
-            }}
-            prefetch={false}
-          >
-            <Image {...company.svg} alt={company.name} className="w-10 h-10" />
-            <span className="text-xl">{company.name}</span>
-          </Link>
-        </li>
-      ))}
+      {companies
+        .sort(({ name: nameA }, { name: nameB }) =>
+          sortAlphabetically(nameA, nameB)
+        )
+        .map(company => (
+          <li key={company.name}>
+            <Link
+              href={{
+                pathname: Routes.CreateCard,
+                query: { predefinedCompany: company.name },
+              }}
+              prefetch={false}
+            >
+              <Image
+                {...company.svg}
+                alt={company.name}
+                className="w-10 h-10"
+              />
+              <span className="text-xl">{company.name}</span>
+            </Link>
+          </li>
+        ))}
     </ul>
   );
 }
diff --git a/app/(homescreens)/my-cards/my-cards-page.tsx b/app/(homescreens)/my-cards/my-cards-page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { CardsList } from '@/app/(homescreens)/my-cards/cards-list';
+import { sortAlphabetically } from '@/app/lib/sorts';
 import {
   AppActionTypes,
   AppState,
@@ -96,7 +97,12 @@ export default function MyCardsPage() {
           description="No cards found for given filter. Adjust your filter to see other cards."
         />
       ) : (
-        <CardsList cards={visibleCards} dispatch={dispatch} />
+        <CardsList
+          cards={visibleCards.sort(({ name: nameA }, { name: nameB }) =>
+            sortAlphabetically(nameA, nameB)
+          )}
+          dispatch={dispatch}
+        />
       )}
     </PageTemplate>
   );

diff --git a/app/lib/sorts.ts b/app/lib/sorts.ts
@@ -0,0 +1,3 @@
+export function sortAlphabetically(a: string, b: string): number {
+  return a.toLocaleLowerCase() > b.toLocaleLowerCase() ? 1 : -1;
+}