From 7327a69b55a20b99b14ee0803d6cf5f8b88c45ef Mon Sep 17 00:00:00 2001 From: Factiven Date: Wed, 13 Sep 2023 00:45:53 +0700 Subject: Update v4 - Merge pre-push to main (#71) * Create build-test.yml * initial v4 commit * update: github workflow * update: push on branch * Update .github/ISSUE_TEMPLATE/bug_report.md * configuring next.config.js file --- pages/id/index.js | 650 +++--------------------------------------------------- 1 file changed, 31 insertions(+), 619 deletions(-) (limited to 'pages/id/index.js') diff --git a/pages/id/index.js b/pages/id/index.js index 1d42ce3..661bc05 100644 --- a/pages/id/index.js +++ b/pages/id/index.js @@ -1,633 +1,45 @@ -import { aniListData } from "../../lib/anilist/AniList"; -import React, { useState, useEffect } from "react"; import Head from "next/head"; +import React from "react"; +import Navbar from "../../components/navbar"; +import Image from "next/image"; import Link from "next/link"; import Footer from "../../components/footer"; -import Image from "next/image"; -import Content from "../../components/home/content"; -import { useRouter } from "next/router"; - -import { motion } from "framer-motion"; - -import { useSession, signIn, signOut } from "next-auth/react"; -import { useAniList } from "../../lib/anilist/useAnilist"; -import { getServerSession } from "next-auth/next"; -import { authOptions } from "../api/auth/[...nextauth]"; -import SearchBar from "../../components/searchBar"; -import Genres from "../../components/home/genres"; -import { ToastContainer, toast, cssTransition } from "react-toastify"; - -export function Navigasi() { - const { data: sessions, status } = useSession(); - const [year, setYear] = useState(new Date().getFullYear()); - const [season, setSeason] = useState(getCurrentSeason()); - - const router = useRouter(); - - const handleFormSubmission = (inputValue) => { - router.push(`/id/search/${encodeURIComponent(inputValue)}`); - }; - - const handleKeyDown = async (event) => { - if (event.key === "Enter") { - event.preventDefault(); - const inputValue = event.target.value; - handleFormSubmission(inputValue); - } - }; - return ( - <> - {/* NAVBAR PC */} -
-
-
- - moopa - -
    -
  • - - This Season - -
    • -
  • - Manga -
    • -
  • - Anime -
    • - - {status === "loading" ? ( -
  • Loading...
    • - ) : ( - <> - {!sessions && ( -
  • - -
    • - )} - {sessions && ( -
  • - - My List - -
    • - )} - - )} -
-
-
-
- -
- -
-
-
-
-
- - ); -} - -export default function Home({ detail, populars, sessions }) { - const { media: current } = useAniList(sessions, { stats: "CURRENT" }); - const { media: plan } = useAniList(sessions, { stats: "PLANNING" }); - - const [isVisible, setIsVisible] = useState(false); - const [list, setList] = useState(null); - const [planned, setPlanned] = useState(null); - const [greeting, setGreeting] = useState(""); - const [onGoing, setOnGoing] = useState(null); - - const [prog, setProg] = useState(null); - - const popular = populars?.data; - const data = detail.data[0]; - - const handleShowClick = () => { - setIsVisible(true); - }; - - const handleHideClick = () => { - setIsVisible(false); - }; - - useEffect(() => { - const time = new Date().getHours(); - let greeting = ""; - - if (time >= 5 && time < 12) { - greeting = "Good morning"; - } else if (time >= 12 && time < 18) { - greeting = "Good afternoon"; - } else if (time >= 18 && time < 22) { - greeting = "Good evening"; - } else if (time >= 22 || time < 5) { - greeting = "Good night"; - } - - setGreeting(greeting); - - async function userData() { - if (!sessions) return; - const getMedia = - current.filter((item) => item.status === "CURRENT")[0] || null; - const list = getMedia?.entries - .map(({ media }) => media) - .filter((media) => media); - - const prog = getMedia?.entries.filter( - (item) => item.media.nextAiringEpisode !== null - ); - - setProg(prog); - - const planned = plan?.[0]?.entries - .map(({ media }) => media) - .filter((media) => media); - - const onGoing = list?.filter((item) => item.nextAiringEpisode !== null); - setOnGoing(onGoing); - - if (list) { - setList(list.reverse()); - } - if (planned) { - setPlanned(planned.reverse()); - } - } - userData(); - }, [sessions, current, plan]); - - const blurSlide = cssTransition({ - enter: "slide-in-blurred-right", - exit: "slide-out-blurred-right", - }); - - useEffect(() => { - function Toast() { - toast.warn( - "This site is still in development, some features may not work properly.", - { - position: "bottom-right", - autoClose: false, - hideProgressBar: true, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - theme: "dark", - transition: blurSlide, - } - ); - } - Toast(); - }, []); - - // console.log(log); +export default function Home() { return ( <> - Moopa - - - - - - + Under Construction + + + - - - - {/* NAVBAR */} -
- {!isVisible && ( - - )} -
- - {/* Mobile Menu */} -
- {isVisible && sessions && ( - - user avatar - - )} - {isVisible && ( -
-
- - - - {sessions ? ( - - ) : ( - - )} -
- -
- )} -
- -
- - - {/* PC / TABLET */} -
-
-
-

- {data.title.english || data.title.romaji || data.title.native} -

-

- -

-
-
-
-
- - {`alt -
-
-
-
- {/* {!sessions && ( -

- {greeting}! +
+ + {/* Create an under construction page with tailwind css */} +
+ work-on-progress +

+ 🚧 We are still working on it 🚧

- )} */} - {sessions && ( -
-
- {greeting},

{sessions?.user.name}

- +

+ "Please be patient, as we're still working on this page and it will + be available soon." +

+ +
+ Go back home
-
- )} - -
- - {sessions && onGoing?.length > 0 && ( - - - - )} - - {sessions && list?.length > 0 && ( - - - - )} - - {/* SECTION 2 */} - {sessions && planned?.length > 0 && ( - - - - )} - - {/* SECTION 3 */} - {detail && ( - - - - )} - - {/* SECTION 4 */} - {popular && ( - - - - )} - - - - - +
-
-
); } - -export async function getServerSideProps(context) { - const session = await getServerSession(context.req, context.res, authOptions); - - const trendingDetail = await aniListData({ - sort: "TRENDING_DESC", - page: 1, - }); - const popularDetail = await aniListData({ - sort: "POPULARITY_DESC", - page: 1, - }); - const genreDetail = await aniListData({ sort: "TYPE", page: 1 }); - - return { - props: { - genre: genreDetail.props, - detail: trendingDetail.props, - populars: popularDetail.props, - sessions: session, - }, - }; -} - -function getCurrentSeason() { - const now = new Date(); - const month = now.getMonth() + 1; // getMonth() returns 0-based index - - switch (month) { - case 12: - case 1: - case 2: - return "WINTER"; - case 3: - case 4: - case 5: - return "SPRING"; - case 6: - case 7: - case 8: - return "SUMMER"; - case 9: - case 10: - case 11: - return "FALL"; - default: - return "UNKNOWN SEASON"; - } -} -- cgit v1.2.3