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