feat: consistency in the pages

sayinmehmet47 · Nov 26, 2023 · 79f26f8 · 79f26f8 · vercel · Nov 26, 2023
1 parent 309a963
commit 79f26f8
Show file tree

Hide file tree

Showing 20 changed files with 546 additions and 334 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -14,6 +14,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.5",
     "@react-pdf/renderer": "^3.1.14",
     "@reduxjs/toolkit": "^1.8.3",
     "@tanstack/react-table": "^8.10.7",
@@ -45,6 +46,7 @@
     "react-table": "^7.8.0",
     "react-toastify": "^9.0.0",
     "reactstrap": "^9.1.3",
+    "sonner": "^1.2.3",
     "styled-components": "^6.0.0",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7",

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,4 +1,3 @@
-import 'react-toastify/dist/ReactToastify.css';
 import { Search } from './components/Search';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import Layout from './components/Layout';

diff --git a/client/src/book-table/column.tsx b/client/src/book-table/column.tsx
@@ -85,21 +85,23 @@ export const columns: ColumnDef<Book>[] = [
   },
   {
     accessorKey: 'date',
-    header: 'Date',
+    header: () => <div className="text-gray-500 hidden md:flex">Date</div>,
     cell: ({ row }) => {
       return (
-        <div className="text-sm text-gray-500">
+        <div className="text-sm text-gray-500 hidden md:flex">
           {new Date(row.original.date).toLocaleDateString()}
         </div>
       );
     },
   },
 
   {
-    header: 'Uploaded By',
+    header: () => <div className="text-gray-500 hidden md:flex">Uploader</div>,
     accessorKey: 'uploader',
     cell: ({ row }) => (
-      <div className="text-gray-500">{row.original.uploader.username}</div>
+      <div className="text-gray-500 hidden md:flex">
+        {row.original.uploader.username}
+      </div>
     ),
   },
   {

diff --git a/client/src/components/BookPreview.tsx b/client/src/components/BookPreview.tsx
@@ -26,7 +26,12 @@ export const BookPreview = ({
 
   if (fileType === 'pdf') {
     return (
-      <div className="mt-3 ">
+      <>
+        <ArrowLeftIcon
+          size={32}
+          className="cursor-pointer border border-gray-400 rounded-full hover:bg-gray-200 hover:shadow-md relative left-2  mb-2"
+          onClick={() => navigate(-1)}
+        />
         <DocViewer
           documents={docs}
           initialActiveDocument={docs[1]}
@@ -39,16 +44,11 @@ export const BookPreview = ({
             },
           }}
         />
-      </div>
+      </>
     );
   } else if (fileType === 'epub') {
     return (
-      <div style={{ height: '100vh' }}>
-        <ArrowLeftIcon
-          size={32}
-          className="cursor-pointer border border-gray-400 rounded-full hover:bg-gray-200 hover:shadow-md relative left-2  mb-2"
-          onClick={() => navigate(-1)}
-        />
+      <div className="h-screen">
         <ReactReader
           url={bookUrl}
           location={location}

diff --git a/client/src/components/Layout.tsx b/client/src/components/Layout.tsx
@@ -1,35 +1,25 @@
 import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
-import { ToastContainer } from 'react-toastify';
-import styled from 'styled-components';
+import { Toaster } from 'sonner';
+
 import { loadUserThunk } from '../redux/authSlice';
 import NavbarComponent from './Navbar';
 import { Flowbite } from 'flowbite-react';
 import { customTheme } from './ui/theme';
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  background-color: white;
-  color: black;
-`;
-const Main = styled.div`
-  overflow: hidden;
-`;
+import { Dispatch } from '@reduxjs/toolkit';
 
 export default function Layout({ children }: any) {
-  const dispatch = useDispatch<any>();
+  const dispatch = useDispatch<Dispatch<any>>();
   useEffect(() => {
     dispatch(loadUserThunk());
   }, [dispatch]);
   return (
     <Flowbite theme={{ theme: customTheme }}>
-      <Wrapper>
-        <ToastContainer />
+      <Toaster />
+      <div className="flex flex-col min-h-screen bg-gray-100">
         <NavbarComponent />
-        <Main>{children}</Main>
-      </Wrapper>
+        <div>{children}</div>
+      </div>
     </Flowbite>
   );
 }
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
@@ -10,53 +10,42 @@ export default function NavbarComponent() {
   );
 
   return (
-    <div className="mb-5">
-      <Navbar>
-        <Navbar.Brand
+    <Navbar>
+      <Navbar.Brand as={Link} hrefLang="en" to="/">
+        <img src="/logo-white.svg" className="h-6" alt="Flowbite React Logo" />
+      </Navbar.Brand>
+      <Navbar.Toggle />
+      <Navbar.Collapse>
+        <Navbar.Link to="/" as={Link} active={window.location.pathname === '/'}>
+          Home
+        </Navbar.Link>
+        <Navbar.Link
           as={Link}
-          href="https://flowbite-react.com"
-          hrefLang="en"
-          to="/"
+          to="/recently-added"
+          active={window.location.pathname === '/recently-added'}
         >
-          <img
-            src="/logo-white.svg"
-            className="mr-3 h-6 sm:h-9"
-            alt="Flowbite React Logo"
-          />
-        </Navbar.Brand>
-        <Navbar.Toggle />
-        <Navbar.Collapse>
-          <Navbar.Link to="/" active>
-            Home
-          </Navbar.Link>
-          <Navbar.Link
-            as={Link}
-            to="/recently-added"
-            active={window.location.pathname === '/recently-added'}
-          >
-            Recently Added
-          </Navbar.Link>
-          <Navbar.Link
-            as={Link}
-            to="/upload"
-            active={window.location.pathname === '/upload'}
-          >
-            Upload Book
-          </Navbar.Link>
-          <Navbar.Link
-            as={Link}
-            to="/all-books"
-            active={window.location.pathname === '/all-books'}
-          >
-            All Books
-          </Navbar.Link>
-          <UserNav
-            username={username}
-            email={email}
-            avatarUrl="/avatars/01.png"
-          />
-        </Navbar.Collapse>
-      </Navbar>
-    </div>
+          Recently Added
+        </Navbar.Link>
+        <Navbar.Link
+          as={Link}
+          to="/upload"
+          active={window.location.pathname === '/upload'}
+        >
+          Upload Book
+        </Navbar.Link>
+        <Navbar.Link
+          as={Link}
+          to="/all-books"
+          active={window.location.pathname === '/all-books'}
+        >
+          All Books
+        </Navbar.Link>
+        <UserNav
+          username={username}
+          email={email}
+          avatarUrl="/avatars/01.png"
+        />
+      </Navbar.Collapse>
+    </Navbar>
   );
 }
diff --git a/client/src/components/Search.tsx b/client/src/components/Search.tsx
@@ -10,6 +10,7 @@ import { columns } from '../book-table/column';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { Form, FormControl, FormField, FormItem } from './ui/form';
+import { Spinner } from 'flowbite-react';
 
 const formSchema = z.object({
   name: z.string().min(2).max(50),
@@ -58,7 +59,11 @@ export const Search = () => {
   ]);
 
   if (isLoading) {
-    return <div>Loading...</div>;
+    return (
+      <div className="h-10 w-10">
+        <Spinner />
+      </div>
+    );
   }
 
   if (isError) {
@@ -89,14 +94,14 @@ export const Search = () => {
                     Search for a book example: 'George Orwell'
                     "
                     {...field}
-                    className="w-96"
+                    className="w-80"
                   />
                 </FormControl>
               </FormItem>
             )}
           />
           {!isLoading && (
-            <Button type="submit" className="w-96" variant="dark">
+            <Button type="submit" className="w-80" variant="dark">
               Submit
             </Button>
           )}