Make the admin page cool asf

This commit is contained in:
Cooper Ransom 2024-03-08 18:03:03 -05:00
parent da414a25e1
commit 8c29042cb8
4 changed files with 30 additions and 12 deletions

View File

@ -1,6 +1,6 @@
window.__CONFIG__ = { window.__CONFIG__ = {
// The URL for the CORS proxy, the URL must NOT end with a slash! // The URL for the CORS proxy, the URL must NOT end with a slash!
VITE_CORS_PROXY_URL: ["https://sudo-proxy0.netlify.app", "https://sudo-proxy1.up.railway.app", "https://sudo-proxy2.up.railway.app", "https://sudo-proxy3.up.railway.app", "https://sudo-proxy4.netlify.app", "https://sudo-worker-1.cooperransom08.workers.dev", "https://sudo-worker-2.cooperransom08.workers.dev", "https://sudo-worker-3.cooperransom08.workers.dev", "https://sudo-proxy9.netlify.app", "https://sudo-proxy10.up.railway.app"], VITE_CORS_PROXY_URL: ["https://sudo-proxy0.netlify.app", "https://sudo-worker-4.cooperransom08.workers.dev", "https://sudo-proxy2.up.railway.app", "https://sudo-proxy3.up.railway.app", "https://sudo-proxy4.netlify.app", "https://sudo-worker-1.cooperransom08.workers.dev", "https://sudo-worker-2.cooperransom08.workers.dev", "https://sudo-worker-3.cooperransom08.workers.dev", "https://sudo-proxy9.netlify.app", "https://sudo-proxy1.up.railway.app"],
// The READ API key to access TMDB // The READ API key to access TMDB
VITE_TMDB_READ_API_KEY: "eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJhZTljNGE2ZDE1ZDFiODZiNzdlMWQyYmI5ZGY0MzdmYyIsInN1YiI6IjY1YjNmMWI0NTk0Yzk0MDE2MzNkZDBjNSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.kAX7TkbKuJkNty6IsjcCLnoENFicVZn6d6DkLQsy3p8", VITE_TMDB_READ_API_KEY: "eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJhZTljNGE2ZDE1ZDFiODZiNzdlMWQyYmI5ZGY0MzdmYyIsInN1YiI6IjY1YjNmMWI0NTk0Yzk0MDE2MzNkZDBjNSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.kAX7TkbKuJkNty6IsjcCLnoENFicVZn6d6DkLQsy3p8",

View File

@ -47,7 +47,6 @@ export function NextEpisodeButton(props: {
const isHidden = usePlayerStore((s) => s.interface.hideNextEpisodeBtn); const isHidden = usePlayerStore((s) => s.interface.hideNextEpisodeBtn);
const meta = usePlayerStore((s) => s.meta); const meta = usePlayerStore((s) => s.meta);
const { setDirectMeta } = usePlayerMeta(); const { setDirectMeta } = usePlayerMeta();
const hideNextEpisodeButton = usePlayerStore((s) => s.hideNextEpisodeButton);
const metaType = usePlayerStore((s) => s.meta?.type); const metaType = usePlayerStore((s) => s.meta?.type);
const time = usePlayerStore((s) => s.progress.time); const time = usePlayerStore((s) => s.progress.time);
const showingState = shouldShowNextEpisodeButton(time, duration); const showingState = shouldShowNextEpisodeButton(time, duration);

View File

@ -12,7 +12,7 @@ export function AdminPage() {
<SubPageLayout> <SubPageLayout>
<ThinContainer> <ThinContainer>
<Heading1>Admin tools</Heading1> <Heading1>Admin tools</Heading1>
<Paragraph>Useful tools to test out your current deployment</Paragraph> <Paragraph>Silly tools used test sudo-flix! ´˶ . </Paragraph>
<ConfigValuesPart /> <ConfigValuesPart />
<BackendTestPart /> <BackendTestPart />

View File

@ -1,5 +1,5 @@
import classNames from "classnames"; import classNames from "classnames";
import { useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { useAsyncFn } from "react-use"; import { useAsyncFn } from "react-use";
import { singularProxiedFetch } from "@/backend/helpers/fetch"; import { singularProxiedFetch } from "@/backend/helpers/fetch";
@ -52,7 +52,9 @@ export function WorkerTestPart() {
{ id: string; status: "error" | "success"; error?: Error }[] { id: string; status: "error" | "success"; error?: Error }[]
>([]); >([]);
const [buttonClicked, setButtonClicked] = useState(false);
const [buttonDisabled, setButtonDisabled] = useState(false); const [buttonDisabled, setButtonDisabled] = useState(false);
const [allWorkersPassed, setAllWorkersPassed] = useState(false);
const [testState, runTests] = useAsyncFn(async () => { const [testState, runTests] = useAsyncFn(async () => {
setButtonDisabled(true); setButtonDisabled(true);
@ -88,6 +90,7 @@ export function WorkerTestPart() {
status: "error", status: "error",
error: err as Error, error: err as Error,
}); });
setAllWorkersPassed(false); // Set allWorkersPassed to false if a worker fails
} }
}); });
@ -95,6 +98,12 @@ export function WorkerTestPart() {
setTimeout(() => setButtonDisabled(false), 5000); setTimeout(() => setButtonDisabled(false), 5000);
}, [workerList, setWorkerState]); }, [workerList, setWorkerState]);
useEffect(() => {
setAllWorkersPassed(
workerState.every((worker) => worker.status === "success"),
);
}, [workerState]);
return ( return (
<> <>
<Heading2 className="!mb-0 mt-12">Worker tests</Heading2> <Heading2 className="!mb-0 mt-12">Worker tests</Heading2>
@ -119,14 +128,24 @@ export function WorkerTestPart() {
})} })}
<Divider /> <Divider />
<div className="flex justify-end"> <div className="flex justify-end">
<Button {allWorkersPassed && buttonClicked ? (
theme="purple" <div>
loading={testState.loading} <p>All workers have passed the test! ٩(ˊˋ*)و </p>
onClick={buttonDisabled ? undefined : runTests} </div>
disabled={buttonDisabled} ) : (
> <Button
Test workers theme="purple"
</Button> loading={testState.loading}
onClick={(event) => {
event.preventDefault();
setButtonClicked(true);
if (!buttonDisabled) runTests();
}}
disabled={buttonDisabled}
>
Test workers
</Button>
)}
</div> </div>
</Box> </Box>
</> </>