From 2ace3303c847d74a3e12e605620893f3e861a287 Mon Sep 17 00:00:00 2001
From: Kadee80 <kaa328@nyu.edu>
Date: Wed, 25 Jul 2018 16:06:41 -0400
Subject: [PATCH] feat(app): Add open a new file warning modal and guards

closes #1032
---
 app/src/components/UploadPanel/Upload.js      | 62 +++++++++++++++++++
 app/src/components/UploadPanel/UploadInput.js |  2 +-
 app/src/components/UploadPanel/index.js       | 48 +++++++-------
 app/src/pages/Upload.js                       | 17 +++++
 4 files changed, 104 insertions(+), 25 deletions(-)
 create mode 100644 app/src/components/UploadPanel/Upload.js

diff --git a/app/src/components/UploadPanel/Upload.js b/app/src/components/UploadPanel/Upload.js
new file mode 100644
index 00000000000..fdec146af35
--- /dev/null
+++ b/app/src/components/UploadPanel/Upload.js
@@ -0,0 +1,62 @@
+// @flow
+import * as React from 'react'
+import UploadInput from './UploadInput'
+
+type Props = {
+  sessionLoaded: boolean,
+  createSession: (file: File) => void,
+  confirmUpload: () => void,
+}
+
+type State = {
+  uploadedFile: ?File,
+}
+
+export default class Upload extends React.Component<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = {
+      uploadedFile: null
+    }
+  }
+
+  onUpload = (
+    event: SyntheticInputEvent<HTMLInputElement> | SyntheticDragEvent<*>
+  ) => {
+    let files: Array<File> = []
+    if (event.dataTransfer && event.dataTransfer.files) {
+      files = (event.dataTransfer.files: any)
+    } else if (event.target.files) {
+      files = (event.target.files: any)
+    }
+
+    if (files.length < 1) {
+      return
+    }
+
+    if (!this.props.sessionLoaded) {
+      return this.props.createSession(files[0])
+    }
+
+    this.setState({uploadedFile: files[0]})
+    return this.props.confirmUpload()
+  }
+
+  // TODO (ka 2018-7-30): refactor to consider edge case where robot disconnects while on upload page
+  componentDidUpdate () {
+    const {uploadedFile} = this.state
+    if (uploadedFile && !this.props.sessionLoaded) {
+      this.props.createSession(uploadedFile)
+      this.setState({uploadedFile: null})
+    }
+  }
+
+  render () {
+    return (
+      <div>
+        <UploadInput onUpload={this.onUpload} isButton />
+        <UploadInput onUpload={this.onUpload}/>
+      </div>
+    )
+  }
+}
diff --git a/app/src/components/UploadPanel/UploadInput.js b/app/src/components/UploadPanel/UploadInput.js
index 504c8a45a75..ab7d8e75638 100644
--- a/app/src/components/UploadPanel/UploadInput.js
+++ b/app/src/components/UploadPanel/UploadInput.js
@@ -5,7 +5,7 @@ import {PrimaryButton, Icon} from '@opentrons/components'
 import styles from './upload-panel.css'
 
 type Props = {
-  onUpload: (SyntheticEvent<>) => void,
+  onUpload: (SyntheticInputEvent<HTMLInputElement> | SyntheticDragEvent<*>) => void,
   isButton?: boolean
 }
 
diff --git a/app/src/components/UploadPanel/index.js b/app/src/components/UploadPanel/index.js
index ce57bc99d4b..6dc2ce5bb2a 100644
--- a/app/src/components/UploadPanel/index.js
+++ b/app/src/components/UploadPanel/index.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
+import {push} from 'react-router-redux'
 
 import {
   actions as robotActions,
@@ -8,30 +9,23 @@ import {
 } from '../../robot'
 
 import {SidePanel} from '@opentrons/components'
-import UploadInput from './UploadInput'
-import UploadWarning from './UploadWarning'
+import Upload from './Upload'
 
 export default connect(mapStateToProps, mapDispatchToProps)(UploadPanel)
 
 UploadPanel.propTypes = {
-  isSessionLoaded: PropTypes.bool.isRequired,
-  onUpload: PropTypes.func.isRequired
+  isSessionLoaded: PropTypes.bool.isRequired
 }
 
 function UploadPanel (props) {
-  const warning = props.isSessionLoaded && (<UploadWarning />)
-
   return (
     <SidePanel title='Open Protocol'>
-      <div>
-        <UploadInput {...props} isButton />
-        <UploadInput {...props} />
-        {warning}
-      </div>
+      <Upload {...props}/>
     </SidePanel>
   )
 }
 
+// move me to UploadIntercept  rename to Upload
 function mapStateToProps (state) {
   return {
     isSessionLoaded: robotSelectors.getSessionIsLoaded(state)
@@ -40,19 +34,25 @@ function mapStateToProps (state) {
 
 function mapDispatchToProps (dispatch) {
   return {
-    onUpload: (event) => {
-      let files
-
-      if (event.dataTransfer) {
-        files = event.dataTransfer.files
-      } else {
-        files = event.target.files
-      }
-
-      dispatch(robotActions.session(files[0]))
-
-      // reset the state of the input to allow file re-uploads
-      event.target.value = null
+    confirmUpload: () => {
+      dispatch(push('/upload/confirm'))
+    },
+    createSession: (file) => {
+      dispatch(robotActions.session(file))
     }
+    // onUpload: (event) => {
+    //   let files
+    //
+    //   if (event.dataTransfer) {
+    //     files = event.dataTransfer.files
+    //   } else {
+    //     files = event.target.files
+    //   }
+    //
+    //   dispatch(robotActions.session(files[0]))
+    //
+    //   // reset the state of the input to allow file re-uploads
+    //   event.target.value = null
+    // }
   }
 }
diff --git a/app/src/pages/Upload.js b/app/src/pages/Upload.js
index 556ca7e5b6f..641a5dbf8dc 100644
--- a/app/src/pages/Upload.js
+++ b/app/src/pages/Upload.js
@@ -1,5 +1,7 @@
 import React from 'react'
+import {Route} from 'react-router'
 
+import {AlertModal} from '@opentrons/components'
 import UploadStatus from '../components/UploadStatus'
 import Page from '../components/Page'
 
@@ -7,6 +9,21 @@ export default function UploadPage () {
   return (
     <Page>
       <UploadStatus />
+      <Route path='/upload/cancel' component={ConfirmUploadModal} />
     </Page>
   )
 }
+
+function ConfirmUploadModal () {
+  return (
+    <AlertModal
+      heading={'Are you sure you want to open a new protocol?'}
+      buttons={[
+        {children: 'cancel', onClick: () => console.log('cancel upload')},
+        {children: 'continue', onClick: () => console.log('continue upload')}
+      ]}
+    >
+      Doing so will close your current protocol and clear any unsaved calibration progress.
+    </AlertModal>
+  )
+}