Update v3.6.7

> Fixed Schedule

1 files changed, 69 insertions, 98 deletions

diff --git a/components/home/schedule.js b/components/home/schedule.js
index f5aa44f..4a85143 100644
--- a/components/home/schedule.js
+++ b/components/home/schedule.js
@@ -12,50 +12,30 @@ export default function Schedule({ data, scheduleData, time }) {
     "Schedule";
   currentDay = currentDay.replace("Schedule", "");
 
-  const [activeSection, setActiveSection] = useState(currentDay);
-
-  const scrollRef = useRef(null);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [days, setDay] = useState();
 
   useEffect(() => {
     if (scheduleData) {
-      const index = Object?.keys(scheduleData).indexOf(
-        activeSection + "Schedule"
-      );
-      if (scrollRef.current) {
-        scrollRef.current.scrollLeft = scrollRef.current.clientWidth * index;
-      }
+      const days = Object.keys(scheduleData);
+      setDay(days);
     }
-  }, [activeSection, scheduleData]);
+  }, [scheduleData]);
 
-  const handleScroll = (e) => {
-    const { scrollLeft, clientWidth } = e.target;
-    const index = Math.floor(scrollLeft / clientWidth);
-    let day = Object?.keys(scheduleData)[index];
-    day = day.replace("Schedule", "");
-    setActiveSection(day);
+  const handleNextPage = () => {
+    setCurrentPage((prevPage) => (prevPage + 1) % days.length);
   };
 
-  // buttons to scroll horizontally
-  const scrollLeft = () => {
-    if (scrollRef.current.scrollLeft === 0) {
-      scrollRef.current.scrollLeft = scrollRef.current.scrollWidth;
-    } else {
-      scrollRef.current.scrollLeft -= scrollRef.current.offsetWidth;
-    }
+  const handlePreviousPage = () => {
+    setCurrentPage((prevPage) => (prevPage - 1 + days.length) % days.length);
   };
 
-  const scrollRight = () => {
-    const difference =
-      scrollRef.current.scrollWidth -
-      scrollRef.current.offsetWidth -
-      scrollRef.current.scrollLeft;
-    if (difference < 5) {
-      // adjust the threshold as needed
-      scrollRef.current.scrollLeft = 0;
-    } else {
-      scrollRef.current.scrollLeft += scrollRef.current.offsetWidth;
-    }
-  };
+  useEffect(() => {
+    const todayIndex = days?.findIndex((day) =>
+      day.toLowerCase().includes(currentDay)
+    );
+    setCurrentPage(todayIndex >= 0 ? todayIndex : 0);
+  }, [currentDay, days]);
 
   return (
     <div className="flex flex-col gap-5 px-4 lg:px-0">
@@ -126,84 +106,75 @@ export default function Schedule({ data, scheduleData, time }) {
             </div>
           </div>
         </div>
-        {scheduleData && (
+
+        {scheduleData && days && (
           <div className="w-full bg-tersier rounded-b overflow-hidden">
             <div
-              ref={scrollRef}
-              className="flex overflow-x-scroll snap snap-x snap-proximity  scrollbar-hide"
-              onScroll={handleScroll}
+              className="snap-start flex-shrink-0 h-[240px] overflow-y-scroll scrollbar-thin scrollbar-thumb-secondary scrollbar-thumb-rounded w-full"
+              style={{ scrollbarGutter: "stable" }}
             >
-              {Object.entries(scheduleData).map(([section, data], index) => {
-                const uniqueArray = data.reduce((accumulator, current) => {
-                  if (!accumulator.find((item) => item.id === current.id)) {
-                    accumulator.push(current);
-                  }
-                  return accumulator;
-                }, []);
-
-                return (
-                  <div
-                    key={index}
-                    className="snap-start flex-shrink-0 h-[240px] overflow-y-scroll scrollbar-thin scrollbar-thumb-secondary scrollbar-thumb-rounded w-full"
-                    style={{ scrollbarGutter: "stable" }}
-                  >
-                    <div className="flex flex-col gap-2 px-2 pt-2">
-                      {uniqueArray.map((i, index) => {
-                        const currentTime = Date.now();
-                        const hasAired = i.airingAt < currentTime;
+              <div className="flex flex-col gap-2 px-2 pt-2">
+                {scheduleData[days[currentPage]]
+                  .filter((show, index, self) => {
+                    return index === self.findIndex((s) => s.id === show.id);
+                  })
+                  .map((i, index) => {
+                    const currentTime = Date.now();
+                    const hasAired = i.airingAt < currentTime;
 
-                        return (
-                          <Link
-                            key={`${i.id}-${index}`}
-                            href={`/en/anime/${i.id}`}
-                            className={`${
-                              hasAired ? "opacity-40" : ""
-                            } h-full w-full flex items-center p-2 flex-shrink-0 hover:bg-secondary cursor-pointer`}
-                          >
-                            <div className="shrink-0">
-                              <Image
-                                src={i.coverImage}
-                                alt="coverSchedule"
-                                width={300}
-                                height={300}
-                                className="w-10 h-10 object-cover rounded"
-                              />
-                            </div>
-                            <div className="flex items-center justify-between w-full">
-                              <div className="font-karla px-2">
-                                <h1 className="font-semibold text-sm line-clamp-1">
-                                  {i.title.romaji}
-                                </h1>
-                                <p className="font-semibold text-xs text-gray-400">
-                                  {convertUnixToTime(i.airingAt)} - Episode{" "}
-                                  {i.airingEpisode}
-                                </p>
-                              </div>
-                              <div>
-                                <PlayIcon className="w-6 h-6 text-gray-300" />
-                              </div>
-                            </div>
-                          </Link>
-                        );
-                      })}
-                    </div>
-                  </div>
-                );
-              })}
+                    return (
+                      <Link
+                        key={`${i.id}-${index}`}
+                        href={`/en/anime/${i.id}`}
+                        className={`${
+                          hasAired ? "opacity-40" : ""
+                        } h-full w-full flex items-center p-2 flex-shrink-0 hover:bg-secondary cursor-pointer`}
+                      >
+                        <div className="shrink-0">
+                          {i.coverImage && (
+                            <Image
+                              src={i.coverImage}
+                              alt={`${i.title.romaji} cover`}
+                              width={300}
+                              height={300}
+                              className="w-10 h-10 object-cover rounded"
+                            />
+                          )}
+                        </div>
+                        <div className="flex items-center justify-between w-full">
+                          <div className="font-karla px-2">
+                            <h1 className="font-semibold text-sm line-clamp-1">
+                              {i.title.romaji}
+                            </h1>
+                            <p className="font-semibold text-xs text-gray-400">
+                              {convertUnixToTime(i.airingAt)} - Episode{" "}
+                              {i.airingEpisode}
+                            </p>
+                          </div>
+                          <div>
+                            <PlayIcon className="w-6 h-6 text-gray-300" />
+                          </div>
+                        </div>
+                      </Link>
+                    );
+                  })}
+              </div>
             </div>
             <div className="flex items-center bg-tersier justify-between font-karla p-2 border-t border-secondary/40">
               <button
                 type="button"
                 className="bg-secondary px-2 py-1 rounded"
-                onClick={scrollLeft}
+                onClick={handlePreviousPage}
               >
                 <BackwardIcon className="w-5 h-5" />
               </button>
-              <div className="font-bold uppercase">{activeSection}</div>
+              <div className="font-bold uppercase">
+                {days[currentPage]?.replace("Schedule", "")}
+              </div>
               <button
                 type="button"
                 className="bg-secondary px-2 py-1 rounded"
-                onClick={scrollRight}
+                onClick={handleNextPage}
               >
                 <ForwardIcon className="w-5 h-5" />
               </button>