added: alert on add the existed dat. (#601)

Co-authored-by: Karissa McKelvey <[email protected]>

app/actions/dat-middleware.js

@@ -110,7 +110,8 @@ export default class DatMiddleware {
     if (key) {
       key = encode(key)
       if (this.dats[key]) {
-        return this.dispatch({
+        this.dispatch({ type: 'ADD_DAT_ERROR:EXISTED' })
+        throw this.dispatch({
           type: 'ADD_DAT_ERROR',
           key,
           error: new Error('Dat with same key already added.')
@@ -122,7 +123,8 @@ export default class DatMiddleware {
     for (let key in this.dats) {
       const dat = this.dats[key]
       if (dat.path === path) {
-        return this.dispatch({
+        this.dispatch({ type: 'ADD_DAT_ERROR:EXISTED' })
+        throw this.dispatch({
           type: 'ADD_DAT_ERROR',
           key,
           error: new Error('Dat with same path already added.')
@@ -257,6 +259,10 @@ export default class DatMiddleware {
 
   async downloadSparseDat ({ key }) {
     key = encode(key)
+    if (this.dats[key]) {
+      this.dispatch({ type: 'ADD_DAT_ERROR:EXISTED' })
+      return
+    }
     const path = joinPath(this.downloadsDir, key)
 
     this.dispatch({ type: 'ADD_DAT', key, path })
@@ -313,13 +319,14 @@ export default class DatMiddleware {
   }
 
   removeDatInternally (key) {
-    const { dat } = this.dats[key]
+    this.dispatch({ type: 'REMOVE_DAT', key })
+
+    const { dat } = this.dats[key] || {}
     if (!dat) return // maybe was deleted
     delete this.dats[key]
     if (dat.mirrorProgress) {
       dat.mirrorProgress.destroy()
     }
-    this.dispatch({ type: 'REMOVE_DAT', key })
 
     for (const con of dat.network.connections) {
       con.removeAllListeners()

app/actions/index.js

@@ -26,6 +26,7 @@ export const copyLink = link => {
   return { type: 'DIALOGS_LINK_COPY' }
 }
 export const closeShareDat = () => ({ type: 'DIALOGS_LINK_CLOSE' })
+export const closeAlert = () => ({ type: 'DIALOGS_ALERT_CLOSE' })
 
 export const createDat = () => dispatch => {
   showOpenDialog({

app/components/app.js

@@ -42,6 +42,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(function ({
 
       <Dialog.LinkContainer />
       <Dialog.ConfirmContainer />
+      <Dialog.AlertContainer />
       <DragDropContainer />
     </Fragment>
   )

app/components/dialog.js

@@ -5,6 +5,10 @@ import styled from 'styled-components'
 import Icon from './icon'
 import * as Button from './button'
 
+const Overlay = styled.div`
+  background: rgba(0, 0, 0, 0.25);
+`
+
 const Inner = styled.div`
   min-width: 25rem;
   max-width: 32rem;
@@ -117,14 +121,15 @@ function CloseButton ({ onExit }) {
       onClick={onExit}
       className='absolute pointer pa0 top-0 right-0 h2 w2 bg-transparent tc exit btn-close'
       aria-label='Close Modal'
+      style={{ outline: 0 }}
     >
       <Icon name='cross' />
     </button>
   )
 }
 
 export const Link = ({ link, copied, onCopy, onExit }) => (
-  <div
+  <Overlay
     className='modal fixed items-center justify-center top-0 left-0 h-100 w-100 z-9999'
     style={{ display: link ? 'flex' : 'none' }}
   >
@@ -160,11 +165,11 @@ export const Link = ({ link, copied, onCopy, onExit }) => (
       </p>
       <CloseButton onExit={onExit} />
     </Inner>
-  </div>
+  </Overlay>
 )
 
 export const Confirm = ({ dat, onConfirm, onExit }) => (
-  <div
+  <Overlay
     className='modal fixed items-center justify-center top-0 left-0 h-100 w-100 z-9999'
     style={{ display: dat ? 'flex' : 'none' }}
   >
@@ -188,5 +193,22 @@ export const Confirm = ({ dat, onConfirm, onExit }) => (
       </p>
       <CloseButton onExit={onExit} />
     </Inner>
-  </div>
+  </Overlay>
+)
+
+export const Alert = ({ alert, onExit }) => (
+  <Overlay
+    className='modal fixed items-center justify-center top-0 left-0 h-100 w-100 z-9999'
+    style={{ display: alert ? 'flex' : 'none' }}
+  >
+    <Inner className='relative flex flex-column justify-center'>
+      <p className='mt3 mb4 f5 color-neutral-70'>{alert}</p>
+      <p>
+        <Button.Green className='fr btn-confirm' onClick={onExit} autoFocus>
+          CLOSE
+        </Button.Green>
+      </p>
+      <CloseButton onExit={onExit} />
+    </Inner>
+  </Overlay>
 )

app/containers/dialog.js

@@ -1,9 +1,10 @@
-import { Link, Confirm } from '../components/dialog'
+import { Link, Confirm, Alert } from '../components/dialog'
 import {
   copyLink,
   closeShareDat,
   confirmDeleteDat,
-  cancelDeleteDat
+  cancelDeleteDat,
+  closeAlert
 } from '../actions'
 import { connect } from 'react-redux'
 
@@ -27,3 +28,12 @@ export const ConfirmContainer = connect(
     onExit: () => dispatch(cancelDeleteDat())
   })
 )(Confirm)
+
+export const AlertContainer = connect(
+  state => ({
+    alert: state.dialogs.alert
+  }),
+  dispatch => ({
+    onExit: () => dispatch(closeAlert())
+  })
+)(Alert)

app/reducers/index.js

@@ -62,6 +62,14 @@ const redatApp = (state = generateDefaultState(), action) => {
         },
         screen: SCREEN.DATS
       }
+    case 'ADD_DAT_ERROR:EXISTED':
+      return {
+        ...state,
+        dialogs: {
+          ...state.dialogs,
+          alert: 'The DAT is already in the list.'
+        }
+      }
     case 'ADD_DAT_ERROR':
     case 'WRITE_METADATA_ERROR':
       return {
@@ -87,8 +95,11 @@ const redatApp = (state = generateDefaultState(), action) => {
         }
       }
     case 'REMOVE_DAT':
-      const { [action.key]: del, ...dats } = state.dats
-      return { ...state, dats }
+      if (state.dats[action.key]) {
+        const { [action.key]: del, ...dats } = state.dats
+        return { ...state, dats }
+      }
+      return state
     case 'INSPECT_DAT':
       return {
         ...state,
@@ -268,6 +279,14 @@ const redatApp = (state = generateDefaultState(), action) => {
           }
         }
       }
+    case 'DIALOGS_ALERT_CLOSE':
+      return {
+        ...state,
+        dialogs: {
+          ...state.dialogs,
+          alert: null
+        }
+      }
     case 'TOGGLE_PAUSE':
       const dat = state.dats[action.key]
       return {