fix connecting step and flash step

src/components/SettingsPage/RepairDeviceButton.js

@@ -22,7 +22,6 @@ type State = {
   isLoading: boolean,
   error: ?Error,
   progress: number,
-  confirmed: boolean,
 }
 
 class RepairDeviceButton extends PureComponent<Props, State> {
@@ -31,18 +30,15 @@ class RepairDeviceButton extends PureComponent<Props, State> {
     isLoading: false,
     error: null,
     progress: 0,
-    confirmed: false,
   }
 
   open = () => this.setState({ opened: true, error: null })
 
-  setConfirm = () => this.setState({ confirmed: true })
-
   sub: *
 
   close = () => {
     if (this.sub) this.sub.unsubscribe()
-    this.setState({ opened: false, isLoading: false, error: null, confirmed: false })
+    this.setState({ opened: false, isLoading: false, error: null, progress: 0 })
   }
 
   action = () => {
@@ -54,10 +50,10 @@ class RepairDeviceButton extends PureComponent<Props, State> {
         this.setState(patch)
       },
       error: error => {
-        this.setState({ error, isLoading: false, confirmed: false })
+        this.setState({ error, isLoading: false, progress: 0 })
       },
       complete: () => {
-        this.setState({ opened: false, isLoading: false, confirmed: false }, () => {
+        this.setState({ opened: false, isLoading: false, progress: 0 }, () => {
           push('/manager')
         })
       },
@@ -66,7 +62,7 @@ class RepairDeviceButton extends PureComponent<Props, State> {
 
   render() {
     const { t } = this.props
-    const { opened, isLoading, error, progress, confirmed } = this.state
+    const { opened, isLoading, error, progress } = this.state
 
     return (
       <Fragment>
@@ -87,8 +83,6 @@ class RepairDeviceButton extends PureComponent<Props, State> {
           confirmText={t('settings.repairDevice.button')}
           progress={progress}
           error={error}
-          setConfirm={this.setConfirm}
-          confirmed={confirmed}
         />
       </Fragment>
     )

src/components/base/Modal/RepairModal.js

@@ -46,7 +46,8 @@ const DisclaimerStep = ({ desc }: { desc?: string }) => (
   </ModalContent>
 )
 
-const ConnectStep = ({ t }: { t: * }) => (
+const FlashStep = ({ progress, t }: { progress: number, t: * }) =>
+  progress === 0 ? (
     <ModalContent>
       <Box mx={7}>
         <Text ff="Open Sans|Regular" align="center" color="smoke">
@@ -72,9 +73,7 @@ const ConnectStep = ({ t }: { t: * }) => (
         />
       </Box>
     </ModalContent>
-)
-
-const FlashStep = ({ progress, t }: { progress: number, t: * }) => (
+  ) : (
     <ModalContent>
       <Box mx={7} align="center">
         <ProgressCircle size={64} progress={progress} />
@@ -88,7 +87,7 @@ const FlashStep = ({ progress, t }: { progress: number, t: * }) => (
         </Text>
       </Box>
     </ModalContent>
-)
+  )
 
 const ErrorStep = ({ error }: { error: Error }) => (
   <ModalContent>
@@ -137,15 +136,9 @@ type Props = {
   cancellable?: boolean,
   progress: number,
   error?: Error,
-  confirmed: boolean,
-  setConfirm: Function,
 }
 
-type State = {
-  confirmed: boolean,
-}
-
-class RepairModal extends PureComponent<Props, State> {
+class RepairModal extends PureComponent<Props> {
   render() {
     const {
       cancellable,
@@ -162,8 +155,6 @@ class RepairModal extends PureComponent<Props, State> {
       analyticsName,
       progress,
       error,
-      confirmed,
-      setConfirm,
       ...props
     } = this.props
 
@@ -182,28 +173,26 @@ class RepairModal extends PureComponent<Props, State> {
               <ErrorStep error={error} />
             ) : isLoading ? (
               <FlashStep t={t} progress={progress} />
-            ) : confirmed ? (
-              <ConnectStep t={t} desc={desc} />
             ) : (
               <DisclaimerStep desc={desc} />
             )}
 
+            {!isLoading ? (
               <ModalFooter horizontal align="center" justify="flex-end" flow={2}>
-              {!isLoading && (
                 <Button onClick={onReject}>{t(`common.${error ? 'close' : 'cancel'}`)}</Button>
-              )}
                 {error ? null : (
                   <Button
-                  onClick={confirmed ? onConfirm : setConfirm}
+                    onClick={onConfirm}
                     primary={!isDanger}
                     danger={isDanger}
                     isLoading={isLoading}
                     disabled={isLoading}
                   >
-                  {confirmed ? realConfirmText : t('common.confirm')}
+                    {realConfirmText}
                   </Button>
                 )}
               </ModalFooter>
+            ) : null}
           </ModalBody>
         )}
       />