From c782a3b44749a36cb5597448af32540562c9be33 Mon Sep 17 00:00:00 2001
From: Florian Sylvain <floriansylvainpro@gmail.com>
Date: Wed, 22 Feb 2023 09:28:12 +0100
Subject: [PATCH] Added messages processing

---
 .vscode/extensions.json |  3 ---
 src/views/Chat.vue      | 25 ++++++++++++++++++++-----
 2 files changed, 20 insertions(+), 8 deletions(-)
 delete mode 100644 .vscode/extensions.json

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
deleted file mode 100644
index c0a6e5a..0000000
--- a/.vscode/extensions.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
-}
diff --git a/src/views/Chat.vue b/src/views/Chat.vue
index b4e8fae..c89b8ba 100644
--- a/src/views/Chat.vue
+++ b/src/views/Chat.vue
@@ -5,8 +5,10 @@ import { db } from "@/utils/firestore"
 import {
 	addDoc,
 	collection,
+	FieldValue,
 	onSnapshot,
 	QuerySnapshot,
+	serverTimestamp,
 	type DocumentData,
 } from "@firebase/firestore"
 import { onMounted, ref, type Ref } from "vue"
@@ -27,12 +29,14 @@ const messagesPath = collection(
 interface Message {
 	author: string
 	message: string
+	timestamp: FieldValue
 }
 
 async function postMessage(): Promise<void> {
 	const message: Message = {
 		author: sessionStore.nickname as string,
 		message: currentMessage.value,
+		timestamp: serverTimestamp(),
 	}
 
 	const messageReference = await addDoc(messagesPath, message)
@@ -40,7 +44,18 @@ async function postMessage(): Promise<void> {
 }
 
 function updateMessages(querSnap: QuerySnapshot<DocumentData>): void {
-	console.log(querSnap.docs) // TODO
+	messages.value = querSnap.docs.map((x) =>
+		x.data({ serverTimestamps: "estimate" })
+	)
+
+	messages.value = messages.value.sort((a, b) => {
+		return a.timestamp.toDate() - b.timestamp.toDate()
+	})
+}
+
+async function onFormSubmit() {
+	await postMessage()
+	currentMessage.value = ""
 }
 
 onMounted(() => {
@@ -55,13 +70,13 @@ onMounted(() => {
 
 	<template v-else>
 		<div class="messages">
-			<div>
-				<h3>Author</h3>
-				<p>Author's message</p>
+			<div v-for="message of messages">
+				<h3>{{ message.author }}</h3>
+				<p>{{ message.message }}</p>
 			</div>
 		</div>
 
-		<form @submit.prevent="postMessage">
+		<form @submit.prevent="onFormSubmit">
 			<label for="message">Message</label>
 			<input
 				type="text"