[Task] #175, code architechture, prevent inconsisten render, show imp…

…roved error messages,

src/client/components/Map.tsx

@@ -72,14 +72,20 @@ const MultiColorPolyline = ({ cleanEntries }: { cleanEntries: Models.IEntry[] })
 
 }
 
-
 function Map({ entries }: { entries: Models.IEntry[] }) {
+	const [contextObj] = useContext(Context);
+	const [mapStyle, setMapStyle] = useState(contextObj.mode);
+
+	if (!contextObj.userInfo) {
+		return <strong className="noData cut">No Login</strong>
+	}
+	if (!entries?.length && contextObj.userInfo && !contextObj.isLoggedIn) {  // check for entries prevents hiding map when logged out due expired token
+		return ""; // empty here, since map is still there when entries, and expired message is shown in top row
+	}
 	if (!entries?.length) {
 		return <span className="noData cut">No Data to be displayed</span>
 	}
 
-	const [contextObj] = useContext(Context);
-	const [mapStyle, setMapStyle] = useState(contextObj.mode);
 
 	const lastEntry = entries.at(-1);
 	const cleanEntries = entries.filter((entry) => !entry.ignore);

src/client/components/Status.tsx

@@ -71,10 +71,9 @@ function getStatusData(entries) {
 		const currentTime = Date.now();
 		const diffMinutes = (eta - currentTime) / 60000; // Difference between eta and current time
 		const diffMinutesAtCreated = (eta - lastEntry.time.created) / 60000;
-
 
 		const print = diffMinutes > 0 ? diffMinutes : diffMinutesAtCreated;		
-		if (print >= 0) { return undefined; }
+		if (print <= 0) { return undefined; }
 
 		return print >= 60 ? (print / 60).toFixed(1) + ' hours' : print.toFixed(1) + ' minutes';
 	}

src/client/pages/Start.tsx

@@ -53,7 +53,7 @@ function Start() {
 
   const { fetchData } = useGetData(index, fetchIntervalMs, setEntries);
   const getData = useCallback(async () => {
-
+    initialRender.current = false;
     if (!contextObj.isLoggedIn) {
       if (contextObj.userInfo) { // no valid login but userInfo
         setMessageObj({ isError: true, status: "403", message: "Login expired" })
@@ -67,15 +67,14 @@ function Start() {
 
     if (isError && status == 403) {
       clearInterval(intervalID.current); intervalID.current = null;
-      console.info("cleared Interval");
     }
 
     if (fetchTimeData.last && fetchTimeData.next) {
       setLastFetch(fetchTimeData.last);
       setNextFetch(fetchTimeData.next);
     }
 
-    if (initialRender.current) {
+    if (typeof intervalID.current == "undefined") { // deliberately checking for undefined, to compare initial state vs set to null on errors
       intervalID.current = setInterval(getData, fetchIntervalMs); // capture interval ID as return from setInterval
     }
 
@@ -113,14 +112,12 @@ function Start() {
             {contextObj.isLoggedIn ? "Logged In" : "Logged Out"}
           </Button>
         </div>
-
-        {contextObj.userInfo && (
+
         <div className="grid-item map cut">
           <Suspense fallback={<div>Loading Map...</div>}>
             <Map entries={entries} />
           </Suspense>
         </div>
-        )}
 
         <div className="grid-item theme"><ModeSwitcher /></div>
 

src/scripts/token.ts

@@ -86,7 +86,7 @@ export function createJWT(req: Request, res: Response) {
     date: dateString,
     user: req.body.user
   };
-  const token = jwt.sign(payload, key, { expiresIn: 60 * 30 });
+  const token = jwt.sign(payload, key, { expiresIn: 60 * 0.25 });
   res.locals.token = token;
   return token;
 }