feat: added supporters page (#216)

* fix: conflicts with master branch

* feat: dev and staging gh actions

* feat: done supporters page

.github/workflows/dev.yml

@@ -0,0 +1,34 @@
+name: CI
+
+on:
+  push:
+    branches: [develop]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: setup node js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.18.x
+
+      - run: npm install
+
+      - name: Create .env file
+        run: |
+          touch .env
+          echo VITE_API_URL=${{ secrets.DEV_VITE_API_URL }} >> .env
+          cat .env
+
+      - run: npm run build
+
+      - uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: sa-east-1
+      - run: aws s3 sync ./dist s3://dev.sos-rs.com

.github/workflows/staging.yml

@@ -0,0 +1,34 @@
+name: CI
+
+on:
+  push:
+    branches: [staging]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: setup node js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.18.x
+
+      - run: npm install
+
+      - name: Create .env file
+        run: |
+          touch .env
+          echo VITE_API_URL=${{ secrets.STG_VITE_API_URL }} >> .env
+          cat .env
+
+      - run: npm run build
+
+      - uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: sa-east-1
+      - run: aws s3 sync ./dist s3://stg.sos-rs.com

src/components/BurgerMenu/BurgerMenu.tsx

@@ -3,6 +3,7 @@ import {
   CircleHelp,
   CirclePlus,
   DoorOpen,
+  HeartHandshake,
   Info,
   LinkIcon,
   Menu,
@@ -65,6 +66,11 @@ const BurgerMenu = () => {
             link="/politica-de-privacidade"
             icon={<Info className="w-4 h-4" />}
           />
+          <BurguerMenuItem
+            label="Apoiadores"
+            link="/apoiadores"
+            icon={<HeartHandshake className="w-4 h-4" />}
+          />
           <Separator />
           {partners.length > 0 && (
             <Fragment>

src/hooks/index.ts

@@ -11,6 +11,7 @@ import { useViaCep } from './useViaCep';
 import { usePartners } from './usePartners';
 import { useGithubContributors } from './useGithubContributors';
 import { useAuthRoles } from './useAuthRoles';
+import { useSupporters } from './useSupporters';
 
 export {
   useShelters,
@@ -26,4 +27,5 @@ export {
   usePartners,
   useGithubContributors,
   useAuthRoles,
+  useSupporters,
 };

src/hooks/useSupporters/index.ts

@@ -0,0 +1,3 @@
+import { useSupporters } from './useSupporters';
+
+export { useSupporters };

src/hooks/useSupporters/types.ts

@@ -0,0 +1,8 @@
+export interface ISupporter {
+  id: string;
+  name: string;
+  imageUrl: string;
+  link: string;
+  createdAt: string;
+  updatedAt?: string | null;
+}

src/hooks/useSupporters/useSupporters.tsx

@@ -0,0 +1,11 @@
+import { useFetch } from '../useFetch';
+import { ISupporter } from './types';
+
+const useSupporters = () => {
+  return useFetch<ISupporter[]>('/supporters', {
+    initialValue: [],
+    cache: true,
+  });
+};
+
+export { useSupporters };

src/pages/Supporters/Supporters.tsx

@@ -0,0 +1,41 @@
+import { BurgerMenu, Header, LoadingScreen } from '@/components';
+import WithTooltip from '@/components/ui/with-tooltip';
+import { useSupporters } from '@/hooks';
+import { Link } from 'react-router-dom';
+
+const Supporters = () => {
+  const { data: supporters, loading } = useSupporters();
+
+  if (loading) return <LoadingScreen />;
+
+  return (
+    <div className="flex flex-col h-screen items-center bg-gray-50 overflow-auto">
+      <Header title="SOS Rio Grande do Sul" startAdornment={<BurgerMenu />} />
+      <div className="flex flex-col gap-4 p-4 max-w-5xl pb-8 w-full">
+        <h2 className="text-4xl pt-4 font-semibold !text-zinc-900">
+          Apoiadores do projeto
+        </h2>
+        <div className="grid grid-cols-2 md:grid-cols-4 w-full gap-4 md:gap-8 mt-8">
+          {supporters
+            .sort((a, b) => a.createdAt.localeCompare(b.createdAt))
+            .map((supporter, idx) => (
+              <Link key={idx} to={supporter.link}>
+                <WithTooltip content={supporter.name}>
+                  <div className="bg-white flex flex-col gap-2 w-full aspect-square p-4 justify-between shadow-sm rounded-md hover:border-text hover:cursor-pointer">
+                    <div
+                      style={{
+                        backgroundImage: `url('${supporter.imageUrl}')`,
+                      }}
+                      className="flex-1 bg-center w-full bg-contain bg-no-repeat"
+                    />
+                  </div>
+                </WithTooltip>
+              </Link>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { Supporters };

src/pages/Supporters/index.ts

@@ -0,0 +1,3 @@
+import { Supporters } from './Supporters';
+
+export { Supporters };

src/pages/index.ts

@@ -1,5 +1,4 @@
 import { SignIn } from './SignIn';
-
 import { Home } from './Home';
 import { Shelter } from './Shelter';
 import { EditShelterSupply } from './EditShelterSupply';
@@ -8,6 +7,7 @@ import { CreateShelter } from './CreateShelter';
 import { UpdateShelter } from './UpdateShelter';
 import { PrivacyPolicy } from './PrivacyPolicy';
 import { AboutUs } from './AboutUs';
+import { Supporters } from './Supporters';
 
 export {
   SignIn,
@@ -19,4 +19,5 @@ export {
   UpdateShelter,
   PrivacyPolicy,
   AboutUs,
+  Supporters,
 };

src/routes/Routes.tsx

@@ -10,6 +10,7 @@ import {
   UpdateShelter,
   PrivacyPolicy,
   AboutUs,
+  Supporters,
 } from '@/pages';
 
 const Routes = () => {
@@ -27,6 +28,7 @@ const Routes = () => {
       <Route path="/entrar" element={<SignIn />} />
       <Route path="/politica-de-privacidade" element={<PrivacyPolicy />} />
       <Route path="/sobre-nos" element={<AboutUs />} />
+      <Route path="/apoiadores" element={<Supporters />} />
       <Route path="*" element={<Navigate to="/" />} />
     </Switch>
   );