feat: Implement a way to review/rate anime (#108)

* Make details cover lead back to anime page

* Make 'markProgress' use object instead of param list

* Import Link

* Implement Rate modal

* Pass session into useAniList

Co-authored-by: Factiven <[email protected]>

* Reimplement using markComplete & add toast for failure

* redefined ratemodal

* fix: home page client error

* update version

---------

Co-authored-by: Factiven <[email protected]>

3 files changed, 68 insertions, 61 deletions

diff --git a/pages/en/anime/watch/[...info].js b/pages/en/anime/watch/[...info].js
index dc1f412..259ebee 100644
--- a/pages/en/anime/watch/[...info].js
+++ b/pages/en/anime/watch/[...info].js
@@ -5,6 +5,7 @@ import EpisodeLists from "@/components/watch/secondary/episodeLists";
 import { getServerSession } from "next-auth";
 import { useWatchProvider } from "@/lib/context/watchPageProvider";
 import { authOptions } from "../../../api/auth/[...nextauth]";
+import { useAniList } from "@/lib/anilist/useAnilist";
 import { createList, createUser, getEpisode } from "@/prisma/user";
 import Link from "next/link";
 import MobileNav from "@/components/shared/MobileNav";
@@ -18,6 +19,7 @@ import Head from "next/head";
 import VidStack from "@/components/watch/new-player/player";
 import { useRouter } from "next/router";
 import { Spinner } from "@vidstack/react";
+import RateModal from "@/components/shared/RateModal";
 
 export async function getServerSideProps(context) {
   let userData = null;
@@ -32,11 +34,11 @@ export async function getServerSideProps(context) {
   }
 
   let proxy;
-  proxy = process.env.PROXY_URI;
+  proxy = process.env.PROXY_URI || null;
   if (proxy && proxy.endsWith("/")) {
     proxy = proxy.slice(0, -1);
   }
-  const disqus = process.env.DISQUS_SHORTNAME;
+  const disqus = process.env.DISQUS_SHORTNAME || null;
 
   const [aniId, provider] = query?.info;
   const watchId = query?.id;
@@ -149,7 +151,8 @@ export default function Watch({
   const [open, setOpen] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
 
-  const { setAutoNext } = useWatchProvider();
+  const { setAutoNext, ratingModalState, setRatingModalState } =
+    useWatchProvider();
 
   const [onList, setOnList] = useState(false);
 
@@ -494,6 +497,14 @@ export default function Watch({
       </Modal>
       <BugReportForm isOpen={isOpen} setIsOpen={setIsOpen} />
       <main className="w-screen h-full">
+        {!ratingModalState.isFullscreen && (
+          <RateModal
+            toggle={ratingModalState.isOpen}
+            setToggle={setRatingModalState}
+            position="bottom"
+            session={sessions}
+          />
+        )}
         <Navbar
           scrollP={20}
           withNav={true}
@@ -614,11 +625,6 @@ export default function Watch({
               id="secondary"
               className={`relative ${theaterMode ? "pt-5" : "pt-4 lg:pt-0"}`}
             >
-              {/* <div className="w-full h-[150px] text-black p-3">
-                <span className="bg-white w-full h-full flex-center">
-                  ad banner
-                </span>
-              </div> */}
               <EpisodeLists
                 info={info}
                 session={sessions}
@@ -641,10 +647,7 @@ export default function Watch({
 function SpinLoader() {
   return (
     <div className="pointer-events-none absolute inset-0 z-50 flex h-full w-full items-center justify-center">
-      <Spinner.Root
-        className="text-white animate-spin opacity-100"
-        size={84}
-      >
+      <Spinner.Root className="text-white animate-spin opacity-100" size={84}>
         <Spinner.Track className="opacity-25" width={8} />
         <Spinner.TrackFill className="opacity-75" width={8} />
       </Spinner.Root>
diff --git a/pages/en/index.tsx b/pages/en/index.tsx
index 4141015..faead42 100644
--- a/pages/en/index.tsx
+++ b/pages/en/index.tsx
@@ -19,6 +19,7 @@ import { getGreetings } from "@/utils/getGreetings";
 import { redis } from "@/lib/redis";
 import { Navbar } from "@/components/shared/NavBar";
 import UserRecommendation from "@/components/home/recommendation";
+import { useRouter } from "next/router";
 
 export async function getServerSideProps() {
   let cachedData;
@@ -28,7 +29,7 @@ export async function getServerSideProps() {
   }
 
   if (cachedData) {
-    const { genre, detail, populars } = JSON.parse(cachedData);
+    const { genre, detail, populars, firstTrend } = JSON.parse(cachedData);
     const upComing = await getUpcomingAnime();
     return {
       props: {
@@ -36,6 +37,7 @@ export async function getServerSideProps() {
         detail,
         populars,
         upComing,
+        firstTrend,
       },
     };
   } else {
@@ -56,6 +58,7 @@ export async function getServerSideProps() {
           genre: genreDetail.props,
           detail: trendingDetail.props,
           populars: popularDetail.props,
+          firstTrend: trendingDetail.props.data[0],
         }), // set cache for 2 hours
         "EX",
         60 * 60 * 2
@@ -70,6 +73,7 @@ export async function getServerSideProps() {
         detail: trendingDetail.props,
         populars: popularDetail.props,
         upComing,
+        firstTrend: trendingDetail.props.data[0],
       },
     };
   }
@@ -80,6 +84,7 @@ type HomeProps = {
   detail: any;
   populars: any;
   upComing: any;
+  firstTrend: any;
 };
 
 export interface SessionTypes {
@@ -106,7 +111,12 @@ interface Image {
   medium: string;
 }
 
-export default function Home({ detail, populars, upComing }: HomeProps) {
+export default function Home({
+  detail,
+  populars,
+  upComing,
+  firstTrend,
+}: HomeProps) {
   const { data: sessions }: any = useSession();
   const userSession: SessionTypes = sessions?.user;
 
@@ -126,6 +136,8 @@ export default function Home({ detail, populars, upComing }: HomeProps) {
   });
   const { anime: release } = GetMedia(sessions);
 
+  const router = useRouter();
+
   const [schedules, setSchedules] = useState(null);
   const [anime, setAnime] = useState([]);
 
@@ -195,7 +207,6 @@ export default function Home({ detail, populars, upComing }: HomeProps) {
   const [prog, setProg] = useState<any[] | null>();
 
   const popular = populars?.data;
-  const data = detail.data[0];
 
   useEffect(() => {
     async function userData() {
@@ -324,6 +335,10 @@ export default function Home({ detail, populars, upComing }: HomeProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [userSession?.name, currentAnime, plan]);
 
+  function removeHtmlTags(text: string): string {
+    return text?.replace(/<[^>]+>/g, "");
+  }
+
   return (
     <Fragment>
       <Head>
@@ -370,54 +385,41 @@ export default function Home({ detail, populars, upComing }: HomeProps) {
 
       <Navbar paddingY="pt-2 lg:pt-10" withNav={true} home={true} />
       <div className="h-auto w-screen bg-[#141519] text-[#dbdcdd]">
-        {/* PC / TABLET */}
-        <div className=" hidden justify-center lg:flex my-16">
-          <div className="relative grid grid-rows-2 items-center lg:flex lg:h-[467px] lg:w-[80%] lg:justify-between">
-            <div className="row-start-2 flex h-full flex-col gap-7 lg:w-[55%] lg:justify-center">
-              <h1 className="w-[85%] font-outfit font-extrabold lg:text-[34px] line-clamp-2">
-                {data.title.english || data.title.romaji || data.title.native}
-              </h1>
-              <p
-                className="font-roboto font-light lg:text-[18px] line-clamp-5"
-                dangerouslySetInnerHTML={{ __html: data?.description }}
-              />
-
-              <div className="lg:pt-5 flex">
-                <Link
-                  href={`/en/anime/${data.id}`}
-                  className="rounded-sm p-3 text-md font-karla font-light ring-1 ring-[#FF7F57]"
+        <div className="hidden lg:flex w-full justify-center my-16">
+          <div className="flex justify-between w-[80%] h-[470px]">
+            <div className="flex flex-col items-start justify-center w-[55%] gap-5">
+              <p className="font-outfit font-extrabold text-[34px] line-clamp-2 leading-10">
+                {firstTrend?.title?.english || firstTrend?.title?.romaji}
+              </p>
+              <p className="font-roboto font-light lg:text-[18px] line-clamp-3 tracking-wide">
+                {removeHtmlTags(firstTrend?.description)}
+              </p>
+              {firstTrend && (
+                <button
+                  onClick={() => {
+                    router.push(`/en/anime/${firstTrend?.id}`);
+                  }}
+                  className="p-3 text-md font-karla font-light ring-1 ring-action/50 rounded"
                 >
                   START WATCHING
-                </Link>
-              </div>
+                </button>
+              )}
             </div>
-            <div className="z-10 row-start-1 flex justify-center ">
-              <div className="relative  lg:h-[467px] lg:w-[322px] lg:scale-100">
-                <div className="absolute bg-gradient-to-t from-[#141519] to-transparent lg:h-[467px] lg:w-[322px]" />
-
-                <Image
-                  draggable={false}
-                  src={data.coverImage?.extraLarge || data.image}
-                  alt={`cover ${data.title.english || data.title.romaji}`}
-                  width={1200}
-                  height={1200}
-                  priority
-                  className="rounded-tl-xl rounded-tr-xl object-cover bg-blend-overlay lg:h-[467px] lg:w-[322px]"
-                />
-              </div>
+            <div className="relative block h-[467px] w-[322px]">
+              <div className="absolute bg-gradient-to-t from-primary to-transparent w-full h-full inset-0 z-20" />
+              <Image
+                src={firstTrend?.coverImage?.extraLarge || firstTrend?.image}
+                alt={`cover ${
+                  firstTrend?.title?.english || firstTrend?.title?.romaji
+                }`}
+                fill
+                sizes="100%"
+                quality={100}
+                className="object-cover rounded z-10"
+              />
             </div>
           </div>
         </div>
-        {/* <div className="relative w-screen h-screen overflow-hidden">
-          <iframe
-            width="560"
-            height="315"
-            src="https://www.youtube.com/embed/VVfdqw-qvNE?autoplay=1&controls=0&rel=0&mute=1"
-            frameborder="0"
-            allowfullscreen
-            className="absolute w-screen h-screen top-0 scale-[115%] left-0 z-0"
-          />
-        </div> */}
 
         {sessions && (
           <div className="flex items-center justify-center lg:bg-none mt-4 lg:mt-0 w-screen">
diff --git a/pages/en/schedule/index.tsx b/pages/en/schedule/index.tsx
index aa30259..42a28c6 100644
--- a/pages/en/schedule/index.tsx
+++ b/pages/en/schedule/index.tsx
@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import Image from "next/image";
 import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
@@ -15,7 +17,6 @@ import {
 import { scheduleQuery } from "@/lib/graphql/query";
 import MobileNav from "@/components/shared/MobileNav";
 
-import { useSession } from "next-auth/react";
 import { redis } from "@/lib/redis";
 import Head from "next/head";
 import { Navbar } from "@/components/shared/NavBar";
@@ -344,7 +345,7 @@ export default function Schedule({ schedule }: any) {
                         {/* {!isAired(time) && <p>Airing Next</p>} */}
                         <p
                           className={`absolute left-0 h-1.5 w-1.5 rounded-full ${
-                            isAired(time) ? "bg-action" : "bg-gray-600" // Add a class for currently airing anime
+                            isAired(+time) ? "bg-action" : "bg-gray-600" // Add a class for currently airing anime
                           }`}
                         ></p>
                       </div>
@@ -371,14 +372,15 @@ export default function Schedule({ schedule }: any) {
                                     {m.title.romaji}
                                   </h1>
                                   <p className="text-gray-400 group-hover:text-action/80 transition-all duration-200 ease-out">
-                                    Ep {s.episode} {timeStamptoHour(s.airingAt)}
+                                    Ep {s?.episode}{" "}
+                                    {timeStamptoHour(s.airingAt)}
                                   </p>
                                 </div>
                               </Link>
                               <p
                                 key={`p_${s.id}_${index}`}
                                 className={`absolute translate-x-full top-1/2 -translate-y-1/2 h-full w-0.5 ${
-                                  isAired(time) ? "bg-action" : "bg-gray-600" // Add a class for currently airing anime
+                                  isAired(+time) ? "bg-action" : "bg-gray-600" // Add a class for currently airing anime
                                 }`}
                               ></p>
                             </>