nandi.uk
This repository has no description
1'use client';
2
3import { useMemo } from 'react';
4import { useRouter, useSearchParams } from 'next/navigation';
5import { getAccessToken } from '@/services/auth';
6import { ApiClient } from '@/api-client/ApiClient';
7import { Box, Stack, Text, Title, Card } from '@mantine/core';
8import { UrlCardForm } from '@/components/UrlCardForm';
9import { useAuth } from '@/hooks/useAuth';
10
11export default function AddCardPage() {
12 const router = useRouter();
13 const searchParams = useSearchParams();
14 const { user } = useAuth();
15
16 const preSelectedCollectionId = searchParams.get('collectionId');
17
18 // Create API client instance - memoized to avoid recreating on every render
19 const apiClient = useMemo(
20 () =>
21 new ApiClient(
22 process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3000',
23 () => getAccessToken(),
24 ),
25 [],
26 );
27
28 const handleSuccess = () => {
29 router.push('/library');
30 };
31
32 const handleCancel = () => {
33 router.back();
34 };
35
36 return (
37 <Box maw={600} mx="auto" p="md">
38 <Stack>
39 <Stack gap={0}>
40 <Title order={1}>Add Card</Title>
41 <Text c="gray">Add a URL to your library with an optional note.</Text>
42 </Stack>
43
44 <Card withBorder>
45 <Stack>
46 <Title order={3}>Add URL to Library</Title>
47 <UrlCardForm
48 apiClient={apiClient}
49 userId={user?.id}
50 onSuccess={handleSuccess}
51 onCancel={handleCancel}
52 submitButtonText="Add Card"
53 showCollections={true}
54 preSelectedCollectionId={preSelectedCollectionId}
55 />
56 </Stack>
57 </Card>
58 </Stack>
59 </Box>
60 );
61}