From 5e16851d3771dec12447560eb350a2085a74c28d Mon Sep 17 00:00:00 2001
From: Den <denis100703@gmail.com>
Date: Sun, 28 Jul 2024 04:46:07 +0300
Subject: [PATCH] book page and general ui improvements

---
 src/app/book/[id]/edit/page.tsx               |  5 ++-
 src/app/book/[id]/page.tsx                    | 30 ++++++++-----
 src/components/AppFrame/AppFrame.tsx          |  8 +---
 src/components/Book/Book.module.css           | 10 -----
 src/components/Book/Book.tsx                  | 42 -------------------
 .../CarouselCards/CarouselCards.tsx           | 10 +++--
 src/components/Collections/AllBooks.tsx       | 10 +++--
 src/components/ErrorCard/ErrorCard.tsx        |  2 +-
 .../VerticalList/VerticalListForm.tsx         |  1 -
 9 files changed, 36 insertions(+), 82 deletions(-)
 delete mode 100644 src/components/Book/Book.module.css
 delete mode 100644 src/components/Book/Book.tsx

diff --git a/src/app/book/[id]/edit/page.tsx b/src/app/book/[id]/edit/page.tsx
index 8e38b55..9714178 100644
--- 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
index 92ec1b6..cdc7316 100644
--- 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
index bfe3020..4626bc8 100644
--- 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
deleted file mode 100644
index f0b0e42..0000000
--- a/src/components/Book/Book.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.card {
-    height: 360px;
-    width: 216px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-start;
-    background-size: cover;
-    background-position: center;
-}
\ No newline at end of file
diff --git a/src/components/Book/Book.tsx b/src/components/Book/Book.tsx
deleted file mode 100644
index 0fecd44..0000000
--- a/src/components/Book/Book.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client';
-
-import { Title, Text, Paper } from '@mantine/core';
-import { Suspense } from 'react';
-import { useSearchParams } from 'next/navigation';
-import classes from './Book.module.css';
-import { Loading } from '../Loading/Loading';
-
-export default function Book() {
-    return (
-        <Suspense fallback={<Loading />}>
-            <Card />
-        </Suspense>
-    );
-}
-
-function Card() {
-    const searchParams = useSearchParams();
-    const book_id = searchParams.get('q');
-
-    return (
-        <Paper
-            shadow="md"
-            p="xl"
-            radius="md"
-            style={{
-                backgroundImage:
-                    'linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)), url(https://itvdn.blob.core.windows.net/catalog-images/cplspls-essential-img.jpg)',
-            }}
-            className={classes.card}
-        >
-            <div>
-                <Title order={3} className={classes.title}>
-                    {book_id}
-                </Title>
-                <Text className={classes.category} size="xs">
-                    Откройте для себя c++ по новому
-                </Text>
-            </div>
-        </Paper>
-    );
-}
diff --git a/src/components/CarouselCards/CarouselCards.tsx b/src/components/CarouselCards/CarouselCards.tsx
index 6bfe1c1..12f956c 100644
--- 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
index 53c758f..b3845f3 100644
--- 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
index 81c0ac6..0d1da85 100644
--- 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
index e7df975..b54130b 100644
--- 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