Add word deletion with SweetAlert2 confirmation

package.json

@@ -53,6 +53,7 @@
     "marked": "^0.3.6",
     "papaparse": "^4.3.3",
     "sanitize-html": "^1.14.1",
-    "store": "^2.0.12"
+    "store": "^2.0.12",
+    "sweetalert2": "^6.11.5"
   }
 }

src/components/MainDisplay.jsx

@@ -33,7 +33,8 @@ export const MainDisplay = ({ dictionaryInfo, wordsToDisplay, updateDisplay, upd
             <WordsList
               lastRender={ lastRender }
               words={ wordsToDisplay }
-              adsEveryXWords={ 10 } />
+              adsEveryXWords={ 10 }
+              updateDisplay={ updateDisplay } />
           </RightColumn>
           
         </div>

src/components/display/WordDisplay.jsx

@@ -1,6 +1,7 @@
 import Inferno from 'inferno';
 import Component from 'inferno-component';
 import marked from 'marked';
+import swal from 'sweetalert2';
 
 import './WordDisplay.scss';
 
@@ -34,17 +35,48 @@ export class WordDisplay extends Component {
     });
   }
 
+  delete () {
+    const { word } = this.props;
+    swal({
+      title: `Delete "${ word.name }"?`,
+      text: `It will be gone forever and cannot be restored!`,
+      type: 'warning',
+      showCancelButton: true,
+      confirmButtonText: 'Yes, delete it!',
+      cancelButtonText: 'No, cancel!',
+      confirmButtonClass: 'button is-danger',
+      cancelButtonClass: 'button',
+      buttonsStyling: false
+    }).then(() => {
+      word.delete(word.id)
+      .then(() => {
+        this.props.updateDisplay();
+      }).then(() => {
+        this.setState({ menuIsOpen: false }, () => {
+          swal(
+            'Deleted!',
+            `"${ word.name }" has been deleted.`,
+            'success'
+          );
+        });
+      });
+    }, dismiss => {
+      console.log('Word not deleted');
+    });
+  }
+
   render () {
     const { menuIsOpen, isEditing } = this.state;
+    const { word } = this.props;
 
     if (isEditing) {
       return (
         <WordForm
-          name={this.props.word.name}
+          name={word.name}
-          pronunciation={this.props.word.pronunciation}
+          pronunciation={word.pronunciation}
-          partOfSpeech={this.props.word.partOfSpeech}
+          partOfSpeech={word.partOfSpeech}
-          definition={this.props.word.definition}
+          definition={word.definition}
-          details={this.props.word.details}
+          details={word.details}
         />
       );
     }
@@ -54,26 +86,26 @@ export class WordDisplay extends Component {
         <header className='card-header'>
           <div className='word-card-header-title'>
             <span className='word-name'>
-              { this.props.word.name }
+              { word.name }
             </span>
             {
-              (this.props.word.pronunciation || this.props.word.partOfSpeech)
+              (word.pronunciation || word.partOfSpeech)
               && (
                 <span className='word-classification'>
                   {
-                    (this.props.word.pronunciation)
+                    (word.pronunciation)
                     && (
                       <span className='word-pronunciation'>
-                      { this.props.word.pronunciation }
+                      { word.pronunciation }
                       </span>
                     )
                   }
 
                   {
-                    (this.props.word.partOfSpeech)
+                    (word.partOfSpeech)
                     && (
                       <span className='word-part-of-speech'>
-                      { this.props.word.partOfSpeech }
+                      { word.partOfSpeech }
                       </span>
                     )
                   }
@@ -94,7 +126,7 @@ export class WordDisplay extends Component {
                 <a className='dropdown-item' onClick={ this.edit.bind(this) }>
                   Edit
                 </a>
-                <a className='dropdown-item is-danger'>
+                <a onClick={ this.delete.bind(this) } className='dropdown-item is-danger'>
                   Delete
                 </a>
               </div>
@@ -105,16 +137,16 @@ export class WordDisplay extends Component {
         <section className='card-content'>
           <div className='content'>
             {
-              (this.props.word.definition)
+              (word.definition)
               && (
                 <p className='word-definition'>
-                  { this.props.word.definition }
+                  { word.definition }
                 </p>
               )
             }
 
             {
-              (this.props.word.details)
+              (word.details)
               && (
                 <p className='word-details'
                   dangerouslySetInnerHTML={{__html: this.wordDetailsHTML}} />

src/components/display/WordsList.jsx

@@ -29,20 +29,16 @@ export class WordsList extends Component {
 
         {this.props.words
           && this.props.words.map((word, index) => {
-            if (index % adsEveryXWords == 0) {
             return (
               <div>
-                  <LazyLoader lazyLoad={ loadAd } />
+                {index % adsEveryXWords == 0
-                  
+                  && <LazyLoader lazyLoad={ loadAd } />
-                  <WordDisplay key={ `word_${word.id}` }
-                    word={ word } />
-                </div>
-              );
                 }
                 
-            return (
                 <WordDisplay key={ `word_${word.id}` }
-                word={ word } />
+                  word={ word }
+                  updateDisplay={ this.props.updateDisplay } />
+              </div>
             );
           })
         }

src/managers/Word.js

@@ -38,4 +38,14 @@ export class Word {
       console.error(error);
     });
   }
+
+  delete (wordId) {
+    return wordDb.words.delete(wordId)
+    .then(() => {
+      console.log('Word deleted successfully');
+    })
+    .catch(error => {
+      console.error(error);
+    });
+  }
 }

src/sass/main.scss

@@ -6,4 +6,6 @@ $fa-font-path: "~font-awesome/fonts/";
 @import 'bulma-overrides';
 @import '../../node_modules/bulma/bulma';
 
+@import '../../node_modules/sweetalert2/dist/sweetalert2';
+
 @import 'styles';

yarn.lock

@@ -4104,6 +4104,10 @@ svgo@^0.7.0:
     sax "~1.2.1"
     whet.extend "~0.9.9"
 
+sweetalert2@^6.11.5:
+  version "6.11.5"
+  resolved "https://registry.yarnpkg.com/sweetalert2/-/sweetalert2-6.11.5.tgz#a1ede34089225eb864898f4b613db4fec5dbe334"
+
 tapable@^0.2.7:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22"