diff --git a/vocodes/package-lock.json b/vocodes/package-lock.json index 0fb7076eb2..d80f613f54 100644 --- a/vocodes/package-lock.json +++ b/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", diff --git a/vocodes/package.json b/vocodes/package.json index f35396d54b..af420abb32 100644 --- a/vocodes/package.json +++ b/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", diff --git a/vocodes/src/v2/profile/Profile_TtsInferenceResultListFc.tsx b/vocodes/src/v2/profile/Profile_TtsInferenceResultListFc.tsx index 894dfdd72e..6764f921f5 100644 --- a/vocodes/src/v2/profile/Profile_TtsInferenceResultListFc.tsx +++ b/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 = []; 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( @@ -98,7 +104,7 @@ function ProfileTtsInferenceResultsListFc(props: Props) { Model: {result.tts_model_title} {duration_seconds} s - {result.created_at} + {relativeCreateTime} ); }); diff --git a/vocodes/src/v2/profile/Profile_W2lInferenceResultListFc.tsx b/vocodes/src/v2/profile/Profile_W2lInferenceResultListFc.tsx index c2a708de7f..6e94ef9592 100644 --- a/vocodes/src/v2/profile/Profile_W2lInferenceResultListFc.tsx +++ b/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 = []; 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( @@ -97,7 +104,7 @@ function ProfileW2lInferenceResultsListFc(props: Props) { {templateTitle} (custom audio) {duration_seconds} s - {result.created_at} s + {relativeCreateTime} ); });