Skip to content

Commit

Permalink
Merge pull request #3 from Ramora6627/sort
Browse files Browse the repository at this point in the history
add 3 option drop down for sorting the cards
  • Loading branch information
Ramora6627 authored Jul 21, 2022
2 parents 5cdbdf1 + 7b9e68a commit 6625964
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 21 deletions.
2 changes: 1 addition & 1 deletion src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -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" }}>
Expand Down
60 changes: 46 additions & 14 deletions src/components/Board.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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>
);
};

4 changes: 2 additions & 2 deletions src/components/BoardDropDown.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}}
Expand Down
8 changes: 4 additions & 4 deletions src/components/Card.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

.btn {
margin: 5%;
color: #fff;
color: purple;
background-color: #FCD5CE;
border-color: #fff;
border-style: dashed;
Expand All @@ -13,7 +13,7 @@

.btn:disabled {
margin: 5%;
color: #fff;
/* color: #fff; */
background-color: lightgrey;
border-color: #fff;
border-style: dashed;
Expand All @@ -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;
}

0 comments on commit 6625964

Please sign in to comment.