book page and general ui improvements

getz-devs · Jul 28, 2024 · 5e16851 · 5e16851
1 parent 81d1e5d
commit 5e16851
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 82 deletions.
diff --git a/src/app/book/[id]/edit/page.tsx b/src/app/book/[id]/edit/page.tsx
@@ -65,8 +65,8 @@ export default function SearchBar() {
 
                 const dataBookshelves: Bookshelf[] | null = await resBookshelves.json();
                 if (dataBookshelves != null) {
-                    console.log('resBookshelves.json() != null');
-                    console.log(resBookshelves.json());
+                    // console.log('resBookshelves.json() != null');
+                    // console.log(resBookshelves.json());
                     setBookshelves(dataBookshelves);
                 }
 
@@ -102,6 +102,7 @@ export default function SearchBar() {
     // Initialize the form with useForm hook
     const form = useForm<BookUpdate>({
         initialValues: {
+            // id: id, - also need to specify the id (TODO: fix the API)
             title: '',
             author: '',
             description: '',

diff --git a/src/app/book/[id]/page.tsx b/src/app/book/[id]/page.tsx
@@ -1,8 +1,9 @@
 'use client';
 
 import { useParams } from 'next/navigation';
-import { Card, Container, Grid, Image, Text } from '@mantine/core';
+import { Button, Card, Container, Grid, Image, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useEffect, useState } from 'react';
+import Link from 'next/link';
 import { useAuthContext } from '@/src/firebase/context';
 import { Book, Bookshelf } from '@/src/types/api';
 import { Loading } from '@/src/components/Loading/Loading';
@@ -80,13 +81,11 @@ export default function SearchBar() {
 
     return (
         <Container size="md">
-            <Grid>
-                <Grid.Col span={6}>
-                    <Card shadow="sm" padding={0} radius="md">
-                        <Image src={book?.cover_image} alt="Book Cover" />
-                    </Card>
-                </Grid.Col>
-                <Grid.Col span={6}>
+            <SimpleGrid cols={{ base: 1, sm: 2 }}>
+                <Card shadow="sm" padding={0} radius="md">
+                    <Image src={book?.cover_image} alt="Book Cover" />
+                </Card>
+                <Stack gap="md">
                     <Card shadow="sm" padding="lg" radius="md" withBorder>
                         <Grid columns={2}>
                             <Grid.Col span={1}>
@@ -111,7 +110,7 @@ export default function SearchBar() {
                                 </Text>
                             </Grid.Col>
                             <Grid.Col span={1}>
-                                <Text>{book?.description}</Text>
+                                <Text>{book?.description || 'Описание отсутствует'}</Text>
                             </Grid.Col>
                             <Grid.Col span={1}>
                                 <Text fw={700} size="lg">
@@ -132,8 +131,17 @@ export default function SearchBar() {
                             </Grid.Col>
                         </Grid>
                     </Card>
-                </Grid.Col>
-            </Grid>
+                    <Button
+                        component={Link}
+                        href={`/book/${id}/edit`}
+                        color="blue"
+                        fullWidth
+                        radius="md"
+                    >
+                        Edit Book
+                    </Button>
+                </Stack>
+            </SimpleGrid>
         </Container>
     );
 }
diff --git a/src/components/AppFrame/AppFrame.tsx b/src/components/AppFrame/AppFrame.tsx
@@ -52,10 +52,6 @@ async function FetchBookshelf(user: any, shelfName: string) {
 }
 
 export function AppFrame({ children }: AppFrameProps) {
-    const demoProps = {
-        h: 50,
-        mt: 'md',
-    };
     const [inputValue, setInputValue] = useState('');
     const [opened, { open, close }] = useDisclosure(false);
     const { user, loading: userLoading } = useAuthContext();
@@ -114,9 +110,7 @@ export function AppFrame({ children }: AppFrameProps) {
                 </AppShell.Header>
 
                 <AppShell.Main>
-                    <Container size="76rem" {...demoProps}>
-                        {children}
-                    </Container>
+                    <Container my="lg">{children}</Container>
                 </AppShell.Main>
             </AppShell>
         </div>

diff --git a/src/components/Book/Book.module.css b/src/components/Book/Book.module.css
diff --git a/src/components/Book/Book.tsx b/src/components/Book/Book.tsx
diff --git a/src/components/CarouselCards/CarouselCards.tsx b/src/components/CarouselCards/CarouselCards.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import { Loader, Title } from '@mantine/core';
+import { Center, Loader, Title } from '@mantine/core';
 import InfiniteScrollArea from './InfiniteList';
 import { Bookshelf, Book } from '@/src/types/api';
 import { useAuthContext } from '@/src/firebase/context';
@@ -89,9 +89,11 @@ function CarouselCards({ bookshelf }: CarouselProps) {
 
     return (
         <div style={{ marginBottom: '3rem' }}>
-            <Title order={2} ms={10} mb="xs" fw="bold">
-                {bookshelf.name}
-            </Title>
+            <Center>
+                <Title order={2} ms={10} mb="xs" fw="bold">
+                    {bookshelf.name} collection
+                </Title>
+            </Center>
             {loading ? (
                 <Loader size="md" />
             ) : items ? (

diff --git a/src/components/Collections/AllBooks.tsx b/src/components/Collections/AllBooks.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 
-import { Loader, Title } from '@mantine/core';
+import { Center, Loader, Title } from '@mantine/core';
 import { Book } from '@/src/types/api';
 import { useAuthContext } from '@/src/firebase/context';
 import InfiniteScrollArea from '@/src/components/CarouselCards/InfiniteList';
@@ -118,9 +118,11 @@ export default function AllBookshelvesPage() {
 
     return (
         <div style={{ marginBottom: '3rem', marginTop: '2rem' }}>
-            <Title order={2} ms={10} mb="xs" fw="bold">
-                All my books
-            </Title>
+            <Center>
+                <Title order={2} ms={10} mb="xs" fw="bold">
+                    All my books
+                </Title>
+            </Center>
             {loading ? (
                 <Loader size="md" />
             ) : books ? (

diff --git a/src/components/ErrorCard/ErrorCard.tsx b/src/components/ErrorCard/ErrorCard.tsx
@@ -9,7 +9,7 @@ export function ErrorCard({ error, desc }: ErrorCardProps) {
     const theme = useMantineTheme();
     return (
         <Center>
-            <Card mb="md" maw={theme.breakpoints.xs}>
+            <Card mb="md" w={theme.breakpoints.sm}>
                 <Title order={3}>{error}</Title>
                 <Divider my="md" />
                 <Text>{desc}</Text>

diff --git a/src/components/VerticalList/VerticalListForm.tsx b/src/components/VerticalList/VerticalListForm.tsx
@@ -93,7 +93,6 @@ function BookCard({ book, isAdv, index }: BookCardProps) {
                     fullWidth
                     mt="sm"
                     radius="md"
-                    style={{ width: '40%' }}
                     onClick={() => onClickHandler(book, user, isAdv, index)}
                 >
                     Choose this