From 014bd19a98abf92b9374e89bb70d0e0a6cbf772d Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Thu, 19 Aug 2021 01:17:48 -0400
Subject: [PATCH] delete w2l results

---
 vocodes/src/v2/NewVocodesContainer.tsx        |   7 +
 vocodes/src/v2/api/w2l/GetW2lResult.ts        |  65 ++++++
 .../w2l_result_delete/W2lResultDeleteFc.tsx   | 188 ++++++++++++++++++
 .../w2l/w2l_result_view/W2lResultViewFc.tsx   |   1 -
 4 files changed, 260 insertions(+), 1 deletion(-)
 create mode 100644 vocodes/src/v2/api/w2l/GetW2lResult.ts
 create mode 100644 vocodes/src/v2/w2l/w2l_result_delete/W2lResultDeleteFc.tsx

diff --git a/vocodes/src/v2/NewVocodesContainer.tsx b/vocodes/src/v2/NewVocodesContainer.tsx
index b19dc2869f..d54030d22b 100644
--- a/vocodes/src/v2/NewVocodesContainer.tsx
+++ b/vocodes/src/v2/NewVocodesContainer.tsx
@@ -34,6 +34,7 @@ import { TtsResultEditFc } from './tts/tts_result_edit/TtsResultEditFc';
 import { W2lResultEditFc } from './w2l/w2l_result_edit/W2lResultEditFc';
 import { W2lTemplateDeleteFc } from './w2l/w2l_template_delete/W2lTemplateDeleteFc';
 import { W2lTemplateEditFc } from './w2l/w2l_template_edit/W2lTemplateEditFc';
+import { W2lResultDeleteFc } from './w2l/w2l_result_delete/W2lResultDeleteFc';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -165,6 +166,12 @@ class NewVocodesContainer extends React.Component<Props, State> {
               />
             </Route>
 
+            <Route path="/w2l/result/:token/delete">
+              <W2lResultDeleteFc
+                sessionWrapper={this.props.sessionWrapper}
+              />
+            </Route>
+
             <Route path="/w2l/result/:token">
               <W2lResultViewFc
                 sessionWrapper={this.props.sessionWrapper}
diff --git a/vocodes/src/v2/api/w2l/GetW2lResult.ts b/vocodes/src/v2/api/w2l/GetW2lResult.ts
new file mode 100644
index 0000000000..53618a2966
--- /dev/null
+++ b/vocodes/src/v2/api/w2l/GetW2lResult.ts
@@ -0,0 +1,65 @@
+import { ApiConfig } from "../../../common/ApiConfig";
+
+interface W2lInferenceResultResponsePayload {
+  success: boolean,
+  result: W2lResult,
+}
+
+export interface W2lResult {
+  w2l_result_token: string,
+  maybe_w2l_template_token?: string,
+  maybe_tts_inference_result_token?: string,
+  public_bucket_video_path: string,
+  template_type: string,
+  template_title: string,
+
+  maybe_creator_user_token?: string,
+  maybe_creator_username?: string,
+  maybe_creator_display_name?: string,
+  maybe_creator_gravatar_hash?: string,
+
+  maybe_template_creator_user_token?: string,
+  maybe_template_creator_username?: string,
+  maybe_template_creator_display_name?: string,
+  maybe_template_creator_gravatar_hash?: string,
+
+  creator_set_visibility?: string,
+
+  file_size_bytes: number,
+  frame_width: number,
+  frame_height: number,
+  duration_millis: number,
+  created_at: string,
+  updated_at: string,
+
+  maybe_moderator_fields: W2lInferenceResultModeratorFields | null | undefined,
+}
+
+export interface W2lInferenceResultModeratorFields {
+  creator_ip_address: string,
+  mod_deleted_at: string | undefined | null,
+  user_deleted_at: string | undefined | null,
+}
+
+export async function GetW2lResult(resultToken: string) : Promise<W2lResult | undefined> {
+    const endpoint = new ApiConfig().viewW2lInferenceResult(resultToken);
+
+    return await fetch(endpoint, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+      },
+      credentials: 'include',
+    })
+    .then(res => res.json())
+    .then(res => {
+      const response : W2lInferenceResultResponsePayload  = res;
+      if (!response.success) {
+        return;
+      }
+      return response?.result;
+    })
+    .catch(e => {
+      return undefined;
+    });
+}
diff --git a/vocodes/src/v2/w2l/w2l_result_delete/W2lResultDeleteFc.tsx b/vocodes/src/v2/w2l/w2l_result_delete/W2lResultDeleteFc.tsx
new file mode 100644
index 0000000000..4435ddce04
--- /dev/null
+++ b/vocodes/src/v2/w2l/w2l_result_delete/W2lResultDeleteFc.tsx
@@ -0,0 +1,188 @@
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { ApiConfig } from '../../../common/ApiConfig';
+import { FrontendUrlConfig } from '../../../common/FrontendUrlConfig';
+import { SessionWrapper } from '../../../session/SessionWrapper';
+import { useParams, Link, useHistory } from 'react-router-dom';
+import { GetW2lTemplateUseCount } from '../../api/w2l/GetW2lTemplateUseCount';
+import { GetW2lResult, W2lResult } from '../../api/w2l/GetW2lResult';
+
+interface Props {
+  sessionWrapper: SessionWrapper,
+}
+
+function W2lResultDeleteFc(props: Props) {
+  const history = useHistory();
+
+  let { token } = useParams() as { token : string };
+
+  const [w2lTemplate, setW2lTemplate] = useState<W2lResult|undefined>(undefined);
+  const [w2lTemplateUseCount, setW2lTemplateUseCount] = useState<number|undefined>(undefined);
+
+  const getTemplate = useCallback(async (token) => {
+    const templateResponse = await GetW2lResult(token);
+
+    if (!templateResponse) {
+      return;
+    }
+
+    setW2lTemplate(templateResponse)
+  }, []);
+
+  const getTemplateUseCount = useCallback(async (token) => {
+    const count = await GetW2lTemplateUseCount(token);
+    setW2lTemplateUseCount(count || 0)
+  }, []);
+
+  useEffect(() => {
+    getTemplate(token);
+    getTemplateUseCount(token);
+  }, [token, getTemplate, getTemplateUseCount]);
+
+  const templateResultLink = FrontendUrlConfig.w2lResultPage(token);
+
+  const handleDeleteFormSubmit = (ev: React.FormEvent<HTMLFormElement>) : boolean => {
+    ev.preventDefault();
+
+    const endpointUrl = new ApiConfig().deleteW2lInferenceResult(token);
+
+    const request = {
+      set_delete: !currentlyDeleted,
+      as_mod: props.sessionWrapper.canDeleteOtherUsersW2lResults(),
+    }
+
+    fetch(endpointUrl, {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+      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('/');
+        }
+      }
+    })
+    .catch(e => {
+    });
+    return false;
+  }
+
+  let creatorLink = <span />;
+
+  if (!!w2lTemplate?.maybe_creator_display_name) {
+    const creatorUrl = FrontendUrlConfig.userProfilePage(w2lTemplate?.maybe_creator_display_name);
+    creatorLink = (
+      <Link to={creatorUrl}>{w2lTemplate?.maybe_creator_display_name}</Link>
+    );
+  }
+
+  let currentlyDeleted = !!w2lTemplate?.maybe_moderator_fields?.mod_deleted_at ||
+      !!w2lTemplate?.maybe_moderator_fields?.user_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 formLabel = currentlyDeleted ? 
+     "Recover the W2L Result (makes it visible again)" : 
+     "Delete W2L Result (hides from everyone but mods)";
+
+  let humanUseCount : string | number = 'Fetching...';
+
+  if (w2lTemplateUseCount !== undefined && w2lTemplateUseCount !== null) {
+    humanUseCount = w2lTemplateUseCount;
+  }
+
+  let moderatorRows = null;
+
+  if (props.sessionWrapper.canDeleteOtherUsersW2lResults() || props.sessionWrapper.canDeleteOtherUsersW2lTemplates()) {
+    moderatorRows = (
+      <>
+        <tr>
+          <th>Creator IP address</th>
+          <td>{w2lTemplate?.maybe_moderator_fields?.creator_ip_address || "server error"}</td>
+        </tr>
+        <tr>
+          <th>Mod Deleted At (UTC)</th>
+          <td>{w2lTemplate?.maybe_moderator_fields?.mod_deleted_at || "not deleted"}</td>
+        </tr>
+        <tr>
+          <th>User Deleted At (UTC)</th>
+          <td>{w2lTemplate?.maybe_moderator_fields?.user_deleted_at || "not deleted"}</td>
+        </tr>
+      </>
+    );
+  }
+
+  return (
+    <div className="content">
+      <h1 className="title is-1"> {h1Title} </h1>
+      
+      <p>
+        <Link to={templateResultLink}>&lt; Back to result</Link>
+      </p>
+      
+      <table className="table">
+        <thead>
+          <tr>
+            <th><abbr title="Detail">Detail</abbr></th>
+            <th><abbr title="Value">Value</abbr></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th>Creator</th>
+            <td>
+              {creatorLink}
+            </td>
+          </tr>
+          <tr>
+            <th>Use Count</th>
+            <td>{humanUseCount}</td>
+          </tr>
+          <tr>
+            <th>Title</th>
+            <td>{w2lTemplate?.template_title}</td>
+          </tr>
+          <tr>
+            <th>Upload Date (UTC)</th>
+            <td>{w2lTemplate?.created_at}</td>
+          </tr>
+
+          {moderatorRows}
+
+        </tbody>
+      </table>
+
+      <br />
+
+      <form onSubmit={handleDeleteFormSubmit}>
+        <label className="label">{formLabel}</label>
+
+        <p className="control">
+          <button className={buttonCss}>
+            {buttonTitle}
+          </button>
+        </p>
+      </form>
+
+      <br />
+      <br />
+      <Link to={templateResultLink}>&lt; Back to result</Link>
+    </div>
+  )
+}
+
+export { W2lResultDeleteFc };
diff --git a/vocodes/src/v2/w2l/w2l_result_view/W2lResultViewFc.tsx b/vocodes/src/v2/w2l/w2l_result_view/W2lResultViewFc.tsx
index 55e468d47c..1fb0a274a0 100644
--- a/vocodes/src/v2/w2l/w2l_result_view/W2lResultViewFc.tsx
+++ b/vocodes/src/v2/w2l/w2l_result_view/W2lResultViewFc.tsx
@@ -174,7 +174,6 @@ function W2lResultViewFc(props: Props) {
     "button is-warning is-large is-fullwidth" :
     "button is-danger is-large is-fullwidth";
 
-
   let editButton = null;
   const canEdit = props.sessionWrapper.canEditW2lResultAsUserOrMod(w2lInferenceResult?.maybe_creator_user_token);