feat: add error handling for state fetching in App component

functions/control/main.py

@@ -3,6 +3,8 @@ import io
 import json
 import time
 from minio import Minio
+import redis
+import os
 
 DEFAULT_STATE = {
     "text": {
@@ -27,7 +29,7 @@ MINIO_CLIENT = Minio(
     secure=True,
 )
 BUCKET = "tv-control"
-
+r = redis.Redis(host='194.15.36.205',username="default", port=12004, db=12, password=os.getenv("REDIS"))
 def _read_state():
     try:
         with open("/app/state.json", "r") as f:

tv/src/App.tsx

@@ -64,6 +64,7 @@ function App() {
   const [imagePopup, setImagePopup] = useState<ImagePopupState>({ showing: false, image_url: "", caption: "" });
   const [dataCards, setDataCards] = useState<DataCard[]>([]);
   const [settings, setSettings] = useState<SettingsState>({ background_url: "" });
+  const [fetchError, setFetchError] = useState(false);
 
   useEffect(() => {
     const handleFullscreenChange = () => {
@@ -86,9 +87,11 @@ function App() {
             setImagePopup(state.image_popup ?? { showing: false, image_url: "", caption: "" });
             setDataCards(state.data_cards ?? []);
             setSettings(state.settings ?? { background_url: "" });
+            setFetchError(false);
           })
           .catch((error) => {
             console.error("Error pulling state:", error);
+            setFetchError(true);
           });
       };
 
@@ -113,6 +116,13 @@ function App() {
 
   return (
     <div className="w-screen h-screen relative">
+      {fetchError && (
+        <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/80 backdrop-blur-sm">
+          <span className="text-red-500 text-[10rem] leading-none select-none">!</span>
+          <p className="text-white text-5xl font-bold mt-4">Connection failed</p>
+          <p className="text-gray-400 text-2xl mt-3">Retrying every 5 seconds…</p>
+        </div>
+      )}
       {settings.background_url && (
         <img
           src={settings.background_url}