fix(SlimFaasPlanetSaver): better UI

SlimPlanet · Dec 1, 2024 · 649d7f9 · 649d7f9
1 parent 3178440
commit 649d7f9
Show file tree

Hide file tree

Showing 4 changed files with 167 additions and 115 deletions.
diff --git a/src/SlimFaasPlanetSaver/README.md b/src/SlimFaasPlanetSaver/README.md
@@ -24,16 +24,19 @@ npm install @axa-fr/slimfaas-planet-saver
 
 Example usage with react :
 ```javascript
-import React, { useState, useEffect } from 'react';
-import SlimFaasPlanetSaver from "@axa-fr/slimfaas-planet-saver";
+import React, { useState, useEffect, useRef } from 'react';
+import SlimFaasPlanetSaver from "./SlimFaasPlanetSaver.js";
 
 const PlanetSaver = ({ children, baseUrl, fetch }) => {
-    const [isFirstStart, setIsFirstStart] = useState(true); // State for first start
+    const [isFirstStart, setIsFirstStart] = useState(true);
+    const environmentStarterRef = useRef(null);
 
     useEffect(() => {
         if (!baseUrl) return;
 
-        const environmentStarter = new SlimFaasPlanetSaver(baseUrl, {
+        if (environmentStarterRef.current) return;
+
+        const instance = new SlimFaasPlanetSaver(baseUrl, {
             interval: 2000,
             fetch,
             updateCallback: (data) => {
@@ -45,31 +48,36 @@ const PlanetSaver = ({ children, baseUrl, fetch }) => {
             errorCallback: (error) => {
                 console.error('Error detected :', error);
             },
-            overlayStartingMessage: '🌍 Starting the environment.... 🌳',
+            overlayStartingMessage: '🌳 Starting the environment.... 🌳',
             overlayNoActivityMessage: 'Waiting activity to start environment...',
-            overlayErrorMessage: 'An error occured when starting environment. Please contact an administrator.',
+            overlayErrorMessage: 'An error occurred when starting environment. Please contact an administrator.',
             overlaySecondaryMessage: 'Startup should be fast, but if no machines are available it can take several minutes.',
+            overlayLoadingIcon: '🌍',
+            overlayErrorSecondaryMessage: 'If the error persists, please contact an administrator.'
         });
 
-        // Start polling
-        environmentStarter.startPolling();
+        environmentStarterRef.current = instance;
+
+        // Initialiser les effets de bord
+        instance.initialize();
+        instance.startPolling();
 
-        // Cleanup
-        return () => environmentStarter.cleanup();
-    }, [baseUrl, isFirstStart]);
+        return () => {
+            instance.cleanup();
+            environmentStarterRef.current = null;
+        };
+    }, [baseUrl]);
 
-    // During the first start, display a loading message
     if (isFirstStart) {
         return null;
     }
 
-    // Once the environment is started, display the children
     return <>{children}</>;
-
 };
 
 export default PlanetSaver;
 
+
 ```
 
 ## Run the demo

diff --git a/src/SlimFaasPlanetSaver/src/PlanetSaver.jsx b/src/SlimFaasPlanetSaver/src/PlanetSaver.jsx
@@ -1,13 +1,16 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import SlimFaasPlanetSaver from "./SlimFaasPlanetSaver.js";
 
 const PlanetSaver = ({ children, baseUrl, fetch }) => {
-    const [isFirstStart, setIsFirstStart] = useState(true); // State for first start
+    const [isFirstStart, setIsFirstStart] = useState(true);
+    const environmentStarterRef = useRef(null);
 
     useEffect(() => {
         if (!baseUrl) return;
 
-        const environmentStarter = new SlimFaasPlanetSaver(baseUrl, {
+        if (environmentStarterRef.current) return;
+
+        const instance = new SlimFaasPlanetSaver(baseUrl, {
             interval: 2000,
             fetch,
             updateCallback: (data) => {
@@ -19,27 +22,31 @@ const PlanetSaver = ({ children, baseUrl, fetch }) => {
             errorCallback: (error) => {
                 console.error('Error detected :', error);
             },
-            overlayStartingMessage: '🌍 Starting the environment.... 🌳',
+            overlayStartingMessage: '🌳 Starting the environment.... 🌳',
             overlayNoActivityMessage: 'Waiting activity to start environment...',
-            overlayErrorMessage: 'An error occured when starting environment. Please contact an administrator.',
-            overlaySecondaryMessage: 'Startup should be fast, but if no machines are available it can take several minutes.'
+            overlayErrorMessage: 'An error occurred when starting environment. Please contact an administrator.',
+            overlaySecondaryMessage: 'Startup should be fast, but if no machines are available it can take several minutes.',
+            overlayLoadingIcon: '🌍',
+            overlayErrorSecondaryMessage: 'If the error persists, please contact an administrator.'
         });
 
-        // Start polling
-        environmentStarter.startPolling();
+        environmentStarterRef.current = instance;
+
+        // Initialiser les effets de bord
+        instance.initialize();
+        instance.startPolling();
 
-        // Cleanup
-        return () => environmentStarter.cleanup();
-    }, [baseUrl, isFirstStart]);
+        return () => {
+            instance.cleanup();
+            environmentStarterRef.current = null;
+        };
+    }, [baseUrl]);
 
-    // During the first start, display a loading message
     if (isFirstStart) {
         return null;
     }
 
-    // Once the environment is started, display the children
     return <>{children}</>;
-
 };
 
 export default PlanetSaver;