Merge pull request #273 from karannfr/prod

fixed: #266, #270, #271, #269

Author: abhitrueprogrammer

src/app/layout.tsx

@@ -122,7 +122,6 @@ export default function RootLayout({
           <div className="bg-[#F3F5FF] dark:bg-[#070114]">
             <Navbar />
             <ChildrenWrapper>{children}</ChildrenWrapper>
-
             <Footer />
           </div>
         </ThemeProvider>

src/app/pinned/page.tsx

@@ -1,21 +1,25 @@
+"use client";
+
 import React from "react";
 import SearchBar from "@/components/Searchbar/searchbar";
 import PinnedPapersCarousel from "@/components/PinnedPapersCarousel";
+import { type IUpcomingPaper } from "@/interface";
+import { useState } from "react";
 
 const Pinned = () => {
+  const [displayPapers, setDisplayPapers] = useState<IUpcomingPaper[]>([]);
   return (
     <div id="pinned" className="mt-5 flex flex-col justify-between">
       <h1 className="mx-auto my-8 hidden text-center font-vipnabd text-3xl font-extrabold md:block">
         Pinned Subjects
       </h1>
-
       <div className="mb-3 flex w-full flex-col items-center gap-2 px-6">
         <div className="w-full">
-          <SearchBar type="pinned" />
+          <SearchBar type="pinned" displayPapers = {displayPapers.length > 0} />
         </div>
       </div>
-      <div className="min-h-[20vh]">
-        <PinnedPapersCarousel carouselType="users" />
+      <div className="min-h-[40vh]">
+        <PinnedPapersCarousel carouselType="users" displayPapers = {displayPapers} setDisplayPapers = {setDisplayPapers} />
       </div>
       <div className="mt-6 flex w-full items-center justify-center">
         <p>You can pin upto 8 Subjects here</p>

src/components/Footer.tsx

@@ -50,7 +50,7 @@ export default function Footer() {
   };
 
   return (
-    <footer className="w-full overflow-hidden bg-gradient-to-b from-[#F3F5FF] to-[#A599CE] px-6 py-10 text-white dark:from-[#070114] dark:to-[#1F0234]">
+    <footer className="w-full overflow-hidden bg-gradient-to-b from-[#F3F5FF] to-[#A599CE] px-6 py-10 pt-16 text-white dark:from-[#070114] dark:to-[#1F0234]">
       <div className="mx-auto flex max-w-7xl flex-wrap justify-between gap-y-10 text-center sm:text-left">
         {/* Branding & Socials */}
         <div className="flex w-full flex-col gap-4 sm:w-[45%] lg:w-[30%]">

src/components/PinnedPapersCarousel.tsx

@@ -19,12 +19,17 @@ import { chunkArray } from "@/util/utils";
 import { StoredSubjects } from "@/interface";
 import SkeletonPaperCard from "./SkeletonPaperCard";
 
+type PinnedPapersCarouselProps = {
+  carouselType: "users" | "upcoming",
+  displayPapers: IUpcomingPaper[],
+  setDisplayPapers: React.Dispatch<React.SetStateAction<IUpcomingPaper[]>> 
+}
+
 function PinnedPapersCarousel({
   carouselType = "upcoming",
-}: {
-  carouselType: "users" | "upcoming";
-}) {
-  const [displayPapers, setDisplayPapers] = useState<IUpcomingPaper[]>([]);
+  displayPapers,
+  setDisplayPapers
+} : PinnedPapersCarouselProps) {
   const [isLoading, setIsLoading] = useState(true);
   const [chunkSize, setChunkSize] = useState<number>(4);
 
@@ -107,6 +112,7 @@ function PinnedPapersCarousel({
   return (
     <div className="px-4">
       <div className="">
+        {displayPapers.length > 0 ?
         <Carousel
           opts={{
             align: "start",
@@ -115,12 +121,13 @@ function PinnedPapersCarousel({
           plugins={plugins}
           className="w-full"
         >
+          {displayPapers.length > 8 &&
           <div
-            className={`relative mt-4 flex justify-end gap-4 ${displayPapers.length > 0 ? "block" : "hidden"}`}
+            className={`relative mt-4 flex justify-end gap-4`}
           >
             <CarouselPrevious className="relative" />
             <CarouselNext className="relative" />
-          </div>
+          </div>}
           <CarouselContent>
             {isLoading ? (
               <CarouselItem
@@ -167,7 +174,11 @@ function PinnedPapersCarousel({
               })
             )}
           </CarouselContent>
-        </Carousel>
+        </Carousel> : 
+        <div className={`relative flex justify-center gap-4 items-center h-max text-center mt-48 font-bold`}
+        >
+          Start pinning subjects for quick and easy access.
+        </div>}
       </div>
     </div>
   );

src/components/Searchbar/pinned-searchbar.tsx

@@ -9,12 +9,15 @@ import Fuse from "fuse.js";
 import NavDropdownButton from "../NavDropdownButton";
 import { StoredSubjects } from "@/interface";
 import FloatingControls from "./floating-controls";
+import { type IUpcomingPaper } from "@/interface";
 
 function PinnedSearchBar({
   initialSubjects,
+  displayPapers,
   filtersNotPulled,
 }: {
   initialSubjects: string[];
+  displayPapers: boolean;
   filtersNotPulled?: () => void;
 }) {
   const router = useRouter();
@@ -234,6 +237,7 @@ function PinnedSearchBar({
                       }}
                       disabled={!showControls || searchText.trim() === ""}
                     />
+                    {displayPapers &&
                     <button
                       onClick={() => {
                         handleRemoveAll();
@@ -242,15 +246,15 @@ function PinnedSearchBar({
                       className="flex items-center gap-2 rounded-full border border-[#3A3745] bg-[#e8e9ff] px-3 py-1.5 text-sm font-semibold text-gray-700 transition hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823]"
                     >
                       Remove All <X className="h-4 w-4" />
-                    </button>
+                    </button>}
                   </FloatingControls>
                 </div>
               </div>
             </div>
           </form>
         </div>
       </div>
-
+      {displayPapers && 
       <div className="mt-2 hidden w-full md:block">
         <div className="ml-auto w-fit">
           <button
@@ -263,7 +267,7 @@ function PinnedSearchBar({
             Remove All <X className="h-4 w-4" />
           </button>
         </div>
-      </div>
+      </div>}
     </div>
   );
 }

src/components/Searchbar/searchbar.tsx

@@ -1,15 +1,17 @@
-"use server";
+"use client";
 
 import React from "react";
 import axios from "axios";
 import { type ICourses } from "@/interface";
 import SearchBarChild from "./searchbar-child";
 import PinnedSearchBar from "./pinned-searchbar";
+import { type IUpcomingPaper } from "@/interface";
+import { useState, useEffect } from "react";
 
 export async function fetchSubjects() {
   try {
     const response = await axios.get<ICourses[]>(
-      `${process.env.SERVER_URL}/api/course-list`,
+      `/api/course-list`,
     );
 
     return response.data.map((course) => course.name);
@@ -19,16 +21,25 @@ export async function fetchSubjects() {
   }
 }
 
-export default async function SearchBar({
+export default function SearchBar({
   type = "default",
+  displayPapers
 }: {
   type?: "default" | "pinned";
+  displayPapers: boolean;
 }) {
-  const subjects = await fetchSubjects();
+  const [subjects,setSubjects] = useState<string[]>([]);
+
+  useEffect(() => {
+    async function getSubjects() {
+      setSubjects(await fetchSubjects());
+    }
+    void getSubjects()
+  },[])
 
   return type === "pinned" ? (
-    <PinnedSearchBar initialSubjects={subjects} />
+    <PinnedSearchBar initialSubjects={subjects} displayPapers = {displayPapers} />
   ) : (
     <SearchBarChild initialSubjects={subjects} />
   );
-}
+}