From b5eea6970ac090f0f02e1d4a69ee898c359b4f95 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Sat, 29 May 2021 21:17:10 -0400
Subject: [PATCH] add inference results to profile

---
 vocodes/src/v1/api/ApiConfig.ts               |  7 +-
 vocodes/src/v2/profile/ProfileComponent.tsx   |  7 ++
 .../Profile_W2lInferenceResultListFc.tsx      | 97 +++++++++++++++++++
 .../v2/profile/Profile_W2lTemplateListFc.tsx  |  2 +-
 .../ProfileData_W2lTemplateListFc.tsx         |  2 +-
 5 files changed, 112 insertions(+), 3 deletions(-)
 create mode 100644 vocodes/src/v2/profile/Profile_W2lInferenceResultListFc.tsx

diff --git a/vocodes/src/v1/api/ApiConfig.ts b/vocodes/src/v1/api/ApiConfig.ts
index 0302a17e5a..2c77241046 100644
--- a/vocodes/src/v1/api/ApiConfig.ts
+++ b/vocodes/src/v1/api/ApiConfig.ts
@@ -65,10 +65,15 @@ class ApiConfig {
     return `${this.getScheme()}://${this.getNewApiHost()}/profile/${username}`;
   }
 
-  listW2lForUser(username: string) : string {
+  listW2lTemplatesForUser(username: string) : string {
     return `${this.getScheme()}://${this.getNewApiHost()}/user/${username}/w2l_templates`;
   }
 
+  listW2lInferenceResultsForUser(username: string) : string {
+    return `${this.getScheme()}://${this.getNewApiHost()}/user/${username}/w2l_results`;
+  }
+
+
   private getScheme() : string {
     return this.isLocalDev ? "http" : "https";
   }
diff --git a/vocodes/src/v2/profile/ProfileComponent.tsx b/vocodes/src/v2/profile/ProfileComponent.tsx
index 25d1113a49..c53d0c5ced 100644
--- a/vocodes/src/v2/profile/ProfileComponent.tsx
+++ b/vocodes/src/v2/profile/ProfileComponent.tsx
@@ -3,6 +3,7 @@ import { ApiConfig } from '../../v1/api/ApiConfig';
 import { Profile_W2lTemplateListFc } from './Profile_W2lTemplateListFc';
 import { RouteProps } from 'react-router-dom';
 import { SessionWrapper } from '../../session/SessionWrapper';
+import { Profile_W2lInferenceResultsListFc } from './Profile_W2lInferenceResultListFc';
 
 interface ProfileResponsePayload {
   success: boolean,
@@ -115,6 +116,12 @@ class ProfileComponent extends React.Component<Props, State> {
         <h3 className="title is-3"> Uploaded Templates </h3>
         <Profile_W2lTemplateListFc username={username} />
 
+        <br />
+        <br />
+
+        <h3 className="title is-3"> Lipsync Results </h3>
+        <Profile_W2lInferenceResultsListFc username={username} />
+
       </div>
     )
   }
diff --git a/vocodes/src/v2/profile/Profile_W2lInferenceResultListFc.tsx b/vocodes/src/v2/profile/Profile_W2lInferenceResultListFc.tsx
new file mode 100644
index 0000000000..25d1a88473
--- /dev/null
+++ b/vocodes/src/v2/profile/Profile_W2lInferenceResultListFc.tsx
@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react';
+import { ApiConfig } from '../../v1/api/ApiConfig';
+import { Link } from "react-router-dom";
+
+interface W2lInferenceResultListResponsePayload {
+  success: boolean,
+  results: Array<W2lInferenceResult>,
+}
+
+interface W2lInferenceResult {
+  w2l_result_token: string,
+  maybe_w2l_template_token?: string,
+  maybe_tts_inference_result_token?: string,
+
+  template_type: string,
+  template_title: string,
+
+  maybe_creator_user_token?: string,
+  maybe_creator_username?: string,
+  maybe_creator_display_name?: string,
+
+  file_size_bytes: number,
+  frame_width: number,
+  frame_height: number,
+  duration_millis: number,
+
+  created_at: string,
+  updated_at: string,
+}
+
+interface Props {
+  username: string,
+}
+
+function Profile_W2lInferenceResultsListFc(props: Props) {
+  const [w2lResults, setW2lResults] = useState<Array<W2lInferenceResult>>([]);
+
+  useEffect(() => {
+    const api = new ApiConfig();
+    const endpointUrl = api.listW2lInferenceResultsForUser(props.username);
+
+    fetch(endpointUrl, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+      },
+      credentials: 'include',
+    })
+    .then(res => res.json())
+    .then(res => {
+      console.log('list', res);
+      const templatesResponse : W2lInferenceResultListResponsePayload  = res;
+      if (!templatesResponse.success) {
+        return;
+      }
+
+      setW2lResults(templatesResponse.results)
+    })
+    .catch(e => {
+      //this.props.onSpeakErrorCallback();
+    });
+  }, []); // NB: Empty array dependency sets to run ONLY on mount
+
+  let rows : Array<JSX.Element> = [];
+  
+  w2lResults.forEach(result => {
+    let duration_seconds = result.duration_millis / 1000;
+    let title = result.template_title.length < 5 ? `Title: ${result.template_title}` : result.template_title;
+
+    rows.push(
+      <tr>
+        <th><Link to="/">{title}</Link></th>
+        <td>{duration_seconds} s</td>
+        <td>{result.created_at} s</td>
+      </tr>
+    );
+  });
+
+  return (
+    <div>
+      <table className="table">
+        <thead>
+          <tr>
+            <th><abbr title="Detail">Title</abbr></th>
+            <th><abbr title="Detail">Duration</abbr></th>
+            <th><abbr title="Value">Creation Date (UTC)</abbr></th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export { Profile_W2lInferenceResultsListFc };
diff --git a/vocodes/src/v2/profile/Profile_W2lTemplateListFc.tsx b/vocodes/src/v2/profile/Profile_W2lTemplateListFc.tsx
index 0fdbf8841e..59e68d44c3 100644
--- a/vocodes/src/v2/profile/Profile_W2lTemplateListFc.tsx
+++ b/vocodes/src/v2/profile/Profile_W2lTemplateListFc.tsx
@@ -34,7 +34,7 @@ function Profile_W2lTemplateListFc(props: Props) {
 
   useEffect(() => {
     const api = new ApiConfig();
-    const endpointUrl = api.listW2lForUser(props.username);
+    const endpointUrl = api.listW2lTemplatesForUser(props.username);
 
     fetch(endpointUrl, {
       method: 'GET',
diff --git a/vocodes/src/v2/profile_data/ProfileData_W2lTemplateListFc.tsx b/vocodes/src/v2/profile_data/ProfileData_W2lTemplateListFc.tsx
index 448af67e77..08cae81f56 100644
--- a/vocodes/src/v2/profile_data/ProfileData_W2lTemplateListFc.tsx
+++ b/vocodes/src/v2/profile_data/ProfileData_W2lTemplateListFc.tsx
@@ -34,7 +34,7 @@ function ProfileData_W2lTemplateListFc(props: Props) {
 
   useEffect(() => {
     const api = new ApiConfig();
-    const endpointUrl = api.listW2lForUser(props.username);
+    const endpointUrl = api.listW2lTemplatesForUser(props.username);
 
     fetch(endpointUrl, {
       method: 'GET',