From a90ace7a065297716aad744a18f3196268b169a6 Mon Sep 17 00:00:00 2001
From: Jordan Knott <jordan@jordanthedev.com>
Date: Thu, 16 Jul 2020 20:27:48 -0500
Subject: [PATCH] change: sort task labels based on label color position

---
 frontend/src/shared/components/Card/index.tsx | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/frontend/src/shared/components/Card/index.tsx b/frontend/src/shared/components/Card/index.tsx
index acd223d..53da47d 100644
--- a/frontend/src/shared/components/Card/index.tsx
+++ b/frontend/src/shared/components/Card/index.tsx
@@ -166,20 +166,23 @@ const Card = React.forwardRef(
               }}
             >
               {labels &&
-                labels.map(label => (
-                  <ListCardLabel
-                    onAnimationEnd={() => {
-                      if (setToggleLabels) {
-                        setToggleLabels(false);
-                      }
-                    }}
-                    variant={labelVariant ?? 'large'}
-                    color={label.labelColor.colorHex}
-                    key={label.id}
-                  >
-                    <ListCardLabelText>{label.name}</ListCardLabelText>
-                  </ListCardLabel>
-                ))}
+                labels
+                  .slice()
+                  .sort((a, b) => a.labelColor.position - b.labelColor.position)
+                  .map(label => (
+                    <ListCardLabel
+                      onAnimationEnd={() => {
+                        if (setToggleLabels) {
+                          setToggleLabels(false);
+                        }
+                      }}
+                      variant={labelVariant ?? 'large'}
+                      color={label.labelColor.colorHex}
+                      key={label.id}
+                    >
+                      <ListCardLabelText>{label.name}</ListCardLabelText>
+                    </ListCardLabel>
+                  ))}
             </ListCardLabels>
             {editable ? (
               <EditorContent>