feat(dashboard): timestamp parsing (#461)

dashboard/src/api/parse-timestamps.ts

@@ -0,0 +1,26 @@
+import moment from 'moment'
+
+const timestampRegex = /<t:(\d{10})(:[tTdDfFR])?>/g
+const parseTimestamps = (html: string) => {
+  return html.replaceAll(
+    timestampRegex,
+    (match, p1, p2) => {
+      const timestamp = moment.unix(parseInt(p1))
+      const format: string = p2 ? p2[1] : 'f'
+      if (format !== 'R') {
+        let dateTimeFormatOptions = {
+          t: 'HH:mm',
+          T: 'HH:mm:ss',
+          d: 'DD/MM/YYYY',
+          D: 'DD MMMM YYYY',
+          f: 'DD MMMM YYYY HH:mm',
+          F: 'dddd, DD MMMM YYYY HH:mm',
+        }[format]
+        return timestamp.format(dateTimeFormatOptions)
+      }
+      return timestamp.fromNow()
+    },
+  )
+}
+
+export default parseTimestamps

dashboard/src/lib/group/Body.svelte

@@ -3,6 +3,7 @@
     import { Row, Col, Modal, Image, Button, CardBody, ModalHeader, ModalBody, ModalFooter, Spinner } from 'sveltestrap';
     import moment from 'moment';
     import { toHTML } from 'discord-markdown';
+    import parseTimestamps from '../../api/parse-timestamps';
     import Edit from './Edit.svelte';
     import twemoji from 'twemoji';
     import Privacy from './Privacy.svelte';
@@ -21,7 +22,7 @@
 
     let htmlDescription: string;
     $: if (group.description) { 
-        htmlDescription = toHTML(group.description, {embed: true});
+        htmlDescription = toHTML(parseTimestamps(group.description), {embed: true});
     } else {
         htmlDescription = "(no description)";
     }
@@ -124,4 +125,4 @@
 {:else if memberMode}
     <MemberEdit on:updateMembers bind:group bind:memberMode bind:members />
 {/if}
-</CardBody>
+</CardBody>

dashboard/src/lib/member/Body.svelte

@@ -3,6 +3,7 @@
     import { Row, Col, Modal, Image, Button, CardBody, ModalHeader, ModalBody } from 'sveltestrap';
     import moment from 'moment';
     import { toHTML } from 'discord-markdown';
+    import parseTimestamps from '../../api/parse-timestamps';
     import twemoji from 'twemoji';
 
     import GroupEdit from './GroupEdit.svelte';
@@ -24,14 +25,14 @@
 
     let htmlDescription: string;
     $: if (member.description) { 
-        htmlDescription = toHTML(member.description, {embed: true});
+        htmlDescription = toHTML(parseTimestamps(member.description), {embed: true});
     } else {
         htmlDescription = "(no description)";
     }
 
     let htmlPronouns: string;
     $: if (member.pronouns) { 
-        htmlPronouns = toHTML(member.pronouns, {embed: true});
+        htmlPronouns = toHTML(parseTimestamps(member.pronouns), {embed: true});
     }
 
     let settings = JSON.parse(localStorage.getItem("pk-settings"));
@@ -164,4 +165,4 @@
     {:else if groupMode}
         <GroupEdit on:updateGroups bind:member bind:groups bind:groupMode />
     {/if}
-    </CardBody>
+    </CardBody>

dashboard/src/lib/system/Body.svelte

@@ -2,6 +2,7 @@
     import { Row, Col, Modal, Image, Button } from 'sveltestrap';
     import moment from 'moment';
     import { toHTML } from 'discord-markdown';
+    import parseTimestamps from '../../api/parse-timestamps';
     import twemoji from 'twemoji';
 
     import { System } from '../../api/types';
@@ -13,7 +14,7 @@
     let htmlDescription: string;
     let htmlName: string;
     if (user.description) { 
-        htmlDescription = toHTML(user.description, {embed: true});
+        htmlDescription = toHTML(parseTimestamps(user.description), {embed: true});
     } else {
         htmlDescription = "(no description)";
     }
@@ -91,4 +92,4 @@
 {/if}
 {#if !isPublic}
 <Button style="flex: 0" color="primary" on:click={() => editMode = true} aria-label="edit system information">Edit</Button>
-{/if}
+{/if}