Added airing schedule and made some changes in airing schedule loadin…

…g animation
ShivaBhattacharjee · Aug 11, 2023 · 4a73a46 · 4a73a46
1 parent df8f1a4
commit 4a73a46
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 22 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -60,15 +60,16 @@ export default async function page() {
           <Cards props={Trending} />
         </div>
       </div>
-      {/* <Suspense fallback={<AiringScheduleLoading/>}>
-        <AiringSchedule />
-      </Suspense> */}
-
+
       <Suspense fallback={<div className='flex justify-center items-center gap-5 mt-12'>
-        <SpinLoading/>
+        <SpinLoading />
       </div>}>
         <UpcomingSeason />
       </Suspense>
+
+      <Suspense fallback={<AiringScheduleLoading />}>
+        <AiringSchedule />
+      </Suspense>
     </div>
   )
 }
diff --git a/src/components/AiringSchedule.tsx b/src/components/AiringSchedule.tsx
@@ -5,30 +5,37 @@ const getAiringSchedule = async () => {
     try {
         const response = await fetch(`https://api.anify.tv/schedule?apikey=${process.env.NEXT_PUBLIC_ANIFY_KEY}`,{
             cache : "no-cache"
-        })
-        return response.json()
+        });
+        return response.json();
     } catch (error) {
-        console.error("Error getting airing list: ", error)
+        console.error("Error getting airing list: ", error);
         return [];
     }
 }
 
 export default async function AiringSchedule() {
-    const Airing = await getAiringSchedule()
+    const Airing = await getAiringSchedule();
+
+    const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    const currentDayIndex = new Date().getDay();
+    const currentDay = daysOfWeek[currentDayIndex];
+
     return (
-            <div className='flex flex-col mt-9'>
-                <h1 className='text-3xl lg:text-5xl font-bold'>Airing</h1>
-                <div className='flex gap-2'>
-                    <div className="bg-white/10 h-52 w-full p-4 rounded-lg mt-5 lg:h-96 overflow-y-auto">
-                        <div className="flex flex-col gap-3">
-                            <h1>Coming Up Next!</h1>
-                            {Object.keys(Airing).map((day) => (
-                                <h1>{day.split("Schedule")}</h1>
-                            ))}
+        <div className='flex flex-col mt-9'>
+            <h1 className='text-3xl lg:text-5xl font-bold'>Airing</h1>
+            <div className='flex gap-2'>
+                <div className="bg-white/10 h-auto max-h-[400px] w-full p-4 rounded-lg mt-5 lg:h-96 overflow-y-auto">
+                    <div className="flex flex-col gap-3">
+                        <h1>Coming Up Next!</h1>
+
+                        <div className="flex justify-between">
+                            <span>Previous</span>
+                        <span className='text-center'>{currentDay}</span>
+                        <span>Next</span>
                         </div>
                     </div>
                 </div>
             </div>
+        </div>
     );
 };
-
diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx
@@ -26,8 +26,7 @@ const ScrollToTop = () => {
         <>
             <div className={`fixed flex items-center duration-200 ${isVisible? "scale-100" : 
             "scale-0 "}
-                    bg-white/30 backdrop-blur-lg z-10 right-5 md:bottom-10 bottom-32
-                     rounded-full p-5 shadow-black shadow-lg`}>
+                    bg-white/30 backdrop-blur-lg z-10 right-5 md:bottom-10 bottom-32 rounded-full p-5 shadow-black shadow-lg`}>
                 <ChevronUp onClick={goToBtn} className='cursor-pointer' />
             </div>
         </>

diff --git a/src/loading/AiringScheduleLoading.tsx b/src/loading/AiringScheduleLoading.tsx
@@ -1,11 +1,13 @@
 import React from 'react'
+import SpinLoading from './SpinLoading'
 
 const AiringScheduleLoading = () => {
   return (
     <div className='flex flex-col mt-9'>
     <h1 className='text-3xl lg:text-5xl font-bold'>Airing</h1>
     <div className='flex gap-2'>
-        <div className="bg-white/60 animate-pulse h-52 w-full p-4 rounded-lg mt-5 lg:h-96 overflow-y-auto">
+        <div className="bg-white/10 flex justify-center items-center animate-pulse h-52 w-full p-4 rounded-lg mt-5 lg:h-96 overflow-y-auto">
+          <SpinLoading/>
         </div>
     </div>
 </div>