diff options
| author | Factiven <[email protected]> | 2023-12-24 13:03:54 +0700 |
|---|---|---|
| committer | Factiven <[email protected]> | 2023-12-24 13:03:54 +0700 |
| commit | 50a0f0240d7fef133eb5acc1bea2b1168b08e9db (patch) | |
| tree | 307e09e505580415a58d64b5fc3580e9235869f1 /pages/en/profile | |
| parent | Update README.md (#104) (diff) | |
| download | moopa-50a0f0240d7fef133eb5acc1bea2b1168b08e9db.tar.xz moopa-50a0f0240d7fef133eb5acc1bea2b1168b08e9db.zip | |
migrate to typescript
Diffstat (limited to 'pages/en/profile')
| -rw-r--r-- | pages/en/profile/[user].tsx (renamed from pages/en/profile/[user].js) | 83 |
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)}` }; } } |