implement "remove config" and fix bug when saving a new config

Author: Matthias Rütten

src/renderer/components/pages/SettingsPage.tsx

@@ -11,6 +11,7 @@ import { FormHelperText } from '@material-ui/core'
 
 import { useBackend } from '../../hooks/backend'
 import { useConfig } from '../../hooks/config'
+import sleep from '../../util/sleep'
 
 const useStyles = makeStyles(theme => ({
     button: {
@@ -32,12 +33,14 @@ interface FormData {
     token: string
 }
 
+// tslint:disable-next-line:cyclomatic-complexity
 export const SettingsPage = () => {
     const classes = useStyles()
     const { history } = useReactRouter()
-    const { reset, testConfig } = useBackend()
-    const { config, updateConfig } = useConfig()
+    const { testConfig } = useBackend()
+    const { config, updateConfig, removeConfig } = useConfig()
 
+    const [confirmDelete, setConfirmDelete] = React.useState(false)
     const [submitting, setSubmitting] = React.useState(false)
     const [errors, setErrors] = React.useState<FormErrorData>({
         url: '',
@@ -59,6 +62,16 @@ export const SettingsPage = () => {
         setValues({ ...values, [name]: event.target.value })
     }
 
+    const confirmRemove = async () => {
+        setConfirmDelete(true)
+    }
+
+    const remove = async () => {
+        removeConfig()
+        setErrors({ url: '', token: '', group: '', invalidSettings: false })
+        setValues({ url: '', token: '', group: '' })
+    }
+
     const save = async () => {
         setSubmitting(true)
         setErrors({ url: '', token: '', group: '', invalidSettings: false })
@@ -82,10 +95,9 @@ export const SettingsPage = () => {
 
             try {
                 await testConfig(newConfig)
-
                 updateConfig(newConfig)
 
-                reset()
+                await sleep(1000)
                 history.push('/')
             } catch (_) {
                 setError('invalidSettings', true)
@@ -95,6 +107,18 @@ export const SettingsPage = () => {
         }
     }
 
+    const renderRemoveButton = () => {
+        return confirmDelete ? (
+            <Button variant='contained' color='secondary' fullWidth className={classes.button} onClick={remove}>
+                Are you sure?
+            </Button>
+        ) : (
+            <Button fullWidth className={classes.button} onClick={confirmRemove}>
+                remove config
+            </Button>
+        )
+    }
+
     return (
         <Container>
             <Typography variant='h6' className={classes.headline}>
@@ -143,6 +167,7 @@ export const SettingsPage = () => {
                 <Button variant='contained' color='primary' aria-label='add' fullWidth onClick={save} className={classes.button} disabled={submitting}>
                     Save
                 </Button>
+                {config && !submitting && renderRemoveButton()}
                 {config && !submitting && (
                     <Link to='/' className={classes.goBackLink}>
                         <Button fullWidth className={classes.button}>

src/renderer/hooks/backend.tsx

@@ -46,7 +46,6 @@ export interface MergeRequest {
 export interface BackendContext {
     mergeRequests: MergeRequest[] | undefined
     testConfig: (config: Config) => Promise<void>
-    reset: () => void
 }
 
 const Context = React.createContext<BackendContext | null>(null)
@@ -94,26 +93,17 @@ export const BackendProvider = ({ ...props }) => {
     }
 
     React.useEffect(() => {
-        console.log('useEffect')
         updateData()
         const interval = setInterval(updateData, 30000)
 
         return () => {
             clearInterval(interval)
         }
-    }, [])
+    }, [config])
 
     const testConfig = async (newConfig: Config) => {
-        console.log('testConfig', newConfig)
-
         return doRequest(newConfig)
     }
 
-    const reset = () => {
-        console.log('reset backend')
-        setLoadErrors(0)
-        setMergeRequests(undefined)
-    }
-
-    return <Context.Provider value={{ mergeRequests, reset, testConfig }} {...props} />
+    return <Context.Provider value={{ mergeRequests, testConfig }} {...props} />
 }

src/renderer/hooks/config.tsx

@@ -8,6 +8,7 @@ export interface Config {
 
 interface ConfigContext {
     config: Config | null
+    removeConfig: () => void
     updateConfig: (newConfig: Config) => void
 }
 
@@ -25,10 +26,14 @@ export const ConfigProvider = ({ ...props }) => {
     const localStorageValue = window.localStorage.getItem('config')
     const [config, setConfig] = React.useState<Config | null>(localStorageValue ? JSON.parse(localStorageValue) : null)
 
+    const removeConfig = () => {
+        setConfig(null)
+        window.localStorage.removeItem('config')
+    }
     const updateConfig = (newConfig: Config) => {
         setConfig(newConfig)
         window.localStorage.setItem('config', JSON.stringify(newConfig))
     }
 
-    return <Context.Provider value={{ config, updateConfig }} {...props} />
+    return <Context.Provider value={{ config, updateConfig, removeConfig }} {...props} />
 }

src/renderer/util/sleep.ts

@@ -0,0 +1,5 @@
+export default function sleep(ms: number) {
+    return new Promise(resolve => {
+        setTimeout(resolve, ms)
+    })
+}