From 7b9e68ae6f8f8bdb652ee2c2f1029772d967f4a8 Mon Sep 17 00:00:00 2001
From: sana <sanakakadan22@yahoo.com>
Date: Thu, 21 Jul 2022 00:30:36 +0200
Subject: [PATCH] add 3 option drop down for sorting the cards

---
 src/App.js                      |  2 +-
 src/components/Board.js         | 60 +++++++++++++++++++++++++--------
 src/components/BoardDropDown.js |  4 +--
 src/components/Card.css         |  8 ++---
 4 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/src/App.js b/src/App.js
index eedf5c60a..895e5737a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -47,7 +47,7 @@ function App() {
   return (
     <div className="app" id="App">
       <header>
-        <h1 className="inspo-board-header">Inspo Board</h1>
+        <h1 className="inspo-board-header">Swifties Inspo Board</h1>
       </header>
 
       <div style={{ display: "flex", gap: 20, justifyContent: "flex-start" }}>
diff --git a/src/components/Board.js b/src/components/Board.js
index 9c15ba1ab..a5cacbb31 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -4,7 +4,7 @@ import axios from "axios";
 import { useState, useEffect } from "react";
 import "./Board.css";
 
-export const Board = ({ id, title, owner}) => {
+export const Board = ({ id, title, owner }) => {
   const [cardData, setCardData] = useState([]);
 
   useEffect(() => {
@@ -49,29 +49,61 @@ export const Board = ({ id, title, owner}) => {
       .catch((error) => console.log(error));
   };
 
+  const [category, setCategory] = useState(0);
+
+  let sortedCards;
+  if (category === 1) {
+    sortedCards = [...cardData].sort((a, b) =>
+      a.message > b.message ? 1 : -1
+    );
+  } else if (category === 2) {
+    sortedCards = [...cardData].sort((a, b) => b.likes - a.likes);
+  } else {
+    sortedCards = [...cardData].sort((a, b) => a.id - b.id);
+  }
+
+  const handleCategoryChange = (category) => {
+    console.log(category);
+    setCategory(category);
+  };
+
   return (
     <div className="board">
       <div className="board-body">
         <h1 className="board-title">{title}</h1>
         <p className="board-subtitle">Owner: {owner}</p>
+        <div className="position-absolute">
+          <select
+            className="btn btn-secondary btn-sm dropdown-toggle"
+            name="category"
+            onChange={(event) =>
+              handleCategoryChange(event.target.selectedIndex)
+            }
+          >
+            <option id="0">Sort by ID</option>
+            <option id="1">Sort alphabetically</option>
+            <option id="2">Sort by number of likes</option>
+          </select>
+        </div>
+
         <div className="new-card">
-          <div className="add-card">
-          <CreateCard addCardCallback={addCard}></CreateCard>
-          </div>
           <div className="exisitng-card">
-          {cardData.map((data) => (
-            <Card
-              key={data.id}
-              id={data.id}
-              message={data.message}
-              likes={data.likes}
-              onRemoveCallback={removeCard}
-            ></Card>
-          ))}
+            {sortedCards.map((data) => (
+              <Card
+                key={data.id}
+                id={data.id}
+                message={data.message}
+                likes={data.likes}
+                onRemoveCallback={removeCard}
+              ></Card>
+            ))}
+          </div>
+
+          <div className="add-card">
+            <CreateCard addCardCallback={addCard}></CreateCard>
           </div>
         </div>
       </div>
     </div>
   );
 };
-
diff --git a/src/components/BoardDropDown.js b/src/components/BoardDropDown.js
index 360923e72..aef56a9e1 100644
--- a/src/components/BoardDropDown.js
+++ b/src/components/BoardDropDown.js
@@ -21,8 +21,8 @@ export const BoardDropDown = ({ id, boards, setSelectedBoard, selectedBoard, onR
       <div style={{ padding: 10 }}>
         <ol className="board-list">
           {boards?.map((each) => (
-            <div>
-            <li
+            <div key={each.id} >
+            <li 
               onClick={() => {
                 setSelectedBoard(each);
               }}
diff --git a/src/components/Card.css b/src/components/Card.css
index d21b17a91..76e59f0ef 100644
--- a/src/components/Card.css
+++ b/src/components/Card.css
@@ -4,7 +4,7 @@
 
 .btn {
     margin: 5%;
-    color: #fff;
+    color: purple;
     background-color: #FCD5CE;
     border-color: #fff;
     border-style: dashed;
@@ -13,7 +13,7 @@
 
 .btn:disabled {
     margin: 5%;
-    color: #fff;
+    /* color: #fff; */
     background-color: lightgrey;
     border-color: #fff;
     border-style: dashed;
@@ -26,13 +26,13 @@
 }
 
 .card-text {
-    color: #fff;
+    color: purple;
     background-color: #FCD5CE;
     text-align: center;
 }
 
 .card-like {
-    color: #fff;
+    color: purple;
     background-color: #FCD5CE;
     text-align: center;
 }
\ No newline at end of file