From 4c4f8214637ac8d19e16f71d20542982a5eedad7 Mon Sep 17 00:00:00 2001 From: real-zephex Date: Sat, 11 May 2024 01:33:00 +0530 Subject: UI changes, Logic change and complete re-write for anime page --- src/app/anime/search/components/fetchInfo.js | 14 --- src/app/anime/search/components/fetchedInfo.js | 45 ---------- src/app/anime/search/page.jsx | 69 --------------- src/app/anime/search/search.module.css | 114 ------------------------- 4 files changed, 242 deletions(-) delete mode 100644 src/app/anime/search/components/fetchInfo.js delete mode 100644 src/app/anime/search/components/fetchedInfo.js delete mode 100644 src/app/anime/search/page.jsx delete mode 100644 src/app/anime/search/search.module.css (limited to 'src/app/anime/search') diff --git a/src/app/anime/search/components/fetchInfo.js b/src/app/anime/search/components/fetchInfo.js deleted file mode 100644 index 2f81345..0000000 --- a/src/app/anime/search/components/fetchInfo.js +++ /dev/null @@ -1,14 +0,0 @@ -"use server"; - -export default async function Results(id) { - return await testFunction(id); -} - -async function testFunction(title) { - const res = await fetch( - "https://consumet-jade.vercel.app/anime/gogoanime/" + title, - { next: { revalidate: 21600 } } - ); - const data = await res.json(); - return data; -} diff --git a/src/app/anime/search/components/fetchedInfo.js b/src/app/anime/search/components/fetchedInfo.js deleted file mode 100644 index 359e745..0000000 --- a/src/app/anime/search/components/fetchedInfo.js +++ /dev/null @@ -1,45 +0,0 @@ -import styles from "../search.module.css"; -import Link from "next/link"; -import Image from "next/image"; -import { preFetchAnimeInfo } from "../../videoLinkfetcher"; - -export default async function fetchedInfo(data) { - preFetchAnimeInfo(data); - return ( -
- {data ? ( - data.results && data.results.length > 0 ? ( - data.results.map((item, index) => ( - -
-

{item.title}

- Drama Poster -
- - )) - ) : ( -
-

- No results found -

-
- ) - ) : null} -
- ); -} diff --git a/src/app/anime/search/page.jsx b/src/app/anime/search/page.jsx deleted file mode 100644 index f543fd8..0000000 --- a/src/app/anime/search/page.jsx +++ /dev/null @@ -1,69 +0,0 @@ -"use client"; - -import styles from "./search.module.css"; -import { FaSearch } from "react-icons/fa"; // Import the search icon from react-icons library -import { useState } from "react"; -import Results from "./components/fetchInfo"; -import fetchedInfo from "./components/fetchedInfo"; -import Link from "next/link"; - -export default function Input() { - const [searchedAnime, setSearchedAnime] = useState(null); - const [loading, setLoading] = useState(null); - const [info, setInfo] = useState(null); - - const handleKeyPress = async (event) => { - if ( - (event.code === "Enter" || - event.key === "Enter" || - event.code === 13) && - searchedAnime !== "" - ) { - setLoading(true); - setInfo(await fetchedInfo(await Results(searchedAnime))); - setLoading(false); - } else if ( - (event.code === "Enter" || - event.key === "Enter" || - event.code === 13) && - searchedAnime === "" - ) { - alert("Input cannot be empty"); - } - }; - - return ( -
-
-
- - { - if (event.target.value.trim() !== "") { - setSearchedAnime(event.target.value); - } - }} - onKeyDown={(event) => handleKeyPress(event)} - placeholder="Enter anime title" - className={styles.SearchInput} - > -
-
- -
-
- - {loading && ( -

- Please wait while we crunch all the data for you -

- )} - - {info} -
- ); -} diff --git a/src/app/anime/search/search.module.css b/src/app/anime/search/search.module.css deleted file mode 100644 index a185e36..0000000 --- a/src/app/anime/search/search.module.css +++ /dev/null @@ -1,114 +0,0 @@ -.waitWhileLoading { - font-size: 18px; - text-align: center; - color: white; -} - -.inputContainer { - display: flex; - align-items: center; - margin: 0 0.3rem 0 0.3rem; -} - -.inputContainer button { - margin: 5px; - background-color: #121212; - padding: 10px; - border-radius: 10px; - outline: none; - border: none; - color: white; - font-family: "Lexend Deca", serif; -} - -.inputContainer button a { - text-decoration: none; - color: white; -} - -.searchContainer input { - border: none; - border-radius: 5px; - color: white; - outline: none; - background: none; - width: 100%; - font-family: "Lexend Deca", serif; - font-size: 16px; -} - -.searchContainer { - display: flex; - align-items: center; - justify-content: center; - margin: 20px 0px 20px 0px; - background-color: #121212; - padding: 10px; - border-radius: 10px; - width: 30%; -} - -.searchIcon { - color: white; - margin-right: 5px; -} - -.animeEntry { - display: flex; - overflow-x: auto; - margin: 0 0 1rem 0.5rem; -} - -.animeEntry:hover .anime { - opacity: 0.5; -} - -.animeEntry:hover .anime:hover { - opacity: 1; - background-color: #292929; -} - -.animeEntry::-webkit-scrollbar { - height: 5px; -} - -.animeEntry::-webkit-scrollbar-track { - background-color: #636363; - border-radius: 5px; -} - -.animeEntry::-webkit-scrollbar-thumb { - background-color: rgba(196, 196, 196, 0.692); - border-radius: 5px; -} - -.anime { - display: flex; - justify-content: space-between; - align-items: center; - padding: 5px; - margin: 0 10px 0 0; - border-radius: 0.5rem; - transition: opacity 200ms ease-in, background-color 200ms linear; - background-color: #242424d0; -} - -.anime p { - color: white; - width: 20dvw; - font-size: 18px; -} - -.animeImage { - border-radius: 0.5rem; -} - -@media screen and (max-width: 768px) { - .searchContainer { - width: 100%; - } - - .anime p { - width: 50dvw; - } -} \ No newline at end of file -- cgit v1.2.3