Merge pull request #160 from PEC-CSS/hot-fx/trending-card

Refactor Trending component and API endpoint
PEC-CSS · Jan 30, 2024 · 8a7797a · 8a7797a
2 parents 3a57f38 + e9effc2
commit 8a7797a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/components/home/Trending.tsx b/components/home/Trending.tsx
@@ -1,7 +1,7 @@
 import styles from "../../styles/components/Trending.module.scss";
 import { useEffect, useState } from "react";
-import {useSelector} from "react-redux";
-import {selectTrendingState} from "../../redux/slices/trendingSlice";
+import { useSelector } from "react-redux";
+import { selectTrendingState } from "../../redux/slices/trendingSlice";
 
 export interface TrendingCard {
     title: string;
@@ -16,14 +16,17 @@ type Props = {
 };
 
 export default function Trending({ trendingType }: Props) {
-    const trendingData = useSelector(selectTrendingState)
+    const trendingData = useSelector(selectTrendingState);
     const [trendingInfo, setTrendingInfo] = useState<TrendingCard[] | null>();
 
     useEffect(() => {
-        const filteredCards = trendingData.trendingCards.filter((trendingCard) => trendingCard.branch === trendingType || trendingType === "home");
+        const filteredCards = trendingData.trendingCards.filter(
+            (trendingCard) =>
+                trendingCard.branch === trendingType || trendingType === "home"
+        );
         setTrendingInfo(
-            filteredCards.slice( Math.max(filteredCards.length - 3, 0) )
-        )
+            filteredCards.slice(Math.max(filteredCards.length - 3, 0))
+        );
     }, [trendingData, trendingType]);
 
     return (
@@ -36,13 +39,18 @@ export default function Trending({ trendingType }: Props) {
                             className={`${styles.trending_card} ${styles.loading}`}
                         >
                             <h4 />
-                            <p /><p /><p />
+                            <p />
+                            <p />
+                            <p />
                             <p className={styles.half} />
                         </div>
                     );
                 })
             ) : trendingInfo?.length === 0 ? (
-                <p style={{textAlign: 'center'}}>Coming soon! Get ready for exciting trending content. Stay tuned! 🚀</p>
+                <p style={{ textAlign: "center" }}>
+                    Coming soon! Get ready for exciting trending content. Stay
+                    tuned! 🚀
+                </p>
             ) : (
                 trendingInfo?.map((info, index) => {
                     return (
@@ -51,7 +59,7 @@ export default function Trending({ trendingType }: Props) {
                             className={styles.trending_card}
                             style={{
                                 backgroundImage: `url(${info.image})`,
-                                backgroundSize: 'contain'
+                                backgroundSize: "contain",
                             }}
                         >
                             <h4>{info.title}</h4>
@@ -62,4 +70,4 @@ export default function Trending({ trendingType }: Props) {
             )}
         </div>
     );
-}
+}
diff --git a/pages/api/trending/get.ts b/pages/api/trending/get.ts
@@ -53,7 +53,7 @@ export default function handler(
                         .slice(Math.max(filteredRows.length - 12, 0))
                         .map((row: GoogleSpreadsheetRow) => {
                             const image = row.get("Image");
-                            const imageUrl = `https://drive.google.com/uc?id=${getId(image)}`;
+                            const imageUrl = `https://drive.google.com/thumbnail?id=${getId(image)}`;
                             return {
                                 title: row.get("Title"),
                                 description: row.get("Description"),