nandi.uk
This repository has no description
4.8 kB
145 lines
1'use client';
2
3import AddCardToModal from '@/features/cards/components/addCardToModal/AddCardToModal';
4import RemoveCardFromLibraryModal from '@/features/cards/components/removeCardFromLibraryModal/RemoveCardFromLibraryModal';
5import useGetCardFromMyLibrary from '@/features/cards/lib/queries/useGetCardFromMyLibrary';
6import { ActionIcon, Button, CopyButton, Group, Tooltip } from '@mantine/core';
7import { notifications } from '@mantine/notifications';
8import { Fragment, useState } from 'react';
9import { FiPlus } from 'react-icons/fi';
10import { IoMdCheckmark } from 'react-icons/io';
11import { MdIosShare } from 'react-icons/md';
12import useSembleLibraries from '../../lib/queries/useSembleLibraries';
13import { track } from '@vercel/analytics';
14import { CardSaveSource } from '@/features/analytics/types';
15import { usePathname } from 'next/navigation';
16import { TbPlugConnected } from 'react-icons/tb';
17import AddConnectionModal from '@/features/connections/components/addConnectionModal/AddConnectionModal';
18import { BsTrash2Fill } from 'react-icons/bs';
19
20interface Props {
21 url: string;
22 viaCardId?: string;
23}
24
25export default function SembleActions(props: Props) {
26 const pathname = usePathname();
27 const cardStatus = useGetCardFromMyLibrary({ url: props.url });
28 const isInYourLibrary = cardStatus.data.card?.urlInLibrary;
29 const [showAddToModal, setShowAddToModal] = useState(false);
30 const [showAddConnectionModal, setShowAddConnectionModal] = useState(false);
31 const [showRemoveModal, setShowRemoveModal] = useState(false);
32
33 const { data } = useSembleLibraries({ url: props.url });
34 const allLibraries =
35 data?.pages.flatMap((page) => page.libraries ?? []) ?? [];
36
37 const urlLibraryCount = allLibraries.length ?? 0;
38
39 const shareLink = `${process.env.NEXT_PUBLIC_APP_URL}/url?id=${props.url}`;
40
41 if (cardStatus.error) {
42 return null;
43 }
44
45 return (
46 <Fragment>
47 <Group gap={'xs'}>
48 <CopyButton value={shareLink}>
49 {({ copied, copy }) => (
50 <Tooltip
51 label={copied ? 'Link copied!' : 'Share'}
52 withArrow
53 position="top"
54 >
55 <ActionIcon
56 variant="light"
57 color="gray"
58 size={36}
59 radius={'xl'}
60 onClick={() => {
61 copy();
62
63 if (copied) return;
64 notifications.show({
65 message: 'Link copied!',
66 position: 'top-center',
67 id: copied.toString(),
68 });
69 }}
70 >
71 <MdIosShare />
72 </ActionIcon>
73 </Tooltip>
74 )}
75 </CopyButton>
76 <Button
77 variant="light"
78 color="green"
79 radius={'xl'}
80 leftSection={<TbPlugConnected size={18} />}
81 onClick={(e) => {
82 e.stopPropagation();
83 setShowAddConnectionModal(true);
84 }}
85 >
86 Connect
87 </Button>
88 <Button
89 variant={isInYourLibrary ? 'light' : 'filled'}
90 leftSection={
91 isInYourLibrary ? <IoMdCheckmark size={18} /> : <FiPlus size={18} />
92 }
93 onClick={() => {
94 setShowAddToModal(true);
95 track(
96 `Semble: ${isInYourLibrary ? 'update card' : 'add to library'}`,
97 );
98 }}
99 >
100 {isInYourLibrary ? 'Update' : 'Add'}
101 </Button>
102 {isInYourLibrary && (
103 <ActionIcon
104 variant="light"
105 color="red"
106 size={36}
107 radius={'xl'}
108 onClick={() => setShowRemoveModal(true)}
109 >
110 <BsTrash2Fill />
111 </ActionIcon>
112 )}
113 </Group>
114
115 <AddConnectionModal
116 isOpen={showAddConnectionModal}
117 onClose={() => setShowAddConnectionModal(false)}
118 sourceUrl={props.url}
119 />
120
121 <AddCardToModal
122 isOpen={showAddToModal}
123 onClose={() => setShowAddToModal(false)}
124 url={props.url}
125 cardContent={cardStatus.data.card?.cardContent}
126 cardId={cardStatus.data.card?.id}
127 note={cardStatus.data.card?.note?.text}
128 isInYourLibrary={cardStatus.data.card?.urlInLibrary}
129 urlLibraryCount={urlLibraryCount}
130 viaCardId={props.viaCardId}
131 analyticsContext={{
132 saveSource: CardSaveSource.SEMBLE_PAGE,
133 pagePath: pathname,
134 }}
135 />
136 {isInYourLibrary && cardStatus.data.card?.id && (
137 <RemoveCardFromLibraryModal
138 isOpen={showRemoveModal}
139 onClose={() => setShowRemoveModal(false)}
140 cardId={cardStatus.data.card.id}
141 />
142 )}
143 </Fragment>
144 );
145}