diff --git a/README.md b/README.md index b642ff62..6d7e165b 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,11 @@ Este projeto é o frontend de um aplicativo destinado a auxiliar na organização e distribuição de suprimentos, além de coordenar voluntários durante os alagamentos no Rio Grande do Sul. A aplicação visa conectar pessoas afetadas pelas enchentes com recursos essenciais e voluntários dispostos a ajudar. +## Acesso à Aplicação + +[SOS Rio Grande do Sul](https://sos-rs.com/) +[Discord](https://discord.gg/eJTuannsd6) + ## Sobre o Projeto O objetivo deste aplicativo é facilitar uma resposta rápida e eficiente em situações de emergência causadas por enchentes, promovendo a colaboração e o apoio mútuo entre a comunidade e organizações de ajuda. @@ -10,32 +15,20 @@ O objetivo deste aplicativo é facilitar uma resposta rápida e eficiente em sit Este frontend foi desenvolvido utilizando as seguintes tecnologias: -- **React**: Uma biblioteca JavaScript para construir interfaces de usuário. - -## Funcionalidades e Backlog - -O app inclui as seguintes funcionalidades: - -- [x] **Cadastro de Itens de suprimentos**: Permite que voluntários se inscrevam para ajudar. -- [x] **Busca de abrigos**: Gerencia a logística de distribuição de suprimentos para as áreas mais necessitadas. -- [x] **Alteração de necessidades de abrigos**: Exibe um mapa das áreas afetadas e pontos de coleta de suprimentos. -- [ ] **Cadastro de abrigos**: Criar tela para cadastro de abrigos (Nome, endereço, capacidade, vagas, aceita pets) e colocar pendende de aprovação. -- [ ] **Alteração de abrigos**: Pemitir alterar quantidade de vagas disponívies, se aceita pet ou endereço. -- [ ] **Cadastro de usuários**: Criar tela de cadastro (nome, telefone, senha) e login. -- [ ] **Filtro por item e por cidade**: Opção de filtrar abrigos por cidade ou que precisam de algum item específico. -- [ ] **Alterar ordenação**: Trocar a ordenação atual para ordenação por última atualização. -- [ ] **Adicionar mapa de abrigos**: Criar uma tela com um mapa e todos os abrigos. Verificar a posibilidade de usar geolocation para mostrar a posição do usuário no mapa. - +- [**React**](https://react.dev/): Uma biblioteca JavaScript para construir interfaces de usuário. +- [**Vite**](https://vitejs.dev/guide/): Uma ferramenta de build com servidor de desenvolvimento. +- [**Tailwind CSS**](https://tailwindcss.com/docs/installation): Framework CSS baseado em classes utilitárias. +- [**shadcn/ui**](https://ui.shadcn.com/docs): Coleção de componentes reutilizáveis, baseado em Tailwind. Para executar o frontend do aplicativo em seu ambiente local, siga os passos abaixo: 1. Clone o repositório: ``` - git clone https://github.com/seuusuario/projeto-enchentes-frontend.git + git clone https://github.com/SOS-RS/frontend ``` 2. Entre no diretório do projeto: ``` - cd projeto-enchentes-frontend + cd frontend ``` 3. Instale as dependências: ``` @@ -53,7 +46,7 @@ Contribuições são muito bem-vindas! Se você tem interesse em ajudar a melhor 1. Faça um fork do repositório. 2. Crie uma branch para sua feature (`git checkout -b feature/MinhaFeature`). -3. Faça seus commits (`git commit -am 'Adicionando uma nova feature'`). +3. Faça seus commits (`git commit -m 'Adicionando uma nova feature'`). 4. Faça push para a branch (`git push origin feature/MinhaFeature`). 5. Abra um Pull Request. diff --git a/index.html b/index.html index 680c6574..69f61661 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,9 @@ + + SOS - Rio Grande do Sul diff --git a/src/components/CardAboutShelter/CardAboutShelter.tsx b/src/components/CardAboutShelter/CardAboutShelter.tsx index 91766106..704314cf 100644 --- a/src/components/CardAboutShelter/CardAboutShelter.tsx +++ b/src/components/CardAboutShelter/CardAboutShelter.tsx @@ -65,11 +65,13 @@ const CardAboutShelter = (props: ICardAboutShelter) => { value={ check(shelter.contact) ? `${shelter.contact}` : 'Não informado' } + clipboardButton={check(shelter.contact)} /> } label="Chave Pix:" value={check(shelter.pix) ? `${shelter.pix}` : 'Não informado'} + clipboardButton={check(shelter.pix)} /> diff --git a/src/components/CardAboutShelter/components/InfoRow/InfoRow.tsx b/src/components/CardAboutShelter/components/InfoRow/InfoRow.tsx index 733c3ce4..0b5f0f61 100644 --- a/src/components/CardAboutShelter/components/InfoRow/InfoRow.tsx +++ b/src/components/CardAboutShelter/components/InfoRow/InfoRow.tsx @@ -4,14 +4,13 @@ import { IInfoRowProps } from './types'; const InfoRow = React.forwardRef( (props, ref) => { - const { icon, label, value, className = '', ...rest } = props; + const { icon, label, value, clipboardButton = false, className = '', ...rest } = props; const isLink = value?.startsWith('http'); const ValueComp = !value ? ( ) : isLink ? ( - window.open(value, '_blank')} > {value} @@ -36,7 +35,18 @@ const InfoRow = React.forwardRef( {label} - {ValueComp} + + {ValueComp} + {clipboardButton && value && ( +
navigator.clipboard.writeText(value)} + > + copiar +
+ )} + + ); diff --git a/src/components/CardAboutShelter/components/InfoRow/types.ts b/src/components/CardAboutShelter/components/InfoRow/types.ts index 22ef78dd..710aabd1 100644 --- a/src/components/CardAboutShelter/components/InfoRow/types.ts +++ b/src/components/CardAboutShelter/components/InfoRow/types.ts @@ -2,4 +2,5 @@ export interface IInfoRowProps extends React.ComponentPropsWithoutRef<'div'> { label: React.ReactNode; value?: string; icon: React.ReactNode; + clipboardButton?: boolean; } diff --git a/src/components/LoadingSkeleton/LoadingSkeleton.tsx b/src/components/LoadingSkeleton/LoadingSkeleton.tsx new file mode 100644 index 00000000..b4e02128 --- /dev/null +++ b/src/components/LoadingSkeleton/LoadingSkeleton.tsx @@ -0,0 +1,46 @@ +type LoadingSkeletonProps = { + amountItems: number +} + +const LoadingSkeleton = ({ amountItems }: LoadingSkeletonProps) => { + return ( +
+
    + {Array.from({length: amountItems,}).map((_, index) => ( +
  • +
    +
    +
    +
    + +
    + +
    + +
    + {Array.from({length: 7}).map((_, index) => ( +
    + ))} +
    + +
    + +
    + {Array.from({length: 7}).map((_, index) => ( +
    + ))} +
    +
    • + ))} +
+
+ ) +} + +export { LoadingSkeleton } \ No newline at end of file diff --git a/src/components/LoadingSkeleton/index.ts b/src/components/LoadingSkeleton/index.ts new file mode 100644 index 00000000..df34651b --- /dev/null +++ b/src/components/LoadingSkeleton/index.ts @@ -0,0 +1,3 @@ +import { LoadingSkeleton } from "./LoadingSkeleton"; + +export { LoadingSkeleton } \ No newline at end of file diff --git a/src/pages/EditShelterSupply/EditShelterSupply.tsx b/src/pages/EditShelterSupply/EditShelterSupply.tsx index dc737fa5..82d31bf4 100644 --- a/src/pages/EditShelterSupply/EditShelterSupply.tsx +++ b/src/pages/EditShelterSupply/EditShelterSupply.tsx @@ -30,7 +30,8 @@ const EditShelterSupply = () => { if (v) { setFilteredSupplies( supplies.filter((s) => - s.name.toLowerCase().includes(v.toLowerCase()) + s.name.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '') + .includes(v.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '')) ) ); } else setFilteredSupplies(supplies); diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index cbfb86a6..3fd2a848 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -1,5 +1,5 @@ import { useCallback, useContext, useMemo, useState } from 'react'; -import { useNavigate, useSearchParams } from 'react-router-dom'; +import { useSearchParams } from 'react-router-dom'; import { RotateCw, LogOutIcon, PlusIcon } from 'lucide-react'; import qs from 'qs'; @@ -48,7 +48,6 @@ const Home = () => { }, [] ); - const navigate = useNavigate(); const clearSearch = useCallback(() => { setSearch(''); @@ -161,7 +160,6 @@ const Home = () => { setFilterData((prev) => ({ ...prev, search: v })); setSearch(v); }} - onSelectShelter={(s) => navigate(`/abrigo/${s.id}`)} hasMoreItems={hasMore} onOpenModal={() => setOpenModal(true)} onClearSearch={clearSearch} diff --git a/src/pages/Home/components/ShelterListItem/ShelterListItem.tsx b/src/pages/Home/components/ShelterListItem/ShelterListItem.tsx index fe12fe01..cfed6182 100644 --- a/src/pages/Home/components/ShelterListItem/ShelterListItem.tsx +++ b/src/pages/Home/components/ShelterListItem/ShelterListItem.tsx @@ -1,6 +1,6 @@ import { useCallback, useMemo } from 'react'; import { format } from 'date-fns'; -import { useNavigate } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import { ChevronRight } from 'lucide-react'; import { @@ -20,9 +20,8 @@ import { IUseSheltersDataSupplyData } from '@/hooks/useShelters/types'; import { ShelterSupplyCategoryRow } from '../ShelterSupplyCategoryRow'; const ShelterListItem = (props: IShelterListItemProps) => { - const { data, onClick } = props; + const { data } = props; const { capacity, shelteredPeople } = data; - const navigate = useNavigate(); const { availability, className: availabilityClassName } = useMemo( () => getAvailabilityProps(capacity, shelteredPeople), @@ -42,53 +41,52 @@ const ShelterListItem = (props: IShelterListItemProps) => { }, []); return ( -
- -
navigate(`/abrigo/${data.id}`)} - > -

- {data.name} -

- {data.verified && } + +
+
+
+

+ {data.name} +

+ {data.verified && ( +
+ +
+ )} +
+ +
+
+ {availability} +
+
+ {data.address} +
+ {data.shelterSupplies.length > 0 && ( + <> + + + + + )} + {data.updatedAt && ( + + Atualizado em {format(data.updatedAt, 'dd/MM/yyyy HH:mm')} + + )}
-
- {availability} -
-
- {data.address} -
- {data.shelterSupplies.length > 0 && ( - <> - - - - - )} - {data.updatedAt && ( - - Atualizado em {format(data.updatedAt, 'dd/MM/yyyy HH:mm')} - - )} -
+ ); }; diff --git a/src/pages/Home/components/ShelterListView/ShelterListView.tsx b/src/pages/Home/components/ShelterListView/ShelterListView.tsx index 44bb2ad4..16bbd84f 100644 --- a/src/pages/Home/components/ShelterListView/ShelterListView.tsx +++ b/src/pages/Home/components/ShelterListView/ShelterListView.tsx @@ -1,5 +1,5 @@ import React, { Fragment } from 'react'; -import { CircleAlert, ListFilter, Loader } from 'lucide-react'; +import { CircleAlert, ListFilter } from 'lucide-react'; import { Alert, @@ -11,6 +11,7 @@ import { Button } from '@/components/ui/button'; import { cn } from '@/lib/utils'; import { IShelterListViewProps } from './types'; import { useSearchParams } from 'react-router-dom'; +import { LoadingSkeleton } from '@/components/LoadingSkeleton'; const ShelterListView = React.forwardRef( (props, ref) => { @@ -22,7 +23,6 @@ const ShelterListView = React.forwardRef( hasMoreItems = false, onSearchValueChange, onFetchMoreData, - onSelectShelter, className = '', onOpenModal, onClearSearch, @@ -74,7 +74,7 @@ const ShelterListView = React.forwardRef(
{loading ? ( - + ) : data.length === 0 ? ( ) : ( @@ -83,9 +83,6 @@ const ShelterListView = React.forwardRef( - onSelectShelter ? onSelectShelter(s) : undefined - } /> ))} {hasMoreItems ? (