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 bcb5c2f4b9..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 @@ -10,6 +10,8 @@ import { } 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; @@ -117,76 +119,86 @@ function W2lTemplateApproveFc(props: Props) { return (
-
-
-

{h1Title}

+ +
+
+

{h1Title}

+
+
+ +
-
- -
-
+ -
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
- Detail - - Value -
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}
+
+
-
-
- + +
+
+ + +
+
+ +
-
-
- -
- +
+ +
+ +
); } 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 baea661ab6..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 @@ -11,6 +11,8 @@ import { 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"; @@ -117,76 +119,88 @@ function W2lTemplateEditFc(props: Props) { return (
-
-
-

Edit Template

+ +
+
+

Edit Template

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

{invalidReason}

*/}
- {/*

{invalidReason}

*/} -
-
- -
-