fix: modify helpful link card to be consistent with library card and …

…add pager feature to helpful links page per UnlockedLabs#678
carddev81 · Jan 30, 2025 · 786c471 · 786c471
1 parent c68484e
commit 786c471
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 42 deletions.
diff --git a/frontend/src/Components/cards/HelpfulLinkCard.tsx b/frontend/src/Components/cards/HelpfulLinkCard.tsx
@@ -73,11 +73,17 @@ export default function HelpfulLinkCard({
 
     return (
         <div
-            className="card p-4 space-y-2 relative"
+            className="card cursor-pointer"
             onClick={() => {
                 void handleHelpfulLinkClick(link.id);
             }}
         >
+            <div className="flex p-4 gap-2 border-b-2">
+                <figure className="w-[48px] h-[48px] bg-cover">
+                    <img src={link.thumbnail_url ?? ''} alt={link.title} />
+                </figure>
+                <h3 className="w-3/4 body my-auto mr-7">{link.title}</h3>
+            </div>
             {AdminRoles.includes(role) ? (
                 showModal != undefined && (
                     <div className="flex flex-row gap-2 absolute top-4 right-4 z-100">
@@ -98,28 +104,31 @@ export default function HelpfulLinkCard({
                     </div>
                 )
             ) : (
-                <ULIComponent
-                    iconClassName={`absolute right-1 w-6 h-6 cursor-pointer ${link.is_favorited ? 'text-primary-yellow' : ''}`}
-                    icon={link.is_favorited ? StarIcon : StarIconOutline}
-                    onClick={(e) => {
-                        if (e) void handleToggleAction('favorite', e);
-                    }}
-                />
-            )}
-            <img
-                src={link.thumbnail_url}
-                alt={link.title}
-                className="h-16 mx-auto object-contain"
-            />
-            <h3 className="body">{link.title}</h3>
-            <p className="body line-clamp-2 h-10">{link.description}</p>
-
-            {AdminRoles.includes(role) && (
-                <VisibleHiddenToggle
-                    visible={visible}
-                    changeVisibility={() => void handleToggleAction('toggle')}
-                />
+                <div
+                    className="absolute right-2 top-2 z-100"
+                    onClick={(e) => void handleToggleAction('favorite', e)}
+                >
+                    <ULIComponent
+                        tooltipClassName="absolute right-2 top-2 z-100"
+                        iconClassName={`w-6 h-6 cursor-pointer ${link.is_favorited ? 'text-primary-yellow' : ''}`}
+                        icon={link.is_favorited ? StarIcon : StarIconOutline}
+                        dataTip="Favorite Helpful Link"
+                    />
+                </div>
             )}
+            <div className="p-4 space-y-2">
+                <p className="body-small h-[40px] leading-5 line-clamp-2">
+                    {link.description}
+                </p>
+                {AdminRoles.includes(role) && (
+                    <VisibleHiddenToggle
+                        visible={visible}
+                        changeVisibility={() =>
+                            void handleToggleAction('toggle')
+                        }
+                    />
+                )}
+            </div>
         </div>
     );
 }
diff --git a/frontend/src/Pages/HelpfulLinks.tsx b/frontend/src/Pages/HelpfulLinks.tsx
@@ -5,41 +5,68 @@ import {
     UserRole
 } from '@/common';
 import HelpfulLinkCard from '@/Components/cards/HelpfulLinkCard';
+import Pagination from '@/Components/Pagination';
 import { AxiosError } from 'axios';
+import { useState } from 'react';
 import useSWR from 'swr';
 
 export default function HelpfulLinks() {
+    const [perPage, setPerPage] = useState(20);
+    const [pageQuery, setPageQuery] = useState<number>(1);
     const {
         data: helpfulLinks,
         mutate: mutateHelpfulFavs,
         isLoading,
         error
     } = useSWR<ServerResponseOne<HelpfulLinkAndSort>, AxiosError>(
-        `/api/helpful-links`
+        `/api/helpful-links?page=${pageQuery}&per_page=${perPage}`
     );
     function updateFavorites() {
         void mutateHelpfulFavs();
     }
+    const handleSetPerPage = (perPage: number) => {
+        setPerPage(perPage);
+        setPageQuery(1);
+        updateFavorites();
+    };
+    const helpfulLinksMeta = helpfulLinks?.data?.meta ?? {
+        total: 0,
+        per_page: 20,
+        page: 1,
+        current_page: 1,
+        last_page: 1
+    };
     return (
-        <div className="grid grid-cols-4 gap-6">
-            {helpfulLinks?.data?.helpful_links.map((link: HelpfulLink) => (
-                <HelpfulLinkCard
-                    key={link.id}
-                    link={link}
-                    mutate={updateFavorites}
-                    role={UserRole.Student}
-                />
-            ))}
-            {error && (
-                <span className="text-error">
-                    Failed to load helpful links.
-                </span>
-            )}
-            {!isLoading &&
-                !error &&
-                helpfulLinks?.data.helpful_links.length === 0 && (
-                    <span className="text-error">No results</span>
+        <>
+            <div className="grid grid-cols-4 gap-6">
+                {helpfulLinks?.data?.helpful_links.map((link: HelpfulLink) => (
+                    <HelpfulLinkCard
+                        key={link.id}
+                        link={link}
+                        mutate={updateFavorites}
+                        role={UserRole.Student}
+                    />
+                ))}
+                {error && (
+                    <span className="text-error">
+                        Failed to load helpful links.
+                    </span>
                 )}
-        </div>
+                {!isLoading &&
+                    !error &&
+                    helpfulLinks?.data.helpful_links.length === 0 && (
+                        <span className="text-error">No results</span>
+                    )}
+            </div>
+            {!isLoading && !error && helpfulLinksMeta && (
+                <div className="flex justify-center">
+                    <Pagination
+                        meta={helpfulLinksMeta}
+                        setPage={setPageQuery}
+                        setPerPage={handleSetPerPage}
+                    />
+                </div>
+            )}
+        </>
     );
 }