relative create times

vocodes/package-lock.json

@@ -1783,15 +1783,6 @@
         "@types/react-router": "*"
       }
     },
-    "@types/react-table": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/@types/react-table/-/react-table-7.7.1.tgz",
-      "integrity": "sha512-oed13swLIS4Ffyo4jAjl9lGbYMaY0uavKoI9GNMvf2R6vh8JfpRUpizQ90X1VI4WrhfaMb/HMsN7TTBvkGOQXQ==",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -4430,6 +4421,11 @@
         }
       }
     },
+    "date-fns": {
+      "version": "2.22.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz",
+      "integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg=="
+    },
     "debug": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -11355,11 +11351,6 @@
         "workbox-webpack-plugin": "4.3.1"
       }
     },
-    "react-table": {
-      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.7.0.tgz",
-      "integrity": "sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA=="
-    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",

vocodes/package.json

@@ -16,6 +16,7 @@
     "@types/react-dom": "^16.9.8",
     "axios": "^0.21.0",
     "bulma": "^0.9.0",
+    "date-fns": "^2.22.1",
     "howler": "^2.2.0",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",

vocodes/src/v2/profile/Profile_TtsInferenceResultListFc.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { ApiConfig, ListTtsInferenceResultsForUserArgs } from '../../common/ApiConfig';
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom';
+import { formatDistance } from 'date-fns';
 
 interface TtsInferenceResultListResponsePayload {
   success: boolean,
@@ -80,15 +81,20 @@ function ProfileTtsInferenceResultsListFc(props: Props) {
     getPage(null, false);
   }, [getPage, props.username]);
 
+  const now = new Date();
+
   let rows : Array<JSX.Element> = [];
   
   ttsResults.forEach(result => {
-    let duration_seconds = result.duration_millis / 1000;
+    const duration_seconds = result.duration_millis / 1000;
 
-    let inferenceLink = `/tts/result/${result.tts_result_token}`;
-    let modelLink = `/tts/${result.tts_model_token}`;
+    const inferenceLink = `/tts/result/${result.tts_result_token}`;
+    const modelLink = `/tts/${result.tts_model_token}`;
 
-    let text = result.raw_inference_text.length < 5 ? `Result: ${result.raw_inference_text}` : result.raw_inference_text;
+    const text = result.raw_inference_text.length < 5 ? `Result: ${result.raw_inference_text}` : result.raw_inference_text;
+
+    const createTime = new Date(result.created_at);
+    const relativeCreateTime = formatDistance(createTime, now, { addSuffix: true });
 
     rows.push(
       <tr key={result.tts_result_token}>
@@ -98,7 +104,7 @@ function ProfileTtsInferenceResultsListFc(props: Props) {
         </th>
         <th><Link to={modelLink}>Model: {result.tts_model_title}</Link></th>
         <td>{duration_seconds} s</td>
-        <td>{result.created_at}</td>
+        <td>{relativeCreateTime}</td>
       </tr>
     );
   });

vocodes/src/v2/profile/Profile_W2lInferenceResultListFc.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { ApiConfig, ListW2lInferenceResultsForUserArgs } from '../../common/ApiConfig';
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom';
+import { formatDistance } from 'date-fns'
 
 interface W2lInferenceResultListResponsePayload {
   success: boolean,
@@ -82,14 +83,20 @@ function ProfileW2lInferenceResultsListFc(props: Props) {
     getPage(null, false);
   }, [getPage, props.username]);
 
+  const now = new Date();
+
   let rows : Array<JSX.Element> = [];
   
   w2lResults.forEach(result => {
-    let duration_seconds = result.duration_millis / 1000;
-    let templateTitle = result.template_title.length < 5 ? `Title: ${result.template_title}` : result.template_title;
+    const duration_seconds = result.duration_millis / 1000;
+    const templateTitle = result.template_title.length < 5 ? `Title: ${result.template_title}` : result.template_title;
+
+    const inferenceLink = `/w2l/result/${result.w2l_result_token}`;
+    const templateLink = `/w2l/${result.maybe_w2l_template_token}`;
+
+    const createTime = new Date(result.created_at);
+    const relativeCreateTime = formatDistance(createTime, now, { addSuffix: true });
 
-    let inferenceLink = `/w2l/result/${result.w2l_result_token}`;
-    let templateLink = `/w2l/${result.maybe_w2l_template_token}`;
 
     rows.push(
       <tr key={result.w2l_result_token}>
@@ -97,7 +104,7 @@ function ProfileW2lInferenceResultsListFc(props: Props) {
         <th><Link to={templateLink}>{templateTitle}</Link></th>
         <td>(custom audio)</td>
         <td>{duration_seconds} s</td>
-        <td>{result.created_at} s</td>
+        <td>{relativeCreateTime}</td>
       </tr>
     );
   });