From 7bddd2ba30e63df2530ccc0bda6a3b3d6dc8882f Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Wed, 7 Dec 2022 16:57:40 -0500
Subject: [PATCH] Add timestamps to TTS results

---
 packages/fakeyou.com/src/v2/view/PageContainer.tsx  |  4 ++--
 .../profile_view/{ProfileFc.tsx => ProfilePage.tsx} |  4 ++--
 .../v2/view/tts/tts_model_view/TtsModelViewPage.tsx |  4 ++++
 .../view/tts/tts_result_view/TtsResultViewPage.tsx  | 13 ++++++++++++-
 4 files changed, 20 insertions(+), 5 deletions(-)
 rename packages/fakeyou.com/src/v2/view/profile/profile_view/{ProfileFc.tsx => ProfilePage.tsx} (99%)

diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
index 77f486c43f..ff842f1233 100644
--- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx
+++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
@@ -9,7 +9,7 @@ import { ModerationViewIpBanFc } from "./moderation/moderation_view_ip_ban/Moder
 import { FooterNav } from "../nav/FooterNav";
 import { TopNav } from "../nav/TopNav";
 import { ProfileEditFc } from "./profile/profile_edit/ProfileEditFc";
-import { ProfileFc } from "./profile/profile_view/ProfileFc";
+import { ProfilePage } from "./profile/profile_view/ProfilePage";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
 import { SignupPage } from "./signup/SignupPage";
@@ -175,7 +175,7 @@ class PageContainer extends React.Component<Props, State> {
             </Route>
 
             <Route path="/profile/:username">
-              <ProfileFc
+              <ProfilePage
                 sessionWrapper={this.props.sessionWrapper}
                 sessionSubscriptionsWrapper={
                   this.props.sessionSubscriptionsWrapper
diff --git a/packages/fakeyou.com/src/v2/view/profile/profile_view/ProfileFc.tsx b/packages/fakeyou.com/src/v2/view/profile/profile_view/ProfilePage.tsx
similarity index 99%
rename from packages/fakeyou.com/src/v2/view/profile/profile_view/ProfileFc.tsx
rename to packages/fakeyou.com/src/v2/view/profile/profile_view/ProfilePage.tsx
index a85b16f32f..0cfbd41104 100644
--- a/packages/fakeyou.com/src/v2/view/profile/profile_view/ProfileFc.tsx
+++ b/packages/fakeyou.com/src/v2/view/profile/profile_view/ProfilePage.tsx
@@ -52,7 +52,7 @@ interface Props {
 //   navigator.clipboard.writeText(username);
 // }
 
-function ProfileFc(props: Props) {
+function ProfilePage(props: Props) {
   const { username }: { username: string } = useParams();
 
   const [userData, setUserData] = useState<User | undefined>(undefined);
@@ -406,4 +406,4 @@ function ProfileFc(props: Props) {
   );
 }
 
-export { ProfileFc };
+export { ProfilePage };
diff --git a/packages/fakeyou.com/src/v2/view/tts/tts_model_view/TtsModelViewPage.tsx b/packages/fakeyou.com/src/v2/view/tts/tts_model_view/TtsModelViewPage.tsx
index 6b4692f333..2f304b9b41 100644
--- a/packages/fakeyou.com/src/v2/view/tts/tts_model_view/TtsModelViewPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/tts/tts_model_view/TtsModelViewPage.tsx
@@ -556,6 +556,10 @@ function TtsModelViewPage(props: Props) {
     );
   }
 
+  // NB: Investors might not like the in-your-face "over 1 year ago" dates.
+  //const createdAt = new Date(ttsModel?.created_at);
+  //const createdAtRelative = createdAt !== undefined ? formatDistance(createdAt, new Date(), { addSuffix: true }) : undefined;
+
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>
       <div className="container py-5">
diff --git a/packages/fakeyou.com/src/v2/view/tts/tts_result_view/TtsResultViewPage.tsx b/packages/fakeyou.com/src/v2/view/tts/tts_result_view/TtsResultViewPage.tsx
index c9a99fd1d3..b2ba25b821 100644
--- a/packages/fakeyou.com/src/v2/view/tts/tts_result_view/TtsResultViewPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/tts/tts_result_view/TtsResultViewPage.tsx
@@ -6,7 +6,7 @@ import { useParams, Link } from "react-router-dom";
 import { SpectrogramImage } from "./SpectrogramImage";
 import { ReportDiscordLinkFc } from "../../_common/DiscordReportLinkFc";
 import { FrontendUrlConfig } from "../../../../common/FrontendUrlConfig";
-
+import { formatDistance } from "date-fns";
 import {
   GetTtsResult,
   GetTtsResultIsErr,
@@ -287,6 +287,9 @@ function TtsResultViewPage(props: Props) {
     );
   }
 
+  const createdAt = new Date(ttsInferenceResult.created_at);
+  const createdAtRelative = formatDistance(createdAt, new Date(), { addSuffix: true })
+
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>
       <div className="container py-5">
@@ -356,6 +359,14 @@ function TtsResultViewPage(props: Props) {
                   <th scope="row">Visibility</th>
                   <td>{resultVisibility}</td>
                 </tr>
+                <tr>
+                  <th scope="row">Created (relative)</th>
+                  <td>{createdAtRelative}</td>
+                </tr>
+                <tr>
+                  <th scope="row">Created (UTC)</th>
+                  <td>{ttsInferenceResult.created_at}</td>
+                </tr>
               </tbody>
             </table>
           </div>