more frontend work to set backend port

Taskfile.yml

@@ -6,6 +6,8 @@ env:
   CURRENT_RELEASE: 0.1.0
   RELEASE_MSG: "First official release of the project"
   GO_VERSION: 1.16.3
+  GI_SERVER_PORT: 3500
+  REACT_APP_BACKEND_PORT: 3500 #Frontend can't find backend port unless we specify it
 
 tasks:
   build:
@@ -70,7 +72,7 @@ tasks:
 
   run-backend:
     env:
-      GI_SERVER_PORT: 3500
+      
       GI_DEVELOPMENT: false
       # TZ: "America/New_York"
     cmds:

frontend/package-lock.json

@@ -3647,6 +3647,11 @@
         }
       }
     },
+    "base-64": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/base-64/-/base-64-1.0.0.tgz",
+      "integrity": "sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg=="
+    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -9804,6 +9809,11 @@
       "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
       "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA=="
     },
+    "ky": {
+      "version": "0.28.5",
+      "resolved": "https://registry.npmjs.org/ky/-/ky-0.28.5.tgz",
+      "integrity": "sha512-O5gg9kF4MeyfSw+YkgPAafOPwEUU6xcdGEJKUJmKpIPbLzk3oxUtY4OdBNekG7mawofzkyZ/ZHuR9ev5uZZdAA=="
+    },
     "language-subtag-registry": {
       "version": "0.3.21",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz",
@@ -15061,6 +15071,11 @@
         "requires-port": "^1.0.0"
       }
     },
+    "urs": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/urs/-/urs-0.0.8.tgz",
+      "integrity": "sha512-LaSSPpr91XrVA3vW2zPupw4K6DSQEDKdL4yQZX1mO2fpljIMpB5zctrjRvxLurelWSgKsHsCmfHNCImscryirQ=="
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -15074,6 +15089,16 @@
         "ts-essentials": "^2.0.3"
       }
     },
+    "use-http": {
+      "version": "1.0.23",
+      "resolved": "https://registry.npmjs.org/use-http/-/use-http-1.0.23.tgz",
+      "integrity": "sha512-OHMKJJsYb3SlxzAcHvVioXM6udVJqnSKe4DISTw7MoZRPm3JIaXenl10p3in/amkk9xksh46snqmEHJu3CjZzQ==",
+      "requires": {
+        "urs": "^0.0.8",
+        "use-ssr": "^1.0.24",
+        "utility-types": "^3.10.0"
+      }
+    },
     "use-isomorphic-layout-effect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz",
@@ -15087,6 +15112,11 @@
         "use-isomorphic-layout-effect": "^1.0.0"
       }
     },
+    "use-ssr": {
+      "version": "1.0.24",
+      "resolved": "https://registry.npmjs.org/use-ssr/-/use-ssr-1.0.24.tgz",
+      "integrity": "sha512-0MFps7ezL57/3o0yl4CvrHLlp9z20n1rQZV/lSRz7if+TUoM6POU1XdOvEjIgjgKeIhTEye1U0khrIYWCTWw4g=="
+    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@@ -15123,6 +15153,11 @@
       "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
       "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw="
     },
+    "utility-types": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz",
+      "integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg=="
+    },
     "utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",

frontend/package.json

@@ -10,7 +10,9 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "base-64": "^1.0.0",
     "dayjs": "^1.10.6",
+    "ky": "^0.28.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-jss": "^10.7.1",

frontend/src/App.js

@@ -1,10 +1,73 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
+import base64 from 'base-64';
+import { Modal, Button, Group, TextInput, Loader } from '@mantine/core';
+import { useDebouncedValue } 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())
+// }
+
+
+
 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)
+  //headers.append("Authorization", "Basic " + base64.encode("user:password"));
+  const user = "admin"
+  const password = "password"
+
+  useEffect(() => {
+    setPortModalOpen(false)
+    fetch(`http://localhost:${fullServerPort}/config`)
+      .then(response => {
+        if (!response.ok) {
+          console.log("Server not responding as expected, this should not happen!")
+        } else {
+          response.json().then(data => {
+            setServerConfig(data)
+            setPortModalOpen(false)
+            setIsLoading(false)
+          })
+        }
+      }).catch(err => {
+        console.log("Port value is incorrect, please change! ", err)
+        setPortModalOpen(true)
+      })
+
+  }, [fullServerPort])
+
+  useEffect(() => {
+    console.log("Loading Server Config: ", serverConfig)
+    if (serverConfig["BasicAuth"]) {
+      setAuthModalOpen(true)
+    }
+  }, [serverConfig])
+
   return (
     <>
-    <div>Frontend Template with Mantine.dev installed</div>
+     <Modal
+        opened={portModalOpen}
+        onClose={() => setPortModalOpen(false)}
+        title="Communication Failed, server port may not be what was expected!"
+      >
+        <TextInput label="Server Port" value={serverPort} onChange={(e) => setServerPort(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>
+      </Modal>
+    {isLoading ? <Group position="center"><Loader size="xl"></Loader></Group> : <div>Welcome to goInventorize!</div>}
     </>
   );
 }

frontend/src/index.js

@@ -3,6 +3,10 @@ import ReactDOM from 'react-dom';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
+//setup api
+const backendPort = process.env.REACT_APP_BACKEND_PORT
+console.log("BACKEND PORT: ", backendPort)
+
 ReactDOM.render(
   <React.StrictMode>
     <App />

frontend/src/services/backend-api.js

@@ -0,0 +1,12 @@
+import ky from 'ky';
+
+const url = 'https://sindresorhus.com';
+const backendPort = 3500
+
+const backendAPI = ky.create({
+	headers: {
+		rainbow: 'rainbow',
+		unicorn: 'unicorn'
+	}
+});
+

handlers.go

@@ -9,6 +9,11 @@ import (
 	"github.com/gofiber/fiber/v2"
 )
 
+//Get Server Config
+func (s *Server) GetServerConfig(c *fiber.Ctx) error {
+	return c.Status(fiber.StatusOK).JSON(fiber.Map{"BasicAuth": s.Config.Authentication.BasicAuth, "Timezone": s.Config.Timezone})
+}
+
 // Add a new location
 func (s *Server) AddNewLocationHandler(c *fiber.Ctx) error {
 	form, err := c.MultipartForm()
@@ -72,7 +77,7 @@ func (s *Server) AddNewLocationHandler(c *fiber.Ctx) error {
 	if err != nil {
 		return err
 	}
-	return c.SendString(fmt.Sprintf("New Location Created! %s", newLocation.Name))
+	return c.Status(fiber.StatusOK).SendString(fmt.Sprintf("New Location Created! %s", newLocation.Name))
 }
 
 func (s *Server) GetAllLocationsHandler(c *fiber.Ctx) error {
@@ -100,11 +105,11 @@ func (s *Server) GetAllLocationsHandler(c *fiber.Ctx) error {
 	locArray[0] = testLoc
 	locArray[1] = testLoc2
 	fmt.Println("Returning TestLoc: ", locArray)
-	return c.JSON(locArray)
+	return c.Status(fiber.StatusOK).JSON(locArray)
 }
 
 func (s *Server) DeleteLocationHandler(c *fiber.Ctx) error {
 	locID := c.Params("locID")
 	fmt.Println("LocID: ", locID)
-	return c.JSON(locID)
+	return c.Status(fiber.StatusOK).JSON(locID)
 }

main.go

@@ -12,6 +12,7 @@ import (
 	"github.com/asdine/storm/v3"
 	"github.com/gofiber/fiber/v2"
 	"github.com/gofiber/fiber/v2/middleware/basicauth"
+	"github.com/gofiber/fiber/v2/middleware/cors"
 	"github.com/gofiber/fiber/v2/middleware/filesystem"
 	"github.com/gofiber/fiber/v2/middleware/logger"
 	"github.com/rs/zerolog"
@@ -39,20 +40,17 @@ func main() {
 	}
 	fmt.Println("Server: ", server.Config)
 	app := fiber.New()
+	// Setup CORS
+	app.Use(cors.New(cors.Config{
+		AllowOrigins: "http://localhost:3000, http://localhost",
+		AllowHeaders: "Origin, Content-Type, Accept",
+	}))
 	// Setup our logger
 	app.Use(logger.New(logger.Config{
 		Output:   server.LogFile,
 		TimeZone: server.Config.Timezone,
 		Format:   `{"logtype":"webserver", "pid":"${pid}", "requestid":"${locals:requestid}", "status":"${status}", "method":"${method}", "path":"${path}​"}​` + "\n",
 	}))
-	// Setup our basic authentication if defined
-	if server.Config.Authentication.BasicAuth {
-		app.Use(basicauth.New(basicauth.Config{
-			Users: map[string]string{
-				server.Config.Authentication.UserName: server.Config.Authentication.Password,
-			},
-		}))
-	}
 
 	server.WebServer = app
 	defer server.LogFile.Close()             // Close out our logfile when closing server.
@@ -84,6 +82,16 @@ func main() {
 		return c.SendString("GoInventorize Backend Hello Route!")
 	})
 	// Location Routes
+	server.WebServer.Get("/config", server.GetServerConfig)
+	// Setup our basic authentication if defined
+	if server.Config.Authentication.BasicAuth {
+		app.Use(basicauth.New(basicauth.Config{
+			Users: map[string]string{
+				server.Config.Authentication.UserName: server.Config.Authentication.Password,
+			},
+		}))
+	}
+
 	server.WebServer.Get("/locations", server.GetAllLocationsHandler)
 	server.WebServer.Post("/locations/new", server.AddNewLocationHandler)
 	server.WebServer.Delete("/locations/:locID", server.DeleteLocationHandler)