Skip to content

Commit c365271

Browse files
fagundesjgmarcodmc
fagundesjg
authored and
marcodmc
committed
Feat/partners (SOS-RS#155)
* fix: menu bar with api partners * fix: menu bar with api partners * fix: remove unused session in burguer menu / removed import all icons from lucide and use link icon instead custom icons
1 parent 63d39fe commit c365271

File tree

12 files changed

+139
-109
lines changed

12 files changed

+139
-109
lines changed

‎src/components/BurgerMenu/BurgerMenu.tsx‎

Lines changed: 68 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,87 @@
1-
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
2-
import { IBurgerMenu, IPartnerLink } from './types';
1+
import { Fragment, useCallback, useContext } from 'react';
32
import {
43
CircleHelp,
54
CirclePlus,
6-
DoorClosed,
75
DoorOpen,
8-
Link as LinkIcon,
6+
Info,
7+
LinkIcon,
98
Menu,
10-
User,
119
} from 'lucide-react';
12-
import { Link } from 'react-router-dom';
1310

14-
const BurgerMenu = (props: IBurgerMenu) => {
15-
const { session } = props;
16-
const partnerLinks: IPartnerLink[] = [];
17-
const logout = () => {
18-
localStorage.removeItem('token');
19-
window.location.href = '/';
20-
};
11+
import { SessionServices } from '@/service';
12+
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
13+
import { BurguerMenuItem } from './components';
14+
import { Separator } from '../ui/separator';
15+
import { SessionContext } from '@/contexts';
16+
import { usePartners } from '@/hooks';
17+
18+
const BurgerMenu = () => {
19+
const { session } = useContext(SessionContext);
20+
const { data: partners } = usePartners();
21+
22+
const logout = useCallback(() => {
23+
SessionServices.logout()
24+
.then(() => {
25+
localStorage.removeItem('token');
26+
window.location.href = '/';
27+
})
28+
.catch((err) => {
29+
console.log(`Erro ao realizar logout: ${err}`);
30+
});
31+
}, []);
32+
2133
return (
2234
<Sheet>
2335
<SheetTrigger>
2436
<Menu color="white" className="ml-2 mr-2" />
2537
</SheetTrigger>
26-
<SheetContent side={'left'} className="pt-[96px] flex flex-col">
27-
<div className="flex">
28-
<ul className="flex flex-col text-base">
29-
{session ? (
30-
<li className="inline-flex items-center mb-5">
31-
<User className="mr-2" />
38+
<SheetContent side="left" className="pt-[96px] flex flex-col">
39+
<div className="flex flex-col gap-4">
40+
{session && (
41+
<Fragment>
42+
<div className="inline-flex items-center text-semibold">
3243
Olá, {session.name}
33-
</li>
34-
) : (
35-
<Link to={'/entrar'} className="hover:font-semibold">
36-
<li className="inline-flex items-center mb-5">
37-
<DoorClosed className="mr-2" />
38-
Entrar
39-
</li>
40-
</Link>
41-
)}
42-
<Link
43-
to={'https://forms.gle/2S7L2gR529Dc8P3T9'}
44-
target="_blank"
45-
className="hover:font-semibold"
46-
>
47-
<li className="inline-flex items-center mb-5">
48-
<CirclePlus className="mr-2" />
49-
Cadastrar Abrigo
50-
</li>
51-
</Link>
52-
<Link
53-
to={'https://www.instagram.com/reel/C613CfGuh4b'}
54-
target="_blank"
55-
className="hover:font-semibold"
56-
>
57-
<li className="inline-flex items-center mb-5">
58-
<CircleHelp className="mr-2" />
59-
Como Ajudar
60-
</li>
61-
</Link>
62-
</ul>
63-
{!!partnerLinks.length && (
64-
<>
65-
<div className="mt-5 text-sm text-gray-500">Links Úteis</div>
66-
<ul className="flex flex-col text-base">
67-
{partnerLinks.map((link, index) => (
68-
<Link
69-
key={index}
70-
to={link.url}
71-
target="_blank"
72-
className="hover:font-semibold"
73-
>
74-
<li className="inline-flex items-center mt-5">
75-
<LinkIcon className="mr-2" />
76-
{link.name}
77-
</li>
78-
</Link>
79-
))}
80-
</ul>
81-
</>
44+
</div>
45+
<Separator />
46+
</Fragment>
47+
)}
48+
<BurguerMenuItem
49+
label="Sobre nós"
50+
link="/sobre"
51+
icon={<Info className="w-4 h-4" />}
52+
/>
53+
<BurguerMenuItem
54+
label="Cadastrar abrigo"
55+
link="https://forms.gle/2S7L2gR529Dc8P3T9"
56+
icon={<CirclePlus className="w-4 h-4" />}
57+
/>
58+
<BurguerMenuItem
59+
label="Como Ajudar"
60+
link="https://www.instagram.com/reel/C613CfGuh4b"
61+
icon={<CircleHelp className="w-4 h-4" />}
62+
/>
63+
<BurguerMenuItem
64+
label="Política de Privacidade"
65+
link="/politica-privacidade"
66+
icon={<Info className="w-4 h-4" />}
67+
/>
68+
<Separator />
69+
{partners.length > 0 && (
70+
<Fragment>
71+
<span>Parcerias</span>
72+
{partners.map((partner, idx) => (
73+
<BurguerMenuItem
74+
key={idx}
75+
label={partner.name}
76+
link={partner.link}
77+
icon={<LinkIcon className="w-4 h-4" />}
78+
/>
79+
))}
80+
</Fragment>
8281
)}
8382
</div>
8483
{session && (
85-
<div className="mt-auto mb-8">
84+
<div className="mt-auto">
8685
<span
8786
className="inline-flex items-center hover:font-semibold cursor-pointer"
8887
onClick={logout}

‎src/components/BurgerMenu/components/BurguerMenuItem/BurguerMenuItem.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
3+
import { IBurguerMenuItemProps } from './types';
4+
import { cn } from '@/lib/utils';
5+
6+
const BurguerMenuItem = React.forwardRef<
7+
HTMLAnchorElement,
8+
IBurguerMenuItemProps
9+
>((props, ref) => {
10+
const { icon, label, onClick, link, className = '', ...rest } = props;
11+
12+
return (
13+
<a
14+
ref={ref}
15+
href={link}
16+
target="_blank"
17+
className={cn(
18+
'hover:font-semibold flex gap-2 items-center text-zinc-600 [&_svg]:stroke-zinc-500',
19+
className
20+
)}
21+
onClick={onClick}
22+
{...rest}
23+
>
24+
{icon}
25+
{label}
26+
</a>
27+
);
28+
});
29+
30+
export { BurguerMenuItem };

‎src/components/BurgerMenu/components/BurguerMenuItem/index.ts‎

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

‎src/components/BurgerMenu/components/BurguerMenuItem/types.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export interface IBurguerMenuItemProps
2+
extends React.ComponentPropsWithoutRef<'a'> {
3+
label: string;
4+
icon?: React.ReactNode;
5+
link?: string;
6+
onClick?: () => void;
7+
}

‎src/components/BurgerMenu/components/index.ts‎

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

‎src/components/BurgerMenu/types.ts‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/hooks/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useThrottle } from './useThrottle';
55
import { useShelter } from './useShelter';
66
import { useSupplyCategories } from './useSupplyCategories';
77
import { useSupplies } from './useSupplies';
8+
import { usePartners } from './usePartners';
89

910
export {
1011
useShelters,
@@ -14,4 +15,5 @@ export {
1415
useShelter,
1516
useSupplyCategories,
1617
useSupplies,
18+
usePartners,
1719
};

‎src/hooks/usePartners/index.ts‎

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

‎src/hooks/usePartners/types.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export interface IPartner {
2+
id: string;
3+
name: string;
4+
link: string;
5+
createdAt: string;
6+
updatedAt?: string | null;
7+
}

‎src/hooks/usePartners/usePartners.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { useFetch } from '../useFetch';
2+
import { IPartner } from './types';
3+
4+
const usePartners = () => {
5+
return useFetch<IPartner[]>('/partners', {
6+
initialValue: [],
7+
cache: true,
8+
});
9+
};
10+
11+
export { usePartners };

0 commit comments

Comments
 (0)