relative dates

vocodes/src/common/ApiConfig.ts

@@ -206,6 +206,10 @@ class ApiConfig {
     return `${this.getScheme()}://${this.getNewApiHost()}/moderation/ip_bans/add`;
   }
 
+  getModerationIpBan(ipAddress: string): string {
+    return `${this.getScheme()}://${this.getNewApiHost()}/moderation/ip_bans/${ipAddress}`;
+  }
+
   deleteModerationIpBan(ipAddress: string): string {
     return `${this.getScheme()}://${this.getNewApiHost()}/moderation/ip_bans/${ipAddress}/delete`;
   }

vocodes/src/v2/moderation_ip_ban_list/ModerationIpBanListFc.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { ApiConfig } from '../../common/ApiConfig';
 import { SessionWrapper } from '../../session/SessionWrapper';
+import { formatDistance } from 'date-fns';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -103,11 +104,15 @@ function ModerationIpBanListFc(props: Props) {
     return <h1>Unauthorized</h1>;
   }
 
+  const now = new Date();
   let rows : Array<JSX.Element> = [];
 
   ipBanList.forEach(ban => {
     const modUserLink = `/profile/${ban.mod_username}`;
 
+    const createTime = new Date(ban.created_at);
+    const relativeCreateTime = formatDistance(createTime, now, { addSuffix: true });
+
     rows.push(
       <tr key={ban.ip_address}>
         <td>{ban.ip_address}</td>
@@ -115,7 +120,7 @@ function ModerationIpBanListFc(props: Props) {
           <Link to={modUserLink}>{ban.mod_username}</Link>
         </td>
         <td>{ban.mod_notes}</td>
-        <td>{ban.created_at}</td>
+        <td>{relativeCreateTime}</td>
       </tr>
     )
   });

vocodes/src/v2/profile/Profile_TtsModelListFc.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { ApiConfig } from '../../common/ApiConfig';
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom';
 import { formatDistance } from 'date-fns';
 
 interface TtsModelListResponsePayload {