Fix time formatting, add publish date to info page

src/pages/Hub.tsx

@@ -35,6 +35,7 @@ import {
 import { ProfilesRecord } from '../@types/pocketbase-types';
 import { isEscape } from '../utils/keyboard/shortcuts';
 import { TunesRecordFull } from '../types/dbData';
+import { formatTime } from '../pocketbase';
 
 const { useBreakpoint } = Grid;
 const { Text, Title } = Typography;
@@ -62,7 +63,7 @@ const Hub = () => {
       author: (tune['@expand'] as { userProfile: ProfilesRecord }).userProfile.username,
       displacement: `${tune.displacement}l`,
       aspiration: aspirationMapper[tune.aspiration],
-      created: new Date(tune.created).toLocaleString(),
+      published: formatTime(tune.updated),
       stars: 0,
     })));
     setIsLoading(false);
@@ -98,7 +99,7 @@ const Hub = () => {
         <>
           <Title level={5}>{tune.vehicleName}</Title>
           <Space direction="vertical">
-            <Text type="secondary">{tune.author}, {tune.created}</Text>
+            <Text type="secondary">{tune.author}, {tune.published}</Text>
             <Text>{tune.engineMake}, {tune.engineCode}, {tune.displacement}, {tune.cylindersCount} cylinders, {tune.aspiration}</Text>
             <Text code>{tune.signature}</Text>
           </Space>
@@ -156,8 +157,8 @@ const Hub = () => {
     },
     {
       title: 'Published',
-      dataIndex: 'created',
+      dataIndex: 'published',
-      key: 'created',
+      key: 'published',
       responsive: ['sm'],
     },
     {

src/pages/Info.tsx

@@ -21,6 +21,7 @@ import {
 import Loader from '../components/Loader';
 import { Routes } from '../routes';
 import { useAuth } from '../contexts/AuthContext';
+import { formatTime } from '../pocketbase';
 
 const { Item } = Form;
 const rowProps = { gutter: 10 };
@@ -67,16 +68,21 @@ const Info = ({ tuneData }: { tuneData: TuneDataState }) => {
       <Divider>Details</Divider>
       <Form>
         <Row {...rowProps}>
-          <Col span={24} sm={24}>
+          <Col {...colProps}>
             <Item>
               <Input value={tuneData['@expand'].userProfile.username} addonBefore="Author" />
             </Item>
           </Col>
+          <Col {...colProps}>
+            <Item>
+              <Input value={tuneData.signature} addonBefore="Signature" />
+            </Item>
+          </Col>
         </Row>
         <Row {...rowProps}>
           <Col span={24} sm={24}>
             <Item>
-              <Input value={tuneData.signature} addonBefore="Signature" />
+              <Input value={formatTime(tuneData.updated)} addonBefore="Published at" />
             </Item>
           </Col>
         </Row>

src/pocketbase.ts

@@ -17,8 +17,12 @@ const formatError = (error: any) => {
   return message;
 };
 
+// NOTE: PocketBase doesn't return ISO time, this may change here: https://github.com/pocketbase/pocketbase/issues/376
+const formatTime = (time: string) => new Date(`${time}Z`).toLocaleString();
+
 export {
   API_URL,
   client,
   formatError,
+  formatTime,
 };