update loadMessage function

Author: rosinni

.vscode/settings.json

@@ -3,5 +3,8 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "workbench.editorAssociations": {   
         "*.md": "vscode.markdown.preview.editor"
+    },
+    "[javascriptreact]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
     }
 }

src/front/components/BackendURL.jsx

@@ -12,10 +12,12 @@ export const BackendURL = () => (
 			<li>Make sure you backend is running on port 3001.</li>
 			<li>Open your API and copy the API host.</li>
 			<li>Open the .env file (do not open the .env.example)</li>
-			<li>Add a new variable BACKEND_URL=<Dark>your api host</Dark></li>
+			<li>Add a new variable VITE_BACKEND_URL=<Dark>your api host</Dark></li>
 			<li>Replace <Dark>your api host</Dark> with the public API URL of your flask backend sever running at port 3001</li>
 		</ol>
-		<img src={envFile} />
+		<div className="w-100">
+		<img src={envFile} className="w-100"/>
+		</div>
 		<p>Note: If you are publishing your website to Heroku, Render.com or any other hosting you probably need to follow other steps.</p>
 	</div>
 );

src/front/pages/Home.jsx

@@ -4,34 +4,43 @@ import useGlobalReducer from "../hooks/useGlobalReducer.jsx";
 
 export const Home = () => {
 
-	const {store, dispatch} =useGlobalReducer()
-	
+	const { store, dispatch } = useGlobalReducer()
+
 	const loadMessage = async () => {
-		const backendUrl = import.meta.env.VITE_BACKEND_URL
-		if (!backendUrl) throw new Error("VITE_BACKEND_URL is not defined in .env file")
-		const response = await fetch( backendUrl + "/api/hello")
-		const data = await response.json()
-		if (!response.ok) throw new Error(
-			`Could not fetch the message from the backend.
-			Please check if the backend is running and the backend port is public.`
-		);
-		dispatch({type: "set_hello", payload: data})
-		return data
+		try {
+			const backendUrl = import.meta.env.VITE_BACKEND_URL
+
+			if (!backendUrl) throw new Error("VITE_BACKEND_URL is not defined in .env file")
+
+			const response = await fetch(backendUrl + "/api/hello")
+			const data = await response.json()
+
+			if (response.ok) dispatch({ type: "set_hello", payload: data.message })
+
+			return data
+
+		} catch (error) {
+			if (error.message) throw new Error(
+				`Could not fetch the message from the backend.
+				Please check if the backend is running and the backend port is public.`
+			);
+		}
+
 	}
 
-	useEffect(()=>{
+	useEffect(() => {
 		loadMessage()
-	},[])
+	}, [])
 
 	return (
 		<div className="text-center mt-5">
 			<h1 className="display-4">Hello Rigo!!</h1>
 			<p className="lead">
 				<img src={rigoImageUrl} className="img-fluid rounded-circle mb-3" alt="Rigo Baby" />
 			</p>
-			<div className="alert alert-info fw-bold">
-				{store.hello && store.hello.message ? (
-					<span>{store.hello.message}</span>
+			<div className="alert alert-info">
+				{store.message ? (
+					<span>{store.message}</span>
 				) : (
 					<span className="text-danger">
 						Loading message from the backend (make sure your python 🐍 backend is running)...

src/front/store.js

@@ -21,7 +21,7 @@ export default function storeReducer(store, action = {}) {
     case 'set_hello':
       return {
         ...store,
-        hello: action.payload
+        message: action.payload
       };
 
     case 'add_task':