React Interface v1

frontend/src/pages/HomePage.tsx

@@ -1,8 +1,11 @@
+import { Space, Title } from '@mantine/core';
+import { showNotification } from '@mantine/notifications';
 import React, { useEffect, useState } from 'react';
-import { Navigate, useNavigate, useRoutes } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import ServiceRow from '../components/ServiceRow';
-import { Service, update_freq } from '../js/models';
+import { notification_time, Service, update_freq } from '../js/models';
 import { servicelist } from '../js/utils';
+import { ImCross } from "react-icons/im"
 
 
 function HomePage() {
@@ -30,21 +33,30 @@ function HomePage() {
     const navigator = useNavigate()
     
     const updateInfo = () => {
-    servicelist().then(res => {
-        setServices(res)
-        setTimeout(updateInfo, update_freq)
-    }).catch(
-        err =>{
-        setTimeout(updateInfo, update_freq)}
-    )
+        servicelist().then(res => {
+            setServices(res)
+        }).catch(
+            err =>{
+                showNotification({
+                    autoClose: notification_time,
+                    title: "Home Page Auto-Update failed!",
+                    message: "[ "+err+" ]",
+                    color: 'red',
+                    icon: <ImCross />,
+                });
+        })
     }
 
-    useEffect(updateInfo,[]);
-
+    useEffect(()=>{
+        updateInfo()
+        const updater = setInterval(updateInfo, update_freq)
+        return () => { clearInterval(updater) }
+    }, []);
+    
     return <div id="service-list" className="center-flex-row">
-        {services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
+        {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
             navigator("/"+srv.id)
-        }} />)}
+        }} />):<><Space h="xl" /> <Title className='center-flex' order={1}>No services found! Add one clicking the button above</Title></>}
     </div>
 }