diff --git a/src/app/shelter/page.tsx b/src/app/shelter/page.tsx
index 47d1034..37d3b06 100644
--- a/src/app/shelter/page.tsx
+++ b/src/app/shelter/page.tsx
@@ -1,5 +1,6 @@
"use client";
+import { useState } from "react";
import { useForm } from "react-hook-form";
import { Loader2 } from "lucide-react";
import { toast } from "sonner";
@@ -27,8 +28,11 @@ import {
useShelterContext,
} from "~/contexts/ShelterContext";
import { Card as CardBase, CardContent } from "~/components/ui/card";
+import { googleMaps } from "~/lib/google-maps";
function Shelter() {
+ const [isGettingCoordinates, setIsGettingCoordinates] =
+ useState
(false);
const { shelter } = useShelterContext();
const form = useForm>({
resolver: zodResolver(shelterSchema),
@@ -60,15 +64,40 @@ function Shelter() {
},
});
const isLoading =
- createShelter.isPending || updateCurrentUserShelter.isPending;
+ createShelter.isPending ||
+ updateCurrentUserShelter.isPending ||
+ isGettingCoordinates;
const isEditing = !!shelter;
const hasModifiedInputs = Object.keys(form.formState.dirtyFields).length > 0;
async function onSubmit(values: z.infer) {
- if (isEditing) {
- updateCurrentUserShelter.mutate(values);
- } else {
- createShelter.mutate(values);
+ try {
+ setIsGettingCoordinates(true);
+ const { street, number, city, state } = values.address;
+ const coordinates = await googleMaps.coordinates({
+ street,
+ number,
+ city,
+ state,
+ });
+
+ const shelter = {
+ ...values,
+ address: {
+ ...values.address,
+ latitude: coordinates?.lat,
+ longitude: coordinates?.lng,
+ },
+ };
+
+ const mutation = isEditing ? updateCurrentUserShelter : createShelter;
+ mutation.mutate(shelter);
+ } catch (error) {
+ toast.error(
+ "Ops! Houve um erro ao buscar as coordenadas do endereço e o abrigo não foi criado. Tente novamente!.",
+ );
+ } finally {
+ setIsGettingCoordinates(false);
}
}
diff --git a/src/components/card/index.tsx b/src/components/card/index.tsx
index 7ec48e6..714e71f 100644
--- a/src/components/card/index.tsx
+++ b/src/components/card/index.tsx
@@ -13,15 +13,15 @@ import { unmaskPhone, unmaskSocialMedia } from "~/lib/masks";
type Props = {
shelter: Shelter;
-};
+} & React.ComponentProps;
-export function Card({ shelter }: Props) {
+export function Card({ shelter, ...otherProps }: Props) {
const fullAddress = `${shelter.addressStreet} ${shelter.addressNumber} ${shelter.addressNeighborhood}, ${shelter.addressCity}, ${shelter.addressState}`;
const availableVacancies = shelter.capacity - shelter.occupancy;
return (
-
+
{shelter.name}
{availableVacancies > 0 ? (
@@ -69,7 +69,7 @@ export function Card({ shelter }: Props) {
)}
-
+
(
@@ -28,6 +29,14 @@ export function Header() {
Sobre
+
+
+
);
diff --git a/src/components/header/sidebar/index.tsx b/src/components/header/sidebar/index.tsx
index 632ba10..017bf69 100644
--- a/src/components/header/sidebar/index.tsx
+++ b/src/components/header/sidebar/index.tsx
@@ -59,6 +59,13 @@ export function Sidebar() {
+