From e6c981bcf334f0662a42e986e80bca8d3f4a5a4a Mon Sep 17 00:00:00 2001
From: Kazumasa Yokomizo <kazz@boostio.co>
Date: Thu, 12 Dec 2019 15:02:59 +0900
Subject: [PATCH] Add the modal for delete a storage

---
 src/components/Storage/StorageEdit.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/Storage/StorageEdit.tsx b/src/components/Storage/StorageEdit.tsx
index ced01a2ec7..f3a07d8f0f 100644
--- a/src/components/Storage/StorageEdit.tsx
+++ b/src/components/Storage/StorageEdit.tsx
@@ -8,6 +8,7 @@ import { NoteStorage } from '../../lib/db/types'
 import { useRouter } from '../../lib/router'
 import { useDebounce } from 'react-use'
 import LoginButton from '../atoms/LoginButton'
+import { useDialog, DialogIconTypes } from '../../lib/dialog'
 
 interface StorageEditProps {
   storage: NoteStorage
@@ -18,6 +19,7 @@ export default ({ storage }: StorageEditProps) => {
   const router = useRouter()
   const { preferences } = usePreferences()
   const [name, setName] = useState(storage.name)
+  const { messageBox } = useDialog()
 
   useEffect(() => {
     setName(storage.name)
@@ -40,8 +42,20 @@ export default ({ storage }: StorageEditProps) => {
   }, [storage.id, db])
 
   const removeCallback = useCallback(() => {
-    db.removeStorage(storage.id)
-    router.push('/app')
+    messageBox({
+      title: `Remove "${storage.name}" storage`,
+      message: 'The storage will be unlinked from this app.',
+      iconType: DialogIconTypes.Warning,
+      buttons: ['Remove Storage', 'Cancel'],
+      defaultButtonIndex: 0,
+      cancelButtonIndex: 1,
+      onClose: (value: number | null) => {
+        if (value === 0) {
+          db.removeStorage(storage.id)
+          router.push('/app')
+        }
+      }
+    })
   }, [storage.id, db, router])
 
   useDebounce(