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/components/CashoutModal.tsx

@@ -6,8 +6,8 @@ import DialogContent from '@material-ui/core/DialogContent'
 import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import { useSnackbar } from 'notistack'
-import { ReactElement, useState } from 'react'
-import { beeDebugApi } from '../services/bee'
+import { ReactElement, useState, useContext } from 'react'
+import { Context as SettingsContext } from '../providers/Settings'
 import EthereumAddress from './EthereumAddress'
 
 interface Props {
@@ -19,6 +19,7 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
   const [open, setOpen] = useState<boolean>(false)
   const [loadingCashout, setLoadingCashout] = useState<boolean>(false)
   const { enqueueSnackbar } = useSnackbar()
+  const { beeDebugApi } = useContext(SettingsContext)
 
   const handleClickOpen = () => {
     setOpen(true)
@@ -29,10 +30,12 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
   }
 
   const handleCashout = () => {
+    if (!beeDebugApi) return
+
     if (peerId) {
       setLoadingCashout(true)
-      beeDebugApi.chequebook
-        .peerCashout(peerId)
+      beeDebugApi
+        .cashoutLastCheque(peerId)
         .then(res => {
           setOpen(false)
           enqueueSnackbar(

src/components/ConnectToHost.tsx

@@ -1,62 +1,50 @@
 import React, { ReactElement, useState } from 'react'
-import { TextField, Button, CircularProgress, Container } from '@material-ui/core'
+import { TextField, Button } from '@material-ui/core'
 
 interface Props {
   defaultHost?: string
-  hostName: string
+  setHost: (host: string) => void
 }
 
 export default function ConnectToHost(props: Props): ReactElement {
   const [hostInputVisible, toggleHostInputVisibility] = useState(false)
-  const [connectingToHost, setConnectingToHost] = useState(false)
   const [host, setHost] = useState('')
 
   const handleNewHostConnection = () => {
     if (host) {
-      setConnectingToHost(true)
-      sessionStorage.setItem(props.hostName, host)
+      props.setHost(host)
       toggleHostInputVisibility(!hostInputVisible)
-      window.location.reload()
     }
   }
 
   return (
     <div>
-      {
-        // FIXME: this should be broken up
-        /* eslint-disable no-nested-ternary */
-        hostInputVisible ? (
-          <div style={{ display: 'flex' }}>
-            <TextField
-              defaultValue={props.defaultHost}
-              label="Enter host"
-              variant="outlined"
-              size="small"
-              onChange={e => setHost(e.target.value)}
-              style={{ marginRight: '15px', minWidth: '300px' }}
-            />
-            <Button onClick={() => handleNewHostConnection()} size="small" variant="outlined">
-              Connect
-            </Button>
-            <Button
-              style={{ marginLeft: '7px' }}
-              onClick={() => toggleHostInputVisibility(!hostInputVisible)}
-              size="small"
-            >
-              Cancel
-            </Button>
-          </div>
-        ) : connectingToHost ? (
-          <Container style={{ textAlign: 'center', padding: '0px' }}>
-            <CircularProgress size={20} />
-          </Container>
-        ) : (
-          <Button onClick={() => toggleHostInputVisibility(!hostInputVisible)} size="small" variant="outlined">
-            Change host
+      {hostInputVisible ? (
+        <div style={{ display: 'flex' }}>
+          <TextField
+            defaultValue={props.defaultHost}
+            label="Enter host"
+            variant="outlined"
+            size="small"
+            onChange={e => setHost(e.target.value)}
+            style={{ marginRight: '15px', minWidth: '300px' }}
+          />
+          <Button onClick={() => handleNewHostConnection()} size="small" variant="outlined">
+            Connect
           </Button>
-        )
-        /* eslint-enable no-nested-ternary */
-      }
+          <Button
+            style={{ marginLeft: '7px' }}
+            onClick={() => toggleHostInputVisibility(!hostInputVisible)}
+            size="small"
+          >
+            Cancel
+          </Button>
+        </div>
+      ) : (
+        <Button onClick={() => toggleHostInputVisibility(!hostInputVisible)} size="small" variant="outlined">
+          Change host
+        </Button>
+      )}
     </div>
   )
 }