Add timestamps to TTS results

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

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 };

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">

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>