From b7ee47fa5429da37e73555fbc2ae517107714442 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 24 Jul 2022 16:39:52 +0100 Subject: [PATCH 1/2] TTS results from old branch --- .../tts_result_delete/TtsResultDeleteFc.tsx | 312 +++++++++-------- .../tts/tts_result_edit/TtsResultEditFc.tsx | 223 ++++++------ .../tts/tts_result_view/TtsResultViewFc.tsx | 325 ++++++++++-------- 3 files changed, 466 insertions(+), 394 deletions(-) diff --git a/packages/fakeyou/src/v2/view/tts/tts_result_delete/TtsResultDeleteFc.tsx b/packages/fakeyou/src/v2/view/tts/tts_result_delete/TtsResultDeleteFc.tsx index c302a403c2..7679724eba 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_result_delete/TtsResultDeleteFc.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_result_delete/TtsResultDeleteFc.tsx @@ -1,92 +1,100 @@ -import React, { useState, useEffect } from 'react'; -import { ApiConfig } from '@storyteller/components'; -import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper'; -import { useParams, Link, useHistory } from 'react-router-dom'; -import { Gravatar } from '@storyteller/components/src/elements/Gravatar'; -import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig'; +import React, { useState, useEffect } from "react"; +import { ApiConfig } from "@storyteller/components"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { useParams, Link, useHistory } from "react-router-dom"; +import { Gravatar } from "@storyteller/components/src/elements/Gravatar"; +import { FrontendUrlConfig } from "../../../../common/FrontendUrlConfig"; +import { distance, delay, delay2, duration } from "../../../../data/animation"; + +const Fade = require("react-reveal/Fade"); interface TtsInferenceResultResponsePayload { - success: boolean, - result: TtsInferenceResult, + success: boolean; + result: TtsInferenceResult; } interface TtsInferenceResult { - tts_result_token: string, + tts_result_token: string; - tts_model_token: string, - tts_model_title: string, + tts_model_token: string; + tts_model_title: string; - raw_inference_text: string, + raw_inference_text: string; - maybe_creator_user_token?: string, - maybe_creator_username?: string, - maybe_creator_display_name?: string, - maybe_creator_gravatar_hash?: string, + maybe_creator_user_token?: string; + maybe_creator_username?: string; + maybe_creator_display_name?: string; + maybe_creator_gravatar_hash?: string; - maybe_model_creator_user_token?: string, - maybe_model_creator_username?: string, - maybe_model_creator_display_name?: string, - maybe_model_creator_gravatar_hash?: string, + maybe_model_creator_user_token?: string; + maybe_model_creator_username?: string; + maybe_model_creator_display_name?: string; + maybe_model_creator_gravatar_hash?: string; - public_bucket_wav_audio_path: string, - public_bucket_spectrogram_path: string, + public_bucket_wav_audio_path: string; + public_bucket_spectrogram_path: string; - file_size_bytes: number, - duration_millis: number, - created_at: string, - updated_at: string, + file_size_bytes: number; + duration_millis: number; + created_at: string; + updated_at: string; - maybe_moderator_fields: TtsInferenceResultModeratorFields | null | undefined, + maybe_moderator_fields: TtsInferenceResultModeratorFields | null | undefined; } interface TtsInferenceResultModeratorFields { - creator_ip_address: string, - mod_deleted_at: string | undefined | null, - user_deleted_at: string | undefined | null, + creator_ip_address: string; + mod_deleted_at: string | undefined | null; + user_deleted_at: string | undefined | null; } interface Props { - sessionWrapper: SessionWrapper, + sessionWrapper: SessionWrapper; } function TtsResultDeleteFc(props: Props) { const history = useHistory(); - let { token } : { token: string } = useParams(); + let { token }: { token: string } = useParams(); - const [ttsInferenceResult, setTtsInferenceResult] = useState(undefined); + const [ttsInferenceResult, setTtsInferenceResult] = useState< + TtsInferenceResult | undefined + >(undefined); useEffect(() => { const api = new ApiConfig(); const endpointUrl = api.viewTtsInferenceResult(token); fetch(endpointUrl, { - method: 'GET', + method: "GET", headers: { - 'Accept': 'application/json', + Accept: "application/json", }, - credentials: 'include', + credentials: "include", }) - .then(res => res.json()) - .then(res => { - const modelsResponse : TtsInferenceResultResponsePayload = res; - if (!modelsResponse.success) { - return; - } + .then((res) => res.json()) + .then((res) => { + const modelsResponse: TtsInferenceResultResponsePayload = res; + if (!modelsResponse.success) { + return; + } - setTtsInferenceResult(modelsResponse.result) - }) - .catch(e => { - //this.props.onSpeakErrorCallback(); - }); + setTtsInferenceResult(modelsResponse.result); + }) + .catch((e) => { + //this.props.onSpeakErrorCallback(); + }); }, [token]); // NB: Empty array dependency sets to run ONLY on mount - const currentlyDeleted = !!ttsInferenceResult?.maybe_moderator_fields?.mod_deleted_at || + const currentlyDeleted = + !!ttsInferenceResult?.maybe_moderator_fields?.mod_deleted_at || !!ttsInferenceResult?.maybe_moderator_fields?.user_deleted_at; const resultLink = FrontendUrlConfig.ttsResultPage(token); - const handleDeleteFormSubmit = (ev: React.FormEvent) : boolean => { + const handleDeleteFormSubmit = ( + ev: React.FormEvent + ): boolean => { ev.preventDefault(); const api = new ApiConfig(); @@ -94,38 +102,41 @@ function TtsResultDeleteFc(props: Props) { const request = { set_delete: !currentlyDeleted, - as_mod: props.sessionWrapper.deleteTtsResultAsMod(ttsInferenceResult?.maybe_creator_user_token) - } + as_mod: props.sessionWrapper.deleteTtsResultAsMod( + ttsInferenceResult?.maybe_creator_user_token + ), + }; fetch(endpointUrl, { - method: 'POST', + method: "POST", headers: { - 'Accept': 'application/json', - 'Content-Type': 'application/json', + Accept: "application/json", + "Content-Type": "application/json", }, - credentials: 'include', + credentials: "include", body: JSON.stringify(request), }) - .then(res => res.json()) - .then(res => { - if (res.success) { - if (props.sessionWrapper.canDeleteOtherUsersTtsResults()) { - history.push(resultLink); // Mods can perform further actions - } else { - history.push('/'); + .then((res) => res.json()) + .then((res) => { + if (res.success) { + if (props.sessionWrapper.canDeleteOtherUsersTtsResults()) { + history.push(resultLink); // Mods can perform further actions + } else { + history.push("/"); + } } - } - }) - .catch(e => { - }); + }) + .catch((e) => {}); return false; - } + }; if (ttsInferenceResult === undefined) { return
; // Exit rendering until data loads. } - const modelLink = FrontendUrlConfig.ttsModelPage(ttsInferenceResult.tts_model_token); + const modelLink = FrontendUrlConfig.ttsModelPage( + ttsInferenceResult.tts_model_token + ); let durationSeconds = ttsInferenceResult?.duration_millis / 1000; let modelName = ttsInferenceResult.tts_model_title; @@ -137,11 +148,13 @@ function TtsResultDeleteFc(props: Props) { + username={ttsInferenceResult.maybe_creator_display_name || ""} + email_hash={ttsInferenceResult.maybe_creator_gravatar_hash || ""} + />   - {ttsInferenceResult.maybe_creator_display_name} + + {ttsInferenceResult.maybe_creator_display_name} + ); } @@ -153,11 +166,15 @@ function TtsResultDeleteFc(props: Props) { + username={ttsInferenceResult.maybe_model_creator_display_name || ""} + email_hash={ + ttsInferenceResult.maybe_model_creator_gravatar_hash || "" + } + />   - {ttsInferenceResult.maybe_model_creator_display_name} + + {ttsInferenceResult.maybe_model_creator_display_name} + ); } @@ -166,87 +183,86 @@ function TtsResultDeleteFc(props: Props) { const buttonTitle = currentlyDeleted ? "Confirm Undelete" : "Confirm Delete"; - const formLabel = currentlyDeleted ? - "Recover the TTS Result (makes it visible again)" : - "Delete TTS Result (hides from everyone but mods)"; + const buttonCss = currentlyDeleted + ? "button is-warning is-large is-fullwidth" + : "button is-danger is-large is-fullwidth"; + + const formLabel = currentlyDeleted + ? "Recover the TTS Result (makes it visible again)" + : "Delete TTS Result (hides from everyone but mods)"; return ( -
-
-

{h1Title}

+ +
+

{h1Title}

+
+ < Back to result +
+
+ -
-

- < Back to result -

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Detail + + Value +
Original Text + {ttsInferenceResult.raw_inference_text} +
Audio Creator{creatorDetails}
Model used + {modelName} +
Model creator{modelCreatorDetails}
Duration{durationSeconds} seconds
+
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DetailValue
Original Text - {ttsInferenceResult.raw_inference_text} -
Audio Creator - {creatorDetails} -
Model used - - {modelName} - -
Model creator - {modelCreatorDetails} -
Duration{durationSeconds} seconds
-
-
-
-
- - -

- -

+ +
+ +

{formLabel}

+
+
- -
- -
-

- < Back to result -

-
-
- ) + ); } export { TtsResultDeleteFc }; diff --git a/packages/fakeyou/src/v2/view/tts/tts_result_edit/TtsResultEditFc.tsx b/packages/fakeyou/src/v2/view/tts/tts_result_edit/TtsResultEditFc.tsx index 03286a1d97..9ccb7fa83c 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_result_edit/TtsResultEditFc.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_result_edit/TtsResultEditFc.tsx @@ -1,65 +1,70 @@ -import React, { useState, useEffect, useCallback } from 'react'; -import { ApiConfig } from '@storyteller/components'; -import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper'; -import { useParams, Link, useHistory } from 'react-router-dom'; -import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig'; -import { VisibleIconFc } from '../../_icons/VisibleIcon'; -import { HiddenIconFc } from '../../_icons/HiddenIcon'; +import React, { useState, useEffect, useCallback } from "react"; +import { ApiConfig } from "@storyteller/components"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { useParams, Link, useHistory } from "react-router-dom"; +import { FrontendUrlConfig } from "../../../../common/FrontendUrlConfig"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons"; +import { distance, delay, delay2, duration } from "../../../../data/animation"; -const DEFAULT_VISIBILITY = 'public'; +const Fade = require("react-reveal/Fade"); + +const DEFAULT_VISIBILITY = "public"; interface TtsInferenceResultResponsePayload { - success: boolean, - result: TtsInferenceResult, + success: boolean; + result: TtsInferenceResult; } interface TtsInferenceResult { - tts_result_token: string, + tts_result_token: string; - tts_model_token: string, - tts_model_title: string, + tts_model_token: string; + tts_model_title: string; - raw_inference_text: string, + raw_inference_text: string; - maybe_creator_user_token?: string, - maybe_creator_username?: string, - maybe_creator_display_name?: string, - maybe_creator_gravatar_hash?: string, + maybe_creator_user_token?: string; + maybe_creator_username?: string; + maybe_creator_display_name?: string; + maybe_creator_gravatar_hash?: string; - maybe_model_creator_user_token?: string, - maybe_model_creator_username?: string, - maybe_model_creator_display_name?: string, - maybe_model_creator_gravatar_hash?: string, + maybe_model_creator_user_token?: string; + maybe_model_creator_username?: string; + maybe_model_creator_display_name?: string; + maybe_model_creator_gravatar_hash?: string; - public_bucket_wav_audio_path: string, - public_bucket_spectrogram_path: string, + public_bucket_wav_audio_path: string; + public_bucket_spectrogram_path: string; - creator_set_visibility?: string, + creator_set_visibility?: string; - file_size_bytes: number, - duration_millis: number, - created_at: string, - updated_at: string, + file_size_bytes: number; + duration_millis: number; + created_at: string; + updated_at: string; - maybe_moderator_fields: TtsInferenceResultModeratorFields | null | undefined, + maybe_moderator_fields: TtsInferenceResultModeratorFields | null | undefined; } interface TtsInferenceResultModeratorFields { - creator_ip_address: string, - mod_deleted_at: string | undefined | null, - user_deleted_at: string | undefined | null, + creator_ip_address: string; + mod_deleted_at: string | undefined | null; + user_deleted_at: string | undefined | null; } interface Props { - sessionWrapper: SessionWrapper, + sessionWrapper: SessionWrapper; } function TtsResultEditFc(props: Props) { - let { token } : { token : string } = useParams(); + let { token }: { token: string } = useParams(); const history = useHistory(); - const [ttsInferenceResult, setTtsInferenceResult] = useState(undefined); + const [ttsInferenceResult, setTtsInferenceResult] = useState< + TtsInferenceResult | undefined + >(undefined); const [visibility, setVisibility] = useState(DEFAULT_VISIBILITY); const getTtsResult = useCallback((token) => { @@ -67,24 +72,25 @@ function TtsResultEditFc(props: Props) { const endpointUrl = api.viewTtsInferenceResult(token); fetch(endpointUrl, { - method: 'GET', + method: "GET", headers: { - 'Accept': 'application/json', + Accept: "application/json", }, - credentials: 'include', + credentials: "include", }) - .then(res => res.json()) - .then(res => { - const modelsResponse : TtsInferenceResultResponsePayload = res; - if (!modelsResponse.success) { - return; - } + .then((res) => res.json()) + .then((res) => { + const modelsResponse: TtsInferenceResultResponsePayload = res; + if (!modelsResponse.success) { + return; + } - setTtsInferenceResult(modelsResponse.result); - setVisibility(modelsResponse?.result?.creator_set_visibility || DEFAULT_VISIBILITY); - }) - .catch(e => { - }); + setTtsInferenceResult(modelsResponse.result); + setVisibility( + modelsResponse?.result?.creator_set_visibility || DEFAULT_VISIBILITY + ); + }) + .catch((e) => {}); }, []); useEffect(() => { @@ -92,12 +98,12 @@ function TtsResultEditFc(props: Props) { }, [token, getTtsResult]); const handleVisibilityChange = (ev: React.FormEvent) => { - setVisibility((ev.target as HTMLSelectElement).value) + setVisibility((ev.target as HTMLSelectElement).value); }; const resultLink = FrontendUrlConfig.ttsResultPage(token); - const handleFormSubmit = (ev: React.FormEvent) => { + const handleFormSubmit = (ev: React.FormEvent) => { ev.preventDefault(); if (!ttsInferenceResult) { @@ -108,79 +114,94 @@ function TtsResultEditFc(props: Props) { const api = new ApiConfig(); const endpointUrl = api.editTtsInferenceResult(resultToken); - + const request = { creator_set_visibility: visibility || DEFAULT_VISIBILITY, - } + }; fetch(endpointUrl, { - method: 'POST', + method: "POST", headers: { - 'Accept': 'application/json', - 'Content-Type': 'application/json', + Accept: "application/json", + "Content-Type": "application/json", }, - credentials: 'include', + credentials: "include", body: JSON.stringify(request), }) - .then(res => res.json()) - .then(res => { - if (res === undefined || - !res.success) { - return; // Endpoint error? - } + .then((res) => res.json()) + .then((res) => { + if (res === undefined || !res.success) { + return; // Endpoint error? + } - history.push(resultLink); - }) - .catch(e => { - }); + history.push(resultLink); + }) + .catch((e) => {}); return false; }; let isDisabled = !ttsInferenceResult; - const visibilityIcon = (visibility === 'public') ? : ; + const visibilityIcon = + visibility === "public" ? ( + + ) : ( + + ); return ( -
-
-

Edit Result Visibility

- -

- < Back to result -

+
+ +
+

Edit Result Visibility

+
+ < Back to result +
+
+
- -
- -
- -
+
+ +
+
+ +
+ +
+
+
+
- -
- - - + +
+ +
+
-
-
- ) + ); } export { TtsResultEditFc }; - diff --git a/packages/fakeyou/src/v2/view/tts/tts_result_view/TtsResultViewFc.tsx b/packages/fakeyou/src/v2/view/tts/tts_result_view/TtsResultViewFc.tsx index e416d21a1c..4580a01582 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_result_view/TtsResultViewFc.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_result_view/TtsResultViewFc.tsx @@ -6,8 +6,7 @@ import { useParams, Link } from "react-router-dom"; import { SpectrogramFc } from "./SpectrogramFc"; import { ReportDiscordLinkFc } from "../../_common/DiscordReportLinkFc"; import { FrontendUrlConfig } from "../../../../common/FrontendUrlConfig"; -import { HiddenIconFc } from "../../_icons/HiddenIcon"; -import { VisibleIconFc } from "../../_icons/VisibleIcon"; + import { GetTtsResult, GetTtsResultIsErr, @@ -17,7 +16,17 @@ import { } from "../../../api/tts/GetTtsResult"; import { TtsResultAudioPlayerFc } from "./TtsResultAudioPlayerFc"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faDownload, faEdit, faTrash } from "@fortawesome/free-solid-svg-icons"; +import { + faDownload, + faEdit, + faTrash, + faEye, + faEyeSlash, +} from "@fortawesome/free-solid-svg-icons"; +import { distance, delay, duration } from "../../../../data/animation"; + +const Fade = require("react-reveal/Fade"); + interface Props { sessionWrapper: SessionWrapper; } @@ -105,56 +114,64 @@ function TtsResultViewFc(props: Props) { ) { moderatorRows = ( <> -
-
-

Moderator Details

-
- - - - - - - - - - - - - - - - - - - - - - - -
Model creator is banned - {ttsInferenceResult?.maybe_moderator_fields - ?.model_creator_is_banned - ? "banned" - : "good standing"} -
Result creator is banned (if user) - {ttsInferenceResult?.maybe_moderator_fields - ?.result_creator_is_banned_if_user - ? "banned" - : "good standing"} -
Result creator IP address - {ttsInferenceResult?.maybe_moderator_fields - ?.result_creator_ip_address || "server error"} -
Mod deleted at (UTC) - {ttsInferenceResult?.maybe_moderator_fields - ?.mod_deleted_at || "not deleted"} -
Result creator deleted at (UTC) - {ttsInferenceResult?.maybe_moderator_fields - ?.result_creator_deleted_at || "not deleted"} -
+ +
+
+

Moderator Details

+
+ + + + + + + + + + + + + + + + + + + + + + + +
Model creator is banned + {ttsInferenceResult?.maybe_moderator_fields + ?.model_creator_is_banned + ? "banned" + : "good standing"} +
Result creator is banned (if user) + {ttsInferenceResult?.maybe_moderator_fields + ?.result_creator_is_banned_if_user + ? "banned" + : "good standing"} +
Result creator IP address + {ttsInferenceResult?.maybe_moderator_fields + ?.result_creator_ip_address || "server error"} +
Mod deleted at (UTC) + {ttsInferenceResult?.maybe_moderator_fields + ?.mod_deleted_at || "not deleted"} +
Result creator deleted at (UTC) + {ttsInferenceResult?.maybe_moderator_fields + ?.result_creator_deleted_at || "not deleted"} +
+
-
+ ); } @@ -200,11 +217,11 @@ function TtsResultViewFc(props: Props) { let resultVisibility = ttsInferenceResult?.creator_set_visibility === "hidden" ? ( - Hidden + Hidden ) : ( - Public + Public ); @@ -270,32 +287,41 @@ function TtsResultViewFc(props: Props) { return (
-
-
-

- {headingTitle} -

-
-
- -
-
- {subtitle} -
- - - - Download File{" "} - + +
+
+

+ {headingTitle} +

-
+ - {/* Without wavesurfer, + +
+
+ {subtitle} + +
+
+ + {/* Without wavesurfer, */} -
-
-

Spectrogram

- -
-
- -
-
-

Result Details

-
- - - - - - - - - - - - - - - - - - - -
Original text - {ttsInferenceResult.raw_inference_text} -
Audio creator{creatorDetails}
Audio duration{durationSeconds} seconds
Visibility{resultVisibility}
+
+
+

Spectrogram

+
-
-
-
-

Model Used

-
- - - - - - - - - - - - - - - -
Model name - {modelName} -
Model creator{modelCreatorDetails}
Vocoder used{vocoderUsed}
+
+
+

Result Details

+
+ + + + + + + + + + + + + + + + + + + +
Original text + {ttsInferenceResult.raw_inference_text} +
Audio creator{creatorDetails}
Audio duration{durationSeconds} seconds
Visibility{resultVisibility}
+
-
- {debugRows} - - {moderatorRows} - -
-
- {editButton} - {deleteButton} +
+
+

Model Used

+
+ + + + + + + + + + + + + + + +
Model name + {modelName} +
Model creator{modelCreatorDetails}
Vocoder used{vocoderUsed}
+
+
-

- -

-
+ + +
{debugRows}
+ +
{moderatorRows}
+ + +
+
+ {editButton} + {deleteButton} +
+

+ +

+
+
); } From 523a23efa66d06a67a1b41999174f09cb5240eb2 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 24 Jul 2022 16:44:38 +0100 Subject: [PATCH 2/2] leaderboard page from old branch --- .../src/v2/view/leaderboard/LeaderboardFc.tsx | 184 ++++++++++++------ 1 file changed, 127 insertions(+), 57 deletions(-) diff --git a/packages/fakeyou/src/v2/view/leaderboard/LeaderboardFc.tsx b/packages/fakeyou/src/v2/view/leaderboard/LeaderboardFc.tsx index d1735c0247..1f80fe8e45 100644 --- a/packages/fakeyou/src/v2/view/leaderboard/LeaderboardFc.tsx +++ b/packages/fakeyou/src/v2/view/leaderboard/LeaderboardFc.tsx @@ -1,19 +1,36 @@ -import React, { useCallback, useEffect, useState } from 'react'; -import { Link } from 'react-router-dom'; -import { FrontendUrlConfig } from '../../../common/FrontendUrlConfig'; -import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper'; -import { Gravatar } from '@storyteller/components/src/elements/Gravatar'; -import { GetLeaderboard, GetLeaderboardIsErr, GetLeaderboardIsOk, Leaderboard, LeaderboardEntryForList, LeaderboardLookupError } from '../../api/misc/GetLeaderboard'; -import { DiscordLink2 } from '@storyteller/components/src/elements/DiscordLink2'; +import React, { useCallback, useEffect, useState } from "react"; +import { Link } from "react-router-dom"; +import { FrontendUrlConfig } from "../../../common/FrontendUrlConfig"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { Gravatar } from "@storyteller/components/src/elements/Gravatar"; +import { + GetLeaderboard, + GetLeaderboardIsErr, + GetLeaderboardIsOk, + Leaderboard, + LeaderboardEntryForList, + LeaderboardLookupError, +} from "../../api/misc/GetLeaderboard"; +import { DiscordLink2 } from "@storyteller/components/src/elements/DiscordLink2"; +import { distance, delay, duration } from "../../../data/animation"; +import { USE_REFRESH } from "../../../Refresh"; + +const Fade = require("react-reveal/Fade"); interface Props { - sessionWrapper: SessionWrapper, + sessionWrapper: SessionWrapper; } function LeaderboardFc(props: Props) { - const [leaderboard, setLeaderboard] = useState(undefined); - const [ttsLeaderboard, setTtsLeaderboard] = useState|undefined>(undefined); - const [w2lLeaderboard, setW2lLeaderboard] = useState|undefined>(undefined); + const [leaderboard, setLeaderboard] = useState( + undefined + ); + const [ttsLeaderboard, setTtsLeaderboard] = useState< + Array | undefined + >(undefined); + const [w2lLeaderboard, setW2lLeaderboard] = useState< + Array | undefined + >(undefined); const [retryCount, setRetryCount] = useState(0); const getLeaderboard = useCallback(async () => { @@ -24,13 +41,13 @@ function LeaderboardFc(props: Props) { setTtsLeaderboard(leaderboardReponse.tts_leaderboard); setW2lLeaderboard(leaderboardReponse.w2l_leaderboard); } else if (GetLeaderboardIsErr(leaderboardReponse)) { - switch(leaderboardReponse) { + switch (leaderboardReponse) { // TODO: There's an issue with the queries not returning before the deadline. // I should add a Redis TTL cache to store the results and an async job to warm the cache. case LeaderboardLookupError.NotFound: if (retryCount < 3) { setTimeout(() => getLeaderboard(), 1000); - setRetryCount(retryCount+1); + setRetryCount(retryCount + 1); } break; } @@ -45,80 +62,133 @@ function LeaderboardFc(props: Props) { return
; } - let ttsRows : Array = []; + let ttsRows: Array = []; if (ttsLeaderboard) { - ttsLeaderboard.forEach(ttsEntry => { + ttsLeaderboard.forEach((ttsEntry) => { ttsRows.push( - + - +   {ttsEntry.display_name} {ttsEntry.uploaded_count} - ) - }) + ); + }); } - let w2lRows : Array = []; + let w2lRows: Array = []; if (w2lLeaderboard) { - w2lLeaderboard.forEach(w2lEntry => { + w2lLeaderboard.forEach((w2lEntry) => { w2lRows.push( - + - +   {w2lEntry.display_name} {w2lEntry.uploaded_count} - ) - }) + ); + }); + } + + if (!USE_REFRESH) { + return ( +
+

Leaderboard

+

Our most frequent contributors!

+ +

+ Want to be on the leaderboard?{" "} + Join our Discord and learn more! +

+ + + + + + + + {ttsRows} + + + + + + {w2lRows} + +
+

TTS Models Uploaded

+
+
+

W2L Templates Uploaded

+
+
+ ); } return (
-

Leaderboard

-

Our most frequent contributors!

+
+ +
+

Leaderboard

+

Our most frequent contributors!

+

+ Want to be on the leaderboard?{" "} + Join our Discord and learn more! +

+
+ +
-

Want to be on the leaderboard? Join our Discord and learn more!

+ +
+
+

TTS Models Uploaded

+
+ + {ttsRows} +
+
+
+
- - - - - - - {ttsRows} - - - - - - {w2lRows} - - -
-

TTS Models Uploaded

-
-
-

W2L Templates Uploaded

-
+
+
+

W2L Templates Uploaded

+
+ + {w2lRows} +
+
+
+
+
- ) + ); } -export { LeaderboardFc } \ No newline at end of file +export { LeaderboardFc };