Deploy to Master (#28)

* fix(readme): add proper command for starting dev server * refactor(status): rename "Sob controle" to "Não preciso" * fix(readme): add proper command for starting dev server * refactor(status): rename "Sob controle" to "Não preciso" * feat: added dedicated volunteers section to home and shelter pages * feat: add tags open graph and favicon * fix(readme): add proper command for starting dev server * refactor(status): rename "Sob controle" to "Não preciso" * Arrumar typo Co-authored-by: Elivelton Rodrigues <[email protected]> * 🐛 Fix reload button bug/reload * fix no unused vars lint error --------- Co-authored-by: alexiadorneles <[email protected]> Co-authored-by: José Geraldo D. F <[email protected]> Co-authored-by: Bruno Vinícius Barreiras de Oliveira <[email protected]> Co-authored-by: Elivelton Rodrigues <[email protected]> Co-authored-by: Rafael Bruno Albuquerque <[email protected]> Co-authored-by: Luciano Lima <[email protected]>
SOS-RS · May 9, 2024 · 06975e4 · 06975e4
1 parent 359b2a1
commit 06975e4
Show file tree

Hide file tree

Showing 20 changed files with 138 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -43,7 +43,7 @@ Para executar o frontend do aplicativo em seu ambiente local, siga os passos aba
    ```
 4. Inicie o servidor de desenvolvimento:
    ```
-   npm start
+   npm run dev
    ```
    O app estará disponível em `http://localhost:3000`.
 

diff --git a/index.html b/index.html
@@ -1,16 +1,41 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
-    />
-    <title>SOS - Rio Grande do Sul</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+<html lang="pt-br">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <meta name="description"
+    content="Encontre abrigos e recursos para ajudar durante enchentes no Rio Grande do Sul. O SOS Rio Grande do Sul oferece informações sobre locais de abrigo, doações e suporte para vítimas de enchentes.">
+  <meta name="keywords"
+    content="SOS Rio Grande do Sul, enchentes, abrigos, ajuda, doações, Rio Grande do Sul, sul do Brasil">
+  <meta name="author" content="SOS-RS">
+
+  <meta property="og:title" content="SOS - Rio Grande do Sul">
+  <meta property="og:description"
+    content="Encontre abrigos e recursos para ajudar durante enchentes no Rio Grande do Sul. O SOS Rio Grande do Sul oferece informações sobre locais de abrigo, doações e suporte para vítimas de enchentes.">
+  <meta property="og:image" content="https://sos-rs.com/sos.png">
+  <meta property="og:url" content="https://sos-rs.com">
+  <meta property="og:type" content="website">
+
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="SOS - Rio Grande do Sul">
+  <meta name="twitter:description"
+    content="Encontre abrigos e recursos para ajudar durante enchentes no Rio Grande do Sul. O SOS Rio Grande do Sul oferece informações sobre locais de abrigo, doações e suporte para vítimas de enchentes.">
+  <meta name="twitter:image" content="https://sos-rs.com/sos.png">
+
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="manifest" href="/site.webmanifest">
+
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" />
+  <title>SOS - Rio Grande do Sul</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/public/sos.png b/public/sos.png
diff --git a/src/components/ShelterListItem/ShelterListItem.tsx b/src/components/ShelterListItem/ShelterListItem.tsx
@@ -4,11 +4,10 @@ import { useNavigate } from 'react-router-dom';
 import { ChevronRight } from 'lucide-react';
 
 import { IShelterListItemProps, IShelterAvailabilityProps } from './types';
-import { cn, getAvailabilityProps, getSupplyPriorityProps } from '@/lib/utils';
+import { cn, getAvailabilityProps, getCategoriesToFilterVolunteers, getSupplyPriorityProps } from '@/lib/utils';
 import { Separator } from '../ui/separator';
 import { Chip } from '../Chip';
 import { Button } from '../ui/button';
-import { SupplyPriority } from '@/service/supply/types';
 import { VerifiedBadge } from '@/components/VerifiedBadge/VerifiedBadge.tsx';
 
 const ShelterListItem = (props: IShelterListItemProps) => {
@@ -22,13 +21,20 @@ const ShelterListItem = (props: IShelterListItemProps) => {
     );
 
   const tags = useMemo(
-    () =>
-      data.shelterSupplies
-        .filter((s) => s.priority >= SupplyPriority.Needing)
-        .sort((a, b) => b.priority - a.priority),
+    () => {
+      return data.shelterSupplies?.filter((s) => !getCategoriesToFilterVolunteers().some(c => c.includes(s.supply?.supplyCategory?.name.toLowerCase())))
+        .sort((a, b) => b.priority - a.priority).slice(0, 10)
+    },
     [data.shelterSupplies]
   );
 
+  const volunteerTags = useMemo(
+    () => {
+      return data.shelterSupplies?.filter((s) => getCategoriesToFilterVolunteers().some(c => c.includes(s.supply?.supplyCategory?.name.toLowerCase()))).reverse()
+    },
+    [data.shelterSupplies]
+  )
+
   return (
     <div className="flex flex-col p-4 w-full border-2 border-border rounded-md gap-1 relative">
       <Button
@@ -57,21 +63,41 @@ const ShelterListItem = (props: IShelterListItemProps) => {
         {data.address}
       </h6>
       {data.shelterSupplies.length > 0 && (
-        <div className="flex flex-col gap-3">
-          <Separator className="mt-2" />
-          <p className="text-muted-foreground text-sm md:text-lg font-medium">
-            Precisa urgente de doações de:
-          </p>
-          <div className="flex gap-2 flex-wrap">
-            {tags.map((s, idx) => (
-              <Chip
-                className={getSupplyPriorityProps(s.priority).className}
-                key={idx}
-                label={s.supply.name}
-              />
-            ))}
+        <>
+          <div className="flex flex-col gap-3">
+            <Separator className="mt-2" />
+            <p className="text-muted-foreground text-sm md:text-lg font-medium">
+              Status voluntários:
+            </p>
+            <div className="flex gap-2 flex-wrap">
+              {volunteerTags.length == 0 ?
+                <p> Não informado. <i> (Pode ser adicionado ao clicar no abrigo) </i></p>
+                :
+                volunteerTags.map((s, idx) => (
+                  <Chip
+                    className={getSupplyPriorityProps(s.priority).className}
+                    key={idx}
+                    label={s.supply.name}
+                  />
+                ))}
+            </div>
+          </div>
+          <div className="flex flex-col gap-3">
+            <Separator className="mt-2" />
+            <p className="text-muted-foreground text-sm md:text-lg font-medium">
+              Necessita urgente de doações de:
+            </p>
+            <div className="flex gap-2 flex-wrap">
+              {tags.map((s, idx) => (
+                <Chip
+                  className={getSupplyPriorityProps(s.priority).className}
+                  key={idx}
+                  label={s.supply.name}
+                />
+              ))}
+            </div>
           </div>
-        </div>
+        </>
       )}
       {data.updatedAt && (
         <small className="text-sm md:text-md font-light text-muted-foreground mt-2">

diff --git a/src/hooks/useShelters/types.ts b/src/hooks/useShelters/types.ts
@@ -17,7 +17,7 @@ export interface IUseSheltersData {
 }
 
 export interface IUseSheltersDataSupplyData {
-  supply: { name: string };
+  supply: { name: string, supplyCategory: { name: string}};
   priority: number;
 }
 

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -12,7 +12,7 @@ function cn(...inputs: ClassValue[]) {
 function variantStatusPriority(priority: SupplyPriority) {
   if (priority === SupplyPriority.Needing) return 'danger';
   if (priority === SupplyPriority.Urgent) return 'warn';
-  if (priority === SupplyPriority.UnderControl) return 'alert';
+  if (priority === SupplyPriority.NotNeeded) return 'alert';
   if (priority === SupplyPriority.Remaining) return 'success';
 }
 
@@ -22,7 +22,7 @@ function variantStatusPriority(priority: SupplyPriority) {
 const colorStatusPriority = (priority: SupplyPriority) => {
   if (priority === SupplyPriority.Needing) return 'bg-[#f69f9d]';
   if (priority === SupplyPriority.Urgent) return 'bg-[#f8b993]';
-  if (priority === SupplyPriority.UnderControl) return 'bg-[#f9cf8d]';
+  if (priority === SupplyPriority.NotNeeded) return 'bg-[#f9cf8d]';
   if (priority === SupplyPriority.Remaining) return 'bg-[#63bc43]';
 };
 
@@ -32,7 +32,7 @@ const colorStatusPriority = (priority: SupplyPriority) => {
 function nameStatusPriority(priority: SupplyPriority) {
   if (priority === SupplyPriority.Needing) return 'Precisa urgentimente';
   if (priority === SupplyPriority.Urgent) return 'Precisa';
-  if (priority === SupplyPriority.UnderControl) return 'Sob-controle';
+  if (priority === SupplyPriority.NotNeeded) return 'Não preciso';
   if (priority === SupplyPriority.Remaining) return 'Disponível para doação';
 }
 
@@ -60,10 +60,10 @@ function getAvailabilityProps(
 
 function getSupplyPriorityProps(priority: SupplyPriority) {
   switch (priority) {
-    case SupplyPriority.UnderControl:
+    case SupplyPriority.NotNeeded:
       return {
-        label: 'Sob controle',
-        className: 'bg-light-yellow',
+        label: 'Não preciso',
+        className: 'bg-gray-200',
       };
     case SupplyPriority.Remaining:
       return {
@@ -106,6 +106,10 @@ function group<T extends Record<string, any>>(
   return data;
 }
 
+function getCategoriesToFilterVolunteers(): string[] {
+  return ['voluntariado', 'especialistas e profissionais']
+}
+
 export {
   cn,
   getAvailabilityProps,
@@ -114,4 +118,5 @@ export {
   variantStatusPriority,
   colorStatusPriority,
   nameStatusPriority,
+  getCategoriesToFilterVolunteers,
 };
diff --git a/src/pages/CreateSupply/CreateSupply.tsx b/src/pages/CreateSupply/CreateSupply.tsx
@@ -37,7 +37,7 @@ const CreateSupply = () => {
       name: '',
       supplyCategoryId: supplyCategories?.at(0)?.id ?? '-1',
       shelterId,
-      priority: SupplyPriority.UnderControl,
+      priority: SupplyPriority.NotNeeded,
     },
     enableReinitialize: true,
     validateOnBlur: false,
@@ -151,7 +151,7 @@ const CreateSupply = () => {
                     SupplyPriority.Urgent,
                     SupplyPriority.Needing,
                     SupplyPriority.Remaining,
-                    SupplyPriority.UnderControl,
+                    SupplyPriority.NotNeeded,
                   ].map((priority) => {
                     const { className, label } =
                       getSupplyPriorityProps(priority);

diff --git a/src/pages/EditShelterSupply/EditShelterSupply.tsx b/src/pages/EditShelterSupply/EditShelterSupply.tsx
@@ -59,7 +59,7 @@ const EditShelterSupply = () => {
       console.log('Item: ', item);
       setModalOpened(true);
       setModalData({
-        value: `${item.priority ?? SupplyPriority.UnderControl}`,
+        value: `${item.priority ?? SupplyPriority.NotNeeded}`,
         onSave: (v) => {
           const isNewSupply = item.priority === undefined;
           setLoadingSave(true);
@@ -125,14 +125,14 @@ const EditShelterSupply = () => {
               label: 'Precisa',
               value: `${SupplyPriority.Needing}`,
             },
-            {
-              label: 'Sob controle',
-              value: `${SupplyPriority.UnderControl}`,
-            },
             {
               label: 'Disponível para doação',
               value: `${SupplyPriority.Remaining}`,
             },
+            {
+              label: 'Remover item',
+              value: `${SupplyPriority.NotNeeded}`,
+            },
           ]}
           isSubmitting={loadingSave}
           {...modalData}

diff --git a/src/pages/EditShelterSupply/components/SupplyRow/SupplyRow.tsx b/src/pages/EditShelterSupply/components/SupplyRow/SupplyRow.tsx
@@ -13,7 +13,7 @@ const SupplyRow = (props: ISupplyRowProps) => {
           <SupplyRowInfo
             key={idy}
             name={item.name}
-            priority={item.priority ?? SupplyPriority.UnderControl}
+            priority={item.priority ?? SupplyPriority.NotNeeded}
             onClick={() => (onClick ? onClick(item) : undefined)}
           />
         ))}

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -94,7 +94,7 @@ const Home = () => {
               loading={loading}
               variant="ghost"
               size="sm"
-              onClick={() => search()}
+              onClick={() => clearSearch()}
               className="disabled:bg-red-500 hover:bg-red-400"
             >
               <RotateCw size={20} className="stroke-white" />

diff --git a/src/pages/Shelter/Shelter.tsx b/src/pages/Shelter/Shelter.tsx
@@ -2,15 +2,16 @@ import { useMemo } from 'react';
 import { ChevronLeft, Pencil } from 'lucide-react';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { CardAboutShelter, Header, LoadingScreen } from '@/components';
+import { CardAboutShelter, Chip, Header, LoadingScreen } from '@/components';
 import { useShelter } from '@/hooks';
 import { IShelterAvailabilityProps } from '@/components/ShelterListItem/types';
-import { cn, getAvailabilityProps, group } from '@/lib/utils';
+import { cn, getAvailabilityProps, getCategoriesToFilterVolunteers, getSupplyPriorityProps, group } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { ShelterCategoryItems } from './components';
 import { IShelterCategoryItemsProps } from './components/ShelterCategoryItems/types';
 import { SupplyPriority } from '@/service/supply/types';
 import { VerifiedBadge } from '@/components/VerifiedBadge/VerifiedBadge.tsx';
+import { IUseShelterDataSupply } from '@/hooks/useShelter/types';
 
 const Shelter = () => {
   const params = useParams();
@@ -20,8 +21,9 @@ const Shelter = () => {
   const { data: shelters } = useShelter(id);
 
   const shelterCategories: IShelterCategoryItemsProps[] = useMemo(() => {
-    const grouped = group(shelters?.shelterSupplies ?? [], 'priority');
-    delete grouped[SupplyPriority.UnderControl];
+    const grouped = group(shelter?.shelterSupplies?.filter((s) => !getCategoriesToFilterVolunteers().some(c => c.includes(s.supply?.supplyCategory?.name?.toLowerCase()))) ?? [], 'priority');
+    delete grouped[SupplyPriority.NotNeeded];
+
     return Object.entries(grouped)
       .sort(([a], [b]) => (+a > +b ? -1 : 1))
       .map(([key, values]) => ({
@@ -30,6 +32,10 @@ const Shelter = () => {
       }));
   }, [shelters.shelterSupplies]);
 
+  const volunteerTags: IUseShelterDataSupply[] = useMemo(() => {
+    return shelter?.shelterSupplies?.filter((s) => getCategoriesToFilterVolunteers().some(c => c.includes(s.supply?.supplyCategory?.name?.toLowerCase()))).reverse()
+  }, [shelter.shelterSupplies])
+
   const { availability, className: availabilityClassName } =
     useMemo<IShelterAvailabilityProps>(
       () => getAvailabilityProps(shelter?.capacity, shelter?.shelteredPeople),
@@ -93,6 +99,23 @@ const Shelter = () => {
           </div>
         </div>
         <div className="flex flex-col gap-8 p-4 ">
+
+        <div className="flex flex-col gap-3">
+            <div className="flex gap-2 items-center">
+              <h3>
+                Voluntários
+              </h3>
+            </div>
+            <div className="flex gap-2 flex-wrap">
+              {volunteerTags.map((v, idx) => (
+                <Chip
+                  className={getSupplyPriorityProps(v.priority).className}
+                  key={idx}
+                  label={v.supply.name}
+                />
+              ))}
+            </div>
+          </div>
           {shelterCategories.map((categoryProps, idx) => (
             <ShelterCategoryItems key={idx} {...categoryProps} />
           ))}

diff --git a/src/pages/Shelter/components/ShelterCategoryItems/ShelterCategoryItems.tsx b/src/pages/Shelter/components/ShelterCategoryItems/ShelterCategoryItems.tsx
@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/button';
 import { SupplyPriority } from '@/service/supply/types';
 
 const ShelterCategoryItems = (props: IShelterCategoryItemsProps) => {
-  const { priority = SupplyPriority.UnderControl, tags } = props;
+  const { priority = SupplyPriority.NotNeeded, tags } = props;
   const [opened, setOpened] = useState<boolean>(false);
   const maxVisibleTags: number = 10;
   const visibleTags = useMemo(

diff --git a/src/service/supply/types.ts b/src/service/supply/types.ts
@@ -1,5 +1,5 @@
 export enum SupplyPriority {
-  UnderControl = 0,
+  NotNeeded = 0,
   Remaining = 1,
   Needing = 10,
   Urgent = 100,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}