Merge pull request #154 from unb-mds/feat-Implementando-funcionalidad…

…es-Filter

Feat implementando funcionalidades filter

frontend/src/components/header/__snapshots__/header.test.js.snap

@@ -17,39 +17,9 @@ Array [
   >
     <a
       class="headerLink"
-      href="/SobreLicitacao"
-    >
-      Sobre as Licitações
-    </a>
-  </li>,
-  <li
-    class="headerListItem"
-  >
-    <a
-      class="headerLink"
-      href="/sobredispensadelicitacao"
+      href="/artigos"
     >
-      Sobre Dispensas
-    </a>
-  </li>,
-  <li
-    class="headerListItem"
-  >
-    <a
-      class="headerLink"
-      href="/sobrebot"
-    >
-      Sobre o Bot
-    </a>
-  </li>,
-  <li
-    class="headerListItem"
-  >
-    <a
-      class="headerLink"
-      href="/sobrelisitaBSB"
-    >
-      Sobre o Projeto
+      Conheça o Projeto
     </a>
   </li>,
   <li

frontend/src/components/header/header.test.js

@@ -22,7 +22,7 @@ describe('Deve renderizar os links das rotas: ', () => {
       </MemoryRouter>,
     );
     const linkRoute = screen.getAllByText('Sobre as Licitações');
-    expect(linkRoute).toHaveLength(2);
+    expect(linkRoute).toHaveLength(1);
   });
   test('Sobre o Projeto', () => {
     render(
@@ -31,7 +31,7 @@ describe('Deve renderizar os links das rotas: ', () => {
       </MemoryRouter>,
     );
     const linkRoute = screen.getAllByText('Sobre o Projeto');
-    expect(linkRoute).toHaveLength(2);
+    expect(linkRoute).toHaveLength(1);
   });
   test('Sobre Nós', () => {
     render(
@@ -60,7 +60,7 @@ test('Deve renderizar a lista de links presentes no componente', () => {
     </MemoryRouter>,
   );
   const listaDeLinks = screen.getAllByRole('listitem');
-  expect(listaDeLinks).toHaveLength(14);
+  expect(listaDeLinks).toHaveLength(11);
 });
 
 test('Deve renderizar o snapshot da lista de links do componente', () => {

frontend/src/components/layout/custom-input-checkbox/index.jsx

@@ -1,10 +1,22 @@
 import React from 'react';
 import styles from './style.module.css';
 
-export default function CustomInputCheckbox({ name, label, onPress, id }) {
+export default function CustomInputCheckbox({
+  checked,
+  name,
+  label,
+  onPress,
+  id,
+}) {
   return (
-    <label className={styles.checkboxBtn} htmlFor={id} onClick={onPress}>
-      <input type="checkbox" name={name} id={id} />
+    <label className={styles.checkboxBtn} htmlFor={id}>
+      <input
+        defaultChecked={checked}
+        type="checkbox"
+        name={name}
+        id={id}
+        onClick={onPress}
+      />
       <span></span>
       <p>{label}</p>
     </label>

frontend/src/components/newsletter/style.module.css

@@ -76,3 +76,12 @@
     object-fit: cover;
     border-radius: 10px;
 }
+
+
+@media(max-width: 1200px){
+
+}
+
+@media(max-width: 800px){
+
+}

frontend/src/pages/about-bot/__snapshots__/about-bot.test.js.snap

@@ -5,7 +5,7 @@ exports[`Na página Sobre o Bot, deve ser renderizado  o snapshot com o conteúd
   class="cardAboutContext"
   data-testid="main-container-text"
 >
-  <span
+  <div
     class="paragraph1Context"
   >
     <div>
@@ -60,7 +60,7 @@ exports[`Na página Sobre o Bot, deve ser renderizado  o snapshot com o conteúd
       class="imagem1"
       src="imagem-bot.png"
     />
-  </span>
+  </div>
   <span>
     <h2
       class="cardAboutSubtitle"

frontend/src/pages/about-licitaBSB/__snapshots__/about-lisitaBSB.test.js.snap

@@ -44,7 +44,7 @@ exports[`A página "Sobre o Projeto" deve o snapshot com o conteúdo do artigo 1
     </div>
     <img
       class="imagem1"
-      src="logo-lisita.jpg"
+      src="logo-licita.jpg"
     />
   </span>
   <span>

frontend/src/pages/bidding-list/filter/index.jsx

@@ -9,6 +9,7 @@ import CustomInputCheckbox from '../../../components/layout/custom-input-checkbo
 import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
 import seach from '../../../../assets/SearchDark.svg';
 import { useNavigate } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 
 export default function Filter({
   filterParams,
@@ -33,19 +34,13 @@ export default function Filter({
     });
   };
 
-  const marks = [
-    {
-      value: 0,
-      label: 'R$ 0',
-    },
-    {
-      value: 1000000,
-      label: 'R$ 1.000.000,00',
-    },
-  ];
-
+  const [searchParams] = useSearchParams();
+  const filterOrgaos = searchParams.get('orgao')
+    ? searchParams.get('orgao')
+    : '';
   const [orgaosPage, setOrgaosPage] = useState(1);
   const [orgaosName, setOrgaosName] = useState('');
+  const [selectedOrgaos, setSelectedOrgaos] = useState(filterOrgaos.split(','));
   const [orgaosDados, setOrgaosDados] = useState([]);
 
   const mostrarMais = () => {
@@ -60,6 +55,18 @@ export default function Filter({
     setOrgaosDados(orgaos.results);
   };
 
+  const getOrgaosInCheckBox = (nomeOrgao) => {
+    if (selectedOrgaos.includes(nomeOrgao)) {
+      setSelectedOrgaos(() => {
+        return selectedOrgaos.filter(
+          (selectedName) => selectedName !== nomeOrgao,
+        );
+      });
+    } else {
+      setSelectedOrgaos([...selectedOrgaos, nomeOrgao]);
+    }
+  };
+
   const loadOrgaos = async () => {
     const orgaos = await getOrgaos({
       search: orgaosName,
@@ -68,6 +75,13 @@ export default function Filter({
     setOrgaosDados((curr) => [...curr, ...orgaos.results]);
   };
 
+  useEffect(() => {
+    setFilterParams({
+      ...filterParams,
+      orgao: selectedOrgaos.join(','),
+    });
+  }, [selectedOrgaos]);
+
   useEffect(() => {
     loadOrgaos();
   }, [orgaosPage]);
@@ -124,82 +138,31 @@ export default function Filter({
           <img src={seach} />
         </div>
         <ul className={styles.filterOptionsContainer}>
-          {orgaosDados.map((orgao) => (
-            <li
-              key={`${orgao.nome}${orgao.id}`}
-              className={styles.listItemStyle}
-            >
-              <CustomInputCheckbox
-                name={orgao.nome}
-                label={orgao.nome}
-                onPress={() => {}}
-                id={orgao.nome}
-              />
-            </li>
-          ))}
+          {orgaosDados.map((item) => {
+            const valor = filterOrgaos.split(',').includes(item.nome);
+
+            return (
+              <li
+                key={`${item.nome}${item.id}`}
+                className={styles.listItemStyle}
+              >
+                <CustomInputCheckbox
+                  checked={valor}
+                  name={item.nome}
+                  label={item.nome}
+                  onPress={() => {
+                    getOrgaosInCheckBox(item.nome);
+                  }}
+                  id={item.nome}
+                />
+              </li>
+            );
+          })}
           <li className={styles.mostrarMaisOrgaos}>
             <a onClick={mostrarMais}>Mostrar mais...</a>
           </li>
         </ul>
       </div>
-      {/*
-      <div>
-        <h3 className={styles.sectionTitle}>Status</h3>
-        <ul className={styles.filterOptionsContainer}>
-          <li className={styles.listItemStyle}>
-            <CustomInputRadio
-              name="status"
-              label="Aberto"
-              onPress={() => {
-                setFilterParams({
-                  ...filterParams,
-
-                  status: 'aberto'
-                })
-              }}
-              id="aberto"
-            />
-          </li>
-          <li className={styles.listItemStyle}>
-            <CustomInputRadio
-              name="status"
-              label="Fechado"
-              onPress={() => {
-                setFilterParams({
-                  ...filterParams,
-
-                  status: 'fechado'
-                })
-              }}
-              id="fechado"
-            />
-          </li>
-        </ul>
-      </div>
-      <div>
-        <h3 className={styles.sectionTitle}>Preço</h3>
-        <div className={styles.inputRangeWrapper}>
-          <Slider
-            size="small"
-            aria-label="Small"
-            valueLabelDisplay="auto"
-            value={filterParams.value}
-            onChange={(e) => {
-              setFilterParams({
-                ...filterParams,
-                value: e.target.value,
-              });
-            }}
-            max={1000000}
-            step={10}
-            marks={marks}
-          />
-        </div>
-      </div>
-
-
-
-      */}
       <div>
         <h3 className={styles.sectionTitle}>Período</h3>
         <div className={styles.calendariosWrapper}>

frontend/src/pages/bidding-list/index.jsx

@@ -18,13 +18,17 @@ export default function BiddingList() {
   const filterValue = searchParams.get('value')
     ? searchParams.get('value')
     : '';
+  const filterOrgaos = searchParams.get('orgao')
+    ? searchParams.get('orgao')
+    : '';
 
   const [filterParams, setFilterParams] = useState({
     page: 1,
     tipo: filterTipo,
     status: '',
     search: filterInput,
     value: filterValue,
+    orgao: filterOrgaos,
   });
 
   const [listaLicitacoes, setListaLicitacoes] = useState([]);
@@ -38,7 +42,7 @@ export default function BiddingList() {
 
   const handlePageChange = (_, value) => {
     setFilterParams((prevParams) => ({ ...prevParams, page: value }));
-    loadData(filterParams);
+    handleSearch();
   };
 
   const buildFilterQuery = (params) => {

frontend/src/pages/landing/ultimas-licitacoes/index.jsx

@@ -26,8 +26,8 @@ export default function UltimasLicitacoes() {
         <ul className={styles.licitacoesWrapper}>
           {maisLicitacoes.map((item) => {
             return (
-              <li data-testid="listitem-testid">
-                <CardLicitacoes key={item.id} data={item} />
+              <li key={item.id} data-testid="listitem-testid">
+                <CardLicitacoes data={item} />
               </li>
             );
           })}