1 files changed, 48 insertions, 35 deletions
diff --git a/pages/en/profile/[user].js b/pages/en/profile/[user].tsx
index 7ef5de3..82b88af 100644
--- a/pages/en/profile/[user].js
+++ b/pages/en/profile/[user].tsx
@@ -1,14 +1,28 @@
-import { getServerSession } from "next-auth";
-import { authOptions } from "../../api/auth/[...nextauth]";
 import Image from "next/image";
 import Link from "next/link";
 import Head from "next/head";
 import { useEffect, useState } from "react";
 import { getUser } from "@/prisma/user";
-import { NewNavbar } from "@/components/shared/NavBar";
 import { toast } from "sonner";
+import { Navbar } from "@/components/shared/NavBar";
+import pls from "@/utils/request";
+import { CurrentMediaTypes } from "..";
 
-export default function MyList({ media, sessions, user, time, userSettings }) {
+type MyListProps = {
+  media: CurrentMediaTypes[];
+  sessions: any;
+  user: any;
+  time: any;
+  userSettings: any;
+};
+
+export default function MyList({
+  media,
+  sessions,
+  user,
+  time,
+  userSettings,
+}: MyListProps) {
   const [listFilter, setListFilter] = useState("all");
   const [visible, setVisible] = useState(false);
   const [useCustomList, setUseCustomList] = useState(true);
@@ -40,26 +54,27 @@ export default function MyList({ media, sessions, user, time, userSettings }) {
       if (data) {
         toast.success(`Custom List is now ${!useCustomList ? "on" : "off"}`);
       }
-      localStorage.setItem("customList", !useCustomList);
+      localStorage.setItem("customList", String(!useCustomList));
     } catch (error) {
       console.error(error);
     }
   };
 
-  const filterMedia = (status) => {
+  const filterMedia = (status: string) => {
     if (status === "all") {
       return media;
     }
-    return media.filter((m) => m.name === status);
+    return media.filter((m: { name: string }) => m.name === status);
   };
   return (
     <>
       <Head>
         <title>My Lists</title>
       </Head>
-      <NewNavbar />
 
-      <div className="w-screen lg:flex justify-between lg:px-10 xl:px-32 py-5 relative">
+      <Navbar withNav toTop shrink bgHover scrollP={110} paddingY={"py-1"} />
+
+      <div className="w-screen lg:flex justify-between lg:px-10 xl:px-32 py-5 mt-10 xl:mt-16 relative">
         <div className="lg:w-[30%] h-full mt-12 lg:mr-10 grid gap-5 mx-3 lg:mx-0 antialiased">
           <div className="flex items-center gap-5">
             <Image
@@ -289,7 +304,7 @@ export default function MyList({ media, sessions, user, time, userSettings }) {
                                 <div className="absolute -top-10 -left-40 invisible lg:group-hover:visible">
                                   <Image
                                     src={item.media.coverImage.large}
-                                    alt={item.media.id}
+                                    alt={String(item.media.id)}
                                     width={1000}
                                     height={1000}
                                     className="object-cover h-[186px] w-[140px] shrink-0 rounded-md"
@@ -362,19 +377,14 @@ export default function MyList({ media, sessions, user, time, userSettings }) {
   );
 }
 
-export async function getServerSideProps(context) {
-  const session = await getServerSession(context.req, context.res, authOptions);
-  const accessToken = session?.user?.token || null;
+export async function getServerSideProps(context: any) {
   const query = context.query;
 
-  const response = await fetch("https://graphql.anilist.co/", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
-    },
-    body: JSON.stringify({
-      query: `
+  const [data, session] = await pls.post(
+    "https://graphql.anilist.co/",
+    {
+      body: JSON.stringify({
+        query: `
           query ($username: String, $status: MediaListStatus) {
             MediaListCollection(userName: $username, type: ANIME, status: $status, sort: SCORE_DESC) {
               user {
@@ -426,15 +436,15 @@ export async function getServerSideProps(context) {
             }
           }
         `,
-      variables: {
-        username: query.user,
-      },
-    }),
-  });
-
-  const data = await response.json();
+        variables: {
+          username: query.user,
+        },
+      }),
+    },
+    context
+  );
 
-  const get = data.data.MediaListCollection;
+  const get = data?.data?.MediaListCollection;
   const sectionOrder = get?.user.mediaListOptions.animeList.sectionOrder;
 
   if (!sectionOrder) {
@@ -451,12 +461,15 @@ export async function getServerSideProps(context) {
 
   const prog = get.lists;
 
-  function getIndex(status) {
+  function getIndex(status: string) {
     const index = sectionOrder.indexOf(status);
     return index === -1 ? sectionOrder.length : index;
   }
 
-  prog.sort((a, b) => getIndex(a.name) - getIndex(b.name));
+  prog.sort(
+    (a: { name: string }, b: { name: string }) =>
+      getIndex(a.name) - getIndex(b.name)
+  );
 
   const user = get.user;
 
@@ -473,24 +486,24 @@ export async function getServerSideProps(context) {
   };
 }
 
-function UnixTimeConverter({ unixTime }) {
+function UnixTimeConverter({ unixTime }: { unixTime: number }) {
   const date = new Date(unixTime * 1000); // multiply by 1000 to convert to milliseconds
   const formattedDate = date.toISOString().slice(0, 10); // format date to YYYY-MM-DD
 
   return <p>{formattedDate}</p>;
 }
 
-function convertMinutesToDays(minutes) {
+function convertMinutesToDays(minutes: number) {
   const hours = minutes / 60;
   const days = hours / 24;
 
   if (days >= 1) {
     return days % 1 === 0
-      ? { days: `${parseInt(days)}` }
+      ? { days: `${days}` }
       : { days: `${days.toFixed(1)}` };
   } else {
     return hours % 1 === 0
-      ? { hours: `${parseInt(hours)}` }
+      ? { hours: `${hours}` }
       : { hours: `${hours.toFixed(1)}` };
   }
 }