introduce the time context to get the offset between the server and the local time

src/contexts/index.ts

@@ -1,3 +1,9 @@
 import AuthContext, { AuthProvider } from "./authcontext";
+import TimeContext, { TimeProvider } from "./timecontext";
 
-export { AuthContext, AuthProvider };
+export {
+  AuthContext,
+  AuthProvider,
+  TimeContext,
+  TimeProvider
+};

src/contexts/timecontext.tsx

@@ -0,0 +1,49 @@
+import axios from 'axios';
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Configuration } from '../services';
+
+const TimeContext = React.createContext<{
+  offset: number;
+  setOffset: Dispatch<SetStateAction<number>>;
+}>({ offset: 0, setOffset: () => 0 });
+
+export const TimeProvider = ({ children }: { children: any }) => {
+  const [offset, setOffset] = useState<number>(0);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const estimateTimeOffset = async () => {
+      axios.get<number>(`${Configuration.resourceServer}/system/timestamp`, {
+        headers: {
+          Authorization: `Bearer ${sessionStorage.getItem('token')}`,
+        },
+      }).then((response) => {
+        // calculate the time offset (not accurate) between the server and the client to show "correct" times
+        const clientTimeUtc = new Date().getTime()
+        const serverTimeUtc = response.data;
+        setOffset(serverTimeUtc - clientTimeUtc);
+      }).catch(() => {
+        setOffset(0);
+        navigate('/');
+      });
+    }
+
+    estimateTimeOffset();
+    const interval = setInterval(estimateTimeOffset, 30000);
+    return () => {
+      clearInterval(interval);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      <TimeContext.Provider value={{ offset, setOffset }}>
+        {children}
+      </TimeContext.Provider>
+    </>
+  );
+};
+
+export default TimeContext;