From cfd60b915f4091220045e120df1cae77c4f986cb Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Thu, 24 Oct 2024 01:38:18 +0900
Subject: [PATCH] feat: sort operators on dashboard

---
 .../Dashboard/OperatorGrid/OperatorGrid.tsx   | 29 +++++++++++++++++--
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/Dashboard/OperatorGrid/OperatorGrid.tsx b/src/components/Dashboard/OperatorGrid/OperatorGrid.tsx
index 927b50e350..1d510ea6a7 100644
--- a/src/components/Dashboard/OperatorGrid/OperatorGrid.tsx
+++ b/src/components/Dashboard/OperatorGrid/OperatorGrid.tsx
@@ -21,6 +21,27 @@ const OperatorGrid: React.FC<OperatorGridProps> = ({
     0,
   )
 
+  // pinned operators first, then staked operators, then the rest alphabetically
+  const handleSort = (a: ProcessedOperator, b: ProcessedOperator) => {
+    if (a.isPinned && !b.isPinned) {
+      return -1
+    }
+
+    if (!a.isPinned && b.isPinned) {
+      return 1
+    }
+
+    if (a.isStaked && !b.isStaked) {
+      return -1
+    }
+
+    if (!a.isStaked && b.isStaked) {
+      return 1
+    }
+
+    return a.name.localeCompare(b.name)
+  }
+
   return (
     <Container>
       <Header>
@@ -74,9 +95,11 @@ const OperatorGrid: React.FC<OperatorGridProps> = ({
             <span>Add Operator</span>
           </AddOperator>
         ) : (
-          data?.map((operator) => (
-            <OperatorCard key={operator.id} operator={operator} />
-          ))
+          data
+            ?.sort(handleSort)
+            .map((operator) => (
+              <OperatorCard key={operator.id} operator={operator} />
+            ))
         )}
       </Grid>
     </Container>