feat: changing API urls does not need the app refresh (#173)

* feat: changing API urls does not need the app refresh

* fix: propagate beeDebugApi and beeApi change to the refresh interval

* fix: any failed request on the Bee provider does not stop the execution of other requests

* fix: error handling for incorrect bee and bee debug urls

* fix: change debug API in the settings tab

src/pages/settings/index.tsx

@@ -1,26 +1,20 @@
-import React, { ReactElement, useState } from 'react'
+import React, { ReactElement, useState, useContext } from 'react'
 import { Paper, Container, TextField, Typography, Button } from '@material-ui/core'
+import { Context as SettingsContext } from '../../providers/Settings'
 
 export default function Settings(): ReactElement {
-  const [refreshVisibility, toggleRefreshVisibility] = useState(false)
-  const [host, setHost] = useState('')
-  const [debugHost, setDebugHost] = useState('')
+  const { apiUrl, apiDebugUrl, setApiUrl, setDebugApiUrl } = useContext(SettingsContext)
+  const [host, setHost] = useState(apiUrl)
+  const [debugHost, setDebugHost] = useState(apiDebugUrl)
 
-  const handleNewHostConnection = () => {
-    if (host) {
-      sessionStorage.setItem('api_host', host)
-    }
+  const submit = () => {
+    if (host !== apiUrl) setApiUrl(host)
 
-    if (debugHost) {
-      sessionStorage.setItem('debug_api_host', debugHost)
-    }
-
-    if (host || debugHost) {
-      toggleRefreshVisibility(!refreshVisibility)
-      window.location.reload()
-    }
+    if (debugHost !== apiDebugUrl) setDebugApiUrl(debugHost)
   }
 
+  const touched = host !== apiUrl || debugHost !== apiDebugUrl
+
   return (
     <div>
       <Container>
@@ -34,16 +28,13 @@ export default function Settings(): ReactElement {
             placeholder="ex: 127.0.0.0.1:1633"
             helperText="Enter node host override / port"
             fullWidth
-            defaultValue={
-              sessionStorage.getItem('api_host') ? sessionStorage.getItem('api_host') : process.env.REACT_APP_BEE_HOST
-            }
+            defaultValue={apiUrl}
             margin="normal"
             InputLabelProps={{
               shrink: true,
             }}
             onChange={e => {
               setHost(e.target.value)
-              toggleRefreshVisibility(true)
             }}
             variant="filled"
           />
@@ -55,14 +46,9 @@ export default function Settings(): ReactElement {
             placeholder="ex: 127.0.0.0.1:1635"
             helperText="Enter node debug host override / port"
             fullWidth
-            defaultValue={
-              sessionStorage.getItem('debug_api_host')
-                ? sessionStorage.getItem('debug_api_host')
-                : process.env.REACT_APP_BEE_DEBUG_HOST
-            }
+            defaultValue={apiDebugUrl}
             onChange={e => {
               setDebugHost(e.target.value)
-              toggleRefreshVisibility(true)
             }}
             margin="normal"
             InputLabelProps={{
@@ -71,9 +57,9 @@ export default function Settings(): ReactElement {
             variant="filled"
           />
         </Paper>
-        {refreshVisibility ? (
+        {touched ? (
           <div style={{ marginTop: '20px' }}>
-            <Button variant="outlined" color="primary" onClick={() => handleNewHostConnection()}>
+            <Button variant="outlined" color="primary" onClick={submit}>
               Save
             </Button>
           </div>