feat: add PetsRs link to shelter card (#302)

* feat: add PetsRs link to shelter card

* Add style to link

* refactor: simplify clear shelter name logic

src/components/CardAboutShelter/CardAboutShelter.tsx

@@ -7,23 +7,40 @@ import {
   Smartphone,
   Building,
   MapPinned,
+  Link,
 } from 'lucide-react';
 
 import { Card } from '../ui/card';
 import { ICardAboutShelter } from './types';
 import { InfoRow } from './components';
-import { checkAndFormatAddress } from './utils';
+import { checkAndFormatAddress, getShelterNameBeforeSeparator } from './utils';
 import { ShelterCategory } from '@/hooks/useShelter/types';
 import { Fragment } from 'react/jsx-runtime';
+import { PetsRsShelterServices } from '@/service/petsRsShelter/petsRsShelter.service';
+import { useEffect, useState } from 'react';
 
 const CardAboutShelter = (props: ICardAboutShelter) => {
   const { shelter } = props;
+  const [ petsRsShelterUrl, setPetsRsShelterUrl ] = useState('');
 
   const check = (v?: string | number | boolean | null) => {
     return v !== undefined && v !== null;
   };
-  const formatAddress = checkAndFormatAddress(shelter, false);
 
+  const getPetsRsShelterUrl = async (name: string) => {
+    const cleanShelterName = getShelterNameBeforeSeparator(name);
+    const data  = await PetsRsShelterServices.getByName(cleanShelterName);
+    const petsRsShelterUrl = data?.id ? `https://petsrs.com.br/abrigo/${data.id}` : 'https://petsrs.com.br/abrigos';
+    return petsRsShelterUrl;
+  };
+
+  useEffect(() => {
+      if(shelter.petFriendly) {
+        getPetsRsShelterUrl(shelter.name).then((url) => setPetsRsShelterUrl(url) );
+      }
+  },[shelter.petFriendly, shelter.name]);
+
+  const formatAddress = checkAndFormatAddress(shelter, false);
   return (
     <Card className="flex flex-col gap-2 p-4 bg-[#E8F0F8] text-sm">
       <div className="text-[#646870] font-medium">Sobre o abrigo</div>
@@ -89,6 +106,16 @@ const CardAboutShelter = (props: ICardAboutShelter) => {
           value={check(shelter.pix) ? `${shelter.pix}` : 'Não informado'}
           clipboardButton={check(shelter.pix)}
         />
+      {(petsRsShelterUrl != '') ? (
+          <InfoRow
+            icon={<Link />}
+            label={
+              <a target="_blank" href={petsRsShelterUrl} className="font-semibold text-blue-600">
+                Confira o abrigo em petsrs.com.br
+              </a>
+            }
+          />
+        ) : ''}
       </div>
     </Card>
   );

src/components/CardAboutShelter/utils.ts

@@ -25,4 +25,8 @@ const checkAndFormatAddress = (
   );
 };
 
-export { checkAndFormatAddress };
+function getShelterNameBeforeSeparator(input: string): string {
+  return input.replace(/[(\-[{].*$/, '');
+}
+
+export { checkAndFormatAddress, getShelterNameBeforeSeparator };

src/service/petsRsShelter/petsRsShelter.service.ts

@@ -0,0 +1,12 @@
+import axios from 'axios';
+
+import { IPetsRsShelter } from './types';
+
+const PetsRsShelterServices = {
+  getByName: async (name: string): Promise<IPetsRsShelter> => {
+    const { data } = await axios.get(`https://cms.petsrs.com.br/api/abrigos?filters[Nome][$containsi]=${name}`);
+    return data?.data[0];
+  },
+}
+
+export { PetsRsShelterServices };

src/service/petsRsShelter/types.ts

@@ -0,0 +1,18 @@
+export interface Attributes {
+  Nome: string;
+  Endereco: string;
+  Longitude: string;
+  Latitude: string;
+  createdAt: string;
+  updatedAt: string;
+  publishedAt: string;
+  Telefone: string | null;
+  nome_responsavel: string | null;
+  instagramUrl: string | null;
+  observacao: string | null;
+}
+
+export interface IPetsRsShelter {
+  id: number;
+  attributes: Attributes;
+}