From c35dbf293b1495daaf4722c939f2a263e7e1fbdf Mon Sep 17 00:00:00 2001
From: JanProgrammierung <jan.lorenz@scilifelab.se>
Date: Wed, 4 Dec 2024 14:16:07 +0100
Subject: [PATCH] Added small sorting part when filtering and displaying the
 JSON.

Signed-off-by: JanProgrammierung <jan.lorenz@scilifelab.se>
---
 next-app/src/app/datasources/page.tsx | 8 ++++++--
 next-app/src/app/registries/page.tsx  | 6 ++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/next-app/src/app/datasources/page.tsx b/next-app/src/app/datasources/page.tsx
index 3afe673..16503fa 100644
--- a/next-app/src/app/datasources/page.tsx
+++ b/next-app/src/app/datasources/page.tsx
@@ -119,7 +119,9 @@ export default function DataPage(): ReactElement {
     return (
       selectedFilters.dataTypes.length === 0 ||
       selectedFilters.dataTypes.some((filter) =>
-        dataSource.data.some((tag) => tag.toLowerCase() === filter.toLowerCase())
+        dataSource.data.some(
+          (tag) => tag.toLowerCase() === filter.toLowerCase()
+        )
       )
     );
   }
@@ -197,7 +199,8 @@ export default function DataPage(): ReactElement {
           <div className="space-y-8">
             {/* Disclaimer */}
             <div className="w-full max-w-lg bg-muted border border-neutral rounded-lg p-4 text-sm text-muted-foreground text-left mx-auto">
-            To access data, researchers may need to obtain ethical approval, submit data requests and set up data management agreements.
+              To access data, researchers may need to obtain ethical approval,
+              submit data requests and set up data management agreements.
             </div>
             {/* Search */}
             <div className="space-y-4">
@@ -286,6 +289,7 @@ export default function DataPage(): ReactElement {
             .filter((data) => applyDataTypeFilter(data))
             .filter((data) => applyDiseaseTypeFilter(data))
             .filter((data) => applySearchBar(data))
+            .sort((a, b) => a.name.localeCompare(b.name))
             .map((item, index) => (
               <Card key={index}>
                 <CardHeader className="bg-muted">
diff --git a/next-app/src/app/registries/page.tsx b/next-app/src/app/registries/page.tsx
index 7c81ea3..b5b53b0 100644
--- a/next-app/src/app/registries/page.tsx
+++ b/next-app/src/app/registries/page.tsx
@@ -196,8 +196,9 @@ export default function RegistryPage() {
           <div className="space-y-8">
             {/* Disclaimer */}
             <div className="w-full max-w-lg bg-muted border border-neutral rounded-lg p-4 text-sm text-muted-foreground text-left mx-auto">
-            To access data, researchers may need to obtain ethical approval, submit data requests and set up data management agreements.
-</div>
+              To access data, researchers may need to obtain ethical approval,
+              submit data requests and set up data management agreements.
+            </div>
             {/* Search */}
             <div className="space-y-4">
               <label
@@ -287,6 +288,7 @@ export default function RegistryPage() {
             .filter((registry) => applyRegistryCentreFilter(registry))
             .filter((registry) => applyRegistryCategoryFilter(registry))
             .filter((registry) => applySearchBar(registry))
+            .sort((a, b) => a.name.localeCompare(b.name))
             .map((item, index) => (
               <Card key={index}>
                 <CardHeader className="bg-muted">