From cfac283101df073039f1fd4e851e9cad9a9224e3 Mon Sep 17 00:00:00 2001
From: Anton Bochkovskyi <98012691+firehawk89@users.noreply.github.com>
Date: Sun, 24 Sep 2023 19:48:18 +0300
Subject: [PATCH] declare mock messages separately

Co-authored-by: Demian Parkhomenko <95881717+DemianParkhomenko@users.noreply.github.com>
---
 src/app/page.jsx | 36 +++++++++++++++++-------------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/app/page.jsx b/src/app/page.jsx
index bf9548d..bdf695f 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -1,29 +1,27 @@
 'use client'
 
-import { useEffect, useState } from 'react'
 import Message from '@/components/message'
 
-export default function Home() {
-  const [timeStamp, setTimeStamp] = useState(0)
-
-  useEffect(() => {
-    setTimeStamp(Date.now())
-  }, [])
+const now = Date.now()
+const MOCK_MESSAGES = [
+  { sentAt: now - 1000 * 60 * 30, content: `...` },
+  { sentAt: now - 1000 * 60 * 20, content: `I\'m not empty` },
+  { sentAt: now - 1000 * 60 * 10, content: `Hello, i\'m a message! 😎` },
+  {
+    sentAt: now,
+    content:
+      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, porro',
+  },
+]
 
+export default function Home() {
   return (
     <main className="flex flex-col gap-3 p-3">
-      <Message sentAt={timeStamp}>
-        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae
-        architecto quis iure ex id voluptatum reprehenderit quod cum laboriosam.
-        Dicta temporibus quis sed assumenda tempore perferendis voluptas magnam
-        minima dignissimos! Dignissimos porro ea incidunt quae blanditiis,
-        exercitationem deserunt beatae omnis temporibus officiis, consequatur
-        nulla accusamus commodi officia minus, ullam unde optio nisi similique
-        ab maiores? Perferendis aliquid minus laudantium error.
-      </Message>
-      <Message sentAt={timeStamp}>Hello, i'm a message! 😎</Message>
-      <Message sentAt={timeStamp}>I'm not empty</Message>
-      <Message sentAt={timeStamp}>...</Message>
+      {MOCK_MESSAGES.map(({ sentAt, content }, i) => (
+        <Message key={i} sentAt={sentAt}>
+          {content}
+        </Message>
+      ))}
     </main>
   )
 }