Adicionando contribuição de franklingg - ordenação dos cards

MariaEduardaDeAzevedo · Jul 6, 2021 · dab63a5 · dab63a5
1 parent 186633f
commit dab63a5
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 30 deletions.
diff --git a/frontend/.firebase/hosting.cHVibGlj.cache b/frontend/.firebase/hosting.cHVibGlj.cache
@@ -1,24 +1,24 @@
-404.html,1625495899004,83834c6bac283886600901158ad8480eeab84430c75b2570880a44a815816f83
-chunk-map.json,1625495890368,4210de3edc4fa6be953ce44c88214954936a4a691e80837d3edc8f882d675240
-component---src-pages-404-js-eda258203988f3b302d0.js,1625495890360,cef6ee2af294e57d6f8308de6f6601dd7b510622abbad191bba0571068fb7759
-component---src-pages-index-js-6cd9f6d4b722d305d1e9.js.LICENSE.txt,1625495890360,c088f3165889063c78cc69adc6a3d7796f532216f6c348fd02c368af34471f96
-component---src-pages-404-js-eda258203988f3b302d0.js.map,1625495890360,0853295fb51088fbd4c1dc5826fdddbb30dd83d47f4aa78f1caeb20d65ef60d9
-framework-f042c9466e5169c5b00e.js.LICENSE.txt,1625495890360,adfdb1ee8fb95f1485cb148213f69eb20d21f4a155ad22798dc5515ed59714aa
-app-6cc8105c64a163ec572d.js,1625495890360,0f8ba6849b60be2594e4a70bc381c8086a4ce2c867eb46429405366f7972d45c
-index.html,1625495899016,e5d31a4ca2133ebc4fda92d0542663c1f2d54df09117a32bfbaed29da056f1e1
-styles.57f5e8d2e4c558085c4e.css,1625495890360,3635cc32910e9c1b154d2e84fdfedabcd00c333e5f37f92f013aae39c2fba848
-webpack-runtime-330dad3ed1eb7a91e2c8.js,1625495890360,5be4df4a50a5c1d2f9da8e401687f39dfc4664e688b3ed2c94eb457b6639eb8d
-webpack.stats.json,1625495890368,240868a395f1957f96d6a7519963625f199b6d71818b8f636d28529213a0e2d2
-404/index.html,1625495899004,5cbc740cd11eb0309fb93b474663a81c95d22bb72e11f2061d46aeed993efde1
-page-data/app-data.json,1625495890396,9ce15c506b3e6ecf23c1eec7e34148e2202191d70d5c356ce7951bbf3f8b00fe
-page-data/404/page-data.json,1625495890412,b71e6bdde4707db5f9720000940bab98d71ebf465cb4370e4b9896740ddc52fb
-page-data/404.html/page-data.json,1625495890412,6a960d28b9eb6d2f5daa4b696ea6ee67596d0998dffeb0c9c501017d3cd1a6e4
-page-data/index/page-data.json,1625495890412,08114be5d5d5bf4ab667d184697c8f897918308825208168c2f4af346d2ccb35
-webpack-runtime-330dad3ed1eb7a91e2c8.js.map,1625495890360,3b0320c52b3798801d051b7059607565ccc4be945c3e3f1ed5cf0d049c4bdaae
-component---src-pages-index-js-6cd9f6d4b722d305d1e9.js,1625495890360,ba9d1cd705a908f1118b272d7822edc01a2a0021c4642c00da214ab0184fe955
-polyfill-a3cb74f710260d5595f8.js,1625495890360,b9f08899aa71017620c70c1fb512dedc2d40e0c12636b0b9dcfe40bd3e12dd58
-framework-f042c9466e5169c5b00e.js,1625495890360,95bb0648033643a8a404ff8a203b041b0ea5372ac0fd8a4876c0a0bdc024feca
-app-6cc8105c64a163ec572d.js.map,1625495890360,f215a45286623ffd0f55479d8c99f4366aba36b7f38596feaad6fe6db5522940
-component---src-pages-index-js-6cd9f6d4b722d305d1e9.js.map,1625495890360,e67c53a3d82fafe2199f55e76a8ac66e38e687ce2d4c4fd9c3335eb6d2a224a0
-polyfill-a3cb74f710260d5595f8.js.map,1625495890360,04c8ae8fc879e385605b81fb9c92b36b310e643e169142fb64bd91d16bf9c828
-framework-f042c9466e5169c5b00e.js.map,1625495890360,e44535dbbf80d41953e1ab9b82f0887c9e5014d8dc5af8d90128ecd2d66feadd
+404.html,1625534430511,8ce3c4e0e25adee6ef609d16fad99db16a7150b45b05bb1f5fd7239998ed663f
+chunk-map.json,1625534425131,d3c25c347a1f6ddaad85cbf8f4032068d9729131776b961dedc7bcfd31698dfb
+component---src-pages-404-js-eda258203988f3b302d0.js,1625534425127,cef6ee2af294e57d6f8308de6f6601dd7b510622abbad191bba0571068fb7759
+component---src-pages-404-js-eda258203988f3b302d0.js.map,1625534425127,0853295fb51088fbd4c1dc5826fdddbb30dd83d47f4aa78f1caeb20d65ef60d9
+component---src-pages-index-js-097d3e2d287e8b632a9c.js.LICENSE.txt,1625534425127,c088f3165889063c78cc69adc6a3d7796f532216f6c348fd02c368af34471f96
+app-4a24791a40b79884284c.js,1625534425127,f10ba832d463a9eecdf398d178bb69419f6a1452401bd72cb31fa49c4531f383
+framework-f042c9466e5169c5b00e.js.LICENSE.txt,1625534425127,adfdb1ee8fb95f1485cb148213f69eb20d21f4a155ad22798dc5515ed59714aa
+index.html,1625534430519,b63c8fabf9c95543d9c585a1b0654f693e7373c6fbe3ee66450acb9d7ab1a4c3
+styles.e57a34f98b7e22f12eb7.css,1625534425127,5d760f01ab3e8d4bdf81eabd53813147a178955bd6c9a283cb5feac0fa52ea82
+webpack-runtime-ea619d6f580b3536c4a8.js,1625534425127,6a458cf1b5e18d4b8deda52a26a8b478d6b804c3b61e20271ed08b2d7686dc47
+webpack-runtime-ea619d6f580b3536c4a8.js.map,1625534425127,db160933442b55132be50fe539ab4fc4dc281a4572b06c1fe807a17ecd46d177
+webpack.stats.json,1625534425131,29721ffcce4ca5a4b6ea61c0edb8dbe73aed659953273f99eb4a677120f4f006
+404/index.html,1625534430511,b0a4e28342562e67c0ded7b51f4cc1ad3e99acc7bd019cd2d72025de22864fb8
+page-data/app-data.json,1625534425151,d32768daf10a52bd3e25589226f07427caa6a4e04f637f294491997dd29d53e7
+page-data/404/page-data.json,1625534425159,b71e6bdde4707db5f9720000940bab98d71ebf465cb4370e4b9896740ddc52fb
+page-data/404.html/page-data.json,1625534425159,6a960d28b9eb6d2f5daa4b696ea6ee67596d0998dffeb0c9c501017d3cd1a6e4
+page-data/index/page-data.json,1625534425159,08114be5d5d5bf4ab667d184697c8f897918308825208168c2f4af346d2ccb35
+component---src-pages-index-js-097d3e2d287e8b632a9c.js,1625534425127,e05dc3cb4c2241421adeca6862a2d5d8173118029d0aea43c62f20bf79ee36bf
+polyfill-a3cb74f710260d5595f8.js,1625534425127,b9f08899aa71017620c70c1fb512dedc2d40e0c12636b0b9dcfe40bd3e12dd58
+framework-f042c9466e5169c5b00e.js,1625534425127,95bb0648033643a8a404ff8a203b041b0ea5372ac0fd8a4876c0a0bdc024feca
+app-4a24791a40b79884284c.js.map,1625534425127,c150eb7a0f4630fdba95e2de2f0e3abcf9ada7f44d9d44fb4158d98627f6c41e
+component---src-pages-index-js-097d3e2d287e8b632a9c.js.map,1625534425127,f9be34e52057a8a505a9043dd22bd7f5139175c2fb12834f4bdacce1a6d9db0b
+polyfill-a3cb74f710260d5595f8.js.map,1625534425127,04c8ae8fc879e385605b81fb9c92b36b310e643e169142fb64bd91d16bf9c828
+framework-f042c9466e5169c5b00e.js.map,1625534425127,e44535dbbf80d41953e1ab9b82f0887c9e5014d8dc5af8d90128ecd2d66feadd
diff --git a/frontend/src/pages/index.js b/frontend/src/pages/index.js
@@ -1,8 +1,8 @@
 import axios from "axios";
-import React, { useEffect, useState } from "react"
-import {Container, Dropdown} from 'react-bootstrap'
+import React, { useCallback, useEffect, useState } from "react"
+import {Container, Dropdown, Row} from 'react-bootstrap'
 import Card from "../components/Card";
-import {Search, DollarSign, Heart, GitHub, Menu} from 'react-feather'
+import {Search, DollarSign, Heart, GitHub, Menu, ChevronDown, ArrowDown, ArrowUp} from 'react-feather'
 
 import "./styles.css"
 
@@ -11,6 +11,7 @@ const Home = () => {
  const [projects, setProjects] = useState([]);
  const [search, setSearch] = useState("");
  const [cents, setCents] = useState(0);
+ const [order, setOrder] = useState();
  const [situation, setSituation] = useState("");
 
  const api = axios.create({
@@ -25,6 +26,28 @@ const Home = () => {
  }
  }, [search, projects, cents])
 
+ const handleOrder = useCallback((array)=>{
+ if(order) {
+ return array.sort((p1, p2) => {
+ if(order.direction === 'asc'){
+ return (
+ p1[order.key] < p2[order.key] ? -1 : 
+ p1[order.key] > p2[order.key] ? 1 :
+ 0
+ )
+ } else {
+ return (
+ p1[order.key] < p2[order.key] ? 1 : 
+ p1[order.key] > p2[order.key] ? -1 :
+ 0
+ )
+ }
+ }
+ );
+ }
+ return array;
+ }, [order]);
+
  function handleSearch() {
  api.get(`/search/${search}`).then(
  (response) => {
@@ -70,6 +93,28 @@ const Home = () => {
  }
  </span>
  <div className="form">
+ <Dropdown className="actionbar" onSelect={(k, e)=>{
+ const [key, direction] = k.split(':');
+ setOrder({key, direction, name: e.target.text});
+ }}>
+ <Dropdown.Toggle variant="success" id="dropdown-basic" className="actionbar__select">
+ <Row>
+ <span>{ order ? order.name : 'Ordenar por'}</span>
+ </Row>
+ <ChevronDown />
+ </Dropdown.Toggle>
+
+ <Dropdown.Menu className="actionbar__menu">
+ <Dropdown.Item className="actionbar__menuItem" eventKey="cents:asc">Centavos <ArrowDown /></Dropdown.Item>
+ <Dropdown.Item className="actionbar__menuItem" eventKey="cents:desc">Centavos <ArrowUp /></Dropdown.Item>
+ <Dropdown.Item className="actionbar__menuItem" eventKey="date:asc">Data <ArrowDown /></Dropdown.Item>
+ <Dropdown.Item className="actionbar__menuItem" eventKey="date:desc">Data <ArrowUp /></Dropdown.Item>
+ <Dropdown.Item className="actionbar__menuItem" eventKey="description:asc">Descrição <ArrowDown /></Dropdown.Item>
+ <Dropdown.Item className="actionbar__menuItem" eventKey="description:desc">Descrição <ArrowUp /></Dropdown.Item>
+ <Dropdown.Item className="actionbar__menuItem" eventKey="mode:asc">Ambiente <ArrowDown /></Dropdown.Item>
+ <Dropdown.Item className="actionbar__menuItem" eventKey="mode:desc">Ambiente <ArrowUp /></Dropdown.Item>
+ </Dropdown.Menu>
+ </Dropdown>
  <input placeholder="ID DE ANONIMIZAÇÃO" onChange={(event) => {setSearch(event.target.value)}} />
  <button onClick={() => {handleSearch()}}>
  <Search/>
@@ -78,10 +123,10 @@ const Home = () => {
  </header>
 
  <main>
-  {projects?.length > 0 ?
- projects.map((res) => {
+ {projects?.length > 0 ?
+ handleOrder([...projects]).map((res, index) => {
  return(
- <Card cents={res.cents} date={res.date} description={res.description} mode={res.mode} key={res.description}/>
+ <Card cents={res.cents} date={res.date} description={res.description} mode={res.mode} key={index}/>
  );
  })
  : "Pesquise pelo seu ID DE ANONIMIZAÇÃO e confira suas atividades corrigidas e centavos acumulados na disciplina de LOAC."}

diff --git a/frontend/src/pages/styles.css b/frontend/src/pages/styles.css
@@ -2,6 +2,7 @@
 
 :root {
  --green: #7dc49c;
+ --green-darker: #60c48b;
 }
 
 body {
@@ -188,6 +189,45 @@ body {
  gap: 1rem;
 }
 
+
+.actionbar {
+ position: relative;
+ width: 9rem;
+}
+
+.actionbar__select {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ padding-left: 1rem;
+ justify-content: space-between;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.actionbar__menu {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ background-color: var(--green);
+ color: white;
+ cursor: pointer;
+ border: none;
+}
+
+.actionbar__menuItem {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.4rem;
+ padding: 0.8rem;
+ text-decoration: none;
+ color: white;
+}
+.actionbar__menuItem:hover {
+ background-color: var(--green-darker);
+}
+
 @media screen and (max-width: 800px){
  .container header {
  flex-direction: column;