more frontend work to set backend port
This commit is contained in:
35
frontend/package-lock.json
generated
35
frontend/package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 />
|
||||
|
||||
12
frontend/src/services/backend-api.js
Normal file
12
frontend/src/services/backend-api.js
Normal file
@@ -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'
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user