From 90ae1231f6e037ab1fae7cba8bc524f83a6ee582 Mon Sep 17 00:00:00 2001
From: Alexey <andreewsky.alexey@gmail.com>
Date: Tue, 10 Dec 2024 13:24:38 +0300
Subject: [PATCH 1/3] Fix localtime render issue with useEffect

---
 .../src/components/layout/footer/LocalTime.js | 39 ++++++++++++-------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/src/components/layout/footer/LocalTime.js b/packages/frontend/src/components/layout/footer/LocalTime.js
index b3e2308e0..a61ef0cfb 100644
--- a/packages/frontend/src/components/layout/footer/LocalTime.js
+++ b/packages/frontend/src/components/layout/footer/LocalTime.js
@@ -1,27 +1,36 @@
 'use client'
 
+import { useEffect, useState } from 'react'
 import './LocalTime.scss'
 
 function LocalTime ({ className }) {
-  const now = new Date()
-  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+  const [time, setTime] = useState('')
+  const [date, setDate] = useState('')
+  const [timeZone, setTimeZone] = useState('')
 
-  const time = now.toLocaleTimeString('en-US', {
-    hour: '2-digit',
-    minute: '2-digit'
-  })
-
-  const date = now.toLocaleDateString('en-US', {
-    weekday: 'short',
-    day: '2-digit',
-    month: 'short'
-  })
+  useEffect(() => {
+    const now = new Date()
+    setTime(
+      now.toLocaleTimeString('en-US', {
+        hour: '2-digit',
+        minute: '2-digit'
+      })
+    )
+    setDate(
+      now.toLocaleDateString('en-US', {
+        weekday: 'short',
+        day: '2-digit',
+        month: 'short'
+      })
+    )
+    setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone)
+  }, [])
 
   return (
     <div className={`LocalTime ${className || ''}`}>
-      <span className={'LocalTime__Time'}>{time}</span>
-      <span className={'LocalTime__Date'}>{date}</span>
-      <span className={'LocalTime__TimeZone'}>({timeZone})</span>
+      {time && <span className={'LocalTime__Time'}>{time}</span>}
+      {date && <span className={'LocalTime__Date'}>{date}</span>}
+      {timeZone && <span className={'LocalTime__TimeZone'}>({timeZone})</span>}
     </div>
   )
 }

From bee749f4cc0fca7168b16f70ec9e32ac2c0eb114 Mon Sep 17 00:00:00 2001
From: Alexey <andreewsky.alexey@gmail.com>
Date: Tue, 10 Dec 2024 13:28:52 +0300
Subject: [PATCH 2/3] Code style optimization

---
 .../src/components/layout/footer/LocalTime.js | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/src/components/layout/footer/LocalTime.js b/packages/frontend/src/components/layout/footer/LocalTime.js
index a61ef0cfb..756fbf947 100644
--- a/packages/frontend/src/components/layout/footer/LocalTime.js
+++ b/packages/frontend/src/components/layout/footer/LocalTime.js
@@ -10,19 +10,15 @@ function LocalTime ({ className }) {
 
   useEffect(() => {
     const now = new Date()
-    setTime(
-      now.toLocaleTimeString('en-US', {
-        hour: '2-digit',
-        minute: '2-digit'
-      })
-    )
-    setDate(
-      now.toLocaleDateString('en-US', {
-        weekday: 'short',
-        day: '2-digit',
-        month: 'short'
-      })
-    )
+    setTime(now.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit'
+    }))
+    setDate(now.toLocaleDateString('en-US', {
+      weekday: 'short',
+      day: '2-digit',
+      month: 'short'
+    }))
     setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone)
   }, [])
 

From 24ff9cd55641a513c7db103d957aded09c71155b Mon Sep 17 00:00:00 2001
From: Alexey <andreewsky.alexey@gmail.com>
Date: Tue, 10 Dec 2024 13:38:12 +0300
Subject: [PATCH 3/3] Code optimization

---
 packages/frontend/src/components/layout/footer/LocalTime.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/layout/footer/LocalTime.js b/packages/frontend/src/components/layout/footer/LocalTime.js
index 756fbf947..a71fdc511 100644
--- a/packages/frontend/src/components/layout/footer/LocalTime.js
+++ b/packages/frontend/src/components/layout/footer/LocalTime.js
@@ -4,9 +4,9 @@ import { useEffect, useState } from 'react'
 import './LocalTime.scss'
 
 function LocalTime ({ className }) {
-  const [time, setTime] = useState('')
-  const [date, setDate] = useState('')
-  const [timeZone, setTimeZone] = useState('')
+  const [time, setTime] = useState(null)
+  const [date, setDate] = useState(null)
+  const [timeZone, setTimeZone] = useState(null)
 
   useEffect(() => {
     const now = new Date()