feat: add timestamps

package.json

@@ -44,6 +44,7 @@
 		"openpgp": "^5.11.1",
 		"phosphor-svelte": "^2.0.1",
 		"postcss": "^8.4.29",
+		"pretty-ms": "^9.0.0",
 		"tailwindcss": "^3.3.3",
 		"theme-change": "^2.5.0"
 	}

src/lib/_components/Message.svelte

@@ -1,7 +1,28 @@
 <script lang="ts">
 	export let msg: any;
 	export let color: any;
+	import prettyMilliseconds from 'pretty-ms';
+	import { onMount } from 'svelte';
+
 	let hidden = false;
+	console.log('msg', msg);
+	let time = '';
+
+	// Function to refresh the time
+	const refresh = () => {
+		const now = new Date();
+		const diff = now.getTime() - new Date(msg.timestamp).getTime();
+		time = prettyMilliseconds(diff, { compact: true });
+	};
+	const refreshInterval = setInterval(refresh, 10000);
+
+	onMount(() => {
+		const timestamp = new Date(msg.timestamp);
+		const now = new Date();
+		const diff = now.getTime() - timestamp.getTime();
+		time = prettyMilliseconds(diff, { compact: true });
+		return () => clearInterval(refreshInterval);
+	});
 </script>
 
 <div class=" bg-base-100 relative w-full border border-black p-2 font-light">
@@ -22,5 +43,5 @@
 	</span>
 	<span class="bg-base-100 absolute -top-4 left-1 border border-black p-1 px-2 text-xs">
 		{msg.r}
-	</span>
+	</span><span class="absolute -top-4 right-1 text-xs">{time}</span>
 </div>

src/routes/api/pgp/+server.ts

@@ -1,6 +1,11 @@
 import { json } from "@sveltejs/kit";
 import Listener from "../../../models/listener.schema";
 
+interface Listener {
+  pbKey: string;
+  rid: string;
+}
+
 export async function GET({ url }) {
 
   const rid = url.searchParams.get('r') ?? '';
@@ -18,14 +23,13 @@ export async function GET({ url }) {
 
 export async function PATCH({ request }) {
   const body = await request.json();
-  const { message, r, p } = body;
-
+  const { message, r, p, timestamp } = body;
 
   try {
 
     const user = await Listener.findOneAndUpdate(
       { rid: p },
-      { $push: { messages: { message, r } } },
+      { $push: { messages: { message, r, timestamp } } },
       { new: true }
     );
 
@@ -40,12 +44,6 @@ export async function PATCH({ request }) {
   }
 }
 
-interface Listener {
-  pbKey: string;
-  rid: string;
-}
-
-
 export async function POST({ request }) {
   const body = await request.json();
   const { pbKey, rid } = body as unknown as Listener;

src/routes/b/[room]/+page.svelte

@@ -41,9 +41,11 @@
 	const SignMessage = async () => {
 		prKey = localStorage.getItem('prKey')!;
 		console.log('Signing message');
+
 		const passphrase = 'super long and hard to guess secret';
 		const uniqueString = localStorage.getItem('uniqueString')!;
 		const publicKey = await openpgp.readKey({ armoredKey: api_pbKey });
+
 		const privateKey = await openpgp.decryptKey({
 			privateKey: await openpgp.readPrivateKey({ armoredKey: prKey }),
 			passphrase
@@ -62,6 +64,7 @@
 			},
 			body: JSON.stringify({
 				message: cleartextMessage,
+				timestamp: new Date().toISOString(),
 				r: uniqueString,
 				p: params
 			})

src/routes/li/[room]/+page.svelte

@@ -52,48 +52,75 @@
 		return colors[index1][index2];
 	}
 
+	// Define an asynchronous function named 'unpack'
 	const unpack = async () => {
+		// Check if 'unlocked' is true
 		if (unlocked) {
+			// Set 'unpacking' to true
 			unpacking = true;
+
+			// Fetch the encrypted messages from the server
 			const response = await fetch(`/api/pgp?r=${rid}`, {
 				method: 'GET',
 				headers: {
 					'Content-Type': 'application/json'
 				}
 			});
 
+			// Parse the JSON response
 			const resp = await response.json();
 
+			// If there's an error in the response, log the message
 			if (resp.error) {
 				console.log(resp.message);
 			} else {
+				// Otherwise, set 'encryptedMessages' to the messages from the response
 				encryptedMessages = resp.body.messages;
+				console.log('encryptedMessages', encryptedMessages);
 
+				// Loop over each encrypted message
 				for (const encryptedMessage of encryptedMessages) {
+					// Read the encrypted message
 					const readMsg = await openpgp.readMessage({
 						armoredMessage: encryptedMessage.message
 					});
+
+					// Decrypt the private key
 					const privateKey = await openpgp.decryptKey({
 						privateKey: await openpgp.readPrivateKey({ armoredKey: prKey }),
 						passphrase
 					});
 
+					// Decrypt the message with the private key
 					const { data: decrypted } = await openpgp.decrypt({
 						message: readMsg,
 						decryptionKeys: privateKey
 					});
-					const msgObj = { msg: String(decrypted), r: encryptedMessage.r };
 
-					if (!decryptedMessages.some((obj) => obj.msg === msgObj.msg && obj.r === msgObj.r)) {
+					// Create an object with the decrypted message and its 'r' property
+					const msgObj = {
+						msg: String(decrypted),
+						r: encryptedMessage.r,
+						timestamp: encryptedMessage.timestamp
+					};
+
+					// If 'decryptedMessages' doesn't already contain this message, add it
+					if (
+						!decryptedMessages.some(
+							(obj) =>
+								obj.msg === msgObj.msg && obj.r === msgObj.r && obj.timestamp === msgObj.timestamp
+						)
+					) {
 						decryptedMessages.push(msgObj);
 					}
 				}
+				// Update 'decryptedMessages' to trigger reactivity in Svelte
 				decryptedMessages = decryptedMessages;
 			}
+			// Set 'unpacking' to false
 			unpacking = false;
 		}
 	};
-
 	let copied = false;
 
 	async function copyLink() {
@@ -130,7 +157,7 @@
 >
 	<div class="flex w-full flex-row gap-2 p-1 pb-4">
 		<h1
-			class=" bg-base-200 relative w-full p-4 text-left text-primary/90
+			class=" bg-base-200 text-primary/90 relative w-full p-4 text-left
 		text-xl font-semibold md:text-3xl lg:text-4xl"
 		>
 			Room
@@ -173,7 +200,7 @@
 
 	<div class="flex w-full flex-col gap-3 p-4">
 		{#if unlocked}
-			{#each [...decryptedMessages].reverse() as msg}
+			{#each [...decryptedMessages].reverse() as msg (msg.timestamp)}
 				{@const color = generateConsistentIndices(msg.r)}
 				<Message {msg} {color} />
 			{/each}