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]>

2 files changed, 167 insertions, 46 deletions

diff --git a/components/shared/RateModal.tsx b/components/shared/RateModal.tsx
new file mode 100644
index 0000000..6231eaf
--- /dev/null
+++ b/components/shared/RateModal.tsx
@@ -0,0 +1,135 @@
+import { useAniList } from "@/lib/anilist/useAnilist";
+import { useWatchProvider } from "@/lib/context/watchPageProvider";
+import { useState } from "react";
+import { toast } from "sonner";
+
+type Props = {
+  toggle: boolean;
+  position: "top" | "bottom";
+  setToggle: (prev: any) => void;
+  session: any;
+};
+
+export default function RateModal({
+  toggle,
+  position,
+  setToggle,
+  session,
+}: Props) {
+  const [startRate, setStartRate] = useState(false);
+  const { markComplete } = useAniList(session);
+
+  const { dataMedia } = useWatchProvider();
+
+  async function handleSubmit(event: any) {
+    event.preventDefault();
+    const data = new FormData(event.target);
+    const rating = data.get("rating");
+    const notes = data.get("notes");
+    try {
+      await markComplete(dataMedia?.id, { notes, scoreRaw: rating });
+      toast.success("Successfully rated!");
+      setToggle((prev: any) => {
+        return {
+          ...prev,
+          isOpen: false,
+        };
+      });
+    } catch (error) {
+      toast.error("Failed to rate!");
+    }
+  }
+
+  function handleClose() {
+    setToggle((prev: any) => {
+      return {
+        ...prev,
+        isOpen: false,
+      };
+    });
+  }
+  return (
+    <>
+      <div
+        className={`w-full h-[20dvh] fixed bg-gradient-to-${
+          position === "top"
+            ? `b top-0 from-black/20`
+            : "t -bottom-5 from-black/40"
+        } to-transparent z-10 transition-all duration-200 ease-in-out ${
+          toggle ? "" : "opacity-0 pointer-events-none"
+        }`}
+      />
+      <div
+        style={{ width: startRate ? "300px" : "240px" }}
+        className={`${
+          position === "top"
+            ? toggle
+              ? `top-5`
+              : `-top-48`
+            : toggle
+            ? `bottom-10`
+            : `-bottom-48`
+        } fixed text-white font-semibold z-50 font-karla transition-all duration-300 ease-in-out left-1/2 transform -translate-x-1/2 bg-secondary p-3 rounded flex flex-col justify-center items-center gap-4`}
+      >
+        <p className="text-lg">What do you think?</p>
+        <div
+          className={`flex gap-2 font-medium text-center transition-all duration-200 ${
+            startRate
+              ? "scale-50 hidden pointer-events-none"
+              : "scale-100 opacity-100"
+          }`}
+        >
+          <button
+            onClick={() => setStartRate(true)}
+            className="w-[100px] py-1 bg-action/10 rounded text-action"
+          >
+            Rate Now
+          </button>
+          <button
+            onClick={handleClose}
+            className="w-[100px] py-1 border border-opacity-0 hover:border-opacity-10 rounded border-white"
+          >
+            Close
+          </button>
+        </div>
+        {startRate && (
+          <form
+            onSubmit={handleSubmit}
+            className="flex flex-col items-center gap-3 w-full"
+          >
+            <input
+              type="number"
+              min={1}
+              max={100}
+              required
+              name="rating"
+              placeholder="rate from 1-100"
+              className="appearance-none w-full text-white placeholder-zinc-400 bg-white/10 py-1 px-2 rounded text-sm"
+            />
+            <input
+              type="text"
+              name="notes"
+              placeholder="notes"
+              className="appearance-none w-full text-white placeholder-zinc-400 bg-white/10 py-1 px-2 rounded text-sm"
+            />
+            <div className="flex gap-2 w-full">
+              <button
+                type="submit"
+                className="w-full py-1 bg-action/10 hover:bg-action/20 rounded text-action"
+              >
+                Submit
+              </button>
+              <button
+                type="button"
+                onClick={handleClose}
+                className="w-full py-1 rounded hover:bg-white/20"
+              >
+                Cancel
+              </button>
+            </div>
+          </form>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/components/shared/changelogs.tsx b/components/shared/changelogs.tsx
index a7b0436..208b1ff 100644
--- a/components/shared/changelogs.tsx
+++ b/components/shared/changelogs.tsx
@@ -3,34 +3,46 @@ import Link from "next/link";
 import { Fragment, useEffect, useRef, useState } from "react";
 
 const web = {
-  version: "v4.3.1",
+  version: "v4.4.0",
 };
 
 const logs = [
   {
     version: "v4.3.1",
-    pre: true,
+    pre: false,
     notes: null,
     highlights: true,
     changes: [
-      "Fix: Auto Next Episode forcing to play sub even if dub is selected",
-      "Fix: Episode metadata not showing after switching to dub",
-      "Fix: Profile picture weirdly cropped",
-      "Fix: Weird padding on the navbar in profile page",
-    ],
-  },
-  {
-    version: "v4.3.0",
-    pre: true,
-    notes: null,
-    highlights: false,
-    changes: [
-      "Added changelogs section",
-      "Added recommendations based on user lists",
-      "New Player!",
-      "And other minor bug fixes!",
+      "Added rate modal when user finished watching the whole series",
+      "Fix: only half of the episodes has episodes thumbnail",
+      "Fix: pressing back button in anime info page redirects user to the wrong page",
+      "Progressively migrate codebase to typescript",
     ],
   },
+  // {
+  //   version: "v4.3.1",
+  //   pre: true,
+  //   notes: null,
+  //   highlights: false,
+  //   changes: [
+  //     "Fix: Auto Next Episode forcing to play sub even if dub is selected",
+  //     "Fix: Episode metadata not showing after switching to dub",
+  //     "Fix: Profile picture weirdly cropped",
+  //     "Fix: Weird padding on the navbar in profile page",
+  //   ],
+  // },
+  // {
+  //   version: "v4.3.0",
+  //   pre: true,
+  //   notes: null,
+  //   highlights: false,
+  //   changes: [
+  //     "Added changelogs section",
+  //     "Added recommendations based on user lists",
+  //     "New Player!",
+  //     "And other minor bug fixes!",
+  //   ],
+  // },
 ];
 
 export default function ChangeLogs() {
@@ -146,11 +158,11 @@ export default function ChangeLogs() {
                       Hi! Welcome to the new changelogs section. Here you can
                       see a lists of the latest changes and updates to the site.
                     </p>
-                    <p className="inline-block text-sm italic my-2 text-gray-400">
+                    {/* <p className="inline-block text-sm italic my-2 text-gray-400">
                       *This update is still in it's pre-release state, please
                       expect to see some bugs. If you find any, please report
                       them.
-                    </p>
+                    </p> */}
                   </div>
 
                   {logs.map((x) => (
@@ -166,32 +178,6 @@ export default function ChangeLogs() {
                     </ChangelogsVersions>
                   ))}
 
-                  {/* <div className="my-2 flex items-center justify-evenly">
-                    <div className="w-full h-[1px] bg-gradient-to-r from-white/5 to-white/40" />
-                    <p className="relative flex flex-1 whitespace-nowrap font-bold mx-2 font-inter">
-                      v4.3.0
-                      <span className="flex text-xs font-light font-roboto ml-1 italic">
-                        pre
-                      </span>
-                    </p>
-                    <div className="w-full h-[1px] bg-gradient-to-l from-white/5 to-white/40" />
-                  </div>
-
-                  <div className="flex flex-col gap-2 text-sm text-gray-200">
-                    <div>
-                      <p className="inline-block italic mb-2 text-gray-400">
-                        *This update is still in it's pre-release state, please
-                        expect to see some bugs. If you find any, please report
-                        them.
-                      </p>
-
-                      <p>- Added changelogs section</p>
-                      <p>- Added recommendations based on user lists</p>
-                      <p>- New Player!</p>
-                      <p>- And other minor bug fixes!</p>
-                    </div>
-                  </div> */}
-
                   <div className="mt-2 text-gray-400 text-sm">
                     <p>
                       see more changelogs{" "}