From e9effc2fd28649a96d945f10411763deeead875c Mon Sep 17 00:00:00 2001
From: Harshpreet Singh Johar <hpsj3112@gmail.com>
Date: Tue, 30 Jan 2024 23:45:45 +0530
Subject: [PATCH] Refactor Trending component and API endpoint

This commit refactors the Trending component and the API endpoint. It improves code readability and consistency by fixing indentation, adding missing semicolons, and using consistent formatting. It also updates the API endpoint to use the thumbnail URL for images instead of the full image URL.
---
 components/home/Trending.tsx | 28 ++++++++++++++++++----------
 pages/api/trending/get.ts    |  2 +-
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/components/home/Trending.tsx b/components/home/Trending.tsx
index f644d011..b8cb8dfc 100644
--- 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>
     );
-}
\ No newline at end of file
+}
diff --git a/pages/api/trending/get.ts b/pages/api/trending/get.ts
index ab3fdb49..4dd2b7e9 100644
--- 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"),