feat: footer's server time

src/components/layout/footer/ServerTime.tsx

@@ -1,13 +1,15 @@
-import { useTranslation } from 'react-i18next';
 import Tooltip from 'Components/common/tooltip';
+import useServerTime from 'Hooks/useServerTime';
+import { epochToGMTFormat, epochToLocalFormat } from 'Constants/moment';
 
-// TODO complete the functionality + add tests
 const ServerTime = () => {
-    const { t } = useTranslation();
+    const time = useServerTime();
+    const GMTFormat = epochToGMTFormat(time);
+    const localFormat = epochToLocalFormat(time);
 
     return (
-        <Tooltip className='border-x border-disabled-100 px-2 text-xs' content={t('2023-11-03 03:31:07 GMT')}>
-            <span>2023-11-03 03:31:07 GMT</span>
+        <Tooltip className='border-x border-disabled-100 px-2 text-xs' content={localFormat}>
+            <span>{GMTFormat}</span>
         </Tooltip>
     );
 };

src/constants/moment.ts

@@ -0,0 +1,4 @@
+import moment from 'moment';
+
+export const epochToGMTFormat = (time: number) => moment.unix(time).utc().format('YYYY-MM-DD HH:mm:ss [GMT]');
+export const epochToLocalFormat = (time: number) => moment.unix(time).utc().local().format('YYYY-MM-DD HH:mm:ss Z');

src/hooks/useServerTime.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import useQuery from 'Api/hooks/useQuery';
+
+const useServerTime = () => {
+    const currentDate = Date.now() / 1000;
+    const [serverTime, setServerTime] = useState(currentDate);
+    const { data } = useQuery('time', { options: { refetchInterval: 30000, refetchOnWindowFocus: false } });
+
+    useEffect(() => {
+        let timeInterval: ReturnType<typeof setInterval>;
+
+        if (data) {
+            setServerTime(data.time ?? currentDate);
+
+            timeInterval = setInterval(() => {
+                setServerTime(prev => prev + 1);
+            }, 1000);
+        }
+
+        return () => clearInterval(timeInterval);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data]);
+
+    return serverTime;
+};
+
+export default useServerTime;