basic backend and frontend communication done

frontend/src/App.js

@@ -1,74 +1,111 @@
-import React, {useState, useEffect} from 'react';
+import React, {useState, useEffect, useContext, createContext} from 'react';
 import base64 from 'base-64';
-import { Modal, Button, Group, TextInput, Loader } from '@mantine/core';
-import { useDebouncedValue } from '@mantine/hooks';
+import Home from './components/pages/Home'
+import { Modal, Button, Text, Group, TextInput, Loader } from '@mantine/core';
+import { useDebouncedValue, useLocalStorageValue } from '@mantine/hooks';
 
 import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom'
 
-// const discoverBackend = async () => {
-//   const serverSettings = await fetch("http://localhost:3500/config")
-//   console.log("ServerSettings: ", serverSettings.json())
-// }
 
 
+const defaultSettings = {"serverURL": window.location.href.slice(0, -1), "Timezone": "America/Detroit"}
+
+
+const APIContext = createContext();
 
 function App() {
-  const [serverConfig, setServerConfig] = useState({})
-  const [serverPort, setServerPort] = useState('3501')
   const [portModalOpen, setPortModalOpen] = useState(false)
   const [authModalOpen, setAuthModalOpen] = useState(false)
   const [isLoading, setIsLoading] = useState(true)
 
-  const [fullServerPort] = useDebouncedValue(serverPort, 200)
+  // json.stringify({"serverURL": window.location.href.slice(0, -1), "Timezone": "America/Detroit"})
+  const [serverConfigLS, setServerConfigLS] = useLocalStorageValue({key: 'serverConfig', defaultValue: JSON.stringify(defaultSettings)})
+  const [serverConfig, setServerConfig] = useState(defaultSettings)
+
+  const [fullServerURL] = useDebouncedValue(serverConfig["serverURL"], 800);
+
   //headers.append("Authorization", "Basic " + base64.encode("user:password"));
   const user = "admin"
   const password = "password"
 
+  useEffect(() => {
+    console.log("Checking local storage for server settings: ", JSON.parse(serverConfigLS))
+    if(JSON.parse(serverConfigLS)) {
+      setServerConfig(JSON.parse(serverConfigLS))
+    }
+  }, [serverConfigLS, setServerConfig])
+
+
   useEffect(() => {
     setPortModalOpen(false)
-    fetch(`http://localhost:${fullServerPort}/config`)
+    const lastChar = fullServerURL[fullServerURL.length - 1]
+    let newURL = fullServerURL
+    if (lastChar === "/") {
+      newURL = fullServerURL.slice(0, -1)
+    }
+    console.log("Auto-discover URL attempted: ", `${newURL}/config`)
+    fetch(`${newURL}/config`)
       .then(response => {
+        console.log("RESPONSE: ", response)
         if (!response.ok) {
           console.log("Server not responding as expected, this should not happen!")
+          setPortModalOpen(true)
         } else {
           response.json().then(data => {
-            setServerConfig(data)
+            console.log("Connected to Server! ", data)
+            setServerConfig({...serverConfig, "Timezone": data["Timezone"], "BasicAuth": data["BasicAuth"]})
+            setServerConfigLS(JSON.stringify({...serverConfig, "Timezone": data["Timezone"], "BasicAuth": data["BasicAuth"]}))
             setPortModalOpen(false)
             setIsLoading(false)
+          }).catch(err => {
+            console.log("Server URL is incorrect, please change! ", err)
+            setPortModalOpen(true)
           })
         }
       }).catch(err => {
-        console.log("Port value is incorrect, please change! ", err)
+        console.log("Server URL is incorrect, please change! ", err)
         setPortModalOpen(true)
       })
 
-  }, [fullServerPort])
+  }, [fullServerURL])
 
   useEffect(() => {
     console.log("Loading Server Config: ", serverConfig)
     if (serverConfig["BasicAuth"]) {
-      setAuthModalOpen(true)
+      console.log("Looks like auth is required!")
+      //setAuthModalOpen(true)
     }
   }, [serverConfig])
 
   return (
-    <>
+    <APIContext.Provider value={{...serverConfig}}>
      <Modal
         opened={portModalOpen}
         onClose={() => setPortModalOpen(false)}
-        title="Communication Failed, server port may not be what was expected!"
+        title="Communication Failed, server URL may not be what was expected!"
       >
-        <TextInput label="Server Port" value={serverPort} onChange={(e) => setServerPort(e.currentTarget.value)} required></TextInput>
+        <Text>Guessed Server URL: {serverConfig["serverURL"]} does not appear to be correct, please enter correct url.</Text>
+        <TextInput label="Server URL" value={serverConfig["serverURL"]} onChange={(e) => setServerConfig({...serverConfig, "serverURL": e.currentTarget.value})} required></TextInput>
       </Modal>
       <Modal
         opened={authModalOpen}
         onClose={() => setAuthModalOpen(false)}
         title="Please Login!"
       >
-        <TextInput label="UserName" value={serverPort} onChange={(e) => setServerPort(e.currentTarget.value)} required></TextInput>
+        <TextInput label="UserName" value={serverConfig["serverURL"]} onChange={(e) => setServerConfig({"ServerURL": e.currentTarget.value})} required></TextInput>
+        <TextInput label="UserName" type="password" value={serverConfig["serverURL"]} onChange={(e) => setServerConfig({"ServerURL": e.currentTarget.value})} required></TextInput>
       </Modal>
-    {isLoading ? <Group position="center"><Loader size="xl"></Loader></Group> : <div>Welcome to goInventorize!</div>}
-    </>
+      {isLoading ? <Group position="center"><Loader size="xl"></Loader></Group> : <div>Welcome to goInventorize!</div>}
+    <Router>
+      <Switch path="/">
+        <Home />
+      
+      </Switch>
+    </Router>
+    
+    
+    </APIContext.Provider>
+    
   );
 }
 

frontend/src/components/pages/Home.js

@@ -0,0 +1,22 @@
+import React, {useState, useEffect, useContext, createContext} from 'react';
+import APIContext from '../../App';
+import { Modal, Button, Text, Group, TextInput, Loader } from '@mantine/core';
+
+
+
+
+function App() {
+
+    
+    const serverConfig = useContext(APIContext);
+
+
+    return (
+        <>
+            This page is the home page!
+        </>
+
+);
+    }
+
+export default App;