Skip to content

Commit f36796c

Browse files
maneljrmaneljr
committed
feat: added update shelder page
1 parent 4cccae0 commit f36796c

File tree

10 files changed

+193
-13
lines changed

10 files changed

+193
-13
lines changed

‎src/pages/CreateShelter/CreateShelter.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import {
1313
import { Header, TextField } from '@/components';
1414
import { Button } from '@/components/ui/button';
1515
import { ICreateShelter } from '@/service/shelter/types';
16+
import { toast } from '@/components/ui/use-toast';
17+
import { ShelterServices } from '@/service';
1618

1719
const CreateShelter = () => {
1820
const navigate = useNavigate();
@@ -42,8 +44,19 @@ const CreateShelter = () => {
4244
address: Yup.string().required('Este campo deve ser preenchido'),
4345
}),
4446
onSubmit: async (values) => {
45-
//criar endpoint
46-
console.log(values);
47+
try {
48+
await ShelterServices.create(values);
49+
toast({
50+
title: 'Cadastro feita com sucesso',
51+
});
52+
navigate(`/abrigo/cadastrar`);
53+
} catch (err: any) {
54+
toast({
55+
variant: 'destructive',
56+
title: 'Ocorreu um erro ao tentar cadastrar',
57+
description: `${err?.response?.data?.message ?? err}`,
58+
});
59+
}
4760
},
4861
});
4962

@@ -92,6 +105,7 @@ const CreateShelter = () => {
92105

93106
<TextField
94107
type="number"
108+
min="0"
95109
label="Quantidade de pessoas abrigadas"
96110
{...getFieldProps('shelteredPeople')}
97111
error={!!errors.shelteredPeople}
@@ -100,6 +114,7 @@ const CreateShelter = () => {
100114

101115
<TextField
102116
type="number"
117+
min="0"
103118
label="Capacidade do abrigo"
104119
{...getFieldProps('capacity')}
105120
error={!!errors.capacity}

‎src/pages/Shelter/Shelter.tsx‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,22 +55,33 @@ const Shelter = () => {
5555
<h1 className="text-[#2f2f2f] font-semibold text-2xl">
5656
{shelter.name}
5757
</h1>
58-
<h1 className={cn(availabilityClassName, 'font-semibold')}>
59-
{availability}
60-
</h1>
58+
<div className="flex flex-1 items-center justify-between">
59+
<h1 className={cn(availabilityClassName, 'font-semibold')}>
60+
{availability}
61+
</h1>
62+
<Button
63+
variant="ghost"
64+
className="font-medium text-[16px] text-blue-600 flex gap-2 items-center hover:text-blue-500 active:text-blue-700"
65+
onClick={() => navigate(`/abrigo/atualizar/${id}`)}
66+
>
67+
Editar abrigo
68+
<Pencil size={17} className="stroke-blue-600" />
69+
</Button>
70+
</div>
71+
6172
<div className="p-4">
6273
<CardAboutShelter shelter={shelter} />
6374
</div>
6475
<div className="flex justify-between p-4 items-center">
6576
<h1 className="font-semibold text-[18px]">Itens do abrigo</h1>
66-
<div className="flex gap-2 items-center [&_svg]:stroke-blue-600">
77+
<div className="flex gap-2 items-center ">
6778
<Button
6879
variant="ghost"
6980
className="font-medium text-[16px] text-blue-600 flex gap-2 items-center hover:text-blue-500 active:text-blue-700"
7081
onClick={() => navigate(`/abrigo/${id}/items`)}
7182
>
7283
Editar itens
73-
<Pencil size={17} />
84+
<Pencil size={17} className="stroke-blue-600" />
7485
</Button>
7586
</div>
7687
</div>

‎src/pages/SignIn/SignIn.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,12 @@ const SignIn = () => {
3535
const onSubmit = useCallback(async () => {}, [refreshSession]);
3636

3737
return (
38-
<div className="flex h-screen justify-center ">
39-
<div className="flex flex-col justify-center gap-4 max-w-lg w-full p-10">
38+
<div className="flex h-screen justify-center items-center md:bg-slate-100">
39+
<div className="flex flex-col justify-center gap-4 max-w-lg w-full p-10 bg-white max-h-[600px]">
4040
<Form {...form}>
4141
<form onSubmit={form.handleSubmit(onSubmit)} className="contents">
4242
<div className="justify-center flex md:justify-normal">
43-
<h1 className="font-bold text-4xl">SOS-RS</h1>
43+
<h1 className="font-bold text-4xl text-red-600">SOS-RS</h1>
4444
</div>
4545
<span>Preencha abaixo as credenciais de acesso.</span>
4646
<FormField
@@ -83,7 +83,7 @@ const SignIn = () => {
8383
type="submit"
8484
className="min-h-[48px] rouded-[4px] bg-slate-800 hover:bg-slate-950 "
8585
>
86-
<span className="text-sm font-medium tracking-widest ">
86+
<span className="text-sm font-medium tracking-widest text-white">
8787
Entrar
8888
</span>
8989
</Button>

‎src/pages/UpdateShelter/UpdateShelter.tsx‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import { ChevronLeft } from 'lucide-react';
2+
import { useNavigate, useParams } from 'react-router-dom';
3+
import { useFormik } from 'formik';
4+
import * as Yup from 'yup';
5+
6+
import { Header, LoadingScreen, TextField } from '@/components';
7+
import { Button } from '@/components/ui/button';
8+
9+
import { toast } from '@/components/ui/use-toast';
10+
import { ShelterServices } from '@/service';
11+
import { useShelter } from '@/hooks';
12+
import { IUpdateShelter } from '@/service/shelter/types';
13+
14+
const UpdateShelter = () => {
15+
const navigate = useNavigate();
16+
const params = useParams();
17+
const { id } = params;
18+
const { data: shelter, loading } = useShelter(id ?? '-1');
19+
20+
const { errors, getFieldProps, isSubmitting, handleSubmit } =
21+
useFormik<IUpdateShelter>({
22+
initialValues: {
23+
address: shelter.address,
24+
shelteredPeople: shelter.shelteredPeople ?? 0,
25+
capacity: shelter.capacity ?? 0,
26+
contact: shelter.contact ?? '',
27+
},
28+
enableReinitialize: true,
29+
validateOnBlur: false,
30+
validateOnChange: false,
31+
validateOnMount: false,
32+
validationSchema: Yup.object().shape({
33+
address: Yup.string().required('Este campo deve ser preenchido'),
34+
shelteredPeople: Yup.number().required(
35+
'Este campo deve ser preenchido'
36+
),
37+
capacity: Yup.number().required('Este campo deve ser preenchido'),
38+
contact: Yup.string().required('Este campo deve ser preenchido'),
39+
}),
40+
onSubmit: async (values) => {
41+
try {
42+
const data = await ShelterServices.update(id ?? '', values);
43+
console.log(data);
44+
toast({
45+
title: 'Atualização feita com sucesso',
46+
});
47+
navigate(`/abrigo/${id}`);
48+
} catch (err: any) {
49+
toast({
50+
variant: 'destructive',
51+
title: 'Ocorreu um erro ao tentar atualizar',
52+
description: `${err?.response?.data?.message ?? err}`,
53+
});
54+
}
55+
},
56+
});
57+
58+
if (loading) return <LoadingScreen />;
59+
60+
return (
61+
<div className="flex flex-col h-screen items-center">
62+
<Header
63+
title="Atualização cadastral"
64+
className="bg-white [&_*]:text-zinc-800 border-b-[1px] border-b-border"
65+
startAdornment={
66+
<Button
67+
variant="ghost"
68+
className="[&_svg]:stroke-blue-500"
69+
onClick={() => navigate(-1)}
70+
>
71+
<ChevronLeft size={20} />
72+
</Button>
73+
}
74+
/>
75+
<div className="p-4 flex flex-col max-w-5xl w-full gap-3 items-start h-full">
76+
<form className="contents" onSubmit={handleSubmit}>
77+
<h6 className="text-2xl font-semibold">Atualizar abrigo</h6>
78+
<p className="text-muted-foreground">
79+
Atualize as informações desejadas sobre o abrigo.
80+
</p>
81+
<div className=" flex flex-col max-w-5xl w-full gap-6 items-start">
82+
<TextField
83+
label="Endereço do abrigo"
84+
{...getFieldProps('address')}
85+
error={!!errors.address}
86+
helperText={errors.address}
87+
/>
88+
89+
<TextField
90+
label="Contato"
91+
{...getFieldProps('contact')}
92+
error={!!errors.contact}
93+
helperText={errors.contact}
94+
/>
95+
96+
<TextField
97+
type="number"
98+
label="Quantidade de pessoas abrigadas"
99+
{...getFieldProps('shelteredPeople')}
100+
error={!!errors.shelteredPeople}
101+
helperText={errors.shelteredPeople}
102+
/>
103+
104+
<TextField
105+
type="number"
106+
label="Capacidade do abrigo"
107+
{...getFieldProps('capacity')}
108+
error={!!errors.capacity}
109+
helperText={errors.capacity}
110+
/>
111+
</div>
112+
113+
<div className="flex flex-1 flex-col justify-end md:justify-start w-full py-6">
114+
<Button
115+
loading={isSubmitting}
116+
type="submit"
117+
className="flex gap-2 text-white font-medium text-lg bg-blue-500 hover:bg-blue-600 w-full"
118+
>
119+
Atualizar
120+
</Button>
121+
</div>
122+
</form>
123+
</div>
124+
</div>
125+
);
126+
};
127+
128+
export { UpdateShelter };

‎src/pages/UpdateShelter/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { UpdateShelter } from './UpdateShelter';
2+
3+
export { UpdateShelter };

‎src/pages/UpdateShelter/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export {};

‎src/pages/index.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,14 @@ import { Shelter } from './Shelter';
55
import { ShelterItem } from './ShelterItem';
66
import { CreateSupply } from './CreateSupply';
77
import { CreateShelter } from './CreateShelter';
8+
import { UpdateShelter } from './UpdateShelter';
89

9-
export { SignIn, Home, Shelter, ShelterItem, CreateSupply, CreateShelter };
10+
export {
11+
SignIn,
12+
Home,
13+
Shelter,
14+
ShelterItem,
15+
CreateSupply,
16+
CreateShelter,
17+
UpdateShelter,
18+
};

‎src/routes/Routes.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,16 @@ import {
66
Home,
77
Shelter,
88
ShelterItem,
9+
SignIn,
10+
UpdateShelter,
911
} from '@/pages';
1012

1113
const Routes = () => {
1214
return (
1315
<Switch>
16+
<Route path="/signin" element={<SignIn />} />
1417
<Route path="/abrigo/:id" element={<Shelter />} />
18+
<Route path="/abrigo/atualizar/:id" element={<UpdateShelter />} />
1519
<Route path="/abrigo/cadastrar" element={<CreateShelter />} />
1620
<Route path="/abrigo/:shelterId/items" element={<ShelterItem />} />
1721
<Route

‎src/service/shelter/shelter.service.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@ const ShelterServices = {
1717
const { data } = await api.get<IServerResponse<IShelter[]>>('/shelters');
1818
return data.data;
1919
},
20+
getOne: async (id: string): Promise<IShelter> => {
21+
const { data } = await api.get<IServerResponse<IShelter>>(
22+
`/shelters/${id}`
23+
);
24+
return data.data;
25+
},
2026
update: async (
2127
id: string,
2228
payload: IUpdateShelter

‎src/service/shelter/types.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ export interface ICreateShelter
1515
extends Omit<IShelter, 'id' | 'createdAt' | 'updatedAt'> {}
1616

1717
export interface IUpdateShelter
18-
extends Pick<IShelter, 'shelteredPeople' | 'capacity' | 'petFriendly'> {}
18+
extends Pick<
19+
IShelter,
20+
'shelteredPeople' | 'capacity' | 'address' | 'contact'
21+
> {}
1922

2023
export interface IFullUpdateShelter
2124
extends Omit<IShelter, 'id' | 'createdAt' | 'updatedAt'> {}

0 commit comments

Comments
 (0)