nandi.uk
This repository has no description
4.7 kB
151 lines
1'use client';
2
3import type { UrlCard, Collection, User } from '@/api-client';
4import { ActionIcon, Button, Group, Menu } from '@mantine/core';
5import { Fragment, useState } from 'react';
6import { FiPlus } from 'react-icons/fi';
7import { BsThreeDots, BsTrash2Fill } from 'react-icons/bs';
8import { LuUnplug } from 'react-icons/lu';
9import RemoveCardFromCollectionModal from '../removeCardFromCollectionModal/RemoveCardFromCollectionModal';
10import RemoveCardFromLibraryModal from '../removeCardFromLibraryModal/RemoveCardFromLibraryModal';
11import AddCardToModal from '@/features/cards/components/addCardToModal/AddCardToModal';
12import { MdOutlineStickyNote2 } from 'react-icons/md';
13import NoteCardModal from '@/features/notes/components/noteCardModal/NoteCardModal';
14import { useAuth } from '@/hooks/useAuth';
15import { IoMdCheckmark } from 'react-icons/io';
16
17interface Props {
18 id: string;
19 cardContent: UrlCard['cardContent'];
20 cardCount: number;
21 cardAuthor?: User;
22 authorHandle?: string;
23 note?: UrlCard['note'];
24 currentCollection?: Collection;
25 urlLibraryCount: number;
26 urlIsInLibrary: boolean;
27}
28
29export default function UrlCardActions(props: Props) {
30 const { isAuthenticated, user } = useAuth();
31 // assume the current user is the card owner if authorHandle isn't passed
32 const isAuthor = props.authorHandle
33 ? user?.handle === props.authorHandle
34 : true;
35 const [showNoteModal, setShowNoteModal] = useState(false);
36 const [showRemoveFromCollectionModal, setShowRemoveFromCollectionModal] =
37 useState(false);
38 const [showRemoveFromLibaryModal, setShowRemoveFromLibraryModal] =
39 useState(false);
40 const [showAddToModal, setShowAddToModal] = useState(false);
41
42 if (!isAuthenticated) {
43 return null;
44 }
45
46 return (
47 <Fragment>
48 <Group
49 justify="space-between"
50 onClick={(e) => {
51 e.stopPropagation();
52 }}
53 >
54 <Group gap={'xs'}>
55 <Button
56 variant="light"
57 color={'gray'}
58 size="xs"
59 radius={'xl'}
60 leftSection={
61 props.urlIsInLibrary ? (
62 <IoMdCheckmark size={18} />
63 ) : (
64 <FiPlus size={18} />
65 )
66 }
67 onClick={() => {
68 setShowAddToModal(true);
69 }}
70 >
71 {props.urlLibraryCount}
72 </Button>
73 {props.note && (
74 <ActionIcon
75 variant="light"
76 color="gray"
77 radius={'xl'}
78 onClick={() => {
79 setShowNoteModal(true);
80 }}
81 >
82 <MdOutlineStickyNote2 />
83 </ActionIcon>
84 )}
85 </Group>
86 {isAuthor && (
87 <Menu shadow="sm">
88 <Menu.Target>
89 <ActionIcon variant="light" color={'gray'} radius={'xl'}>
90 <BsThreeDots size={18} />
91 </ActionIcon>
92 </Menu.Target>
93 <Menu.Dropdown>
94 {props.currentCollection && (
95 <Menu.Item
96 leftSection={<LuUnplug />}
97 onClick={() => {
98 setShowRemoveFromCollectionModal(true);
99 }}
100 >
101 Remove from this collection
102 </Menu.Item>
103 )}
104 <Menu.Item
105 color="red"
106 leftSection={<BsTrash2Fill />}
107 onClick={() => {
108 setShowRemoveFromLibraryModal(true);
109 }}
110 >
111 Remove from library
112 </Menu.Item>
113 </Menu.Dropdown>
114 </Menu>
115 )}
116 </Group>
117
118 <AddCardToModal
119 isOpen={showAddToModal}
120 onClose={() => setShowAddToModal(false)}
121 url={props.cardContent.url}
122 cardId={props.id}
123 note={props.note?.text}
124 urlLibraryCount={props.urlLibraryCount}
125 isInYourLibrary={props.urlIsInLibrary}
126 />
127
128 <NoteCardModal
129 isOpen={showNoteModal}
130 onClose={() => setShowNoteModal(false)}
131 note={props.note}
132 cardContent={props.cardContent}
133 cardAuthor={props.cardAuthor}
134 />
135
136 {props.currentCollection && (
137 <RemoveCardFromCollectionModal
138 isOpen={showRemoveFromCollectionModal}
139 onClose={() => setShowRemoveFromCollectionModal(false)}
140 cardId={props.id}
141 collectionId={props.currentCollection.id}
142 />
143 )}
144 <RemoveCardFromLibraryModal
145 isOpen={showRemoveFromLibaryModal}
146 onClose={() => setShowRemoveFromLibraryModal(false)}
147 cardId={props.id}
148 />
149 </Fragment>
150 );
151}