Merge pull request #1 from getz-devs/feat/debug-page

Debug components for API testing

src/app/debug/page.tsx

@@ -1,10 +1,20 @@
-import { Container } from '@mantine/core';
+import { Container, SimpleGrid, Stack } from '@mantine/core';
 import GetTokenCard from '@/src/components/Debug/GetTokenCard';
+import BookCard from '@/src/components/Debug/BookCard';
+import BookshelfCard from '@/src/components/Debug/BookshelfCard';
+import UserCard from '@/src/components/Debug/UserCard';
 
 export default function HomePage() {
     return (
         <Container size="xl" px={0}>
-            <GetTokenCard />
+            <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="xl" verticalSpacing="xl">
+                <Stack gap="xl">
+                    <GetTokenCard />
+                    <UserCard />
+                </Stack>
+                <BookCard />
+                <BookshelfCard />
+            </SimpleGrid>
         </Container>
     );
 }

src/components/Debug/BookCard.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+import { Button, Card, Group, Input, Textarea } from '@mantine/core';
+import { useState } from 'react';
+import { useAuthContext } from '@/src/firebase/context';
+
+const API_HOST = process.env.NEXT_PUBLIC_API_HOST || 'http://localhost:8080/api';
+
+export default function BookCard() {
+    const { user } = useAuthContext();
+    const [bookID, setBookID] = useState('');
+    const [title, setTitle] = useState('');
+    const [author, setAuthor] = useState('');
+    const [isbn, setISBN] = useState('');
+    const [description, setDescription] = useState('');
+    const [coverImage, setCoverImage] = useState('');
+    const [bookshelfID, setBookshelfID] = useState('');
+    const [response, setResponse] = useState('');
+
+    const handleCreateBook = async () => {
+        try {
+            const res = await fetch(`${API_HOST}/books/`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${await user?.getIdToken()}`,
+                },
+                body: JSON.stringify({
+                    title,
+                    author,
+                    isbn,
+                    description,
+                    cover_image: coverImage,
+                    bookshelf_id: bookshelfID,
+                }),
+            });
+            const data = await res.json();
+            setResponse(JSON.stringify(data, null, 2));
+        } catch (error) {
+            setResponse(`Error: ${error}`);
+        }
+    };
+
+    const handleGetBook = async () => {
+        try {
+            const res = await fetch(`${API_HOST}/books/${bookID}`, {
+                headers: {
+                    Authorization: `Bearer ${await user?.getIdToken()}`,
+                },
+            });
+            const data = await res.json();
+            setResponse(JSON.stringify(data, null, 2));
+        } catch (error) {
+            setResponse(`Error: ${error}`);
+        }
+    };
+
+    const handleUpdateBook = async () => {
+        try {
+            const res = await fetch(`${API_HOST}/books/${bookID}`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${await user?.getIdToken()}`,
+                },
+                body: JSON.stringify({
+                    title,
+                    author,
+                    isbn,
+                    description,
+                    cover_image: coverImage,
+                }),
+            });
+            const data = await res.json();
+            setResponse(JSON.stringify(data, null, 2));
+        } catch (error) {
+            setResponse(`Error: ${error}`);
+        }
+    };
+
+    const handleDeleteBook = async () => {
+        try {
+            const res = await fetch(`${API_HOST}/books/${bookID}`, {
+                method: 'DELETE',
+                headers: {
+                    Authorization: `Bearer ${await user?.getIdToken()}`,
+                },
+            });
+            const data = await res.json();
+            setResponse(JSON.stringify(data, null, 2));
+        } catch (error) {
+            setResponse(`Error: ${error}`);
+        }
+    };
+
+    const handleGetBooksByUser = async () => {
+        try {
+            const res = await fetch(`${API_HOST}/books/user?page=1&limit=10`, {
+                headers: {
+                    Authorization: `Bearer ${await user?.getIdToken()}`,
+                },
+            });
+            const data = await res.json();
+            setResponse(JSON.stringify(data, null, 2));
+        } catch (error) {
+            setResponse(`Error: ${error}`);
+        }
+    };
+
+    const handleGetBooksByBookshelf = async () => {
+        try {
+            const res = await fetch(`${API_HOST}/books/bookshelf/${bookshelfID}?page=1&limit=10`, {
+                headers: {
+                    Authorization: `Bearer ${await user?.getIdToken()}`,
+                },
+            });
+            const data = await res.json();
+            setResponse(JSON.stringify(data, null, 2));
+        } catch (error) {
+            setResponse(`Error: ${error}`);
+        }
+    };
+
+    return (
+        <Card shadow="sm" radius="md" withBorder style={{ maxWidth: 512 }}>
+            <Input
+                placeholder="Book ID"
+                value={bookID}
+                onChange={(event) => setBookID(event.currentTarget.value)}
+                mb="xs"
+            />
+            <Input
+                placeholder="Title"
+                value={title}
+                onChange={(event) => setTitle(event.currentTarget.value)}
+                mb="xs"
+            />
+            <Input
+                placeholder="Author"
+                value={author}
+                onChange={(event) => setAuthor(event.currentTarget.value)}
+                mb="xs"
+            />
+            <Input
+                placeholder="ISBN"
+                value={isbn}
+                onChange={(event) => setISBN(event.currentTarget.value)}
+                mb="xs"
+            />
+            <Input
+                placeholder="Description"
+                value={description}
+                onChange={(event) => setDescription(event.currentTarget.value)}
+                mb="xs"
+            />
+            <Input
+                placeholder="Cover Image URL"
+                value={coverImage}
+                onChange={(event) => setCoverImage(event.currentTarget.value)}
+                mb="xs"
+            />
+            <Input
+                placeholder="Select a bookshelf"
+                value={bookshelfID}
+                onChange={(event) => setBookshelfID(event.currentTarget.value)}
+                mb="xs"
+            />
+            <Group justify="left" mt="md">
+                <Button onClick={handleCreateBook} disabled={!user}>
+                    Create Book
+                </Button>
+                <Button onClick={handleGetBook} disabled={!user}>
+                    Get Book
+                </Button>
+                <Button onClick={handleUpdateBook} disabled={!user}>
+                    Update Book
+                </Button>
+                <Button onClick={handleDeleteBook} disabled={!user}>
+                    Delete Book
+                </Button>
+                <Button onClick={handleGetBooksByUser} disabled={!user}>
+                    Get Books By User
+                </Button>
+                <Button onClick={handleGetBooksByBookshelf} disabled={!user}>
+                    Get Books By Bookshelf
+                </Button>
+            </Group>
+            <Textarea rows={5} value={response} label="API Response" readOnly mt="md" />
+        </Card>
+    );
+}

src/components/Debug/BookshelfCard.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { Button, Card, Group, Input, Textarea } from '@mantine/core';
+import { useState } from 'react';
+import { useAuthContext } from '@/src/firebase/context';
+
+const API_HOST = process.env.NEXT_PUBLIC_API_HOST || 'http://localhost:8080/api';
+
+export default function BookshelfCard() {
+    const { user } = useAuthContext();
+    const [bookshelfID, setBookshelfID] = useState('');
+    const [name, setName] = useState('');
+    const [response, setResponse] = useState('');
+
+    const handleCreateBookshelf = async () => {
+        try {
+            const res = await fetch(`${API_HOST}/bookshelves/`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${await user?.getIdToken()}`,
+                },
+                body: JSON.stringify({ name }),
+            });
+            const data = await res.json();
+            setResponse(JSON.stringify(data, null, 2));
+        } catch (error) {
+            setResponse(`Error: ${error}`);
+        }
+    };
+
+    const handleGetBookshelf = async () => {
+        try {
+            const res = await fetch(`${API_HOST}/bookshelves/${bookshelfID}`, {
+                headers: {
+                    Authorization: `Bearer ${await user?.getIdToken()}`,
+                },
+            });
+            const data = await res.json();
+            setResponse(JSON.stringify(data, null, 2));
+        } catch (error) {
+            setResponse(`Error: ${error}`);
+        }
+    };
+
+    const handleUpdateBookshelf = async () => {
+        try {
+            const res = await fetch(`${API_HOST}/bookshelves/${bookshelfID}`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${await user?.getIdToken()}`,
+                },
+                body: JSON.stringify({ name }),
+            });
+            const data = await res.json();
+            setResponse(JSON.stringify(data, null, 2));
+        } catch (error) {
+            setResponse(`Error: ${error}`);
+        }
+    };
+
+    const handleDeleteBookshelf = async () => {
+        try {
+            const res = await fetch(`${API_HOST}/bookshelves/${bookshelfID}`, {
+                method: 'DELETE',
+                headers: {
+                    Authorization: `Bearer ${await user?.getIdToken()}`,
+                },
+            });
+            const data = await res.json();
+            setResponse(JSON.stringify(data, null, 2));
+        } catch (error) {
+            setResponse(`Error: ${error}`);
+        }
+    };
+
+    const handleGetBookshelvesByUser = async () => {
+        try {
+            const res = await fetch(`${API_HOST}/bookshelves/user?page=1&limit=10`, {
+                headers: {
+                    Authorization: `Bearer ${await user?.getIdToken()}`,
+                },
+            });
+            const data = await res.json();
+            setResponse(JSON.stringify(data, null, 2));
+        } catch (error) {
+            setResponse(`Error: ${error}`);
+        }
+    };
+
+    return (
+        <Card shadow="sm" radius="md" withBorder style={{ maxWidth: 512 }}>
+            <Input
+                placeholder="Bookshelf ID"
+                value={bookshelfID}
+                onChange={(event) => setBookshelfID(event.currentTarget.value)}
+                mb="xs"
+            />
+            <Input
+                placeholder="Name"
+                value={name}
+                onChange={(event) => setName(event.currentTarget.value)}
+                mb="xs"
+            />
+            <Group justify="left" mt="md">
+                <Button onClick={handleCreateBookshelf} disabled={!user}>
+                    Create Bookshelf
+                </Button>
+                <Button onClick={handleGetBookshelf} disabled={!user}>
+                    Get Bookshelf
+                </Button>
+                <Button onClick={handleUpdateBookshelf} disabled={!user}>
+                    Update Bookshelf
+                </Button>
+                <Button onClick={handleDeleteBookshelf} disabled={!user}>
+                    Delete Bookshelf
+                </Button>
+                <Button onClick={handleGetBookshelvesByUser} disabled={!user}>
+                    Get Bookshelves By User
+                </Button>
+            </Group>
+            <Textarea rows={5} value={response} label="API Response" readOnly mt="md" />
+        </Card>
+    );
+}