diff options
Diffstat (limited to 'components/admin/meta/AppendMeta.js')
| -rw-r--r-- | components/admin/meta/AppendMeta.js | 252 |
1 files changed, 252 insertions, 0 deletions
diff --git a/components/admin/meta/AppendMeta.js b/components/admin/meta/AppendMeta.js new file mode 100644 index 0000000..1707ed2 --- /dev/null +++ b/components/admin/meta/AppendMeta.js @@ -0,0 +1,252 @@ +import Loading from "@/components/shared/loading"; +import Image from "next/image"; +import { useState } from "react"; +import { toast } from "react-toastify"; + +// Define a function to convert the data +function convertData(episodes) { + const convertedData = episodes.map((episode) => ({ + episode: episode.episode, + title: episode?.title, + description: episode?.description || null, + img: episode?.img?.hd || episode?.img?.mobile || null, // Use hd if available, otherwise use mobile + })); + + return convertedData; +} + +export default function AppendMeta({ api }) { + const [id, setId] = useState(); + const [resultData, setResultData] = useState(null); + + const [query, setQuery] = useState(""); + const [tmdbId, setTmdbId] = useState(); + const [hasilQuery, setHasilQuery] = useState([]); + const [season, setSeason] = useState(); + + const [override, setOverride] = useState(); + + const [loading, setLoading] = useState(false); + + const handleSearch = async () => { + try { + setLoading(true); + setResultData(null); + const res = await fetch(`${api}/meta/tmdb/${query}`); + const json = await res.json(); + const data = json.results.filter((i) => i.type === "TV Series"); + setHasilQuery(data); + setLoading(false); + } catch (err) { + console.log(err); + } + }; + + const handleDetail = async () => { + try { + setLoading(true); + const res = await fetch(`${api}/meta/tmdb/info/${tmdbId}?type=TV%20Series +`); + const json = await res.json(); + const data = json.seasons; + setHasilQuery(data); + setLoading(false); + } catch (err) { + console.log(err); + } + }; + + const handleStore = async () => { + try { + setLoading(true); + if (!resultData && !id) { + console.log("No data to store"); + setLoading(false); + return; + } + const data = await fetch("/api/v2/admin/meta", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + id: id, + data: resultData, + }), + }); + if (data.status === 200) { + const json = await data.json(); + toast.success(json.message); + setLoading(false); + } + } catch (err) { + console.log(err); + } + }; + + const handleOverride = async () => { + setResultData(JSON.parse(override)); + }; + + return ( + <> + <div className="container mx-auto p-4 scrol"> + <h1 className="text-3xl font-semibold mb-4">Append Data Page</h1> + <div> + <div className="space-y-3 mb-4"> + <label>Search Anime:</label> + <input + type="text" + className="w-full px-3 py-2 border rounded-md text-black" + value={query} + onChange={(e) => setQuery(e.target.value)} + /> + <button + type="button" + className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600" + onClick={handleSearch} + > + Find Anime{" "} + </button> + </div> + <div className="space-y-3 mb-4"> + <label>Get Episodes:</label> + <input + type="number" + placeholder="TMDB ID" + className="w-full px-3 py-2 border rounded-md text-black" + value={tmdbId} + onChange={(e) => setTmdbId(e.target.value)} + /> + <button + type="button" + className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600" + onClick={handleDetail} + > + Get Details + </button> + </div> + + <div className="space-y-3 mb-4"> + <label>Override Result:</label> + <textarea + rows="5" + className="w-full px-3 py-2 border rounded-md text-black" + value={override} + onChange={(e) => setOverride(e.target.value)} + /> + <button + type="button" + className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600" + onClick={handleOverride} + > + Override{" "} + </button> + </div> + + <div className="space-y-3 mb-4"> + <label className="block text-sm font-medium text-gray-300"> + Anime ID: + </label> + <input + type="number" + placeholder="AniList ID" + className="w-full px-3 py-2 border rounded-md text-black" + value={id} + onChange={(e) => setId(e.target.value)} + /> + </div> + <div className="mb-4"> + <button + className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600" + onClick={handleStore} + > + Store Data {season && `Season ${season}`} + </button> + </div> + + {!loading && hasilQuery?.some((i) => i?.season) && ( + <div className="border rounded-md p-4 mt-4"> + <h2 className="text-lg font-semibold mb-2"> + Which season do you want to format? + </h2> + <div className="w-full flex gap-2"> + {hasilQuery?.map((season, index) => ( + <button + type="button" + className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600" + key={index} + onClick={() => { + setLoading(true); + const data = hasilQuery[index].episodes; + const convertedData = convertData(data); + setSeason(index + 1); + setResultData(convertedData); + console.log(convertedData); + setLoading(false); + }} + > + <p>{season.season} </p> + </button> + ))} + </div> + </div> + )} + + {!loading && resultData && ( + <div className="border rounded-md p-4 mt-4"> + <h2 className="text-lg font-semibold mb-2">Season {season}</h2> + <pre>{JSON.stringify(resultData, null, 2)}</pre> + </div> + )} + {!loading && hasilQuery && ( + <div className="border rounded-md p-4 mt-4"> + {/* <h2 className="text-lg font-semibold mb-2"> + Result Data,{" "} + {hasilQuery.length > 0 && `${hasilQuery.length} Seasons`}: + </h2> */} + <div className="flex flex-wrap gap-10"> + {!hasilQuery.every((i) => i?.episodes) && + hasilQuery?.map((i, index) => ( + <div + key={i.id} + className="flex flex-col items-center gap-2" + > + <p className="font-karla font-semibold"> + {i.releaseDate} + </p> + <Image + src={i.image} + width={500} + height={500} + className="w-[160px] h-[210px] object-cover" + /> + <button + className="bg-blue-500 text-white w-[160px] py-1 rounded-md hover:bg-blue-600 text-sm" + onClick={() => { + setTmdbId(i.id); + }} + > + <p className="line-clamp-1 px-1">{i.title}</p> + </button> + </div> + ))} + </div> + <pre>{JSON.stringify(hasilQuery, null, 2)}</pre> + </div> + )} + + {loading && <Loading />} + </div> + <div> + {/* {resultData && ( + <div className="border rounded-md p-4 mt-4"> + <h2 className="text-lg font-semibold mb-2">Result Data:</h2> + <pre>{JSON.stringify(resultData, null, 2)}</pre> + </div> + )} */} + </div> + </div> + </> + ); +} |