Update 3rd

5 files changed, 75 insertions, 26 deletions

diff --git a/components/hero/content.js b/components/hero/content.js
index a3db854..b7515d2 100644
--- a/components/hero/content.js
+++ b/components/hero/content.js
@@ -27,8 +27,7 @@ export default function Content({ ids, section, data }) {
   // console.log({ left: scrollLeft, right: scrollRight });
 
   const array = data;
-  const filteredData = array.filter((item) => item.status !== "Unknown");
-
+  let filteredData = array.filter((item) => item.status !== "Unknown");
   return (
     <div>
       <h1 className="px-5 font-karla text-[20px] font-bold">{section}</h1>
diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js
index c2e69e1..d9ef319 100644
--- a/pages/anime/[...id].js
+++ b/pages/anime/[...id].js
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { AnimatePresence, motion as m } from "framer-motion";
 import { META } from "@consumet/extensions";
 
 import Link from "next/link";
@@ -10,6 +9,8 @@ import { closestMatch } from "closest-match";
 import Content from "../../components/hero/content";
 import Image from "next/image";
 
+import { useSession } from "next-auth/react";
+
 export default function Himitsu({
   info,
   slicedDesc,
@@ -27,6 +28,8 @@ export default function Himitsu({
   const [Lang, setLang] = useState(true);
   const [showAll, setShowAll] = useState(false);
 
+  const { data: session } = useSession();
+
   const [lastPlayed, setLastPlayed] = useState(null);
   const episode = episodeList;
   const epi1 = episode1;
@@ -70,20 +73,20 @@ export default function Himitsu({
     });
   }, [color]);
 
-  const handleStore = (props) => {
-    let existingData = JSON.parse(localStorage.getItem("recentWatch"));
-    if (!Array.isArray(existingData)) {
-      existingData = [];
-    }
-    const index = existingData.findIndex(
-      (item) => item.title.romaji === props.title.romaji
-    );
-    if (index !== -1) {
-      existingData.splice(index, 1);
-    }
-    const updatedData = [props, ...existingData];
-    localStorage.setItem("recentWatch", JSON.stringify(updatedData));
-  };
+  // const handleStore = (props) => {
+  //   let existingData = JSON.parse(localStorage.getItem("recentWatch"));
+  //   if (!Array.isArray(existingData)) {
+  //     existingData = [];
+  //   }
+  //   const index = existingData.findIndex(
+  //     (item) => item.title.romaji === props.title.romaji
+  //   );
+  //   if (index !== -1) {
+  //     existingData.splice(index, 1);
+  //   }
+  //   const updatedData = [props, ...existingData];
+  //   localStorage.setItem("recentWatch", JSON.stringify(updatedData));
+  // };
 
   if (!info) {
     return;
@@ -96,6 +99,23 @@ export default function Himitsu({
     episodeIndo = episode;
   }
 
+  async function handleUpdate(data) {
+    if (!session) return;
+    const res = await fetch("/api/update-user", {
+      method: "POST",
+      body: JSON.stringify({
+        name: session?.user.name,
+        newData: {
+          recentWatch: data,
+        },
+      }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    // console.log(res.status);
+  }
+
   // console.log({ NEXT: subIndo });
 
   // console.log(episodeIndo);
@@ -177,7 +197,7 @@ export default function Himitsu({
                           <Link
                             href={`/anime/watch/${epi1[0].id}/${info.id}`}
                             onClick={() =>
-                              handleStore({
+                              handleUpdate({
                                 title: {
                                   romaji:
                                     info.title.romaji ||
@@ -357,7 +377,7 @@ export default function Himitsu({
                                 }}
                                 className="w-full shrink h-[126px] bg-secondary flex rounded-md"
                               >
-                                <div className="min-w-[20%] bg-image rounded-l-md shrink-0">
+                                <div className="w-[90px] bg-image rounded-l-md shrink-0">
                                   <img
                                     src={relation.image}
                                     alt={relation.id}
@@ -368,7 +388,7 @@ export default function Himitsu({
                                   <div className="text-action font-outfit font-bold">
                                     {relation.relationType}
                                   </div>
-                                  <div className="font-outfit font-thin italic line-clamp-2">
+                                  <div className="font-outfit font-thin line-clamp-2">
                                     {relation.title.romaji}
                                   </div>
                                   <div className={``}>{relation.type}</div>
@@ -420,7 +440,7 @@ export default function Himitsu({
                           <div key={index} className="flex flex-col gap-3">
                             <Link
                               onClick={() =>
-                                handleStore({
+                                handleUpdate({
                                   title: {
                                     romaji:
                                       info.title.romaji ||
diff --git a/pages/api/get-user.js b/pages/api/get-user.js
new file mode 100644
index 0000000..7df10a6
--- /dev/null
+++ b/pages/api/get-user.js
@@ -0,0 +1,20 @@
+import clientPromise from "../../lib/mongodb";
+
+export async function getUser(userName) {
+  const client = await clientPromise;
+  const db = client.db("authbase");
+
+  const collection = db.collection("users");
+  const user = await collection.findOne({ name: userName });
+
+  user._id = String(user._id);
+
+  return user;
+}
+
+export default async function handler(req, res) {
+  const { userName } = req.query;
+  const user = await getUser(userName);
+
+  res.status(200).json(user);
+}
diff --git a/pages/api/update-user.js b/pages/api/update-user.js
index 9f652ac..210d70f 100644
--- a/pages/api/update-user.js
+++ b/pages/api/update-user.js
@@ -11,7 +11,7 @@ export default async function handler(req, res) {
   try {
     const result = await collection.updateOne(
       { name: name },
-      { $set: newData }
+      { $addToSet: newData }
     );
 
     res.status(200).json(result);
diff --git a/pages/index.js b/pages/index.js
index d75cb0f..871e63b 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -88,6 +88,7 @@ export default function Home({ detail, populars }) {
   const { data: session, status } = useSession();
   const [isVisible, setIsVisible] = useState(false);
   const [recently, setRecently] = useState(null);
+  const [user, setUser] = useState(null);
   const popular = populars?.data;
   const data = detail.data[0];
 
@@ -102,14 +103,23 @@ export default function Home({ detail, populars }) {
   };
 
   useEffect(() => {
+    async function userData() {
+      if (!session) return;
+      const res = await fetch(`/api/get-user?userName=${session?.user.name}`);
+      const data = await res.json();
+      setUser(data);
+    }
     function fetchData() {
       const recent = JSON.parse(localStorage.getItem("recentWatch"));
       if (recent) {
         setRecently(recent);
       }
     }
+    userData();
     fetchData();
-  }, []);
+  }, [session]);
+
+  // console.log(user?.recentWatch.reverse());
 
   return (
     <>
@@ -344,7 +354,7 @@ export default function Home({ detail, populars }) {
                 <Image
                   draggable={false}
                   src={data.coverImage?.extraLarge || data.image}
-                  alt={data.title.english || data.title.romaji}
+                  alt={`alt for ${data.title.english || data.title.romaji}`}
                   width={460}
                   height={662}
                   priority
@@ -367,11 +377,11 @@ export default function Home({ detail, populars }) {
 
         <div className="md:mt-16 mt-12 flex flex-col items-center">
           <div className="w-screen flex-none lg:w-[87%]">
-            {recently && (
+            {session && user?.recentWatch && (
               <Content
                 ids="recentlyWatched"
                 section="Recently Watched"
-                data={recently}
+                data={user.recentWatch.reverse()}
               />
             )}