diff --git a/packages/fakeyou/src/v2/view/w2l/w2l_result_delete/W2lResultDeleteFc.tsx b/packages/fakeyou/src/v2/view/w2l/w2l_result_delete/W2lResultDeleteFc.tsx index 650508c1fe..a30fc05e49 100644 --- a/packages/fakeyou/src/v2/view/w2l/w2l_result_delete/W2lResultDeleteFc.tsx +++ b/packages/fakeyou/src/v2/view/w2l/w2l_result_delete/W2lResultDeleteFc.tsx @@ -1,26 +1,34 @@ +import React, { useState, useEffect, useCallback } from "react"; +import { ApiConfig } from "@storyteller/components"; +import { FrontendUrlConfig } from "../../../../common/FrontendUrlConfig"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { useParams, Link, useHistory } from "react-router-dom"; +import { + GetW2lResult, + GetW2lResultIsOk, + W2lResult, +} from "../../../api/w2l/GetW2lResult"; +import { distance, delay, duration } from "../../../../data/animation"; -import React, { useState, useEffect, useCallback } from 'react'; -import { ApiConfig } from '@storyteller/components'; -import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig'; -import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper'; -import { useParams, Link, useHistory } from 'react-router-dom'; -import { GetW2lResult, GetW2lResultIsOk, W2lResult } from '../../../api/w2l/GetW2lResult'; +const Fade = require("react-reveal/Fade"); interface Props { - sessionWrapper: SessionWrapper, + sessionWrapper: SessionWrapper; } function W2lResultDeleteFc(props: Props) { const history = useHistory(); - let { token } = useParams() as { token : string }; + let { token } = useParams() as { token: string }; - const [w2lInferenceResult, setW2lInferenceResult] = useState(undefined); + const [w2lInferenceResult, setW2lInferenceResult] = useState< + W2lResult | undefined + >(undefined); const getInferenceResult = useCallback(async (token) => { const templateResponse = await GetW2lResult(token); if (GetW2lResultIsOk(templateResponse)) { - setW2lInferenceResult(templateResponse) + setW2lInferenceResult(templateResponse); } }, []); @@ -30,7 +38,9 @@ function W2lResultDeleteFc(props: Props) { const templateResultLink = FrontendUrlConfig.w2lResultPage(token); - const handleDeleteFormSubmit = (ev: React.FormEvent) : boolean => { + const handleDeleteFormSubmit = ( + ev: React.FormEvent + ): boolean => { ev.preventDefault(); const endpointUrl = new ApiConfig().deleteW2lInferenceResult(token); @@ -38,108 +48,120 @@ function W2lResultDeleteFc(props: Props) { const request = { set_delete: !currentlyDeleted, as_mod: props.sessionWrapper.canDeleteOtherUsersW2lResults(), - } + }; 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.canDeleteOtherUsersW2lResults()) { - history.push(templateResultLink); // Mods can perform further actions - } else { - history.push('/'); + .then((res) => res.json()) + .then((res) => { + if (res.success) { + if (props.sessionWrapper.canDeleteOtherUsersW2lResults()) { + history.push(templateResultLink); // Mods can perform further actions + } else { + history.push("/"); + } } - } - }) - .catch(e => { - }); + }) + .catch((e) => {}); return false; - } + }; let creatorLink = ; if (!!w2lInferenceResult?.maybe_creator_display_name) { - const creatorUrl = FrontendUrlConfig.userProfilePage(w2lInferenceResult?.maybe_creator_display_name); + const creatorUrl = FrontendUrlConfig.userProfilePage( + w2lInferenceResult?.maybe_creator_display_name + ); creatorLink = ( - {w2lInferenceResult?.maybe_creator_display_name} + + {w2lInferenceResult?.maybe_creator_display_name} + ); } - let currentlyDeleted = !!w2lInferenceResult?.maybe_moderator_fields?.mod_deleted_at || - !!w2lInferenceResult?.maybe_moderator_fields?.result_creator_deleted_at; + let currentlyDeleted = + !!w2lInferenceResult?.maybe_moderator_fields?.mod_deleted_at || + !!w2lInferenceResult?.maybe_moderator_fields?.result_creator_deleted_at; const h1Title = currentlyDeleted ? "Undelete Result?" : "Delete Result?"; const buttonTitle = currentlyDeleted ? "Confirm Undelete" : "Confirm Delete"; - const buttonCss = currentlyDeleted ? - "button is-warning is-large is-fullwidth" : - "button is-danger is-large is-fullwidth"; + const buttonCss = currentlyDeleted + ? "btn btn-primary w-100" + : "btn btn-primary w-100"; - const formLabel = currentlyDeleted ? - "Recover the W2L Result (makes it visible again)" : - "Delete W2L Result (hides from everyone but mods)"; + const formLabel = currentlyDeleted + ? "Recover the W2L Result (makes it visible again)" + : "Delete W2L Result (hides from everyone but mods)"; const durationSeconds = (w2lInferenceResult?.duration_millis || 0) / 1000; return ( -
-

{h1Title}

- -

- < Back to result -

- - - - - - - - - - - - - - - - - - - - - - -
DetailValue
Creator - {creatorLink} -
Template title{w2lInferenceResult?.template_title}
Duration{durationSeconds} seconds
+
+ +
+

{h1Title}

+
+ < Back to result +
+
+ -
+ +
+
+ + + + + + + + + + + + + + + + + + + + + +
+ Detail + + Value +
Creator{creatorLink}
Template title{w2lInferenceResult?.template_title}
Duration{durationSeconds} seconds
+
+
-
- - -

- -

-
- -
-
- < Back to result +
+
+ +

{formLabel}

+
+
+
- ) + ); } export { W2lResultDeleteFc }; diff --git a/packages/fakeyou/src/v2/view/w2l/w2l_result_edit/W2lResultEditFc.tsx b/packages/fakeyou/src/v2/view/w2l/w2l_result_edit/W2lResultEditFc.tsx index bb72e5a9db..d3968a300d 100644 --- a/packages/fakeyou/src/v2/view/w2l/w2l_result_edit/W2lResultEditFc.tsx +++ b/packages/fakeyou/src/v2/view/w2l/w2l_result_edit/W2lResultEditFc.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 { VisibleIconFc } from "../../_icons/VisibleIcon"; +import { HiddenIconFc } from "../../_icons/HiddenIcon"; +import { distance, delay, duration } from "../../../../data/animation"; -const DEFAULT_VISIBILITY = 'public'; +const Fade = require("react-reveal/Fade"); + +const DEFAULT_VISIBILITY = "public"; interface W2lInferenceResultResponsePayload { - success: boolean, - result: W2lInferenceResult, + success: boolean; + result: W2lInferenceResult; } interface W2lInferenceResult { - w2l_result_token: string, + w2l_result_token: string; - w2l_model_token: string, - w2l_model_title: string, + w2l_model_token: string; + w2l_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: W2lInferenceResultModeratorFields | null | undefined, + maybe_moderator_fields: W2lInferenceResultModeratorFields | null | undefined; } interface W2lInferenceResultModeratorFields { - 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 W2lResultEditFc(props: Props) { - let { token } : { token : string } = useParams(); + let { token }: { token: string } = useParams(); const history = useHistory(); - const [w2lInferenceResult, setW2lInferenceResult] = useState(undefined); + const [w2lInferenceResult, setW2lInferenceResult] = useState< + W2lInferenceResult | undefined + >(undefined); const [visibility, setVisibility] = useState(DEFAULT_VISIBILITY); const getW2lResult = useCallback((token) => { @@ -67,24 +72,25 @@ function W2lResultEditFc(props: Props) { const endpointUrl = api.viewW2lInferenceResult(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 : W2lInferenceResultResponsePayload = res; - if (!modelsResponse.success) { - return; - } + .then((res) => res.json()) + .then((res) => { + const modelsResponse: W2lInferenceResultResponsePayload = res; + if (!modelsResponse.success) { + return; + } - setW2lInferenceResult(modelsResponse.result); - setVisibility(modelsResponse?.result?.creator_set_visibility || DEFAULT_VISIBILITY); - }) - .catch(e => { - }); + setW2lInferenceResult(modelsResponse.result); + setVisibility( + modelsResponse?.result?.creator_set_visibility || DEFAULT_VISIBILITY + ); + }) + .catch((e) => {}); }, []); useEffect(() => { @@ -92,12 +98,12 @@ function W2lResultEditFc(props: Props) { }, [token, getW2lResult]); const handleVisibilityChange = (ev: React.FormEvent) => { - setVisibility((ev.target as HTMLSelectElement).value) + setVisibility((ev.target as HTMLSelectElement).value); }; const resultLink = FrontendUrlConfig.w2lResultPage(token); - const handleFormSubmit = (ev: React.FormEvent) => { + const handleFormSubmit = (ev: React.FormEvent) => { ev.preventDefault(); if (!w2lInferenceResult) { @@ -108,76 +114,88 @@ function W2lResultEditFc(props: Props) { const api = new ApiConfig(); const endpointUrl = api.editW2lInferenceResult(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 = !w2lInferenceResult; - const visibilityIcon = (visibility === 'public') ? : ; + const visibilityIcon = + visibility === "public" ? : ; return ( -
-

Edit Result Visibility

+
+ +
+

Edit Result Visibility

+
+ < Back to result +
+
+ -

- < Back to result -

- -
-
- -
- -
- + + +
+
+
+
+ +
+ +
+
+
- -
- - - -
-
- +
+ +
+ +
- ) + ); } export { W2lResultEditFc }; - diff --git a/packages/fakeyou/src/v2/view/w2l/w2l_result_view/W2lResultViewFc.tsx b/packages/fakeyou/src/v2/view/w2l/w2l_result_view/W2lResultViewFc.tsx index 709b1b6673..03fbcd1b65 100644 --- a/packages/fakeyou/src/v2/view/w2l/w2l_result_view/W2lResultViewFc.tsx +++ b/packages/fakeyou/src/v2/view/w2l/w2l_result_view/W2lResultViewFc.tsx @@ -1,32 +1,44 @@ -import React, { useState, useEffect, useCallback } from 'react'; -import { Gravatar } from '@storyteller/components/src/elements/Gravatar'; -import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper'; -import { useParams, Link } from 'react-router-dom'; -import { ReportDiscordLinkFc } from '../../_common/DiscordReportLinkFc'; -import { BucketConfig } from '@storyteller/components/src/api/BucketConfig'; -import { HiddenIconFc } from '../../_icons/HiddenIcon'; -import { VisibleIconFc } from '../../_icons/VisibleIcon'; -import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig'; -import { DownloadIcon } from '../../_icons/DownloadIcon'; -import { GetW2lResult, GetW2lResultIsErr, GetW2lResultIsOk, W2lResult, W2lResultLookupError } from '../../../api/w2l/GetW2lResult'; -import { MetaTags } from '../../../../common/MetaTags'; +import React, { useState, useEffect, useCallback } from "react"; +import { Gravatar } from "@storyteller/components/src/elements/Gravatar"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { useParams, Link } from "react-router-dom"; +import { ReportDiscordLinkFc } from "../../_common/DiscordReportLinkFc"; +import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; +import { HiddenIconFc } from "../../_icons/HiddenIcon"; +import { VisibleIconFc } from "../../_icons/VisibleIcon"; +import { FrontendUrlConfig } from "../../../../common/FrontendUrlConfig"; +import { + GetW2lResult, + GetW2lResultIsErr, + GetW2lResultIsOk, + W2lResult, + W2lResultLookupError, +} from "../../../api/w2l/GetW2lResult"; +import { MetaTags } from "../../../../common/MetaTags"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faDownload, faEdit, faTrash } from "@fortawesome/free-solid-svg-icons"; +import { distance, delay, duration } from "../../../../data/animation"; + +const Fade = require("react-reveal/Fade"); interface Props { - sessionWrapper: SessionWrapper, + sessionWrapper: SessionWrapper; } function W2lResultViewFc(props: Props) { - let { token } = useParams() as { token : string }; + let { token } = useParams() as { token: string }; - const [w2lInferenceResult, setW2lInferenceResult] = useState(undefined); + const [w2lInferenceResult, setW2lInferenceResult] = useState< + W2lResult | undefined + >(undefined); const [notFoundState, setNotFoundState] = useState(false); const getInferenceResult = useCallback(async (token) => { const templateResponse = await GetW2lResult(token); if (GetW2lResultIsOk(templateResponse)) { - setW2lInferenceResult(templateResponse) + setW2lInferenceResult(templateResponse); } else if (GetW2lResultIsErr(templateResponse)) { - switch(templateResponse) { + switch (templateResponse) { case W2lResultLookupError.NotFound: setNotFoundState(true); break; @@ -39,58 +51,89 @@ function W2lResultViewFc(props: Props) { }, [token, getInferenceResult]); // NB: Empty array dependency sets to run ONLY on mount if (notFoundState) { - return ( -

Template result not found

- ); + return

Template result not found

; } if (!w2lInferenceResult) { - return
+ return
; } - let videoLink = new BucketConfig().getGcsUrl(w2lInferenceResult?.public_bucket_video_path); + let videoLink = new BucketConfig().getGcsUrl( + w2lInferenceResult?.public_bucket_video_path + ); let templateLink = `/w2l/${w2lInferenceResult.maybe_w2l_template_token}`; - let videoDownloadFilename = `vocodes-${w2lInferenceResult.w2l_result_token.replace(':', '')}.mp4`; + let videoDownloadFilename = `vocodes-${w2lInferenceResult.w2l_result_token.replace( + ":", + "" + )}.mp4`; MetaTags.setVideoUrl(videoLink); - MetaTags.setTitle('testing...'); + MetaTags.setTitle("testing..."); let durationSeconds = w2lInferenceResult?.duration_millis / 1000; let templateName = w2lInferenceResult.template_title; - let moderatorRows = null; - if (props.sessionWrapper.canDeleteOtherUsersW2lResults() || props.sessionWrapper.canDeleteOtherUsersW2lTemplates()) { + if ( + props.sessionWrapper.canDeleteOtherUsersW2lResults() || + props.sessionWrapper.canDeleteOtherUsersW2lTemplates() + ) { moderatorRows = ( <> - - -
-

Moderator Details

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

Moderator Details

+
+ + + + + + + + + + + + + + + + + + + + + + + +
Template creator is banned + {w2lInferenceResult?.maybe_moderator_fields + ?.template_creator_is_banned + ? "banned" + : "good standing"} +
Result creator is banned (if user) + {w2lInferenceResult?.maybe_moderator_fields + ?.result_creator_is_banned_if_user + ? "banned" + : "good standing"} +
Result creator IP address + {w2lInferenceResult?.maybe_moderator_fields + ?.result_creator_ip_address || "server error"} +
Mod deleted at (UTC) + {w2lInferenceResult?.maybe_moderator_fields + ?.mod_deleted_at || "not deleted"} +
Result creator deleted at (UTC) + {w2lInferenceResult?.maybe_moderator_fields + ?.result_creator_deleted_at || "not deleted"} +
+
+
+
+ ); } @@ -106,11 +149,13 @@ function W2lResultViewFc(props: Props) { + username={w2lInferenceResult.maybe_creator_display_name || ""} + email_hash={w2lInferenceResult.maybe_creator_gravatar_hash || ""} + />   - {w2lInferenceResult.maybe_creator_display_name} + + {w2lInferenceResult.maybe_creator_display_name} + ); } @@ -122,135 +167,179 @@ function W2lResultViewFc(props: Props) { + username={ + w2lInferenceResult.maybe_template_creator_display_name || "" + } + email_hash={ + w2lInferenceResult.maybe_template_creator_gravatar_hash || "" + } + />   - {w2lInferenceResult.maybe_template_creator_display_name} + + {w2lInferenceResult.maybe_template_creator_display_name} + ); } - let resultVisibility = w2lInferenceResult?.creator_set_visibility === 'hidden' ? - Hidden : - Public ; + let resultVisibility = + w2lInferenceResult?.creator_set_visibility === "hidden" ? ( + + Hidden + + ) : ( + + Public + + ); - const currentlyDeleted = !!w2lInferenceResult?.maybe_moderator_fields?.mod_deleted_at || - !!w2lInferenceResult?.maybe_moderator_fields?.result_creator_deleted_at; + const currentlyDeleted = + !!w2lInferenceResult?.maybe_moderator_fields?.mod_deleted_at || + !!w2lInferenceResult?.maybe_moderator_fields?.result_creator_deleted_at; - const deleteButtonTitle = currentlyDeleted ? "Undelete Result?" : "Delete Result?"; + const deleteButtonTitle = currentlyDeleted + ? "Undelete Result?" + : "Delete Result?"; - const deleteButtonCss = currentlyDeleted ? - "button is-warning is-large is-fullwidth" : - "button is-danger is-large is-fullwidth"; + const deleteButtonCss = currentlyDeleted + ? "btn btn-secondary w-100" + : "btn btn-destructive w-100"; let editButton = null; - const canEdit = props.sessionWrapper.canEditW2lResultAsUserOrMod(w2lInferenceResult?.maybe_creator_user_token); + const canEdit = props.sessionWrapper.canEditW2lResultAsUserOrMod( + w2lInferenceResult?.maybe_creator_user_token + ); if (canEdit) { editButton = ( <> -
- Edit Result Visibility + > + + Edit Result Visibility + ); } let deleteButton = null; - const canDelete = props.sessionWrapper.canDeleteW2lResultAsUserOrMod(w2lInferenceResult?.maybe_creator_user_token); + const canDelete = props.sessionWrapper.canDeleteW2lResultAsUserOrMod( + w2lInferenceResult?.maybe_creator_user_token + ); if (canDelete) { deleteButton = ( <> -
- {deleteButtonTitle} + > + + {deleteButtonTitle} + ); } return (
-

Lipsync Result

+ +
+

+ Lipsync Result +

+
+ - + +
+ +
-
-
+ -  Download File +
+
+

Result Details

+
+ + + + + + + + + + + + + + + +
Creator{creatorDetails}
Duration{durationSeconds} seconds
Visibility{resultVisibility}
+
+
+
+
+
+

Template Details

+
+ + + + + + + + + + + + + + + +
Template used + {templateName} +
Template creator{templateCreatorDetails}
Dimensions + {w2lInferenceResult?.frame_width} x{" "} + {w2lInferenceResult?.frame_height} +
+
+
+
+ -
-
+
{moderatorRows}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {moderatorRows} - - -
-

Result Details

-
Creator - {creatorDetails} -
Duration{durationSeconds} seconds
Visibility{resultVisibility}
-
-

Template Details

-
Template used - - {templateName} - -
Template creator - {templateCreatorDetails} -
Dimensions{w2lInferenceResult?.frame_width} x {w2lInferenceResult?.frame_height}
- - {editButton} - - {deleteButton} - -
- + +
+
+ {editButton} + {deleteButton} +
+
+ +
+
+
- ) + ); } export { W2lResultViewFc }; diff --git a/packages/fakeyou/src/v2/view/w2l/w2l_template_approve/W2lTemplateApproveFc.tsx b/packages/fakeyou/src/v2/view/w2l/w2l_template_approve/W2lTemplateApproveFc.tsx index 01b73d9f74..9a5354a1a2 100644 --- a/packages/fakeyou/src/v2/view/w2l/w2l_template_approve/W2lTemplateApproveFc.tsx +++ b/packages/fakeyou/src/v2/view/w2l/w2l_template_approve/W2lTemplateApproveFc.tsx @@ -1,32 +1,44 @@ -import React, { useState, useEffect, useCallback } from 'react'; -import { ApiConfig } from '@storyteller/components'; -import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig'; -import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper'; -import { useParams, Link, useHistory } from 'react-router-dom'; -import { GetW2lTemplate, GetW2lTemplateIsOk, W2lTemplate } from '../../../api/w2l/GetW2lTemplate'; -import { GetW2lTemplateUseCount } from '../../../api/w2l/GetW2lTemplateUseCount'; -import { BackLink } from '../../_common/BackLink'; +import React, { useState, useEffect, useCallback } from "react"; +import { ApiConfig } from "@storyteller/components"; +import { FrontendUrlConfig } from "../../../../common/FrontendUrlConfig"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { useParams, Link, useHistory } from "react-router-dom"; +import { + GetW2lTemplate, + GetW2lTemplateIsOk, + W2lTemplate, +} from "../../../api/w2l/GetW2lTemplate"; +import { GetW2lTemplateUseCount } from "../../../api/w2l/GetW2lTemplateUseCount"; +import { BackLink } from "../../_common/BackLink"; +import { distance, delay, delay2, duration } from "../../../../data/animation"; +const Fade = require("react-reveal/Fade"); const DEFAULT_APPROVED_STATE = true; interface Props { - sessionWrapper: SessionWrapper, + sessionWrapper: SessionWrapper; } function W2lTemplateApproveFc(props: Props) { const history = useHistory(); - let { templateToken } : { templateToken : string } = useParams(); + let { templateToken }: { templateToken: string } = useParams(); - const [w2lTemplate, setW2lTemplate] = useState(undefined); - const [w2lTemplateUseCount, setW2lTemplateUseCount] = useState(undefined); - const [approvedState, setApprovedState] = useState(DEFAULT_APPROVED_STATE); + const [w2lTemplate, setW2lTemplate] = useState( + undefined + ); + const [w2lTemplateUseCount, setW2lTemplateUseCount] = useState< + number | undefined + >(undefined); + const [approvedState, setApprovedState] = useState( + DEFAULT_APPROVED_STATE + ); const getTemplate = useCallback(async (templateToken) => { const template = await GetW2lTemplate(templateToken); if (GetW2lTemplateIsOk(template)) { - setW2lTemplate(template) + setW2lTemplate(template); const currentlyApproved = template?.is_public_listing_approved; setApprovedState(currentlyApproved); } @@ -34,7 +46,7 @@ function W2lTemplateApproveFc(props: Props) { const getTemplateUseCount = useCallback(async (templateToken) => { const count = await GetW2lTemplateUseCount(templateToken); - setW2lTemplateUseCount(count || 0) + setW2lTemplateUseCount(count || 0); }, []); const templateLink = FrontendUrlConfig.w2lTemplatePage(templateToken); @@ -44,45 +56,48 @@ function W2lTemplateApproveFc(props: Props) { getTemplateUseCount(templateToken); }, [templateToken, getTemplate, getTemplateUseCount]); - const handleModApprovalChange= (ev: React.FormEvent) => { + const handleModApprovalChange = (ev: React.FormEvent) => { const value = (ev.target as HTMLSelectElement).value; const updatedValue = value === "true" ? true : false; - setApprovedState(updatedValue) + setApprovedState(updatedValue); }; - const handleApproveFormSubmit = (ev: React.FormEvent) : boolean => { + const handleApproveFormSubmit = ( + ev: React.FormEvent + ): boolean => { ev.preventDefault(); const endpointUri = new ApiConfig().moderateW2l(templateToken); const request = { is_approved: approvedState || false, - } + }; fetch(endpointUri, { - 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) { - history.push(templateLink); - } - }) - .catch(e => { - }); + .then((res) => res.json()) + .then((res) => { + if (res.success) { + history.push(templateLink); + } + }) + .catch((e) => {}); return false; - } + }; let creatorLink = ; if (!!w2lTemplate?.creator_display_name) { - const creatorUrl = FrontendUrlConfig.userProfilePage(w2lTemplate?.creator_display_name); + const creatorUrl = FrontendUrlConfig.userProfilePage( + w2lTemplate?.creator_display_name + ); creatorLink = ( {w2lTemplate?.creator_display_name} ); @@ -90,9 +105,11 @@ function W2lTemplateApproveFc(props: Props) { const currentlyApproved = w2lTemplate?.is_public_listing_approved; - const h1Title = currentlyApproved ? "Unapprove Template?" : "Approve Template?"; + const h1Title = currentlyApproved + ? "Unapprove Template?" + : "Approve Template?"; - let humanUseCount : string | number = 'Fetching...'; + let humanUseCount: string | number = "Fetching..."; const approvedFormDefaultState = approvedState ? "true" : "false"; @@ -101,73 +118,89 @@ function W2lTemplateApproveFc(props: Props) { } return ( -
-

{h1Title}

- -

- -

- - - - - - - - - - - - - - - - - - - - - - - - - +
+ +
+
+

{h1Title}

+
+
+ +
+
+ -
-
DetailValue
Creator - {creatorLink} -
Use Count{humanUseCount}
Title{w2lTemplate?.title}
Upload Date (UTC){w2lTemplate?.created_at}
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ Detail + + Value +
Creator{creatorLink}
Use Count{humanUseCount}
Title{w2lTemplate?.title}
Upload Date (UTC){w2lTemplate?.created_at}
+
+
-
+
+
+
+ - - - -
-
- -
- +
+
+ +
+
- -

- -

- -
- - -
-
- +
+ +
+ +
- ) + ); } export { W2lTemplateApproveFc }; diff --git a/packages/fakeyou/src/v2/view/w2l/w2l_template_delete/W2lTemplateDeleteFc.tsx b/packages/fakeyou/src/v2/view/w2l/w2l_template_delete/W2lTemplateDeleteFc.tsx index db77dfe70b..b6afb90c52 100644 --- a/packages/fakeyou/src/v2/view/w2l/w2l_template_delete/W2lTemplateDeleteFc.tsx +++ b/packages/fakeyou/src/v2/view/w2l/w2l_template_delete/W2lTemplateDeleteFc.tsx @@ -1,35 +1,45 @@ -import React, { useState, useEffect, useCallback } from 'react'; -import { ApiConfig } from '@storyteller/components'; -import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig'; -import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper'; -import { useParams, Link, useHistory } from 'react-router-dom'; -import { GetW2lTemplate, GetW2lTemplateIsOk, W2lTemplate } from '../../../api/w2l/GetW2lTemplate'; -import { GetW2lTemplateUseCount } from '../../../api/w2l/GetW2lTemplateUseCount'; -import { BackLink } from '../../_common/BackLink'; +import React, { useState, useEffect, useCallback } from "react"; +import { ApiConfig } from "@storyteller/components"; +import { FrontendUrlConfig } from "../../../../common/FrontendUrlConfig"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { useParams, Link, useHistory } from "react-router-dom"; +import { + GetW2lTemplate, + GetW2lTemplateIsOk, + W2lTemplate, +} from "../../../api/w2l/GetW2lTemplate"; +import { GetW2lTemplateUseCount } from "../../../api/w2l/GetW2lTemplateUseCount"; +import { BackLink } from "../../_common/BackLink"; +import { distance, delay, duration } from "../../../../data/animation"; +const Fade = require("react-reveal/Fade"); interface Props { - sessionWrapper: SessionWrapper, + sessionWrapper: SessionWrapper; } function W2lTemplateDeleteFc(props: Props) { const history = useHistory(); - let { templateToken } : { templateToken : string } = useParams(); + let { templateToken }: { templateToken: string } = useParams(); - const [w2lTemplate, setW2lTemplate] = useState(undefined); - const [w2lTemplateUseCount, setW2lTemplateUseCount] = useState(undefined); + const [w2lTemplate, setW2lTemplate] = useState( + undefined + ); + const [w2lTemplateUseCount, setW2lTemplateUseCount] = useState< + number | undefined + >(undefined); const getTemplate = useCallback(async (templateToken) => { const template = await GetW2lTemplate(templateToken); if (GetW2lTemplateIsOk(template)) { - setW2lTemplate(template) + setW2lTemplate(template); } }, []); const getTemplateUseCount = useCallback(async (templateToken) => { const count = await GetW2lTemplateUseCount(templateToken); - setW2lTemplateUseCount(count || 0) + setW2lTemplateUseCount(count || 0); }, []); const templateLink = FrontendUrlConfig.w2lTemplatePage(templateToken); @@ -39,7 +49,9 @@ function W2lTemplateDeleteFc(props: Props) { getTemplateUseCount(templateToken); }, [templateToken, getTemplate, getTemplateUseCount]); - const handleDeleteFormSubmit = (ev: React.FormEvent) : boolean => { + const handleDeleteFormSubmit = ( + ev: React.FormEvent + ): boolean => { ev.preventDefault(); const api = new ApiConfig(); @@ -47,58 +59,62 @@ function W2lTemplateDeleteFc(props: Props) { const request = { set_delete: !currentlyDeleted, - as_mod: props.sessionWrapper.deleteTtsResultAsMod(w2lTemplate?.creator_user_token) - } + as_mod: props.sessionWrapper.deleteTtsResultAsMod( + w2lTemplate?.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(templateLink); // Mods can perform further actions - } else { - history.push('/'); + .then((res) => res.json()) + .then((res) => { + if (res.success) { + if (props.sessionWrapper.canDeleteOtherUsersTtsResults()) { + history.push(templateLink); // Mods can perform further actions + } else { + history.push("/"); + } } - } - }) - .catch(e => { - }); + }) + .catch((e) => {}); return false; - } + }; let creatorLink = ; if (!!w2lTemplate?.creator_display_name) { - const creatorUrl = FrontendUrlConfig.userProfilePage(w2lTemplate?.creator_display_name); + const creatorUrl = FrontendUrlConfig.userProfilePage( + w2lTemplate?.creator_display_name + ); creatorLink = ( {w2lTemplate?.creator_display_name} ); } - let currentlyDeleted = !!w2lTemplate?.maybe_moderator_fields?.mod_deleted_at || - !!w2lTemplate?.maybe_moderator_fields?.user_deleted_at; + let currentlyDeleted = + !!w2lTemplate?.maybe_moderator_fields?.mod_deleted_at || + !!w2lTemplate?.maybe_moderator_fields?.user_deleted_at; const h1Title = currentlyDeleted ? "Undelete Template?" : "Delete Template?"; const buttonTitle = currentlyDeleted ? "Confirm Undelete" : "Confirm Delete"; - const buttonCss = currentlyDeleted ? - "button is-warning is-large is-fullwidth" : - "button is-danger is-large is-fullwidth"; + const buttonCss = currentlyDeleted + ? "btn btn-primary w-100" + : "btn btn-primary w-100"; - const formLabel = currentlyDeleted ? - "Recover the W2L Template (makes it visible again)" : - "Delete W2L Template (hides from everyone but mods)"; + const formLabel = currentlyDeleted + ? "Recover the W2L Template (makes it visible again)" + : "Delete W2L Template (hides from everyone but mods)"; - let humanUseCount : string | number = 'Fetching...'; + let humanUseCount: string | number = "Fetching..."; if (w2lTemplateUseCount !== undefined && w2lTemplateUseCount !== null) { humanUseCount = w2lTemplateUseCount; @@ -106,90 +122,120 @@ function W2lTemplateDeleteFc(props: Props) { let moderatorRows = null; - if (props.sessionWrapper.canDeleteOtherUsersTtsResults() || props.sessionWrapper.canDeleteOtherUsersW2lTemplates()) { + if ( + props.sessionWrapper.canDeleteOtherUsersTtsResults() || + props.sessionWrapper.canDeleteOtherUsersW2lTemplates() + ) { moderatorRows = ( <> Creator is banned - {w2lTemplate?.maybe_moderator_fields?.creator_is_banned ? "banned" : "good standing" } + + {w2lTemplate?.maybe_moderator_fields?.creator_is_banned + ? "banned" + : "good standing"} + Creator IP Address (Creation) - {w2lTemplate?.maybe_moderator_fields?.creator_ip_address_creation || "server error"} + + {w2lTemplate?.maybe_moderator_fields?.creator_ip_address_creation || + "server error"} + Creator IP Address (Update) - {w2lTemplate?.maybe_moderator_fields?.creator_ip_address_last_update || "server error"} + + {w2lTemplate?.maybe_moderator_fields + ?.creator_ip_address_last_update || "server error"} + Mod Deleted At (UTC) - {w2lTemplate?.maybe_moderator_fields?.mod_deleted_at || "not deleted"} + + {w2lTemplate?.maybe_moderator_fields?.mod_deleted_at || + "not deleted"} + User Deleted At (UTC) - {w2lTemplate?.maybe_moderator_fields?.user_deleted_at || "not deleted"} + + {w2lTemplate?.maybe_moderator_fields?.user_deleted_at || + "not deleted"} + ); } return ( -
-

{h1Title}

- -

- -

- - - - - - - - - - - - - - - - - - - - - - - - - +
+ +
+
+

{h1Title}

+
+
+ +
+
+ - {moderatorRows} + +
+
+
DetailValue
Creator - {creatorLink} -
Use Count{humanUseCount}
Title{w2lTemplate?.title}
Upload Date (UTC){w2lTemplate?.created_at}
+ + + + + + + + + + + + + + + + + + + + + + + - -
+ Detail + + Value +
Creator{creatorLink}
Use Count{humanUseCount}
Title{w2lTemplate?.title}
Upload Date (UTC){w2lTemplate?.created_at}
+ {moderatorRows} + + +
+
-
- -
- - -

- -

-
- -
-
- +
+
+ +
+
+

{formLabel}

+
+
+
- ) + ); } export { W2lTemplateDeleteFc }; diff --git a/packages/fakeyou/src/v2/view/w2l/w2l_template_edit/W2lTemplateEditFc.tsx b/packages/fakeyou/src/v2/view/w2l/w2l_template_edit/W2lTemplateEditFc.tsx index 31bf6c806a..e78166b534 100644 --- a/packages/fakeyou/src/v2/view/w2l/w2l_template_edit/W2lTemplateEditFc.tsx +++ b/packages/fakeyou/src/v2/view/w2l/w2l_template_edit/W2lTemplateEditFc.tsx @@ -1,25 +1,33 @@ -import React, { useState, useEffect, useCallback } from 'react'; -import { ApiConfig } from '@storyteller/components'; -import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper'; -import { useParams, useHistory } from 'react-router-dom'; -import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig'; -import { VisibleIconFc } from '../../_icons/VisibleIcon'; -import { HiddenIconFc } from '../../_icons/HiddenIcon'; -import { GetW2lTemplate, GetW2lTemplateIsOk, W2lTemplate } from '../../../api/w2l/GetW2lTemplate'; -import { BackLink } from '../../_common/BackLink'; +import React, { useState, useEffect, useCallback } from "react"; +import { ApiConfig } from "@storyteller/components"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { useParams, useHistory } from "react-router-dom"; +import { FrontendUrlConfig } from "../../../../common/FrontendUrlConfig"; +import { VisibleIconFc } from "../../_icons/VisibleIcon"; +import { HiddenIconFc } from "../../_icons/HiddenIcon"; +import { + GetW2lTemplate, + GetW2lTemplateIsOk, + W2lTemplate, +} from "../../../api/w2l/GetW2lTemplate"; +import { BackLink } from "../../_common/BackLink"; +import { distance, delay, delay2, duration } from "../../../../data/animation"; +const Fade = require("react-reveal/Fade"); -const DEFAULT_VISIBILITY = 'public'; +const DEFAULT_VISIBILITY = "public"; interface Props { - sessionWrapper: SessionWrapper, + sessionWrapper: SessionWrapper; } function W2lTemplateEditFc(props: Props) { - let { templateToken } : { templateToken : string } = useParams(); + let { templateToken }: { templateToken: string } = useParams(); const history = useHistory(); - const [w2lTemplate, setW2lTemplate] = useState(undefined); + const [w2lTemplate, setW2lTemplate] = useState( + undefined + ); const [title, setTitle] = useState(""); const [descriptionMarkdown, setDescriptionMarkdown] = useState(""); const [visibility, setVisibility] = useState(DEFAULT_VISIBILITY); @@ -28,27 +36,27 @@ function W2lTemplateEditFc(props: Props) { const template = await GetW2lTemplate(token); if (GetW2lTemplateIsOk(template)) { - setTitle(template.title || "") - setDescriptionMarkdown(template.description_markdown || "") + setTitle(template.title || ""); + setDescriptionMarkdown(template.description_markdown || ""); setVisibility(template.creator_set_visibility || DEFAULT_VISIBILITY); - setW2lTemplate(template) + setW2lTemplate(template); } - }, []); - useEffect(() => { getTemplate(templateToken); }, [templateToken, getTemplate]); - const handleTitleChange = (ev: React.FormEvent) => { + const handleTitleChange = (ev: React.FormEvent) => { ev.preventDefault(); const textValue = (ev.target as HTMLInputElement).value; setTitle(textValue); return false; }; - const handleDescriptionMarkdownChange = (ev: React.FormEvent) => { + const handleDescriptionMarkdownChange = ( + ev: React.FormEvent + ) => { ev.preventDefault(); const textValue = (ev.target as HTMLTextAreaElement).value; setDescriptionMarkdown(textValue); @@ -56,12 +64,12 @@ function W2lTemplateEditFc(props: Props) { }; const handleVisibilityChange = (ev: React.FormEvent) => { - setVisibility((ev.target as HTMLSelectElement).value) + setVisibility((ev.target as HTMLSelectElement).value); }; const templateLink = FrontendUrlConfig.w2lTemplatePage(templateToken); - const handleFormSubmit = (ev: React.FormEvent) => { + const handleFormSubmit = (ev: React.FormEvent) => { ev.preventDefault(); if (w2lTemplate === undefined) { @@ -75,103 +83,126 @@ function W2lTemplateEditFc(props: Props) { const templateToken = w2lTemplate!.template_token; const endpointUrl = new ApiConfig().editW2lTemplate(templateToken); - + const request = { title: title, description_markdown: descriptionMarkdown, 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(templateLink); - }) - .catch(e => { - }); + history.push(templateLink); + }) + .catch((e) => {}); return false; }; let isDisabled = w2lTemplate === undefined; - const visibilityIcon = (visibility === 'public') ? : ; + const visibilityIcon = + visibility === "public" ? : ; return ( -
-

Edit Template

- -

- -

- -
-
- -
- -
- -
- {/*

{invalidReason}

*/} +
+ +
+
+

Edit Template

- -
- -
-