Merge develop to staging (#289) (#290)

* feat: added shelter category

* setup shadcdn combobox

* remove new item btn

* add autocomplete with search

* handle add new item

* add clear feat

* cleanup

* cleanup

* cleanup

* fix imports

* fix: new item keeps on when item selected

* update text

* add text above list

* add initial filter to show only stored supplies

* Add contributing

* remove unused import

---------

CONTRIBUTING.md

@@ -0,0 +1,127 @@
+# Contribuindo
+
+Você pode contribuir com o projeto de diversas formas, implementando uma
+funcionalidade nova, corrigindo um bug, procurando bugs, revisando pull
+requests, entre outras.
+Para se inteirar do projeto, entre no
+[Discord](https://discord.gg/vjZS6BQXvM) e participe das discussões.
+
+## 🤝 Contribuindo com atividades que não são de código
+
+O projeto precisa de ajuda em diversas frentes diferentes como: QA, produto,
+design e gestão. Entre no servidor do Discord onde há canais específicos para
+essas atividades.
+
+Se você encontrou um bug, vá nas
+[issues](https://github.com/SOS-RS/frontend/issues)
+do projeto e reporte-o lá. Verifique antes se já não existe um bug aberto para o
+problema que quer relatar, usando a busca. O mesmo vale para novas
+funcionalidades.
+
+O restante deste documento focará nas contribuições de código.
+
+## ✅ Escolhendo qual será sua contribuição de código
+
+Verifique no [projeto do Github](https://github.com/orgs/SOS-RS/projects/1)
+quais funcionalidades ainda não foram implementadas e já estão prontas para
+serem desenvolvidas, elas estarão na coluna "Disponível pra dev". Lá há itens de
+backend e frontend, então atente-se para qual você gostaria de participar.
+
+Após escolher o item que quer trabalhar, faça um comentário no issue informando
+que quer contribuir para sua entrega. Uma pessoa que administra o repositório
+marcará você como a pessoa responsável por aquele issue, e marcará o item como
+"Em desenvolvimento".
+
+A partir daí você já pode trabalhar no item que escolheu.
+
+Você também pode mandar a contribuição diretamente sem avisar, mas corre o
+risco de alguém solicitar para trabalhar no item e entregá-lo junto ou antes de
+você, desperdiçando assim esforços. Somente faça isso se a correção for bem rápida e pontual para
+evitar o desperdício.
+
+⚠️ **Importante**: Itens de alta prioridade precisam ser entregues o mais rápido possível,
+idealmente em até dois dias. Verifique se tem tempo livre suficiente para se
+dedicar a um item de urgência, a fim de evitar segurar o item por tempo demais
+de forma desnecessária.
+
+## 🚀 Configuração Inicial Local
+
+1. Faça um fork do repositório para o seu usuário (uma boa ideia é usar um nome mais descritivo do que `frontend`, como `sos-rs-frontend`).
+2. Clone o repositório (troque `<seuusuario>` na url abaixo pelo seu usuário):
+
+   ```bash
+   git clone https://github.com/<seuusuario>/sos-rs-frontend.git
+   ```
+
+3. Instale as dependências:
+
+   ```bash
+   npm install
+   ```
+
+4. Inicie o servidor:
+
+   ```bash
+   npm run dev
+   ```
+
+   O app estará disponível em <http://localhost:5173>.
+
+5. Inicie o servidor de backend. Veja as instruções no seu
+   [documento de contribuição](https://github.com/SOS-RS/backend/blob/develop/CONTRIBUTING.md).
+
+## 💻 Codificando e enviando
+
+1. Faça suas alterações.
+2. Rode o lint com `npm run lint`.
+3. Crie um branch com o git `git checkout -b nomedobranch`.
+4. Faça um commit com `git commit`.
+5. Faça um push para o seu repositório com `git push`.
+6. [Sincronize seu repositório](#-sincronizando).
+7. [Abra um pull request](https://docs.github.com/pt/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request).
+  Não deixe de informar, no seu pull request, qual a issue que está fechando.
+  Idealmente coloque um comentário no PR que já fechará a issue, como
+  `fixes #xxxx` ou `closes #xxxx` (onde `xxxx` é o número do issue). Veja
+  [como isso funciona](https://docs.github.com/pt/get-started/writing-on-github/working-with-advanced-formatting/using-keywords-in-issues-and-pull-requests).
+8. Acompanhe a revisão do PR. Algumas verificações automáticas serão feitas (o
+   Github Actions rodará o build do Vite, por exemplo). Se uma delas falhar, corrija-a, a
+   revisão humana só começa quando estas checagem estão passando. Após abrir o
+   PR uma pessoa que administra o projeto pode pedir revisões e alterações.
+   Busque respondê-las o mais rápido possível para que o PR possa ser integrado.
+
+## 🔄 Sincronizando
+
+Você vai precisar, de tempos em tempos, sincronizar a branch `develop` do
+seu repositório. Você pode usar o botão `Sync fork` do Github
+(veja [os docs](https://docs.github.com/pt/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork)).
+Ou você pode fazer manualmente, o que te permite fazer a sincronização sem depender do Github:
+
+1. Antes de mais nada, se estiver no meio de uma contribuição, verifique que já commitou
+   tudo que tinha pra commitar, e então faça checkout do branch `develop`:
+
+   ```bash
+   git checkout develop
+   ```
+
+2. Adicione o repositório oficial como remoto com nome `upstream` (só necessário na primeira vez):
+
+   ```bash
+   git remote add upstream https://github.com/SOS-RS/frontend.git
+   ```
+
+3. Faça pull do branch `develop`:
+
+   ```bash
+   git pull upstream develop
+   ```
+
+4. Se estiver no meio de uma contribuição, faça um rebase no branch `develop`
+   (substitua `<seubranch>` pelo nome do seu branch):
+
+   ```bash
+   git checkout <seubranch>
+   git rebase develop
+   ```
+
+   Após o rebase, é importante rodar novamente a aplicação e verificar se tudo
+   continua funcionando.

README.md

@@ -1,15 +1,22 @@
-# README
+# 🌊 Frontend para App de Ajuda em Enchentes 🌊
 
 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.
 
+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.
+
+Se você quiser discutir ideias, problemas ou contribuições, sinta-se à vontade para se juntar ao nosso servidor do
+Discord [aqui](https://discord.gg/vjZS6BQXvM).
+
 ## Acesso à Aplicação
 
 [SOS Rio Grande do Sul](https://sos-rs.com/)
-[Discord](https://discord.gg/eJTuannsd6)
 
-## Sobre o Projeto
+## 🤝 Contribuição
 
-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.
+Contribuições são muito bem-vindas! Se deseja ajudar, veja o
+[documento de contribuição](./CONTRIBUTING.md).
+
+Agradecemos o seu interesse e apoio. Juntos, podemos fazer uma diferença significativa para as vítimas das enchentes no Rio Grande do Sul!
 
 ## Tecnologias Utilizadas
 
@@ -20,36 +27,12 @@ Este frontend foi desenvolvido utilizando as seguintes tecnologias:
 - [**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/SOS-RS/frontend
-   ```
-2. Entre no diretório do projeto:
-   ```
-   cd frontend
-   ```
-3. Instale as dependências:
-   ```
-   npm install
-   ```
-4. Inicie o servidor de desenvolvimento:
-   ```
-   npm run dev
-   ```
-   O app estará disponível em `http://localhost:5173`.
-
-## Contribuindo
-
-Contribuições são muito bem-vindas! Se você tem interesse em ajudar a melhorar o app, por favor:
-
-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 -m 'Adicionando uma nova feature'`).
-4. Faça push para a branch (`git push origin feature/MinhaFeature`).
-5. Abra um Pull Request.
-
----
+## Licença
 
-Agradecemos o seu interesse e apoio. Juntos, podemos fazer uma diferença significativa para as vítimas das enchentes no Rio Grande do Sul!
+Este código está licenciado usando a
+[licença MIT](./LICENSE).
+
+## Contribuidores
+
+Os contribuidores são voluntários, e podem ser encontrados
+[na página de contribuidores](https://github.com/SOS-RS/frontend/graphs/contributors).

src/pages/EditShelterSupply/EditShelterSupply.tsx

@@ -1,12 +1,12 @@
-import { ChevronLeft, PlusCircle } from 'lucide-react';
+import { ChevronLeft } from 'lucide-react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { DialogSelector, Header, LoadingScreen, TextField } from '@/components';
+import { DialogSelector, Header, LoadingScreen } from '@/components';
 import { Button } from '@/components/ui/button';
 import { useShelter, useSupplies, useThrottle } from '@/hooks';
 import { group, normalizedCompare } from '@/lib/utils';
-import { SupplyRow } from './components';
+import { SupplyRow, SupplySearch } from './components';
 import { IDialogSelectorProps } from '@/components/DialogSelector/types';
 import { ISupplyRowItemProps } from './components/SupplyRow/types';
 import { ShelterSupplyServices } from '@/service';
@@ -25,32 +25,58 @@ const EditShelterSupply = () => {
   const [filteredSupplies, setFilteredSupplies] = useState<IUseSuppliesData[]>(
     []
   );
-  const [searchValue, setSearchValue] = useState<string>('');
+  const [searchedSupplies, setSearchedSupplies] = useState<IUseSuppliesData[]>(
+    []
+  );
+  const shelterSupplyData = useMemo(() => {
+    return (shelter?.shelterSupplies ?? []).reduce(
+      (prev, current) => ({ ...prev, [current.supply.id]: current }),
+      {} as Record<string, IUseShelterDataSupply>
+    );
+  }, [shelter?.shelterSupplies]);
+
+  const [, setSearchSupplies] = useThrottle<string>(
+    {
+      throttle: 200,
+      callback: (value) => {
+        if (value) {
+          const filteredSupplies = supplies.filter((s) =>
+            normalizedCompare(s.name, value)
+          );
+          setSearchedSupplies(filteredSupplies);
+        } else {
+          setSearchedSupplies([]);
+          setSearch('');
+        }
+      },
+    },
+    [supplies]
+  );
+
   const [, setSearch] = useThrottle<string>(
     {
       throttle: 400,
-      callback: (v) => {
-        if (v) {
-          setFilteredSupplies(
-            supplies.filter((s) => normalizedCompare(s.name, v))
+      callback: (value) => {
+        if (value) {
+          const filteredSupplies = supplies.filter((s) =>
+            normalizedCompare(s.name, value)
           );
-        } else setFilteredSupplies(supplies);
+          setFilteredSupplies(filteredSupplies);
+        } else {
+          const storedSupplies = supplies.filter((s) => !!shelterSupplyData[s.id]);
+          setFilteredSupplies(storedSupplies);
+        }
       },
     },
-    [supplies]
+    [supplies, shelterSupplyData]
   );
   const [modalOpened, setModalOpened] = useState<boolean>(false);
   const [loadingSave, setLoadingSave] = useState<boolean>(false);
   const [modalData, setModalData] = useState<Pick<
     IDialogSelectorProps,
     'value' | 'onSave' | 'quantity'
   > | null>();
-  const shelterSupplyData = useMemo(() => {
-    return (shelter?.shelterSupplies ?? []).reduce(
-      (prev, current) => ({ ...prev, [current.supply.id]: current }),
-      {} as Record<string, IUseShelterDataSupply>
-    );
-  }, [shelter?.shelterSupplies]);
+
   const supplyGroups = useMemo(
     () =>
       group<IUseSuppliesData>(filteredSupplies ?? [], 'supplyCategory.name'),
@@ -112,8 +138,9 @@ const EditShelterSupply = () => {
   );
 
   useEffect(() => {
-    setFilteredSupplies(supplies);
-  }, [supplies]);
+    const storedSupplies = supplies.filter((s) => !!shelterSupplyData[s.id]);
+    setFilteredSupplies(storedSupplies);
+  }, [supplies, shelterSupplyData]);
 
   if (loading) return <LoadingScreen />;
 
@@ -163,27 +190,26 @@ const EditShelterSupply = () => {
         <div className="p-4 flex flex-col max-w-5xl w-full gap-3 items-start">
           <h6 className="text-2xl font-semibold">Editar itens do abrigo</h6>
           <p className="text-muted-foreground">
-            Para cada item da lista abaixo, informe a disponibilidade no abrigo
-            selecionado
+            Antes de adicionar um novo item, confira na busca abaixo se ele já não foi cadastrado.
           </p>
-          <Button
-            variant="ghost"
-            className="flex gap-2 text-blue-500 [&_svg]:stroke-blue-500 font-medium text-lg hover:text-blue-600"
-            onClick={() => navigate(`/abrigo/${shelterId}/item/cadastrar`)}
-          >
-            <PlusCircle />
-            Cadastrar novo item
-          </Button>
           <div className="w-full my-2">
-            <TextField
-              label="Buscar"
-              value={searchValue}
-              onChange={(ev) => {
-                setSearchValue(ev.target.value);
-                setSearch(ev.target.value);
+            <SupplySearch
+              supplyItems={searchedSupplies}
+              limit={5}
+              onSearch={(value) => 
+                setSearchSupplies(value)
+              }
+              onSelectItem={(item) =>  {
+                setSearch(item.name);
+                setSearchedSupplies([]);
               }}
+              onAddNewItem={() => navigate(`/abrigo/${shelterId}/item/cadastrar`)}
             />
           </div>
+
+          <p className="text-muted-foreground mt-3">
+            Para cada item da lista abaixo, informe a disponibilidade no abrigo selecionado. 
+          </p>
           <div className="flex flex-col gap-2 w-full my-4">
             {Object.entries(supplyGroups).map(([key, values], idx) => {
               const items: ISupplyRowItemProps[] = values