Missing paginations and paddings (#9)

* Missing paginations and padding

* Add padding on digest edit page

* Clean code

src/components/Bookmarks.tsx → src/components/bookmark/Bookmarks.tsx

@@ -12,10 +12,10 @@ import { AxiosError, AxiosResponse } from 'axios';
 import clsx from 'clsx';
 import Link from 'next/link';
 import { useMutation } from 'react-query';
-import NoContent from './layout/NoContent';
-import BookmarkImage from './link/BookmarkImage';
-import { DeletePopover } from './Popover';
-import message from '../messages/en';
+import NoContent from '../layout/NoContent';
+import BookmarkImage from './BookmarkImage';
+import { DeletePopover } from '../Popover';
+import message from '../../messages/en';
 import { getEnvHost } from '@/lib/server';
 
 type Props = {

src/components/bookmark/BookmarksControls.tsx

@@ -0,0 +1,43 @@
+import { PropsWithChildren } from 'react';
+import Pagination from '../list/Pagination';
+import clsx from 'clsx';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
+import { useTransition } from 'react';
+
+export const BookmarksControls = ({
+  linkCount,
+}: { linkCount: number } & PropsWithChildren) => {
+  const searchParams = useSearchParams();
+  const path = usePathname();
+  let [isPending, startTransition] = useTransition();
+  const { replace } = useRouter();
+
+  return (
+    <div className="flex items-center justify-center gap-3">
+      <button
+        title="Show unused bookmarks"
+        className={clsx(
+          'm-1 relative top-[2px] inline-flex items-center rounded-full border py-1 px-3 text-sm font-bold cursor-pointer transition ease-in-out duration-150 focus:outline-none',
+          searchParams?.get('all') === 'true' &&
+            'bg-gray-900 text-white border-black',
+          searchParams?.get('all') !== 'false' && 'opacity-40 hover:opacity-100'
+        )}
+        onClick={() => {
+          if (!searchParams) return;
+          const params = new URLSearchParams(searchParams);
+          if (params.get('all') === 'true') {
+            params.delete('all');
+          } else {
+            params.set('all', 'true');
+          }
+          startTransition(() => {
+            replace(path + `?${params.toString()}`);
+          });
+        }}
+      >
+        All bookmarks
+      </button>
+      <Pagination totalItems={linkCount} className="h-6" />
+    </div>
+  );
+};

src/components/digests/AddBookmarkItem.tsx

@@ -2,7 +2,7 @@ import useAddAndRemoveBlockOnDigest from '@/hooks/useAddAndRemoveBlockOnDigest';
 import { getTeamBookmarksNotInDigest } from '@/lib/queries';
 import Link from 'next/link';
 import React from 'react';
-import BookmarkImage from '../link/BookmarkImage';
+import BookmarkImage from '../bookmark/BookmarkImage';
 import { AiOutlineLoading3Quarters as LoadingIcon } from '@react-icons/all-files/ai/AiOutlineLoading3Quarters';
 import { PlusCircleIcon } from '@heroicons/react/24/solid';
 import { getRelativeDate } from '@/utils/date';

src/components/digests/block-card/bookmark-card/card-style/Block.tsx

@@ -1,6 +1,6 @@
 import BookmarkImage, {
   Props as BookmarkImageProps,
-} from '@/components/link/BookmarkImage';
+} from '@/components/bookmark/BookmarkImage';
 import { getEnvHost } from '@/lib/server';
 import { getDomainFromUrl } from '@/utils/url';
 import clsx from 'clsx';

src/components/layout/NavMenu/NavMenu.tsx

@@ -5,7 +5,7 @@ import { Team } from '@prisma/client';
 import { HiChevronDown } from '@react-icons/all-files/hi/HiChevronDown';
 import * as NavigationMenu from '@radix-ui/react-navigation-menu';
 import { usePathname } from 'next/navigation';
-import BookmarkButton from '../../link/BookmarkButton';
+import BookmarkButton from '../../bookmark/BookmarkButton';
 import { Session } from 'next-auth';
 import { signOut } from 'next-auth/react';
 import Divider from './Divider';

src/components/pages/DigestEditPage.tsx

@@ -204,7 +204,7 @@ export const DigestEditPage = ({
   };
 
   return (
-    <>
+    <div className="pb-4">
       <Breadcrumb
         paths={[
           {
@@ -288,6 +288,12 @@ export const DigestEditPage = ({
                   />
                 )}
               </div>
+              <div className="flex justify-end">
+                <Pagination
+                  totalItems={totalCount}
+                  itemsPerPage={itemPerPage}
+                />
+              </div>
             </SectionContainer>
           </div>
           <SectionContainer className="md:w-1/2 w-full h-min">
@@ -319,6 +325,6 @@ export const DigestEditPage = ({
           </SectionContainer>
         </DragDropContext>
       </div>
-    </>
+    </div>
   );
 };

src/components/pages/Team.tsx

@@ -4,19 +4,16 @@ import {
   TeamBookmarksResult,
   TeamDigestsResult,
 } from '@/lib/queries';
-import { useSearchParams, useRouter, usePathname } from 'next/navigation';
-import clsx from 'clsx';
-import { useTransition } from 'react';
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/solid';
 import Link from 'next/link';
-import { Bookmarks } from '../Bookmarks';
+import { Bookmarks } from '../bookmark/Bookmarks';
 import Card from '../Card';
 import { CounterTag } from '../CounterTag';
 import { DigestCreateInput } from '../digests/DigestCreateInput';
 import { Digests } from '../digests/Digests';
 import PageContainer from '../layout/PageContainer';
-import Pagination from '../list/Pagination';
 import { Tooltip } from '../Tooltip';
+import { BookmarksControls } from '../bookmark/BookmarksControls';
 
 type Props = {
   linkCount: number;
@@ -26,14 +23,9 @@ type Props = {
 };
 
 const Team = ({ team, linkCount, bookmarks, digests }: Props) => {
-  const searchParams = useSearchParams();
-  const path = usePathname();
-  let [isPending, startTransition] = useTransition();
-  const { replace } = useRouter();
-
   return (
     <PageContainer title={team.name}>
-      <div className="flex max-lg:flex-col gap-5">
+      <div className="flex max-lg:flex-col gap-5 pb-4">
         <Card
           className="w-full lg:w-2/3"
           header={
@@ -42,33 +34,12 @@ const Team = ({ team, linkCount, bookmarks, digests }: Props) => {
                 <h2 className="text-xl">Bookmarks</h2>
                 <CounterTag count={linkCount} />
               </div>
-              <div className="flex items-center justify-center gap-3">
-                <button
-                  title="Show unused bookmarks"
-                  className={clsx(
-                    'm-1 relative top-[2px] inline-flex items-center rounded-full border py-1 px-3 text-sm font-bold cursor-pointer transition ease-in-out duration-150 focus:outline-none',
-                    searchParams?.get('all') === 'true' &&
-                      'bg-gray-900 text-white border-black',
-                    searchParams?.get('all') !== 'false' &&
-                      'opacity-40 hover:opacity-100'
-                  )}
-                  onClick={() => {
-                    if (!searchParams) return;
-                    const params = new URLSearchParams(searchParams);
-                    if (params.get('all') === 'true') {
-                      params.delete('all');
-                    } else {
-                      params.set('all', 'true');
-                    }
-                    startTransition(() => {
-                      replace(path + `?${params.toString()}`);
-                    });
-                  }}
-                >
-                  All bookmarks
-                </button>
-                <Pagination totalItems={linkCount} className="h-6" />
-              </div>
+              <BookmarksControls linkCount={linkCount} />
+            </div>
+          }
+          footer={
+            <div className="flex items-center justify-end">
+              <BookmarksControls linkCount={linkCount} />
             </div>
           }
         >