-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
63 lines (59 loc) · 2 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import {Likes} from '@/interfaces/likes';
import * as Styled from './style';
import NameCard from '../NameCard';
import useDistance from '@/hooks/useDistance';
import useTimeConverter from '@/hooks/useTimeConverter';
import useGeolocation from '@/hooks/useGeolocation';
import useModal from '@/hooks/useModal';
import CafeInfoModal from '@/components/Modal/CafeInfoModal';
import EmptyMessage from '../EmptyMessage';
import {useRecoilState} from 'recoil';
import {selectedCafeState} from '@/atoms/likesState';
interface Props {
likes: Likes[];
}
export function LikeList(props: Props) {
const {coordinates} = useGeolocation();
const {isOpen, openModal, closeModal} = useModal();
const [cafeId, setCafeId] = useRecoilState(selectedCafeState);
const handleCafeInfoModalOpen = (id: number) => {
setCafeId(id);
openModal();
};
return (
<>
<Styled.Container>
{props.likes.length === 0 ? (
<EmptyMessage message={'좋아요를 누른 카페가 없습니다.'} />
) : (
props.likes.map((like) => {
return (
<Styled.Wrapper
key={like.id}
onClick={() => handleCafeInfoModalOpen(like.id)}
>
<NameCard
id={like.id}
name={like.name}
address={like.address}
business={`${useTimeConverter(like.start_time)} ~ ${useTimeConverter(like.end_time)}`}
likes={like.likes}
distance={useDistance({
currentLatitude: coordinates.lat,
currentLongitude: coordinates.lng,
targetLatitude: like.latitude,
targetLongitude: like.longitude,
})}
liked={like.liked}
/>
</Styled.Wrapper>
);
})
)}
</Styled.Container>
{isOpen && (
<CafeInfoModal isOpen={isOpen} onClose={closeModal} id={cafeId} />
)}
</>
);
}