From ee6db917edb9c50ba42a38eaebf5d11c1d31a1d7 Mon Sep 17 00:00:00 2001
From: MahmoudYounes <m.younesbadr@gmail.com>
Date: Wed, 4 Jul 2018 06:48:46 +0200
Subject: [PATCH 01/21] Calling welcome one time (#87)

Fixes #86
---
 AUTHORS.md             |  1 +
 app/components/App.js  |  2 +-
 app/components/Home.js | 21 ++++++++++++++++-----
 main.js                |  6 ++++++
 utils/api.electron.js  | 30 ++++++++++++++++++++++++++++++
 5 files changed, 54 insertions(+), 6 deletions(-)
 create mode 100644 utils/api.electron.js

diff --git a/AUTHORS.md b/AUTHORS.md
index 0ce9c6a..16075b4 100644
--- a/AUTHORS.md
+++ b/AUTHORS.md
@@ -14,6 +14,7 @@ If you make a contribution here, you may add your name and email address here.
 - Austin Daniel (austindanielfrench@gmail.com)
 - Bekir Durak (bekirdurak97@gmail.com)
 - Andrew Cheng (cheng0807@gmail.com)
+- Mahmoud Younes (m.younesbadr@gmail.com)
 
 
 
diff --git a/app/components/App.js b/app/components/App.js
index b5eb409..db26d7d 100644
--- a/app/components/App.js
+++ b/app/components/App.js
@@ -14,7 +14,7 @@ export default () => (
             component={route.component}
           />
         ))}
-        <Redirect to='/welcome' />
+        <Redirect to='/' />
       </Switch>
     </BrowserRouter>
   </div>
diff --git a/app/components/Home.js b/app/components/Home.js
index eb77f21..2232c00 100644
--- a/app/components/Home.js
+++ b/app/components/Home.js
@@ -1,6 +1,17 @@
 import React from 'react'
-export default () => (
-  <div>
-    <h1>Deer</h1>
-  </div>
-)
+import { Redirect } from 'react-router-dom'
+import { checkRedirectToWelcomePage, setNotFirstTimeFlag } from '../../utils/api.electron'
+
+export default () => {
+  if (checkRedirectToWelcomePage()) {
+    setNotFirstTimeFlag()
+    return (
+      <Redirect to='/welcome' />
+    )
+  }
+  return (
+    <div>
+      <h1>Deer</h1>
+    </div>
+  )
+}
diff --git a/main.js b/main.js
index f26959f..2b2334e 100644
--- a/main.js
+++ b/main.js
@@ -6,6 +6,7 @@ const windowState = require('electron-window-state')
 const os = require('os')
 const initLogger = require('./utils/logger')
 const appInfo = require('./package.json')
+const Store = require('electron-store')
 
 // Let electron reloads by itself when webpack watches changes in ./app/
 if (isDev) {
@@ -23,6 +24,11 @@ let win
 // a global reference of the logger object.
 let logger
 
+// global reference for electron store
+// keep all user hidden, app specific options here
+var electronStore = new Store()
+global.electronStore = electronStore
+
 // Create an instance of the app. Returns false if first instance
 var shouldQuit = app.makeSingleInstance(function (commandLine, workingDirectory) {
   if (win) {
diff --git a/utils/api.electron.js b/utils/api.electron.js
new file mode 100644
index 0000000..0235c5d
--- /dev/null
+++ b/utils/api.electron.js
@@ -0,0 +1,30 @@
+import electron from 'electron'
+
+// fetching electron store object
+let electronStore = electron.remote.getGlobal('electronStore')
+
+/**
+ * check whether to redirect to the welcome page or no.
+ * this value is saved in electron store in show-welcome flag.
+ * returns true if first time to open Deer, otherwise, false
+ */
+var checkRedirectToWelcomePage = function () {
+  if (electronStore.has('show-welcome')) {
+    return electronStore.get('show-welcome')
+  }
+  return true
+}
+
+/**
+ * called to mark that the user has already opened Deer once.
+ * sets the show-welcome flag in electron store to false.
+ */
+var setNotFirstTimeFlag = function () {
+  electronStore.set('show-welcome', false)
+}
+
+// export the functions defined here
+module.exports = {
+  checkRedirectToWelcomePage,
+  setNotFirstTimeFlag
+}

From 3fc7ff7cd637fb96adca17d4f234e386857e06c1 Mon Sep 17 00:00:00 2001
From: Ahmed Ismail <33787886+ai-zahran@users.noreply.github.com>
Date: Wed, 4 Jul 2018 17:25:19 +0200
Subject: [PATCH 02/21] Fix broken link to docs/README.md (#95)

* Fix broken link to docs/README.md

* Fix broken link in README.MD

The link to the docs was set to ./docs/index.md.
It was changed to ./docs/README,.md
---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 9ccb465..da29c22 100644
--- a/README.md
+++ b/README.md
@@ -30,10 +30,10 @@
 
 ### Getting started
 
-Check [Our Docs](./docs/index.md) for **building**  and **installing** instructions.
+Check [Our Docs](./docs/README.md) for **building**  and **installing** instructions.
 
 
-If you would like to contribute to Deer, see [Our Docs](./docs/index.md) too.
+If you would like to contribute to Deer, see [Our Docs](./docs/README.md) too.
 
 ### Get in touch!
 

From 344a6cf86666cbc53b2deafc09aad2da9a466bd6 Mon Sep 17 00:00:00 2001
From: Ahmed Ismail <33787886+ai-zahran@users.noreply.github.com>
Date: Wed, 4 Jul 2018 17:34:46 +0200
Subject: [PATCH 03/21] Fixes #93: Split lines in packaging documentation (#93)
 (#96)

---
 docs/Packaging.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/Packaging.md b/docs/Packaging.md
index 7825161..9aa2395 100644
--- a/docs/Packaging.md
+++ b/docs/Packaging.md
@@ -4,7 +4,7 @@ Now you can build and distribute Deer easily and generate binaries for various p
 
 
 ## For Linux
-Currently, Deer supports deb, rpm and zip packages
+Currently, Deer supports deb, rpm and zip packages.  
 To generate the packages use, the one you need according to your distributions.
 ``` bash
 npm run release:linux:deb
@@ -14,7 +14,7 @@ npm run release:linux:zip
 
 
 ## For Mac OS
-Currently, Deer supports dmg package
+Currently, Deer supports dmg package.  
 To generate the packages, use the one you need according to your distributions.
 ``` bash
 npm run release:mac
@@ -22,7 +22,7 @@ npm run release:mac
 
 
 ## For Windows
-Currently, Deer supports ia32 and x64 architectures.
+Currently, Deer supports ia32 and x64 architectures.  
 To generate the packages, use the one you need according to your architecture.
 ``` bash
 npm run release:win32

From ffbb66aae47dfe08e866cec3e89d1faa99061e0c Mon Sep 17 00:00:00 2001
From: Abdelrhman Ahmed <a.ahmed1026@gmail.com>
Date: Wed, 11 Jul 2018 02:27:20 +0200
Subject: [PATCH 04/21] Fixes #99 : Implement Header component (#100)

---
 app/components/App.js    | 28 +++++++++++++---------------
 app/components/Header.js | 18 ++++++++++++++++++
 app/components/Home.js   |  8 ++++++--
 main.js                  |  3 +--
 4 files changed, 38 insertions(+), 19 deletions(-)
 create mode 100644 app/components/Header.js

diff --git a/app/components/App.js b/app/components/App.js
index db26d7d..2cd7092 100644
--- a/app/components/App.js
+++ b/app/components/App.js
@@ -3,19 +3,17 @@ import { Switch, Route, BrowserRouter, Redirect } from 'react-router-dom'
 import routes from '../routes'
 
 export default () => (
-  <div>
-    <BrowserRouter>
-      <Switch>
-        {routes.map((route, index) => (
-          <Route
-            key={index}
-            path={route.path}
-            exact={route.exact}
-            component={route.component}
-          />
-        ))}
-        <Redirect to='/' />
-      </Switch>
-    </BrowserRouter>
-  </div>
+  <BrowserRouter>
+    <Switch>
+      {routes.map((route, index) => (
+        <Route
+          key={index}
+          path={route.path}
+          exact={route.exact}
+          component={route.component}
+        />
+      ))}
+      <Redirect to='/' />
+    </Switch>
+  </BrowserRouter>
 )
diff --git a/app/components/Header.js b/app/components/Header.js
new file mode 100644
index 0000000..80d8ad7
--- /dev/null
+++ b/app/components/Header.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Button } from 'reactstrap'
+export default () => (
+  <nav className='navbar sticky-top navbar-light bg-light'>
+    <img
+      src={require('../assets/images/Deer-32.png')}
+      className='d-inline-block align-top' />
+    <ul className='navbar-nav flex-row ml-md-auto d-none d-md-flex'>
+      <li className='nav-item'>
+        <Button
+          outline color='success'
+          size='sm'>
+        New Note
+        </Button>
+      </li>
+    </ul>
+  </nav>
+)
diff --git a/app/components/Home.js b/app/components/Home.js
index 2232c00..b8f802c 100644
--- a/app/components/Home.js
+++ b/app/components/Home.js
@@ -1,6 +1,10 @@
 import React from 'react'
 import { Redirect } from 'react-router-dom'
-import { checkRedirectToWelcomePage, setNotFirstTimeFlag } from '../../utils/api.electron'
+import Header from './Header'
+import {
+  checkRedirectToWelcomePage,
+  setNotFirstTimeFlag
+} from '../../utils/api.electron'
 
 export default () => {
   if (checkRedirectToWelcomePage()) {
@@ -11,7 +15,7 @@ export default () => {
   }
   return (
     <div>
-      <h1>Deer</h1>
+      <Header />
     </div>
   )
 }
diff --git a/main.js b/main.js
index 2b2334e..166a98c 100644
--- a/main.js
+++ b/main.js
@@ -59,8 +59,7 @@ function createWindow () {
     minHeight: 600,
     backgroundColor: '#F8F8FF',
     icon: 'app/assets/images/Deer-128.png',
-    show: false,
-    resizable: false
+    show: false
   })
   logger.info('Deer window is created')
 

From 19545489fe311903bb76d76294603c9eea678d9c Mon Sep 17 00:00:00 2001
From: Abdelrhman Ahmed <a.ahmed1026@gmail.com>
Date: Sun, 12 Aug 2018 19:20:28 +0200
Subject: [PATCH 05/21] Fixes #89: Adds layout of home component (#102)

---
 app/assets/styles/index.css | 15 +++++++++++++++
 app/components/Home.js      |  4 ++++
 2 files changed, 19 insertions(+)

diff --git a/app/assets/styles/index.css b/app/assets/styles/index.css
index 2da9207..0b4b49f 100644
--- a/app/assets/styles/index.css
+++ b/app/assets/styles/index.css
@@ -53,3 +53,18 @@
   left: 35%;
   top: 45%;
 }
+
+.home-sidebar {
+  position: sticky;
+  top: 48px;
+  height: calc(100vh - 48px);
+  flex: 0 1 320px;
+  -webkit-box-flex: 0;
+  border-right: 2px solid ghostwhite;
+  overflow: auto;
+  padding: 5px!important;
+}
+
+.home-content {
+  padding: 0px;
+}
diff --git a/app/components/Home.js b/app/components/Home.js
index b8f802c..ce33816 100644
--- a/app/components/Home.js
+++ b/app/components/Home.js
@@ -16,6 +16,10 @@ export default () => {
   return (
     <div>
       <Header />
+      <div className='container-fluid row flex-xl-nowrap'>
+        <div className='col-12 col-md-3 col-xl-3 home-sidebar' />
+        <div className='col-12 col-md-9 col-xl-9 home-content' />
+      </div>
     </div>
   )
 }

From f45e1c954f830ce662bd24b44af2b05a3a9bf1cd Mon Sep 17 00:00:00 2001
From: Abdelrhman Ahmed <a.ahmed1026@gmail.com>
Date: Sun, 12 Aug 2018 20:41:34 +0200
Subject: [PATCH 06/21] Fixes #103: Implement HomeContent component (#104)

- Implement HomeContent component
- Add default route to be loaded when Deer loads
---
 app/assets/styles/index.css   | 5 +++--
 app/components/Home.js        | 7 +++++--
 app/components/HomeContent.js | 7 +++++++
 3 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 app/components/HomeContent.js

diff --git a/app/assets/styles/index.css b/app/assets/styles/index.css
index 0b4b49f..b69a659 100644
--- a/app/assets/styles/index.css
+++ b/app/assets/styles/index.css
@@ -49,8 +49,9 @@
 
 .middle-page {
   @extend .font-style-base;
-  position: fixed;
-  left: 35%;
+  position: sticky;
+  justify-content: center;
+  display: flex;
   top: 45%;
 }
 
diff --git a/app/components/Home.js b/app/components/Home.js
index ce33816..6349848 100644
--- a/app/components/Home.js
+++ b/app/components/Home.js
@@ -1,6 +1,7 @@
 import React from 'react'
-import { Redirect } from 'react-router-dom'
+import { Redirect, Route } from 'react-router-dom'
 import Header from './Header'
+import HomeContent from './HomeContent'
 import {
   checkRedirectToWelcomePage,
   setNotFirstTimeFlag
@@ -18,7 +19,9 @@ export default () => {
       <Header />
       <div className='container-fluid row flex-xl-nowrap'>
         <div className='col-12 col-md-3 col-xl-3 home-sidebar' />
-        <div className='col-12 col-md-9 col-xl-9 home-content' />
+        <div className='col-12 col-md-9 col-xl-9 home-content'>
+          <Route exact path='/' component={HomeContent} />
+        </div>
       </div>
     </div>
   )
diff --git a/app/components/HomeContent.js b/app/components/HomeContent.js
new file mode 100644
index 0000000..8c8b10c
--- /dev/null
+++ b/app/components/HomeContent.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default () => (
+  <div className='center-text middle-page'>
+    <h4>Please select a note or add a new one</h4>
+  </div>
+)

From 93c2b4a75bbf5fd4673bae08bf58e503b4138461 Mon Sep 17 00:00:00 2001
From: Abdelrhman Ahmed <a.ahmed1026@gmail.com>
Date: Sun, 12 Aug 2018 22:31:22 +0200
Subject: [PATCH 07/21] Fixes #92: Add editor component (#105)

---
 app/actions/noteEditor.js    |  5 +++++
 app/assets/styles/index.css  | 24 +++++++++++++++++++++++-
 app/components/Header.js     |  1 +
 app/components/Home.js       | 21 +++++++++++++--------
 app/components/NoteEditor.js | 22 ++++++++++++++++++++++
 app/constants/actions.js     |  3 ++-
 app/containers/NoteEditor.js | 18 ++++++++++++++++++
 app/reducers/index.js        |  4 +++-
 app/reducers/noteEditor.js   | 18 ++++++++++++++++++
 package.json                 |  1 +
 10 files changed, 106 insertions(+), 11 deletions(-)
 create mode 100644 app/actions/noteEditor.js
 create mode 100644 app/components/NoteEditor.js
 create mode 100644 app/containers/NoteEditor.js
 create mode 100644 app/reducers/noteEditor.js

diff --git a/app/actions/noteEditor.js b/app/actions/noteEditor.js
new file mode 100644
index 0000000..2568c33
--- /dev/null
+++ b/app/actions/noteEditor.js
@@ -0,0 +1,5 @@
+import { createAction } from 'redux-actions'
+import { ACTIONS } from '../constants/actions'
+
+// Used for updating editor state.
+export const onSaveEditorState = createAction(ACTIONS.UPDATE_EDITOR_STATE)
diff --git a/app/assets/styles/index.css b/app/assets/styles/index.css
index b69a659..cb33643 100644
--- a/app/assets/styles/index.css
+++ b/app/assets/styles/index.css
@@ -54,7 +54,10 @@
   display: flex;
   top: 45%;
 }
-
+.home-container {
+  padding: 0px;
+  margin-left: -3px;
+}
 .home-sidebar {
   position: sticky;
   top: 48px;
@@ -69,3 +72,22 @@
 .home-content {
   padding: 0px;
 }
+
+.NoteEditor {
+  font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace;
+  font-size: 15px;
+  font-weight: bold;
+  color: black;
+  line-height: 30px;
+  cursor: text;
+  background: linear-gradient(transparent, transparent 28px, green 30px);
+  background-size: 30px 30px;
+  min-height: calc(100vh - 48px);
+  border-left: 3px solid #D44147;
+  padding: 5px;
+  padding-left: 10px;
+}
+
+.NoteEditor-hidePlaceholder {
+  display: none;
+}
diff --git a/app/components/Header.js b/app/components/Header.js
index 80d8ad7..6dded75 100644
--- a/app/components/Header.js
+++ b/app/components/Header.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Button } from 'reactstrap'
+
 export default () => (
   <nav className='navbar sticky-top navbar-light bg-light'>
     <img
diff --git a/app/components/Home.js b/app/components/Home.js
index 6349848..b48b138 100644
--- a/app/components/Home.js
+++ b/app/components/Home.js
@@ -1,7 +1,8 @@
 import React from 'react'
-import { Redirect, Route } from 'react-router-dom'
+import { BrowserRouter, Redirect, Route } from 'react-router-dom'
 import Header from './Header'
 import HomeContent from './HomeContent'
+import NoteEditor from './../containers/NoteEditor'
 import {
   checkRedirectToWelcomePage,
   setNotFirstTimeFlag
@@ -14,15 +15,19 @@ export default () => {
       <Redirect to='/welcome' />
     )
   }
+
   return (
-    <div>
-      <Header />
-      <div className='container-fluid row flex-xl-nowrap'>
-        <div className='col-12 col-md-3 col-xl-3 home-sidebar' />
-        <div className='col-12 col-md-9 col-xl-9 home-content'>
-          <Route exact path='/' component={HomeContent} />
+    <BrowserRouter>
+      <div>
+        <Header />
+        <div className='container-fluid row flex-xl-nowrap home-container'>
+          <div className='col-12 col-md-3 col-xl-3 home-sidebar' />
+          <div className='col-12 col-md-9 col-xl-9 home-content'>
+            <Route path='/note/:noteId' component={NoteEditor} />
+            <Route exact path='/' component={HomeContent} />
+          </div>
         </div>
       </div>
-    </div>
+    </BrowserRouter>
   )
 }
diff --git a/app/components/NoteEditor.js b/app/components/NoteEditor.js
new file mode 100644
index 0000000..857d1fc
--- /dev/null
+++ b/app/components/NoteEditor.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+import { Editor } from 'draft-js'
+import PropTypes from 'prop-types'
+
+export default class NoteEditor extends Component {
+  render () {
+    return (
+      <div className='NoteEditor'>
+        <Editor
+          editorState={this.props.editorState}
+          onChange={this.props.onSaveEditorState}
+          placeholder='Write down your thoughts...'
+        />
+      </div>
+    )
+  }
+}
+
+NoteEditor.propTypes = {
+  onSaveEditorState: PropTypes.func.isRequired,
+  editorState: PropTypes.object.isRequired
+}
diff --git a/app/constants/actions.js b/app/constants/actions.js
index 0712304..fdc2b4f 100644
--- a/app/constants/actions.js
+++ b/app/constants/actions.js
@@ -1,4 +1,5 @@
 export const ACTIONS = {
   GET_NEXT_LANG: 'SET_NEXT_LANG',
-  TOGGLE_FADE: 'TOGGLE_FADE'
+  TOGGLE_FADE: 'TOGGLE_FADE',
+  UPDATE_EDITOR_STATE: 'UPDATE_EDITOR_STATE'
 }
diff --git a/app/containers/NoteEditor.js b/app/containers/NoteEditor.js
new file mode 100644
index 0000000..a7f979b
--- /dev/null
+++ b/app/containers/NoteEditor.js
@@ -0,0 +1,18 @@
+import { connect } from 'react-redux'
+import NoteEditor from '../components/NoteEditor'
+import {
+  onSaveEditorState
+} from '../actions/noteEditor'
+
+const mapStateToProps = state => ({
+  editorState: state.noteEditorReducer.editorState
+})
+
+const mapDispatchToProps = dispatch => ({
+  onSaveEditorState: (editorState) => dispatch(onSaveEditorState(editorState))
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(NoteEditor)
diff --git a/app/reducers/index.js b/app/reducers/index.js
index e44c74f..7eca100 100644
--- a/app/reducers/index.js
+++ b/app/reducers/index.js
@@ -1,8 +1,10 @@
 import { combineReducers } from 'redux'
 import welcome from './welcome'
+import noteEditor from './noteEditor'
 
 // Creates a single root reducer out of Deer's reducers and returns an object
 // whose values are reducing functions with keys passed.
 export default combineReducers({
-  welcomeReducer: welcome
+  welcomeReducer: welcome,
+  noteEditorReducer: noteEditor
 })
diff --git a/app/reducers/noteEditor.js b/app/reducers/noteEditor.js
new file mode 100644
index 0000000..58cb356
--- /dev/null
+++ b/app/reducers/noteEditor.js
@@ -0,0 +1,18 @@
+import { ACTIONS } from '../constants/actions'
+import { EditorState } from 'draft-js'
+
+const INITIAL_STATE = {
+  editorState: EditorState.createEmpty()
+}
+
+export default (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+    case ACTIONS.UPDATE_EDITOR_STATE:
+      return {
+        ...state,
+        editorState: action.payload
+      }
+    default:
+      return state
+  }
+}
diff --git a/package.json b/package.json
index 254fe2f..3c6a4d5 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
   },
   "dependencies": {
     "bootstrap": "^4.1.1",
+    "draft-js": "^0.10.5",
     "electron-is-dev": "^0.3.0",
     "electron-log": "^2.2.15",
     "electron-store": "^2.0.0",

From 31592679a3703ed9df5873ccfd16cb34d36abed5 Mon Sep 17 00:00:00 2001
From: Abdelrhman Ahmed <a.ahmed1026@gmail.com>
Date: Mon, 13 Aug 2018 02:38:49 +0200
Subject: [PATCH 08/21] Fixes #97: Implement Notelist component (#106)

---
 app/actions/noteList.js     | 18 ++++++++++++++++++
 app/assets/styles/index.css |  4 ++--
 app/components/Home.js      |  5 ++++-
 app/components/NoteList.js  | 19 +++++++++++++++++++
 app/constants/actions.js    |  4 +++-
 app/containers/NoteList.js  | 18 ++++++++++++++++++
 app/reducers/index.js       |  4 +++-
 app/reducers/noteList.js    | 17 +++++++++++++++++
 8 files changed, 84 insertions(+), 5 deletions(-)
 create mode 100644 app/actions/noteList.js
 create mode 100644 app/components/NoteList.js
 create mode 100644 app/containers/NoteList.js
 create mode 100644 app/reducers/noteList.js

diff --git a/app/actions/noteList.js b/app/actions/noteList.js
new file mode 100644
index 0000000..f377939
--- /dev/null
+++ b/app/actions/noteList.js
@@ -0,0 +1,18 @@
+import { createAction } from 'redux-actions'
+import { ACTIONS } from '../constants/actions'
+import { fetchNotes } from './../db'
+
+// Used for updating noteList with fetched notes from database.
+export const updateNoteList = createAction(ACTIONS.UPDATE_NOTE_LIST)
+
+// Used for fetching all notes from database.
+export const fetchAllNotes = () => (dispatch, getState) => {
+  fetchNotes().then((result) => {
+    // Update only if there are notes.
+    if (result.total_rows > 0) {
+      dispatch(updateNoteList(result.rows))
+    }
+  }).catch((err) => {
+    console.error(err)
+  })
+}
diff --git a/app/assets/styles/index.css b/app/assets/styles/index.css
index cb33643..fa65ae5 100644
--- a/app/assets/styles/index.css
+++ b/app/assets/styles/index.css
@@ -64,9 +64,9 @@
   height: calc(100vh - 48px);
   flex: 0 1 320px;
   -webkit-box-flex: 0;
-  border-right: 2px solid ghostwhite;
+  border-right: 1px solid rgba(0, 0, 0, 0.125);
   overflow: auto;
-  padding: 5px!important;
+  padding: 0px!important;
 }
 
 .home-content {
diff --git a/app/components/Home.js b/app/components/Home.js
index b48b138..36cbadc 100644
--- a/app/components/Home.js
+++ b/app/components/Home.js
@@ -2,6 +2,7 @@ import React from 'react'
 import { BrowserRouter, Redirect, Route } from 'react-router-dom'
 import Header from './Header'
 import HomeContent from './HomeContent'
+import NoteList from './../containers/NoteList'
 import NoteEditor from './../containers/NoteEditor'
 import {
   checkRedirectToWelcomePage,
@@ -21,7 +22,9 @@ export default () => {
       <div>
         <Header />
         <div className='container-fluid row flex-xl-nowrap home-container'>
-          <div className='col-12 col-md-3 col-xl-3 home-sidebar' />
+          <div className='col-12 col-md-3 col-xl-3 home-sidebar'>
+            <NoteList />
+          </div>
           <div className='col-12 col-md-9 col-xl-9 home-content'>
             <Route path='/note/:noteId' component={NoteEditor} />
             <Route exact path='/' component={HomeContent} />
diff --git a/app/components/NoteList.js b/app/components/NoteList.js
new file mode 100644
index 0000000..0819e1b
--- /dev/null
+++ b/app/components/NoteList.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class NoteList extends Component {
+  componentDidMount () {
+    // Trigger fetching notes as this component is loaded.
+    this.props.fetchAllNotes()
+  }
+
+  render () {
+    return (
+      <div className='list-group list-group-flush' />
+    )
+  }
+}
+
+NoteList.propTypes = {
+  fetchAllNotes: PropTypes.func.isRequired
+}
diff --git a/app/constants/actions.js b/app/constants/actions.js
index fdc2b4f..ab716ae 100644
--- a/app/constants/actions.js
+++ b/app/constants/actions.js
@@ -1,5 +1,7 @@
 export const ACTIONS = {
   GET_NEXT_LANG: 'SET_NEXT_LANG',
   TOGGLE_FADE: 'TOGGLE_FADE',
-  UPDATE_EDITOR_STATE: 'UPDATE_EDITOR_STATE'
+  UPDATE_EDITOR_STATE: 'UPDATE_EDITOR_STATE',
+  FETCH_ALL_NOTES: 'FETCH_ALL_NOTES',
+  UPDATE_NOTE_LIST: 'UPDATE_NOTE_LIST'
 }
diff --git a/app/containers/NoteList.js b/app/containers/NoteList.js
new file mode 100644
index 0000000..40f5797
--- /dev/null
+++ b/app/containers/NoteList.js
@@ -0,0 +1,18 @@
+import { connect } from 'react-redux'
+import NoteList from '../components/NoteList'
+import {
+  fetchAllNotes
+} from '../actions/noteList'
+
+const mapStateToProps = state => ({
+  notes: state.noteListReducer.notes
+})
+
+const mapDispatchToProps = dispatch => ({
+  fetchAllNotes: () => dispatch(fetchAllNotes())
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(NoteList)
diff --git a/app/reducers/index.js b/app/reducers/index.js
index 7eca100..e31800c 100644
--- a/app/reducers/index.js
+++ b/app/reducers/index.js
@@ -1,10 +1,12 @@
 import { combineReducers } from 'redux'
 import welcome from './welcome'
 import noteEditor from './noteEditor'
+import noteList from './noteList'
 
 // Creates a single root reducer out of Deer's reducers and returns an object
 // whose values are reducing functions with keys passed.
 export default combineReducers({
   welcomeReducer: welcome,
-  noteEditorReducer: noteEditor
+  noteEditorReducer: noteEditor,
+  noteListReducer: noteList
 })
diff --git a/app/reducers/noteList.js b/app/reducers/noteList.js
new file mode 100644
index 0000000..37daa8c
--- /dev/null
+++ b/app/reducers/noteList.js
@@ -0,0 +1,17 @@
+import { ACTIONS } from '../constants/actions'
+
+const INITIAL_STATE = {
+  notes: []
+}
+
+export default (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+    case ACTIONS.UPDATE_NOTE_LIST:
+      return {
+        ...state,
+        notes: action.payload.map(note => note.doc)
+      }
+    default:
+      return state
+  }
+}

From a84c9d00c826ed8526b72f0bb2b0b2bd7d775866 Mon Sep 17 00:00:00 2001
From: Abdelrhman Ahmed <a.ahmed1026@gmail.com>
Date: Mon, 13 Aug 2018 03:37:25 +0200
Subject: [PATCH 09/21] Fixes #98: Implement NoteItem component (#107)

---
 app/assets/styles/index.css |  6 ++++++
 app/components/NoteItem.js  | 18 ++++++++++++++++++
 app/components/NoteList.js  |  8 +++++++-
 3 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 app/components/NoteItem.js

diff --git a/app/assets/styles/index.css b/app/assets/styles/index.css
index fa65ae5..0c5cd8f 100644
--- a/app/assets/styles/index.css
+++ b/app/assets/styles/index.css
@@ -91,3 +91,9 @@
 .NoteEditor-hidePlaceholder {
   display: none;
 }
+
+.noteItem {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
diff --git a/app/components/NoteItem.js b/app/components/NoteItem.js
new file mode 100644
index 0000000..baa45fa
--- /dev/null
+++ b/app/components/NoteItem.js
@@ -0,0 +1,18 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class NoteItem extends Component {
+  render () {
+    let title = this.props.value.title || 'Empty note'
+    return (
+      <a
+        className='list-group-item list-group-item-action noteItem'>
+        {title}
+      </a>
+    )
+  }
+}
+
+NoteItem.propTypes = {
+  value: PropTypes.object.isRequired
+}
diff --git a/app/components/NoteList.js b/app/components/NoteList.js
index 0819e1b..4dcbd79 100644
--- a/app/components/NoteList.js
+++ b/app/components/NoteList.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import NoteItem from './NoteItem'
 
 export default class NoteList extends Component {
   componentDidMount () {
@@ -9,11 +10,16 @@ export default class NoteList extends Component {
 
   render () {
     return (
-      <div className='list-group list-group-flush' />
+      <div className='list-group list-group-flush'>
+        {this.props.notes.map((note, index) => (
+          <NoteItem key={index} value={note} />
+        ))}
+      </div>
     )
   }
 }
 
 NoteList.propTypes = {
+  notes: PropTypes.array.isRequired,
   fetchAllNotes: PropTypes.func.isRequired
 }

From 8cfd62bae358083f3167183742363b6ebb63def7 Mon Sep 17 00:00:00 2001
From: Abdelrhman Ahmed <a.ahmed1026@gmail.com>
Date: Sat, 18 Aug 2018 02:51:54 +0200
Subject: [PATCH 10/21] Fixes #108: Support selecting note in noteList (#109)

---
 app/actions/noteList.js    |  3 +++
 app/components/NoteItem.js | 25 +++++++++++++++++++++----
 app/components/NoteList.js | 25 +++++++++++++++++++++++--
 app/constants/actions.js   |  3 ++-
 app/containers/NoteList.js |  7 +++++--
 app/reducers/noteList.js   |  6 ++++++
 6 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/app/actions/noteList.js b/app/actions/noteList.js
index f377939..dff85ed 100644
--- a/app/actions/noteList.js
+++ b/app/actions/noteList.js
@@ -5,6 +5,9 @@ import { fetchNotes } from './../db'
 // Used for updating noteList with fetched notes from database.
 export const updateNoteList = createAction(ACTIONS.UPDATE_NOTE_LIST)
 
+// Used for setting the id of selected note.
+export const setActiveNote = createAction(ACTIONS.SET_ACTIVE_NOTE)
+
 // Used for fetching all notes from database.
 export const fetchAllNotes = () => (dispatch, getState) => {
   fetchNotes().then((result) => {
diff --git a/app/components/NoteItem.js b/app/components/NoteItem.js
index baa45fa..b0d620a 100644
--- a/app/components/NoteItem.js
+++ b/app/components/NoteItem.js
@@ -2,11 +2,25 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
 export default class NoteItem extends Component {
+  constructor (props) {
+    // Initialize this using super
+    super()
+
+    this.onNoteClick = this.onNoteClick.bind(this)
+  }
+
+  onNoteClick () {
+    this.props.select(this.props.id)
+  }
+
   render () {
-    let title = this.props.value.title || 'Empty note'
+    const title = this.props.value || 'Empty note'
+
+    let classNames = 'list-group-item list-group-item-action noteItem'
+    if (this.props.isActive) { classNames += ' active text-white' }
+
     return (
-      <a
-        className='list-group-item list-group-item-action noteItem'>
+      <a className={classNames} onClick={this.onNoteClick}>
         {title}
       </a>
     )
@@ -14,5 +28,8 @@ export default class NoteItem extends Component {
 }
 
 NoteItem.propTypes = {
-  value: PropTypes.object.isRequired
+  id: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  select: PropTypes.func.isRequired,
+  isActive: PropTypes.bool.isRequired
 }
diff --git a/app/components/NoteList.js b/app/components/NoteList.js
index 4dcbd79..88d8736 100644
--- a/app/components/NoteList.js
+++ b/app/components/NoteList.js
@@ -3,16 +3,35 @@ import PropTypes from 'prop-types'
 import NoteItem from './NoteItem'
 
 export default class NoteList extends Component {
+  constructor (props) {
+    // Initialize this using super
+    super()
+
+    this.onSelect = this.onSelect.bind(this)
+  }
+
   componentDidMount () {
     // Trigger fetching notes as this component is loaded.
     this.props.fetchAllNotes()
   }
 
+  onSelect (noteId = '') {
+    // Do nothing as it's already selected.
+    if (this.props.activeNote === noteId) { return }
+
+    this.props.setActiveNote(noteId)
+  }
+
   render () {
     return (
       <div className='list-group list-group-flush'>
         {this.props.notes.map((note, index) => (
-          <NoteItem key={index} value={note} />
+          <NoteItem
+            key={index}
+            id={note._id}
+            value={note.title}
+            select={this.onSelect}
+            isActive={this.props.activeNote === note._id} />
         ))}
       </div>
     )
@@ -20,6 +39,8 @@ export default class NoteList extends Component {
 }
 
 NoteList.propTypes = {
+  activeNote: PropTypes.string.isRequired,
   notes: PropTypes.array.isRequired,
-  fetchAllNotes: PropTypes.func.isRequired
+  fetchAllNotes: PropTypes.func.isRequired,
+  setActiveNote: PropTypes.func.isRequired
 }
diff --git a/app/constants/actions.js b/app/constants/actions.js
index ab716ae..1d8da7c 100644
--- a/app/constants/actions.js
+++ b/app/constants/actions.js
@@ -3,5 +3,6 @@ export const ACTIONS = {
   TOGGLE_FADE: 'TOGGLE_FADE',
   UPDATE_EDITOR_STATE: 'UPDATE_EDITOR_STATE',
   FETCH_ALL_NOTES: 'FETCH_ALL_NOTES',
-  UPDATE_NOTE_LIST: 'UPDATE_NOTE_LIST'
+  UPDATE_NOTE_LIST: 'UPDATE_NOTE_LIST',
+  SET_ACTIVE_NOTE: 'SET_ACTIVE_NOTE'
 }
diff --git a/app/containers/NoteList.js b/app/containers/NoteList.js
index 40f5797..9bb08e2 100644
--- a/app/containers/NoteList.js
+++ b/app/containers/NoteList.js
@@ -1,15 +1,18 @@
 import { connect } from 'react-redux'
 import NoteList from '../components/NoteList'
 import {
-  fetchAllNotes
+  fetchAllNotes,
+  setActiveNote
 } from '../actions/noteList'
 
 const mapStateToProps = state => ({
+  activeNote: state.noteListReducer.activeNote,
   notes: state.noteListReducer.notes
 })
 
 const mapDispatchToProps = dispatch => ({
-  fetchAllNotes: () => dispatch(fetchAllNotes())
+  fetchAllNotes: () => dispatch(fetchAllNotes()),
+  setActiveNote: (noteId) => dispatch(setActiveNote(noteId))
 })
 
 export default connect(
diff --git a/app/reducers/noteList.js b/app/reducers/noteList.js
index 37daa8c..8a2efbd 100644
--- a/app/reducers/noteList.js
+++ b/app/reducers/noteList.js
@@ -1,6 +1,7 @@
 import { ACTIONS } from '../constants/actions'
 
 const INITIAL_STATE = {
+  activeNote: '',
   notes: []
 }
 
@@ -11,6 +12,11 @@ export default (state = INITIAL_STATE, action) => {
         ...state,
         notes: action.payload.map(note => note.doc)
       }
+    case ACTIONS.SET_ACTIVE_NOTE:
+      return {
+        ...state,
+        activeNote: action.payload
+      }
     default:
       return state
   }

From 1728cba4aaa8d7a4c97dadc5e98108ed44ab1a2b Mon Sep 17 00:00:00 2001
From: Abdelrhman Ahmed <a.ahmed1026@gmail.com>
Date: Fri, 24 Aug 2018 15:51:26 +0200
Subject: [PATCH 11/21] Fixes #112: Update the packages that Deer depends on
 (#113)

---
 docs/List-of-dependencies.md | 15 ++++++++-------
 package.json                 | 14 +++++++-------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/docs/List-of-dependencies.md b/docs/List-of-dependencies.md
index af4c61e..b67a2ee 100644
--- a/docs/List-of-dependencies.md
+++ b/docs/List-of-dependencies.md
@@ -9,22 +9,22 @@ Packages which are used during development or which are used to build Deer's bun
 | babel-plugin-transform-object-rest-spread | ^6.26.0 | A Babel plugin responsible for transforming rest and spread properties for objects |
 | babel-preset-env        | ^1.7.0    | A Babel plugin responsible for compiling Javascript ES6 code down to ES5 |
 | babel-preset-react      | ^6.24.1   | A Babel plugin responsible for compiling JSX down to Javascript |
-| css-loader              | ^0.28.11  | A Webpack loader responsible for collecting CSS from all the css files and put it into a string |
+| css-loader              | ^1.0.0    | A Webpack loader responsible for collecting CSS from all the css files and put it into a string |
 | electron                | ^2.0.2    | Build cross platform desktop apps |
 | electron-builder        | ^20.15.1  | Package and build a ready for distribution Electron app |
 | electron-reload         | ^1.2.2    | Reload contents of when the source files are changed |
-| eslint                  | ^4.19.1   | Linting utility for JavaScript and JSX |
+| eslint                  | ^5.4.0   | Linting utility for JavaScript and JSX |
 | eslint-config-standard  | ^11.0.0   | JavaScript Standard Style |
 | eslint-config-standard-react  | ^6.0.0   | JavaScript Standard Style React/JSX support |
 | eslint-plugin-import    | ^2.12.0   | Support linting of ES2015+ (ES6+) import/export syntax |
-| eslint-plugin-node      | ^6.0.1    | ESLint's rules for Node.js |
-| eslint-plugin-promise   | ^3.8.0    | Enforce best practices for JavaScript promises |
+| eslint-plugin-node      | ^7.0.1    | ESLint's rules for Node.js |
+| eslint-plugin-promise   | ^4.0.0    | Enforce best practices for JavaScript promises |
 | eslint-plugin-react     | ^7.9.1    | React specific linting rules for ESLint |
 | eslint-plugin-standard  | ^3.1.0    | ESlint Plugin for the Standard Linter |
-| file-loader             | ^1.1.11   | A Webpack loader responsible for emitting files that will be bundled and returning their public URLs (e.g. Images) |
+| file-loader             | ^2.0.0    | A Webpack loader responsible for emitting files that will be bundled and returning their public URLs (e.g. Images) |
 | husky                   | ^0.14.3   | Prevent bad commit, push by doing checks before it takes place |
 | jquery                  | ^3.3.1    | Needed for electron-builder packages |
-| style-loader            | ^0.21.0   | A Webpack loader responsibile for taking the output string generated by by css-loader and put it inside the <style> tags |
+| style-loader            | ^0.22.1   | A Webpack loader responsibile for taking the output string generated by by css-loader and put it inside the <style> tags |
 | webpack                 | ^4.12.0   | A module bundler for JavaScript files |
 | webpack-cli             | ^3.0.3    | Required by web pack |
 
@@ -36,11 +36,12 @@ Those are dependencies that are essential for software to work.
 |          Name         |    Version    |    Usage   |
 | --------------------- | ------------- | ---------- |
 | bootstrap             | ^4.1.1        | A front-end framework |
+| draft-js              | ^0.10.5       | A framework for building rich text editors |
 | electron-is-dev       | ^0.3.0        | Check if Electron is running in development |
 | electron-log          | ^2.2.15       | A multi-transport async logging library |
 | electron-store        | ^2.0.0        | Save and load user preferences |
 | electron-window-state | ^4.1.1        | Store and restore window sizes and positions |
-| pouchdb-browser       | ^6.4.3        | A pocket-sized database. |
+| pouchdb-browser       | ^7.0.0        | A pocket-sized database. |
 | prop-types            | ^15.6.1       | A Runtime type checking for React props |
 | react                 | ^16.4.0       | A JavaScript library for building user interfaces |
 | react-dom             | ^16.4.0       | React package for working with the DOM |
diff --git a/package.json b/package.json
index 3c6a4d5..e922d2a 100644
--- a/package.json
+++ b/package.json
@@ -37,22 +37,22 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
-    "css-loader": "^0.28.11",
+    "css-loader": "^1.0.0",
     "electron": "^2.0.2",
     "electron-builder": "^20.15.1",
     "electron-reload": "^1.2.2",
-    "eslint": "^4.19.1",
+    "eslint": "^5.4.0",
     "eslint-config-standard": "^11.0.0",
     "eslint-config-standard-react": "^6.0.0",
     "eslint-plugin-import": "^2.12.0",
-    "eslint-plugin-node": "^6.0.1",
-    "eslint-plugin-promise": "^3.8.0",
+    "eslint-plugin-node": "^7.0.1",
+    "eslint-plugin-promise": "^4.0.0",
     "eslint-plugin-react": "^7.9.1",
     "eslint-plugin-standard": "^3.1.0",
-    "file-loader": "^1.1.11",
+    "file-loader": "^2.0.0",
     "husky": "^0.14.3",
     "jquery": "^3.3.1",
-    "style-loader": "^0.21.0",
+    "style-loader": "^0.22.1",
     "webpack": "^4.12.0",
     "webpack-cli": "^3.0.3"
   },
@@ -63,7 +63,7 @@
     "electron-log": "^2.2.15",
     "electron-store": "^2.0.0",
     "electron-window-state": "^4.1.1",
-    "pouchdb-browser": "^6.4.3",
+    "pouchdb-browser": "^7.0.0",
     "prop-types": "^15.6.1",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",

From 8614be2b5c8ce41d626fa5347bfd6b66e700a89f Mon Sep 17 00:00:00 2001
From: Abdelrhman Ahmed <a.ahmed1026@gmail.com>
Date: Fri, 24 Aug 2018 18:10:53 +0200
Subject: [PATCH 12/21] Fixes #114: Add isNewNoteDisabled property to header
 component (#115)

Add isNewNoteDisabled property to header component and an action to change it
---
 .eslintrc                |  7 ++++++-
 app/actions/header.js    |  5 +++++
 app/components/Header.js | 45 ++++++++++++++++++++++++----------------
 app/components/Home.js   |  2 +-
 app/constants/actions.js |  3 ++-
 app/containers/Header.js | 18 ++++++++++++++++
 app/reducers/header.js   | 20 ++++++++++++++++++
 app/reducers/index.js    |  4 +++-
 8 files changed, 82 insertions(+), 22 deletions(-)
 create mode 100644 app/actions/header.js
 create mode 100644 app/containers/Header.js
 create mode 100644 app/reducers/header.js

diff --git a/.eslintrc b/.eslintrc
index 2225fd6..ec520cd 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,3 +1,8 @@
 {
-  "extends": ["standard", "standard-react"]
+  "extends": ["standard", "standard-react"],
+  "settings": {
+    "react": {
+      "version": "16.4.0"
+    }
+  }
 }
diff --git a/app/actions/header.js b/app/actions/header.js
new file mode 100644
index 0000000..55e00f7
--- /dev/null
+++ b/app/actions/header.js
@@ -0,0 +1,5 @@
+import { createAction } from 'redux-actions'
+import { ACTIONS } from '../constants/actions'
+
+// Used for updating state of adding new note button (e.g. enabled or disabled).
+export const setNewNoteDisabled = createAction(ACTIONS.UPDATE_NEW_NOTE_STATE)
diff --git a/app/components/Header.js b/app/components/Header.js
index 6dded75..3b64735 100644
--- a/app/components/Header.js
+++ b/app/components/Header.js
@@ -1,19 +1,28 @@
-import React from 'react'
-import { Button } from 'reactstrap'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 
-export default () => (
-  <nav className='navbar sticky-top navbar-light bg-light'>
-    <img
-      src={require('../assets/images/Deer-32.png')}
-      className='d-inline-block align-top' />
-    <ul className='navbar-nav flex-row ml-md-auto d-none d-md-flex'>
-      <li className='nav-item'>
-        <Button
-          outline color='success'
-          size='sm'>
-        New Note
-        </Button>
-      </li>
-    </ul>
-  </nav>
-)
+export default class Header extends Component {
+  render () {
+    let btnClassNames = 'btn btn-outline-success btn-sm'
+    if (this.props.isNewNoteDisabled) { btnClassNames += ' disabled' }
+
+    return (
+      <nav className='navbar sticky-top navbar-light bg-light'>
+        <img
+          src={require('../assets/images/Deer-32.png')}
+          className='d-inline-block align-top' />
+        <ul className='navbar-nav flex-row ml-md-auto d-none d-md-flex'>
+          <li className='nav-item'>
+            <button className={btnClassNames}>
+              New Note
+            </button>
+          </li>
+        </ul>
+      </nav>
+    )
+  }
+}
+
+Header.propTypes = {
+  isNewNoteDisabled: PropTypes.bool.isRequired
+}
diff --git a/app/components/Home.js b/app/components/Home.js
index 36cbadc..789fa89 100644
--- a/app/components/Home.js
+++ b/app/components/Home.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { BrowserRouter, Redirect, Route } from 'react-router-dom'
-import Header from './Header'
+import Header from './../containers/Header'
 import HomeContent from './HomeContent'
 import NoteList from './../containers/NoteList'
 import NoteEditor from './../containers/NoteEditor'
diff --git a/app/constants/actions.js b/app/constants/actions.js
index 1d8da7c..100beb9 100644
--- a/app/constants/actions.js
+++ b/app/constants/actions.js
@@ -4,5 +4,6 @@ export const ACTIONS = {
   UPDATE_EDITOR_STATE: 'UPDATE_EDITOR_STATE',
   FETCH_ALL_NOTES: 'FETCH_ALL_NOTES',
   UPDATE_NOTE_LIST: 'UPDATE_NOTE_LIST',
-  SET_ACTIVE_NOTE: 'SET_ACTIVE_NOTE'
+  SET_ACTIVE_NOTE: 'SET_ACTIVE_NOTE',
+  UPDATE_NEW_NOTE_STATE: 'UPDATE_NEW_NOTE_STATE'
 }
diff --git a/app/containers/Header.js b/app/containers/Header.js
new file mode 100644
index 0000000..3cc4e37
--- /dev/null
+++ b/app/containers/Header.js
@@ -0,0 +1,18 @@
+import { connect } from 'react-redux'
+import Header from '../components/Header'
+import {
+  setNewNoteDisabled
+} from '../actions/header'
+
+const mapStateToProps = state => ({
+  isNewNoteDisabled: state.headerReducer.isNewNoteDisabled
+})
+
+const mapDispatchToProps = dispatch => ({
+  setNewNoteDisabled: (flag) => dispatch(setNewNoteDisabled(flag))
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Header)
diff --git a/app/reducers/header.js b/app/reducers/header.js
new file mode 100644
index 0000000..c6ed3d9
--- /dev/null
+++ b/app/reducers/header.js
@@ -0,0 +1,20 @@
+import { ACTIONS } from '../constants/actions'
+
+const INITIAL_STATE = {
+  isNewNoteDisabled: false
+}
+
+export default (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+    case ACTIONS.UPDATE_NEW_NOTE_STATE:
+      // Just return the state as there is no change in isNewNoteDisabled flag.
+      if (state.isNewNoteDisabled === action.payload) { return state }
+
+      return {
+        ...state,
+        isNewNoteDisabled: action.payload
+      }
+    default:
+      return state
+  }
+}
diff --git a/app/reducers/index.js b/app/reducers/index.js
index e31800c..da40739 100644
--- a/app/reducers/index.js
+++ b/app/reducers/index.js
@@ -2,11 +2,13 @@ import { combineReducers } from 'redux'
 import welcome from './welcome'
 import noteEditor from './noteEditor'
 import noteList from './noteList'
+import header from './header'
 
 // Creates a single root reducer out of Deer's reducers and returns an object
 // whose values are reducing functions with keys passed.
 export default combineReducers({
   welcomeReducer: welcome,
   noteEditorReducer: noteEditor,
-  noteListReducer: noteList
+  noteListReducer: noteList,
+  headerReducer: header
 })

From 96a9e27306ac1c7409eb608cc054258165f78038 Mon Sep 17 00:00:00 2001
From: Abdelrhman Ahmed <a.ahmed1026@gmail.com>
Date: Sun, 26 Aug 2018 17:16:10 +0200
Subject: [PATCH 13/21] Fixes #111: Support adding new note (#116)

---
 app/actions/noteList.js      |  3 +++
 app/components/Header.js     | 19 ++++++++++++++++++-
 app/components/Home.js       | 24 ++++++++++--------------
 app/components/NoteEditor.js |  5 +++++
 app/components/NoteList.js   |  6 +++---
 app/constants/actions.js     |  3 ++-
 app/containers/Header.js     |  4 ++++
 app/containers/NoteEditor.js |  1 +
 app/reducers/noteList.js     | 12 ++++++++++++
 9 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/app/actions/noteList.js b/app/actions/noteList.js
index dff85ed..5da7237 100644
--- a/app/actions/noteList.js
+++ b/app/actions/noteList.js
@@ -2,6 +2,9 @@ import { createAction } from 'redux-actions'
 import { ACTIONS } from '../constants/actions'
 import { fetchNotes } from './../db'
 
+// Used for adding a new note.
+export const addNewNote = createAction(ACTIONS.ADD_NOTE)
+
 // Used for updating noteList with fetched notes from database.
 export const updateNoteList = createAction(ACTIONS.UPDATE_NOTE_LIST)
 
diff --git a/app/components/Header.js b/app/components/Header.js
index 3b64735..9324ad4 100644
--- a/app/components/Header.js
+++ b/app/components/Header.js
@@ -2,6 +2,21 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
 export default class Header extends Component {
+  constructor (props) {
+    // Initialize this using super
+    super()
+
+    this.onAddNote = this.onAddNote.bind(this)
+  }
+
+  onAddNote () {
+    // Do not proceed as button is disabled
+    if (this.props.isNewNoteDisabled) return
+
+    this.props.setNewNoteDisabled(true)
+    this.props.addNewNote()
+  }
+
   render () {
     let btnClassNames = 'btn btn-outline-success btn-sm'
     if (this.props.isNewNoteDisabled) { btnClassNames += ' disabled' }
@@ -13,7 +28,7 @@ export default class Header extends Component {
           className='d-inline-block align-top' />
         <ul className='navbar-nav flex-row ml-md-auto d-none d-md-flex'>
           <li className='nav-item'>
-            <button className={btnClassNames}>
+            <button className={btnClassNames} onClick={this.onAddNote}>
               New Note
             </button>
           </li>
@@ -24,5 +39,7 @@ export default class Header extends Component {
 }
 
 Header.propTypes = {
+  addNewNote: PropTypes.func.isRequired,
+  setNewNoteDisabled: PropTypes.func.isRequired,
   isNewNoteDisabled: PropTypes.bool.isRequired
 }
diff --git a/app/components/Home.js b/app/components/Home.js
index 789fa89..25c44f3 100644
--- a/app/components/Home.js
+++ b/app/components/Home.js
@@ -1,7 +1,6 @@
 import React from 'react'
-import { BrowserRouter, Redirect, Route } from 'react-router-dom'
+import { Redirect } from 'react-router-dom'
 import Header from './../containers/Header'
-import HomeContent from './HomeContent'
 import NoteList from './../containers/NoteList'
 import NoteEditor from './../containers/NoteEditor'
 import {
@@ -18,19 +17,16 @@ export default () => {
   }
 
   return (
-    <BrowserRouter>
-      <div>
-        <Header />
-        <div className='container-fluid row flex-xl-nowrap home-container'>
-          <div className='col-12 col-md-3 col-xl-3 home-sidebar'>
-            <NoteList />
-          </div>
-          <div className='col-12 col-md-9 col-xl-9 home-content'>
-            <Route path='/note/:noteId' component={NoteEditor} />
-            <Route exact path='/' component={HomeContent} />
-          </div>
+    <div>
+      <Header />
+      <div className='container-fluid row flex-xl-nowrap home-container'>
+        <div className='col-12 col-md-3 col-xl-3 home-sidebar'>
+          <NoteList />
+        </div>
+        <div className='col-12 col-md-9 col-xl-9 home-content'>
+          <NoteEditor />
         </div>
       </div>
-    </BrowserRouter>
+    </div>
   )
 }
diff --git a/app/components/NoteEditor.js b/app/components/NoteEditor.js
index 857d1fc..05e21f0 100644
--- a/app/components/NoteEditor.js
+++ b/app/components/NoteEditor.js
@@ -1,9 +1,13 @@
 import React, { Component } from 'react'
 import { Editor } from 'draft-js'
 import PropTypes from 'prop-types'
+import HomeContent from './HomeContent'
 
 export default class NoteEditor extends Component {
   render () {
+    // Show homeContent when no note is selected.
+    if (!this.props.activeNote) { return (<HomeContent />) }
+
     return (
       <div className='NoteEditor'>
         <Editor
@@ -17,6 +21,7 @@ export default class NoteEditor extends Component {
 }
 
 NoteEditor.propTypes = {
+  activeNote: PropTypes.string.isRequired,
   onSaveEditorState: PropTypes.func.isRequired,
   editorState: PropTypes.object.isRequired
 }
diff --git a/app/components/NoteList.js b/app/components/NoteList.js
index 88d8736..052fd03 100644
--- a/app/components/NoteList.js
+++ b/app/components/NoteList.js
@@ -28,10 +28,10 @@ export default class NoteList extends Component {
         {this.props.notes.map((note, index) => (
           <NoteItem
             key={index}
-            id={note._id}
-            value={note.title}
+            id={note.id}
+            value={note.content}
             select={this.onSelect}
-            isActive={this.props.activeNote === note._id} />
+            isActive={this.props.activeNote === note.id} />
         ))}
       </div>
     )
diff --git a/app/constants/actions.js b/app/constants/actions.js
index 100beb9..48170b1 100644
--- a/app/constants/actions.js
+++ b/app/constants/actions.js
@@ -5,5 +5,6 @@ export const ACTIONS = {
   FETCH_ALL_NOTES: 'FETCH_ALL_NOTES',
   UPDATE_NOTE_LIST: 'UPDATE_NOTE_LIST',
   SET_ACTIVE_NOTE: 'SET_ACTIVE_NOTE',
-  UPDATE_NEW_NOTE_STATE: 'UPDATE_NEW_NOTE_STATE'
+  UPDATE_NEW_NOTE_STATE: 'UPDATE_NEW_NOTE_STATE',
+  ADD_NOTE: 'ADD_NOTE'
 }
diff --git a/app/containers/Header.js b/app/containers/Header.js
index 3cc4e37..31264dc 100644
--- a/app/containers/Header.js
+++ b/app/containers/Header.js
@@ -3,12 +3,16 @@ import Header from '../components/Header'
 import {
   setNewNoteDisabled
 } from '../actions/header'
+import {
+  addNewNote
+} from '../actions/noteList'
 
 const mapStateToProps = state => ({
   isNewNoteDisabled: state.headerReducer.isNewNoteDisabled
 })
 
 const mapDispatchToProps = dispatch => ({
+  addNewNote: () => dispatch(addNewNote()),
   setNewNoteDisabled: (flag) => dispatch(setNewNoteDisabled(flag))
 })
 
diff --git a/app/containers/NoteEditor.js b/app/containers/NoteEditor.js
index a7f979b..f791147 100644
--- a/app/containers/NoteEditor.js
+++ b/app/containers/NoteEditor.js
@@ -5,6 +5,7 @@ import {
 } from '../actions/noteEditor'
 
 const mapStateToProps = state => ({
+  activeNote: state.noteListReducer.activeNote,
   editorState: state.noteEditorReducer.editorState
 })
 
diff --git a/app/reducers/noteList.js b/app/reducers/noteList.js
index 8a2efbd..830d264 100644
--- a/app/reducers/noteList.js
+++ b/app/reducers/noteList.js
@@ -1,3 +1,4 @@
+import uuidv4 from 'uuid/v4'
 import { ACTIONS } from '../constants/actions'
 
 const INITIAL_STATE = {
@@ -17,6 +18,17 @@ export default (state = INITIAL_STATE, action) => {
         ...state,
         activeNote: action.payload
       }
+    case ACTIONS.ADD_NOTE:
+      const note = {
+        id: uuidv4(),
+        content: '',
+        isSaved: false
+      }
+      return {
+        ...state,
+        notes: [...state.notes, note],
+        activeNote: note.id
+      }
     default:
       return state
   }

From 0bc9d86d76dc3eedf507dbee488e7ad2bad0b1e0 Mon Sep 17 00:00:00 2001
From: Abdelrhman Ahmed <a.ahmed1026@gmail.com>
Date: Thu, 30 Aug 2018 02:40:54 +0200
Subject: [PATCH 14/21] Fixes #117: Improve current code (#118)

- Rename NoteList reducer and action to note as it's general and related to notes operations onl
- Let NoteEditor be rendered inside HomeContent component
---
 app/actions/{noteList.js => note.js}  |  0
 app/components/Home.js                |  4 ++--
 app/components/HomeContent.js         | 25 +++++++++++++++++++------
 app/components/NoteEditor.js          |  5 -----
 app/containers/Header.js              |  2 +-
 app/containers/HomeContent.js         | 14 ++++++++++++++
 app/containers/NoteEditor.js          |  1 -
 app/containers/NoteList.js            |  6 +++---
 app/reducers/index.js                 |  4 ++--
 app/reducers/{noteList.js => note.js} |  8 +++++++-
 10 files changed, 48 insertions(+), 21 deletions(-)
 rename app/actions/{noteList.js => note.js} (100%)
 create mode 100644 app/containers/HomeContent.js
 rename app/reducers/{noteList.js => note.js} (78%)

diff --git a/app/actions/noteList.js b/app/actions/note.js
similarity index 100%
rename from app/actions/noteList.js
rename to app/actions/note.js
diff --git a/app/components/Home.js b/app/components/Home.js
index 25c44f3..2de01f6 100644
--- a/app/components/Home.js
+++ b/app/components/Home.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { Redirect } from 'react-router-dom'
 import Header from './../containers/Header'
 import NoteList from './../containers/NoteList'
-import NoteEditor from './../containers/NoteEditor'
+import HomeContent from './../containers/HomeContent'
 import {
   checkRedirectToWelcomePage,
   setNotFirstTimeFlag
@@ -24,7 +24,7 @@ export default () => {
           <NoteList />
         </div>
         <div className='col-12 col-md-9 col-xl-9 home-content'>
-          <NoteEditor />
+          <HomeContent />
         </div>
       </div>
     </div>
diff --git a/app/components/HomeContent.js b/app/components/HomeContent.js
index 8c8b10c..f3bb4fb 100644
--- a/app/components/HomeContent.js
+++ b/app/components/HomeContent.js
@@ -1,7 +1,20 @@
-import React from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import NoteEditor from './../containers/NoteEditor'
 
-export default () => (
-  <div className='center-text middle-page'>
-    <h4>Please select a note or add a new one</h4>
-  </div>
-)
+export default class HomeContent extends Component {
+  render () {
+    // Show homeContent when no note is selected.
+    if (this.props.activeNote) { return (<NoteEditor />) }
+
+    return (
+      <div className='center-text middle-page'>
+        <h4>Please select a note or add a new one</h4>
+      </div>
+    )
+  }
+}
+
+HomeContent.propTypes = {
+  activeNote: PropTypes.string.isRequired
+}
diff --git a/app/components/NoteEditor.js b/app/components/NoteEditor.js
index 05e21f0..857d1fc 100644
--- a/app/components/NoteEditor.js
+++ b/app/components/NoteEditor.js
@@ -1,13 +1,9 @@
 import React, { Component } from 'react'
 import { Editor } from 'draft-js'
 import PropTypes from 'prop-types'
-import HomeContent from './HomeContent'
 
 export default class NoteEditor extends Component {
   render () {
-    // Show homeContent when no note is selected.
-    if (!this.props.activeNote) { return (<HomeContent />) }
-
     return (
       <div className='NoteEditor'>
         <Editor
@@ -21,7 +17,6 @@ export default class NoteEditor extends Component {
 }
 
 NoteEditor.propTypes = {
-  activeNote: PropTypes.string.isRequired,
   onSaveEditorState: PropTypes.func.isRequired,
   editorState: PropTypes.object.isRequired
 }
diff --git a/app/containers/Header.js b/app/containers/Header.js
index 31264dc..d83b50d 100644
--- a/app/containers/Header.js
+++ b/app/containers/Header.js
@@ -5,7 +5,7 @@ import {
 } from '../actions/header'
 import {
   addNewNote
-} from '../actions/noteList'
+} from '../actions/note'
 
 const mapStateToProps = state => ({
   isNewNoteDisabled: state.headerReducer.isNewNoteDisabled
diff --git a/app/containers/HomeContent.js b/app/containers/HomeContent.js
new file mode 100644
index 0000000..d995b9c
--- /dev/null
+++ b/app/containers/HomeContent.js
@@ -0,0 +1,14 @@
+import { connect } from 'react-redux'
+import HomeContent from '../components/HomeContent'
+
+const mapStateToProps = state => ({
+  activeNote: state.noteReducer.activeNote
+})
+
+const mapDispatchToProps = dispatch => ({
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(HomeContent)
diff --git a/app/containers/NoteEditor.js b/app/containers/NoteEditor.js
index f791147..a7f979b 100644
--- a/app/containers/NoteEditor.js
+++ b/app/containers/NoteEditor.js
@@ -5,7 +5,6 @@ import {
 } from '../actions/noteEditor'
 
 const mapStateToProps = state => ({
-  activeNote: state.noteListReducer.activeNote,
   editorState: state.noteEditorReducer.editorState
 })
 
diff --git a/app/containers/NoteList.js b/app/containers/NoteList.js
index 9bb08e2..e21f636 100644
--- a/app/containers/NoteList.js
+++ b/app/containers/NoteList.js
@@ -3,11 +3,11 @@ import NoteList from '../components/NoteList'
 import {
   fetchAllNotes,
   setActiveNote
-} from '../actions/noteList'
+} from '../actions/note'
 
 const mapStateToProps = state => ({
-  activeNote: state.noteListReducer.activeNote,
-  notes: state.noteListReducer.notes
+  activeNote: state.noteReducer.activeNote,
+  notes: state.noteReducer.notes
 })
 
 const mapDispatchToProps = dispatch => ({
diff --git a/app/reducers/index.js b/app/reducers/index.js
index da40739..2a2335b 100644
--- a/app/reducers/index.js
+++ b/app/reducers/index.js
@@ -1,7 +1,7 @@
 import { combineReducers } from 'redux'
 import welcome from './welcome'
 import noteEditor from './noteEditor'
-import noteList from './noteList'
+import note from './note'
 import header from './header'
 
 // Creates a single root reducer out of Deer's reducers and returns an object
@@ -9,6 +9,6 @@ import header from './header'
 export default combineReducers({
   welcomeReducer: welcome,
   noteEditorReducer: noteEditor,
-  noteListReducer: noteList,
+  noteReducer: note,
   headerReducer: header
 })
diff --git a/app/reducers/noteList.js b/app/reducers/note.js
similarity index 78%
rename from app/reducers/noteList.js
rename to app/reducers/note.js
index 830d264..b236a91 100644
--- a/app/reducers/noteList.js
+++ b/app/reducers/note.js
@@ -11,7 +11,13 @@ export default (state = INITIAL_STATE, action) => {
     case ACTIONS.UPDATE_NOTE_LIST:
       return {
         ...state,
-        notes: action.payload.map(note => note.doc)
+        notes: action.payload.map(note => {
+          return {
+            id: note.doc._id,
+            content: note.doc.content,
+            isSaved: true
+          }
+        })
       }
     case ACTIONS.SET_ACTIVE_NOTE:
       return {

From 1f8282807ec31176a566dde51284fa68306931a0 Mon Sep 17 00:00:00 2001
From: Abdelrhman Ahmed <a.ahmed1026@gmail.com>
Date: Fri, 31 Aug 2018 02:49:28 +0200
Subject: [PATCH 15/21] Fixes #119: Add save button (#120)

---
 app/actions/header.js        |  3 +++
 app/actions/noteEditor.js    |  2 +-
 app/components/Header.js     | 20 ++++++++++++++----
 app/components/NoteEditor.js | 39 +++++++++++++++++++++++++++++++++---
 app/constants/actions.js     |  1 +
 app/containers/Header.js     |  3 ++-
 app/containers/NoteEditor.js | 10 +++++++--
 app/reducers/header.js       | 11 +++++++++-
 8 files changed, 77 insertions(+), 12 deletions(-)

diff --git a/app/actions/header.js b/app/actions/header.js
index 55e00f7..b807ef1 100644
--- a/app/actions/header.js
+++ b/app/actions/header.js
@@ -3,3 +3,6 @@ import { ACTIONS } from '../constants/actions'
 
 // Used for updating state of adding new note button (e.g. enabled or disabled).
 export const setNewNoteDisabled = createAction(ACTIONS.UPDATE_NEW_NOTE_STATE)
+
+// Used for updating state of save button (e.g. enabled or disabled).
+export const setSaveDisabled = createAction(ACTIONS.UPDATE_SAVE_NOTE_STATE)
diff --git a/app/actions/noteEditor.js b/app/actions/noteEditor.js
index 2568c33..9ceb377 100644
--- a/app/actions/noteEditor.js
+++ b/app/actions/noteEditor.js
@@ -2,4 +2,4 @@ import { createAction } from 'redux-actions'
 import { ACTIONS } from '../constants/actions'
 
 // Used for updating editor state.
-export const onSaveEditorState = createAction(ACTIONS.UPDATE_EDITOR_STATE)
+export const updateEditorState = createAction(ACTIONS.UPDATE_EDITOR_STATE)
diff --git a/app/components/Header.js b/app/components/Header.js
index 9324ad4..4528111 100644
--- a/app/components/Header.js
+++ b/app/components/Header.js
@@ -7,6 +7,7 @@ export default class Header extends Component {
     super()
 
     this.onAddNote = this.onAddNote.bind(this)
+    this.onSaveNote = this.onSaveNote.bind(this)
   }
 
   onAddNote () {
@@ -17,9 +18,14 @@ export default class Header extends Component {
     this.props.addNewNote()
   }
 
+  onSaveNote () { }
+
   render () {
-    let btnClassNames = 'btn btn-outline-success btn-sm'
-    if (this.props.isNewNoteDisabled) { btnClassNames += ' disabled' }
+    let newNoteBtnClass = 'btn btn-outline-success btn-sm'
+    if (this.props.isNewNoteDisabled) { newNoteBtnClass += ' disabled' }
+
+    let saveBtnClass = 'ml-2 btn btn-outline-primary btn-sm'
+    if (this.props.isSaveDisabled) { saveBtnClass += ' disabled' }
 
     return (
       <nav className='navbar sticky-top navbar-light bg-light'>
@@ -28,10 +34,15 @@ export default class Header extends Component {
           className='d-inline-block align-top' />
         <ul className='navbar-nav flex-row ml-md-auto d-none d-md-flex'>
           <li className='nav-item'>
-            <button className={btnClassNames} onClick={this.onAddNote}>
+            <button className={newNoteBtnClass} onClick={this.onAddNote}>
               New Note
             </button>
           </li>
+          <li className='nav-item'>
+            <button className={saveBtnClass} onClick={this.onSaveNote}>
+              Save
+            </button>
+          </li>
         </ul>
       </nav>
     )
@@ -41,5 +52,6 @@ export default class Header extends Component {
 Header.propTypes = {
   addNewNote: PropTypes.func.isRequired,
   setNewNoteDisabled: PropTypes.func.isRequired,
-  isNewNoteDisabled: PropTypes.bool.isRequired
+  isNewNoteDisabled: PropTypes.bool.isRequired,
+  isSaveDisabled: PropTypes.bool.isRequired
 }
diff --git a/app/components/NoteEditor.js b/app/components/NoteEditor.js
index 857d1fc..8b751fe 100644
--- a/app/components/NoteEditor.js
+++ b/app/components/NoteEditor.js
@@ -3,12 +3,43 @@ import { Editor } from 'draft-js'
 import PropTypes from 'prop-types'
 
 export default class NoteEditor extends Component {
+  constructor (props) {
+    // Initialize this using super
+    super()
+
+    this.onEditorChange = this.onEditorChange.bind(this)
+  }
+
+  onEditorChange (newEditorState) {
+    const currentContent = this.props.editorState.getCurrentContent()
+    const newContent = newEditorState.getCurrentContent()
+    if (currentContent !== newContent) {
+      // There is a change in content
+      if (newContent.hasText()) {
+        // The new content has text, so we will enable save button.
+        this.props.setSaveDisabled(false)
+      } else {
+        // The new content is empty, so we will disable new Note and save
+        // buttons.
+        this.props.setNewNoteDisabled(true)
+        this.props.setSaveDisabled(true)
+      }
+    }
+
+    this.props.updateEditorState(newEditorState)
+  }
+
+  componentWillUnmount () {
+    // Disable save button as editor will be unmounted.
+    this.props.setSaveDisabled(true)
+  }
+
   render () {
     return (
       <div className='NoteEditor'>
         <Editor
           editorState={this.props.editorState}
-          onChange={this.props.onSaveEditorState}
+          onChange={this.onEditorChange}
           placeholder='Write down your thoughts...'
         />
       </div>
@@ -17,6 +48,8 @@ export default class NoteEditor extends Component {
 }
 
 NoteEditor.propTypes = {
-  onSaveEditorState: PropTypes.func.isRequired,
-  editorState: PropTypes.object.isRequired
+  editorState: PropTypes.object.isRequired,
+  setSaveDisabled: PropTypes.func.isRequired,
+  setNewNoteDisabled: PropTypes.func.isRequired,
+  updateEditorState: PropTypes.func.isRequired
 }
diff --git a/app/constants/actions.js b/app/constants/actions.js
index 48170b1..66abb04 100644
--- a/app/constants/actions.js
+++ b/app/constants/actions.js
@@ -6,5 +6,6 @@ export const ACTIONS = {
   UPDATE_NOTE_LIST: 'UPDATE_NOTE_LIST',
   SET_ACTIVE_NOTE: 'SET_ACTIVE_NOTE',
   UPDATE_NEW_NOTE_STATE: 'UPDATE_NEW_NOTE_STATE',
+  UPDATE_SAVE_NOTE_STATE: 'UPDATE_SAVE_NOTE_STATE',
   ADD_NOTE: 'ADD_NOTE'
 }
diff --git a/app/containers/Header.js b/app/containers/Header.js
index d83b50d..960e387 100644
--- a/app/containers/Header.js
+++ b/app/containers/Header.js
@@ -8,7 +8,8 @@ import {
 } from '../actions/note'
 
 const mapStateToProps = state => ({
-  isNewNoteDisabled: state.headerReducer.isNewNoteDisabled
+  isNewNoteDisabled: state.headerReducer.isNewNoteDisabled,
+  isSaveDisabled: state.headerReducer.isSaveDisabled
 })
 
 const mapDispatchToProps = dispatch => ({
diff --git a/app/containers/NoteEditor.js b/app/containers/NoteEditor.js
index a7f979b..4fa5126 100644
--- a/app/containers/NoteEditor.js
+++ b/app/containers/NoteEditor.js
@@ -1,15 +1,21 @@
 import { connect } from 'react-redux'
 import NoteEditor from '../components/NoteEditor'
 import {
-  onSaveEditorState
+  updateEditorState
 } from '../actions/noteEditor'
+import {
+  setSaveDisabled,
+  setNewNoteDisabled
+} from '../actions/header'
 
 const mapStateToProps = state => ({
   editorState: state.noteEditorReducer.editorState
 })
 
 const mapDispatchToProps = dispatch => ({
-  onSaveEditorState: (editorState) => dispatch(onSaveEditorState(editorState))
+  updateEditorState: (editorState) => dispatch(updateEditorState(editorState)),
+  setSaveDisabled: (flag) => dispatch(setSaveDisabled(flag)),
+  setNewNoteDisabled: (flag) => dispatch(setNewNoteDisabled(flag))
 })
 
 export default connect(
diff --git a/app/reducers/header.js b/app/reducers/header.js
index c6ed3d9..3d910c4 100644
--- a/app/reducers/header.js
+++ b/app/reducers/header.js
@@ -1,7 +1,8 @@
 import { ACTIONS } from '../constants/actions'
 
 const INITIAL_STATE = {
-  isNewNoteDisabled: false
+  isNewNoteDisabled: false,
+  isSaveDisabled: true
 }
 
 export default (state = INITIAL_STATE, action) => {
@@ -14,6 +15,14 @@ export default (state = INITIAL_STATE, action) => {
         ...state,
         isNewNoteDisabled: action.payload
       }
+    case ACTIONS.UPDATE_SAVE_NOTE_STATE:
+      // Just return the state as there is no change in isSaveDisabled flag.
+      if (state.isSaveDisabled === action.payload) { return state }
+
+      return {
+        ...state,
+        isSaveDisabled: action.payload
+      }
     default:
       return state
   }

From 9bf63e32df5c8d3b4e7d5a9925ce46fa457226ce Mon Sep 17 00:00:00 2001
From: Abdelrhman Ahmed <a.ahmed1026@gmail.com>
Date: Sat, 1 Sep 2018 01:51:57 +0200
Subject: [PATCH 16/21] Fixes #121: update note title when content is changed
 (#122)

---
 app/actions/note.js          |  3 +++
 app/components/NoteEditor.js | 11 ++++++++++-
 app/components/NoteList.js   |  2 +-
 app/constants/actions.js     |  3 ++-
 app/containers/NoteEditor.js |  6 +++++-
 app/reducers/note.js         | 27 +++++++++++++++++++++++++--
 6 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/app/actions/note.js b/app/actions/note.js
index 5da7237..6d4a0ab 100644
--- a/app/actions/note.js
+++ b/app/actions/note.js
@@ -11,6 +11,9 @@ export const updateNoteList = createAction(ACTIONS.UPDATE_NOTE_LIST)
 // Used for setting the id of selected note.
 export const setActiveNote = createAction(ACTIONS.SET_ACTIVE_NOTE)
 
+// Used for updating title of active note.
+export const updateNoteTitle = createAction(ACTIONS.UPDATE_NOTE_TITLE)
+
 // Used for fetching all notes from database.
 export const fetchAllNotes = () => (dispatch, getState) => {
   fetchNotes().then((result) => {
diff --git a/app/components/NoteEditor.js b/app/components/NoteEditor.js
index 8b751fe..3141c63 100644
--- a/app/components/NoteEditor.js
+++ b/app/components/NoteEditor.js
@@ -14,6 +14,14 @@ export default class NoteEditor extends Component {
     const currentContent = this.props.editorState.getCurrentContent()
     const newContent = newEditorState.getCurrentContent()
     if (currentContent !== newContent) {
+      // We only save first 40 characters of the first non-empty line if there
+      // is a change.
+      const currentText =
+        currentContent.getPlainText().trim().split('\u000A')[0].substring(0, 40)
+      const newText =
+        newContent.getPlainText().trim().split('\u000A')[0].substring(0, 40)
+      if (currentText !== newText) { this.props.updateNoteTitle(newText) }
+
       // There is a change in content
       if (newContent.hasText()) {
         // The new content has text, so we will enable save button.
@@ -51,5 +59,6 @@ NoteEditor.propTypes = {
   editorState: PropTypes.object.isRequired,
   setSaveDisabled: PropTypes.func.isRequired,
   setNewNoteDisabled: PropTypes.func.isRequired,
-  updateEditorState: PropTypes.func.isRequired
+  updateEditorState: PropTypes.func.isRequired,
+  updateNoteTitle: PropTypes.func.isRequired
 }
diff --git a/app/components/NoteList.js b/app/components/NoteList.js
index 052fd03..308b8b3 100644
--- a/app/components/NoteList.js
+++ b/app/components/NoteList.js
@@ -29,7 +29,7 @@ export default class NoteList extends Component {
           <NoteItem
             key={index}
             id={note.id}
-            value={note.content}
+            value={note.title}
             select={this.onSelect}
             isActive={this.props.activeNote === note.id} />
         ))}
diff --git a/app/constants/actions.js b/app/constants/actions.js
index 66abb04..d47574e 100644
--- a/app/constants/actions.js
+++ b/app/constants/actions.js
@@ -7,5 +7,6 @@ export const ACTIONS = {
   SET_ACTIVE_NOTE: 'SET_ACTIVE_NOTE',
   UPDATE_NEW_NOTE_STATE: 'UPDATE_NEW_NOTE_STATE',
   UPDATE_SAVE_NOTE_STATE: 'UPDATE_SAVE_NOTE_STATE',
-  ADD_NOTE: 'ADD_NOTE'
+  ADD_NOTE: 'ADD_NOTE',
+  UPDATE_NOTE_TITLE: 'UPDATE_NOTE_TITLE'
 }
diff --git a/app/containers/NoteEditor.js b/app/containers/NoteEditor.js
index 4fa5126..f89b91e 100644
--- a/app/containers/NoteEditor.js
+++ b/app/containers/NoteEditor.js
@@ -7,6 +7,9 @@ import {
   setSaveDisabled,
   setNewNoteDisabled
 } from '../actions/header'
+import {
+  updateNoteTitle
+} from '../actions/note'
 
 const mapStateToProps = state => ({
   editorState: state.noteEditorReducer.editorState
@@ -15,7 +18,8 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
   updateEditorState: (editorState) => dispatch(updateEditorState(editorState)),
   setSaveDisabled: (flag) => dispatch(setSaveDisabled(flag)),
-  setNewNoteDisabled: (flag) => dispatch(setNewNoteDisabled(flag))
+  setNewNoteDisabled: (flag) => dispatch(setNewNoteDisabled(flag)),
+  updateNoteTitle: (content) => dispatch(updateNoteTitle(content))
 })
 
 export default connect(
diff --git a/app/reducers/note.js b/app/reducers/note.js
index b236a91..bcaf4ac 100644
--- a/app/reducers/note.js
+++ b/app/reducers/note.js
@@ -14,7 +14,7 @@ export default (state = INITIAL_STATE, action) => {
         notes: action.payload.map(note => {
           return {
             id: note.doc._id,
-            content: note.doc.content,
+            title: note.doc.content,
             isSaved: true
           }
         })
@@ -27,7 +27,7 @@ export default (state = INITIAL_STATE, action) => {
     case ACTIONS.ADD_NOTE:
       const note = {
         id: uuidv4(),
-        content: '',
+        title: '',
         isSaved: false
       }
       return {
@@ -35,6 +35,29 @@ export default (state = INITIAL_STATE, action) => {
         notes: [...state.notes, note],
         activeNote: note.id
       }
+    case ACTIONS.UPDATE_NOTE_TITLE:
+      // Just return state as there is no active note.
+      if (!state.activeNote) {
+        console.warn('UPDATE_NOTE_TITLE action is fired with empty activeNote')
+        return state
+      }
+
+      let hasListUpdated = false
+      const newTitle = action.payload
+      const newNoteList = state.notes.map(note => {
+        if (note.id === state.activeNote && note.title !== newTitle) {
+          note.title = newTitle
+          hasListUpdated = true
+        }
+        return note
+      })
+      // Just return the state if there is not a new list.
+      if (!hasListUpdated) { return state }
+
+      return {
+        ...state,
+        notes: newNoteList
+      }
     default:
       return state
   }

From 2f355ccba2311b8e6942b1b649077835dd591191 Mon Sep 17 00:00:00 2001
From: Abdelrhman Ahmed <a.ahmed1026@gmail.com>
Date: Sat, 1 Sep 2018 17:46:16 +0200
Subject: [PATCH 17/21] Fixes #123: Replace activeNote with activeNoteIndex
 (#124)

---
 app/actions/note.js           |  4 ++--
 app/components/HomeContent.js |  4 ++--
 app/components/NoteItem.js    |  4 ++--
 app/components/NoteList.js    | 14 +++++------
 app/constants/actions.js      |  2 +-
 app/containers/HomeContent.js |  2 +-
 app/containers/NoteList.js    |  6 ++---
 app/reducers/note.js          | 44 +++++++++++++++++------------------
 8 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/app/actions/note.js b/app/actions/note.js
index 6d4a0ab..ca6336a 100644
--- a/app/actions/note.js
+++ b/app/actions/note.js
@@ -8,8 +8,8 @@ export const addNewNote = createAction(ACTIONS.ADD_NOTE)
 // Used for updating noteList with fetched notes from database.
 export const updateNoteList = createAction(ACTIONS.UPDATE_NOTE_LIST)
 
-// Used for setting the id of selected note.
-export const setActiveNote = createAction(ACTIONS.SET_ACTIVE_NOTE)
+// Used for setting the index of selected note.
+export const setActiveNoteIndex = createAction(ACTIONS.SET_ACTIVE_NOTE_INDEX)
 
 // Used for updating title of active note.
 export const updateNoteTitle = createAction(ACTIONS.UPDATE_NOTE_TITLE)
diff --git a/app/components/HomeContent.js b/app/components/HomeContent.js
index f3bb4fb..b7a5855 100644
--- a/app/components/HomeContent.js
+++ b/app/components/HomeContent.js
@@ -5,7 +5,7 @@ import NoteEditor from './../containers/NoteEditor'
 export default class HomeContent extends Component {
   render () {
     // Show homeContent when no note is selected.
-    if (this.props.activeNote) { return (<NoteEditor />) }
+    if (this.props.activeNoteIndex >= 0) { return (<NoteEditor />) }
 
     return (
       <div className='center-text middle-page'>
@@ -16,5 +16,5 @@ export default class HomeContent extends Component {
 }
 
 HomeContent.propTypes = {
-  activeNote: PropTypes.string.isRequired
+  activeNoteIndex: PropTypes.number.isRequired
 }
diff --git a/app/components/NoteItem.js b/app/components/NoteItem.js
index b0d620a..77126df 100644
--- a/app/components/NoteItem.js
+++ b/app/components/NoteItem.js
@@ -10,7 +10,7 @@ export default class NoteItem extends Component {
   }
 
   onNoteClick () {
-    this.props.select(this.props.id)
+    this.props.select(this.props.index)
   }
 
   render () {
@@ -28,7 +28,7 @@ export default class NoteItem extends Component {
 }
 
 NoteItem.propTypes = {
-  id: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
   value: PropTypes.string.isRequired,
   select: PropTypes.func.isRequired,
   isActive: PropTypes.bool.isRequired
diff --git a/app/components/NoteList.js b/app/components/NoteList.js
index 308b8b3..a9a19c2 100644
--- a/app/components/NoteList.js
+++ b/app/components/NoteList.js
@@ -15,11 +15,11 @@ export default class NoteList extends Component {
     this.props.fetchAllNotes()
   }
 
-  onSelect (noteId = '') {
+  onSelect (noteIndex = -1) {
     // Do nothing as it's already selected.
-    if (this.props.activeNote === noteId) { return }
+    if (this.props.activeNoteIndex === noteIndex) { return }
 
-    this.props.setActiveNote(noteId)
+    this.props.setActiveNoteIndex(noteIndex)
   }
 
   render () {
@@ -28,10 +28,10 @@ export default class NoteList extends Component {
         {this.props.notes.map((note, index) => (
           <NoteItem
             key={index}
-            id={note.id}
+            index={index}
             value={note.title}
             select={this.onSelect}
-            isActive={this.props.activeNote === note.id} />
+            isActive={this.props.activeNoteIndex === index} />
         ))}
       </div>
     )
@@ -39,8 +39,8 @@ export default class NoteList extends Component {
 }
 
 NoteList.propTypes = {
-  activeNote: PropTypes.string.isRequired,
+  activeNoteIndex: PropTypes.number.isRequired,
   notes: PropTypes.array.isRequired,
   fetchAllNotes: PropTypes.func.isRequired,
-  setActiveNote: PropTypes.func.isRequired
+  setActiveNoteIndex: PropTypes.func.isRequired
 }
diff --git a/app/constants/actions.js b/app/constants/actions.js
index d47574e..2af35c7 100644
--- a/app/constants/actions.js
+++ b/app/constants/actions.js
@@ -4,7 +4,7 @@ export const ACTIONS = {
   UPDATE_EDITOR_STATE: 'UPDATE_EDITOR_STATE',
   FETCH_ALL_NOTES: 'FETCH_ALL_NOTES',
   UPDATE_NOTE_LIST: 'UPDATE_NOTE_LIST',
-  SET_ACTIVE_NOTE: 'SET_ACTIVE_NOTE',
+  SET_ACTIVE_NOTE_INDEX: 'SET_ACTIVE_NOTE',
   UPDATE_NEW_NOTE_STATE: 'UPDATE_NEW_NOTE_STATE',
   UPDATE_SAVE_NOTE_STATE: 'UPDATE_SAVE_NOTE_STATE',
   ADD_NOTE: 'ADD_NOTE',
diff --git a/app/containers/HomeContent.js b/app/containers/HomeContent.js
index d995b9c..4c86a82 100644
--- a/app/containers/HomeContent.js
+++ b/app/containers/HomeContent.js
@@ -2,7 +2,7 @@ import { connect } from 'react-redux'
 import HomeContent from '../components/HomeContent'
 
 const mapStateToProps = state => ({
-  activeNote: state.noteReducer.activeNote
+  activeNoteIndex: state.noteReducer.activeNoteIndex
 })
 
 const mapDispatchToProps = dispatch => ({
diff --git a/app/containers/NoteList.js b/app/containers/NoteList.js
index e21f636..6556953 100644
--- a/app/containers/NoteList.js
+++ b/app/containers/NoteList.js
@@ -2,17 +2,17 @@ import { connect } from 'react-redux'
 import NoteList from '../components/NoteList'
 import {
   fetchAllNotes,
-  setActiveNote
+  setActiveNoteIndex
 } from '../actions/note'
 
 const mapStateToProps = state => ({
-  activeNote: state.noteReducer.activeNote,
+  activeNoteIndex: state.noteReducer.activeNoteIndex,
   notes: state.noteReducer.notes
 })
 
 const mapDispatchToProps = dispatch => ({
   fetchAllNotes: () => dispatch(fetchAllNotes()),
-  setActiveNote: (noteId) => dispatch(setActiveNote(noteId))
+  setActiveNoteIndex: (noteIndex) => dispatch(setActiveNoteIndex(noteIndex))
 })
 
 export default connect(
diff --git a/app/reducers/note.js b/app/reducers/note.js
index bcaf4ac..57dea14 100644
--- a/app/reducers/note.js
+++ b/app/reducers/note.js
@@ -2,7 +2,7 @@ import uuidv4 from 'uuid/v4'
 import { ACTIONS } from '../constants/actions'
 
 const INITIAL_STATE = {
-  activeNote: '',
+  activeNoteIndex: -1,
   notes: []
 }
 
@@ -19,44 +19,44 @@ export default (state = INITIAL_STATE, action) => {
           }
         })
       }
-    case ACTIONS.SET_ACTIVE_NOTE:
+    case ACTIONS.SET_ACTIVE_NOTE_INDEX:
       return {
         ...state,
-        activeNote: action.payload
+        activeNoteIndex: action.payload
       }
     case ACTIONS.ADD_NOTE:
-      const note = {
-        id: uuidv4(),
-        title: '',
-        isSaved: false
-      }
       return {
         ...state,
-        notes: [...state.notes, note],
-        activeNote: note.id
+        notes: [...state.notes, {
+          id: uuidv4(),
+          title: '',
+          isSaved: false
+        }],
+        activeNoteIndex: state.notes.length
       }
     case ACTIONS.UPDATE_NOTE_TITLE:
       // Just return state as there is no active note.
-      if (!state.activeNote) {
-        console.warn('UPDATE_NOTE_TITLE action is fired with empty activeNote')
+      if (state.activeNoteIndex < 0 ||
+          state.activeNoteIndex >= state.notes.length) {
+        console.warn('UPDATE_NOTE_TITLE action is fired with out of range' +
+                     ' activeNoteIndex')
         return state
       }
 
-      let hasListUpdated = false
       const newTitle = action.payload
-      const newNoteList = state.notes.map(note => {
-        if (note.id === state.activeNote && note.title !== newTitle) {
-          note.title = newTitle
-          hasListUpdated = true
-        }
-        return note
-      })
+      const currentNote = Object.create(state.notes[state.activeNoteIndex])
+
       // Just return the state if there is not a new list.
-      if (!hasListUpdated) { return state }
+      if (currentNote.title === newTitle) { return state }
 
+      currentNote.title = newTitle
       return {
         ...state,
-        notes: newNoteList
+        notes: [
+          ...state.notes.slice(0, state.activeNoteIndex),
+          currentNote,
+          ...state.notes.slice(state.activeNoteIndex + 1)
+        ]
       }
     default:
       return state

From e9af1b73771658e8faf8557c6d59937a100c77d2 Mon Sep 17 00:00:00 2001
From: Abdelrhman Ahmed <a.ahmed1026@gmail.com>
Date: Mon, 3 Sep 2018 05:00:29 +0200
Subject: [PATCH 18/21] Support saving and loading note (#126)

* Move editorState to activeNoteState

* Add save modal

* Add note status modal and support note saving

* support loading note
---
 app/actions/modal.js                     |  19 ++++
 app/actions/note.js                      |  67 +++++++++++++-
 app/actions/noteEditor.js                |   5 --
 app/components/Header.js                 |  10 ++-
 app/components/Home.js                   |   4 +
 app/components/NoteEditor.js             |  15 ++--
 app/components/NoteList.js               |   7 +-
 app/components/SaveModal.js              |  47 ++++++++++
 app/components/StatusModal.js            | 108 +++++++++++++++++++++++
 app/constants/actions.js                 |   8 +-
 app/constants/noteStatus.js              |   9 ++
 app/containers/Header.js                 |   6 +-
 app/containers/NoteEditor.js             |  10 +--
 app/containers/NoteList.js               |   8 +-
 app/containers/SaveModal.js              |  26 ++++++
 app/containers/StatusModal.js            |  25 ++++++
 app/db.js                                |   7 +-
 app/reducers/index.js                    |   6 +-
 app/reducers/{noteEditor.js => modal.js} |   7 +-
 app/reducers/note.js                     |  78 +++++++++++-----
 20 files changed, 412 insertions(+), 60 deletions(-)
 create mode 100644 app/actions/modal.js
 delete mode 100644 app/actions/noteEditor.js
 create mode 100644 app/components/SaveModal.js
 create mode 100644 app/components/StatusModal.js
 create mode 100644 app/constants/noteStatus.js
 create mode 100644 app/containers/SaveModal.js
 create mode 100644 app/containers/StatusModal.js
 rename app/reducers/{noteEditor.js => modal.js} (60%)

diff --git a/app/actions/modal.js b/app/actions/modal.js
new file mode 100644
index 0000000..9ebc649
--- /dev/null
+++ b/app/actions/modal.js
@@ -0,0 +1,19 @@
+import { createAction } from 'redux-actions'
+import { ACTIONS } from '../constants/actions'
+import { NOTE_STATUS } from '../constants/noteStatus'
+import { setNoteStatus } from './note'
+
+// Used for updating visibility of save modal.
+export const toggleSaveModal = createAction(ACTIONS.TOGGLE_SAVE_MODAL)
+
+// Async method, Used for updating note status with two optional parameters
+// - withTimeOut: dispatch action after timeout or not and it's default value
+//                is true.
+// - status: the new status of the note and it's default value is NO_OPERATION.
+export const updateNoteStatus =
+  (withTimeOut = true, status = NOTE_STATUS.NO_OPERATION) =>
+    (dispatch, getState) => {
+      setTimeout(() => {
+        dispatch(setNoteStatus(status))
+      }, withTimeOut ? 1000 : 0)
+    }
diff --git a/app/actions/note.js b/app/actions/note.js
index ca6336a..6957979 100644
--- a/app/actions/note.js
+++ b/app/actions/note.js
@@ -1,6 +1,9 @@
 import { createAction } from 'redux-actions'
 import { ACTIONS } from '../constants/actions'
-import { fetchNotes } from './../db'
+import { NOTE_STATUS } from '../constants/noteStatus'
+import { addNote, fetchNotes, getNote } from './../db'
+import { convertFromRaw, convertToRaw } from 'draft-js'
+import logger from 'electron-log'
 
 // Used for adding a new note.
 export const addNewNote = createAction(ACTIONS.ADD_NOTE)
@@ -11,10 +14,23 @@ export const updateNoteList = createAction(ACTIONS.UPDATE_NOTE_LIST)
 // Used for setting the index of selected note.
 export const setActiveNoteIndex = createAction(ACTIONS.SET_ACTIVE_NOTE_INDEX)
 
-// Used for updating title of active note.
+// Used for updating title of the active note.
 export const updateNoteTitle = createAction(ACTIONS.UPDATE_NOTE_TITLE)
 
-// Used for fetching all notes from database.
+// Used for updating editor's state of the active note.
+export const updateActiveNoteState =
+  createAction(ACTIONS.UPDATE_ACTIVE_NOTE_STATE)
+
+// Used for updating rev of the active note.
+export const updateNoteRev = createAction(ACTIONS.UPDATE_NOTE_REV)
+
+// Used for updating status of the active note.
+export const setNoteStatus = createAction(ACTIONS.SET_NOTE_STATUS)
+
+// Used for updating status of the active note.
+export const loadNoteContent = createAction(ACTIONS.LOAD_NOTE_CONTENT)
+
+// Async method, Used for fetching all notes from database.
 export const fetchAllNotes = () => (dispatch, getState) => {
   fetchNotes().then((result) => {
     // Update only if there are notes.
@@ -22,6 +38,49 @@ export const fetchAllNotes = () => (dispatch, getState) => {
       dispatch(updateNoteList(result.rows))
     }
   }).catch((err) => {
-    console.error(err)
+    logger.error('Unable to fetch notes ' + err)
+  })
+}
+
+// Helper method, Used for setting noteStatus to NOTE_SAVE_FAIL.
+const _noteSaveFailed = (dispatch, err = null) => {
+  dispatch(setNoteStatus(NOTE_STATUS.NOTE_SAVE_FAIL))
+  logger.error('Unable to save note ' + err)
+}
+
+// Async method, Used for saving note (new or update) to database and updates
+// noteStatus.
+export const saveNote = () => (dispatch, getState) => {
+  dispatch(setNoteStatus(NOTE_STATUS.SAVING_NOTE))
+  const state = getState().noteReducer
+  const noteIndex = state.activeNoteIndex
+  const doc = {
+    _id: state.notes[noteIndex].id,
+    _rev: state.notes[noteIndex].rev,
+    title: state.notes[noteIndex].title,
+    content: convertToRaw(state.activeNoteState.getCurrentContent())
+  }
+  addNote(doc).then((result) => {
+    if (result.ok) {
+      // Update note rev to avoid conflicts while the next time for saving
+      // this note.
+      dispatch(updateNoteRev(result.rev))
+
+      dispatch(setNoteStatus(NOTE_STATUS.NOTE_SAVE_SUCCESS))
+    } else {
+      _noteSaveFailed(dispatch)
+    }
+  }).catch((err) => _noteSaveFailed(dispatch, err))
+}
+
+// Async method, Used for getting note content from database and loads it.
+export const fetchNote = (noteIndex) => (dispatch, getState) => {
+  const state = getState().noteReducer
+  getNote(state.notes[noteIndex].id).then((result) => {
+    dispatch(loadNoteContent(convertFromRaw(result.content)))
+    dispatch(setNoteStatus(NOTE_STATUS.NOTE_LOAD_SUCCESS))
+  }).catch((err) => {
+    dispatch(setNoteStatus(NOTE_STATUS.NOTE_LOAD_FAIL))
+    logger.error('Unable to get note ' + err)
   })
 }
diff --git a/app/actions/noteEditor.js b/app/actions/noteEditor.js
deleted file mode 100644
index 9ceb377..0000000
--- a/app/actions/noteEditor.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createAction } from 'redux-actions'
-import { ACTIONS } from '../constants/actions'
-
-// Used for updating editor state.
-export const updateEditorState = createAction(ACTIONS.UPDATE_EDITOR_STATE)
diff --git a/app/components/Header.js b/app/components/Header.js
index 4528111..dfce39a 100644
--- a/app/components/Header.js
+++ b/app/components/Header.js
@@ -18,7 +18,12 @@ export default class Header extends Component {
     this.props.addNewNote()
   }
 
-  onSaveNote () { }
+  onSaveNote () {
+    // Do not proceed as button is disabled
+    if (this.props.isSaveDisabled) return
+
+    this.props.toggleSaveModal()
+  }
 
   render () {
     let newNoteBtnClass = 'btn btn-outline-success btn-sm'
@@ -53,5 +58,6 @@ Header.propTypes = {
   addNewNote: PropTypes.func.isRequired,
   setNewNoteDisabled: PropTypes.func.isRequired,
   isNewNoteDisabled: PropTypes.bool.isRequired,
-  isSaveDisabled: PropTypes.bool.isRequired
+  isSaveDisabled: PropTypes.bool.isRequired,
+  toggleSaveModal: PropTypes.func.isRequired
 }
diff --git a/app/components/Home.js b/app/components/Home.js
index 2de01f6..b5cb78e 100644
--- a/app/components/Home.js
+++ b/app/components/Home.js
@@ -3,6 +3,8 @@ import { Redirect } from 'react-router-dom'
 import Header from './../containers/Header'
 import NoteList from './../containers/NoteList'
 import HomeContent from './../containers/HomeContent'
+import SaveModal from './../containers/SaveModal'
+import StatusModal from './../containers/StatusModal'
 import {
   checkRedirectToWelcomePage,
   setNotFirstTimeFlag
@@ -27,6 +29,8 @@ export default () => {
           <HomeContent />
         </div>
       </div>
+      <SaveModal />
+      <StatusModal />
     </div>
   )
 }
diff --git a/app/components/NoteEditor.js b/app/components/NoteEditor.js
index 3141c63..69aef21 100644
--- a/app/components/NoteEditor.js
+++ b/app/components/NoteEditor.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Editor } from 'draft-js'
+import { Editor, EditorState } from 'draft-js'
 import PropTypes from 'prop-types'
 
 export default class NoteEditor extends Component {
@@ -11,7 +11,7 @@ export default class NoteEditor extends Component {
   }
 
   onEditorChange (newEditorState) {
-    const currentContent = this.props.editorState.getCurrentContent()
+    const currentContent = this.props.activeNoteState.getCurrentContent()
     const newContent = newEditorState.getCurrentContent()
     if (currentContent !== newContent) {
       // We only save first 40 characters of the first non-empty line if there
@@ -23,7 +23,7 @@ export default class NoteEditor extends Component {
       if (currentText !== newText) { this.props.updateNoteTitle(newText) }
 
       // There is a change in content
-      if (newContent.hasText()) {
+      if (newContent.hasText() && newText.trim()) {
         // The new content has text, so we will enable save button.
         this.props.setSaveDisabled(false)
       } else {
@@ -34,19 +34,20 @@ export default class NoteEditor extends Component {
       }
     }
 
-    this.props.updateEditorState(newEditorState)
+    this.props.updateActiveNoteState(newEditorState)
   }
 
   componentWillUnmount () {
     // Disable save button as editor will be unmounted.
     this.props.setSaveDisabled(true)
+    this.props.updateActiveNoteState(EditorState.createEmpty())
   }
 
   render () {
     return (
       <div className='NoteEditor'>
         <Editor
-          editorState={this.props.editorState}
+          editorState={this.props.activeNoteState}
           onChange={this.onEditorChange}
           placeholder='Write down your thoughts...'
         />
@@ -56,9 +57,9 @@ export default class NoteEditor extends Component {
 }
 
 NoteEditor.propTypes = {
-  editorState: PropTypes.object.isRequired,
+  activeNoteState: PropTypes.object.isRequired,
   setSaveDisabled: PropTypes.func.isRequired,
   setNewNoteDisabled: PropTypes.func.isRequired,
-  updateEditorState: PropTypes.func.isRequired,
+  updateActiveNoteState: PropTypes.func.isRequired,
   updateNoteTitle: PropTypes.func.isRequired
 }
diff --git a/app/components/NoteList.js b/app/components/NoteList.js
index a9a19c2..0b6f6bf 100644
--- a/app/components/NoteList.js
+++ b/app/components/NoteList.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import NoteItem from './NoteItem'
+import { NOTE_STATUS } from '../constants/noteStatus'
 
 export default class NoteList extends Component {
   constructor (props) {
@@ -20,6 +21,8 @@ export default class NoteList extends Component {
     if (this.props.activeNoteIndex === noteIndex) { return }
 
     this.props.setActiveNoteIndex(noteIndex)
+    this.props.setNoteStatus(NOTE_STATUS.LOADING_NOTE)
+    this.props.fetchNote(noteIndex)
   }
 
   render () {
@@ -42,5 +45,7 @@ NoteList.propTypes = {
   activeNoteIndex: PropTypes.number.isRequired,
   notes: PropTypes.array.isRequired,
   fetchAllNotes: PropTypes.func.isRequired,
-  setActiveNoteIndex: PropTypes.func.isRequired
+  fetchNote: PropTypes.func.isRequired,
+  setActiveNoteIndex: PropTypes.func.isRequired,
+  setNoteStatus: PropTypes.func.isRequired
 }
diff --git a/app/components/SaveModal.js b/app/components/SaveModal.js
new file mode 100644
index 0000000..7d6e1b9
--- /dev/null
+++ b/app/components/SaveModal.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Modal, ModalBody, ModalFooter } from 'reactstrap'
+
+export default class SaveModal extends Component {
+  constructor (props) {
+    // Initialize this using super
+    super()
+
+    this.onSaveNote = this.onSaveNote.bind(this)
+  }
+
+  onSaveNote () {
+    this.props.setSaveDisabled(true)
+    this.props.toggleSaveModal()
+    this.props.saveNote()
+  }
+
+  render () {
+    return (
+      <Modal isOpen={this.props.showSaveModal}>
+        <ModalBody>
+            Do you want to save this note?
+        </ModalBody>
+        <ModalFooter>
+          <button
+            className='ml-2 btn btn-outline-success btn-sm'
+            onClick={this.onSaveNote}>
+             Yes
+          </button>
+          <button
+            className='ml-2 btn btn-outline-danger btn-sm'
+            onClick={this.props.toggleSaveModal}>
+             No
+          </button>
+        </ModalFooter>
+      </Modal>
+    )
+  }
+}
+
+SaveModal.propTypes = {
+  showSaveModal: PropTypes.bool.isRequired,
+  toggleSaveModal: PropTypes.func.isRequired,
+  setSaveDisabled: PropTypes.func.isRequired,
+  saveNote: PropTypes.func.isRequired
+}
diff --git a/app/components/StatusModal.js b/app/components/StatusModal.js
new file mode 100644
index 0000000..90710e2
--- /dev/null
+++ b/app/components/StatusModal.js
@@ -0,0 +1,108 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Modal, ModalBody, ModalFooter } from 'reactstrap'
+import { NOTE_STATUS } from '../constants/noteStatus'
+
+export default class StatusModal extends Component {
+  constructor (props) {
+    // Initialize this using super
+    super()
+
+    this._getModalConfig = this._getModalConfig.bind(this)
+    this.onSaveFail = this.onSaveFail.bind(this)
+    this.onLoadFail = this.onLoadFail.bind(this)
+  }
+
+  componentDidUpdate () {
+    switch (this.props.noteStatus) {
+      case NOTE_STATUS.NOTE_SAVE_SUCCESS:
+        this.props.setSaveDisabled(true)
+        this.props.setNewNoteDisabled(false)
+        this.props.updateNoteStatus()
+        break
+      case NOTE_STATUS.NOTE_LOAD_SUCCESS:
+        this.props.updateNoteStatus()
+        break
+      default:
+        break
+    }
+  }
+
+  // Called when saving note is failed.
+  onSaveFail () {
+    this.props.setSaveDisabled(false)
+    this.props.updateNoteStatus(false)
+  }
+
+  // Called when loading note is failed.
+  onLoadFail () {
+    this.props.updateNoteStatus(false)
+  }
+
+  _getModalConfig () {
+    // This modal is shown when any operation happens.
+    let showModal =
+      this.props.noteStatus !== NOTE_STATUS.NO_OPERATION
+
+    let modalBody = ''
+    let callBack = ''
+    let showFooter = false
+    switch (this.props.noteStatus) {
+      case NOTE_STATUS.SAVING_NOTE:
+        modalBody = 'Saving note...'
+        break
+      case NOTE_STATUS.NOTE_SAVE_SUCCESS:
+        modalBody = 'Note saved successfully.'
+        break
+      case NOTE_STATUS.NOTE_SAVE_FAIL:
+        modalBody = 'Unable to save note.'
+        showFooter = true
+        callBack = this.onSaveFail
+        break
+      case NOTE_STATUS.LOADING_NOTE:
+        modalBody = 'Loading note...'
+        break
+      case NOTE_STATUS.NOTE_LOAD_SUCCESS:
+        modalBody = 'Note loaded successfully.'
+        break
+      case NOTE_STATUS.NOTE_LOAD_FAIL:
+        modalBody = 'Unable to load note.'
+        showFooter = true
+        callBack = this.onLoadFail
+        break
+      default:
+        break
+    }
+    return {
+      showModal: showModal,
+      modalBody: modalBody,
+      callBack: callBack,
+      showFooter: showFooter
+    }
+  }
+
+  render () {
+    const modalConfig = this._getModalConfig()
+    return (
+      <Modal isOpen={modalConfig.showModal}>
+        <ModalBody className='center-text font-italic'>
+          {modalConfig.modalBody}
+        </ModalBody>
+        {modalConfig.showFooter ? <ModalFooter>
+          <button
+            className='ml-2 btn btn-outline-danger btn-sm'
+            onClick={modalConfig.callBack}>
+             Ok
+          </button>
+        </ModalFooter> : ''}
+      </Modal>
+    )
+  }
+}
+
+StatusModal.propTypes = {
+  noteStatus: PropTypes.string.isRequired,
+  updateNoteStatus: PropTypes.func.isRequired,
+  setSaveDisabled: PropTypes.func.isRequired,
+  setNewNoteDisabled: PropTypes.func.isRequired
+}
diff --git a/app/constants/actions.js b/app/constants/actions.js
index 2af35c7..e02cdb5 100644
--- a/app/constants/actions.js
+++ b/app/constants/actions.js
@@ -1,12 +1,16 @@
 export const ACTIONS = {
   GET_NEXT_LANG: 'SET_NEXT_LANG',
   TOGGLE_FADE: 'TOGGLE_FADE',
-  UPDATE_EDITOR_STATE: 'UPDATE_EDITOR_STATE',
   FETCH_ALL_NOTES: 'FETCH_ALL_NOTES',
   UPDATE_NOTE_LIST: 'UPDATE_NOTE_LIST',
   SET_ACTIVE_NOTE_INDEX: 'SET_ACTIVE_NOTE',
   UPDATE_NEW_NOTE_STATE: 'UPDATE_NEW_NOTE_STATE',
   UPDATE_SAVE_NOTE_STATE: 'UPDATE_SAVE_NOTE_STATE',
   ADD_NOTE: 'ADD_NOTE',
-  UPDATE_NOTE_TITLE: 'UPDATE_NOTE_TITLE'
+  UPDATE_NOTE_TITLE: 'UPDATE_NOTE_TITLE',
+  UPDATE_ACTIVE_NOTE_STATE: 'UPDATE_ACTIVE_NOTE_STATE',
+  TOGGLE_SAVE_MODAL: 'TOGGLE_SAVE_MODAL',
+  SET_NOTE_STATUS: 'SET_NOTE_STATUS',
+  UPDATE_NOTE_REV: 'UPDATE_NOTE_REV',
+  LOAD_NOTE_CONTENT: 'LOAD_NOTE_CONTENT'
 }
diff --git a/app/constants/noteStatus.js b/app/constants/noteStatus.js
new file mode 100644
index 0000000..0e68eca
--- /dev/null
+++ b/app/constants/noteStatus.js
@@ -0,0 +1,9 @@
+export const NOTE_STATUS = {
+  NO_OPERATION: 'NO_OPERATION',
+  SAVING_NOTE: 'SAVING_NOTE',
+  NOTE_SAVE_SUCCESS: 'NOTE_SAVE_SUCCESS',
+  NOTE_SAVE_FAIL: 'NOTE_SAVE_FAIL',
+  LOADING_NOTE: 'LOADING_NOTE',
+  NOTE_LOAD_SUCCESS: 'NOTE_LOAD_SUCCESS',
+  NOTE_LOAD_FAIL: 'NOTE_LOAD_FAIL'
+}
diff --git a/app/containers/Header.js b/app/containers/Header.js
index 960e387..a93c462 100644
--- a/app/containers/Header.js
+++ b/app/containers/Header.js
@@ -6,6 +6,9 @@ import {
 import {
   addNewNote
 } from '../actions/note'
+import {
+  toggleSaveModal
+} from '../actions/modal'
 
 const mapStateToProps = state => ({
   isNewNoteDisabled: state.headerReducer.isNewNoteDisabled,
@@ -14,7 +17,8 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   addNewNote: () => dispatch(addNewNote()),
-  setNewNoteDisabled: (flag) => dispatch(setNewNoteDisabled(flag))
+  setNewNoteDisabled: (flag) => dispatch(setNewNoteDisabled(flag)),
+  toggleSaveModal: () => dispatch(toggleSaveModal())
 })
 
 export default connect(
diff --git a/app/containers/NoteEditor.js b/app/containers/NoteEditor.js
index f89b91e..8b12f4f 100644
--- a/app/containers/NoteEditor.js
+++ b/app/containers/NoteEditor.js
@@ -1,22 +1,20 @@
 import { connect } from 'react-redux'
 import NoteEditor from '../components/NoteEditor'
-import {
-  updateEditorState
-} from '../actions/noteEditor'
 import {
   setSaveDisabled,
   setNewNoteDisabled
 } from '../actions/header'
 import {
-  updateNoteTitle
+  updateNoteTitle,
+  updateActiveNoteState
 } from '../actions/note'
 
 const mapStateToProps = state => ({
-  editorState: state.noteEditorReducer.editorState
+  activeNoteState: state.noteReducer.activeNoteState
 })
 
 const mapDispatchToProps = dispatch => ({
-  updateEditorState: (editorState) => dispatch(updateEditorState(editorState)),
+  updateActiveNoteState: (state) => dispatch(updateActiveNoteState(state)),
   setSaveDisabled: (flag) => dispatch(setSaveDisabled(flag)),
   setNewNoteDisabled: (flag) => dispatch(setNewNoteDisabled(flag)),
   updateNoteTitle: (content) => dispatch(updateNoteTitle(content))
diff --git a/app/containers/NoteList.js b/app/containers/NoteList.js
index 6556953..4242566 100644
--- a/app/containers/NoteList.js
+++ b/app/containers/NoteList.js
@@ -2,7 +2,9 @@ import { connect } from 'react-redux'
 import NoteList from '../components/NoteList'
 import {
   fetchAllNotes,
-  setActiveNoteIndex
+  setActiveNoteIndex,
+  setNoteStatus,
+  fetchNote
 } from '../actions/note'
 
 const mapStateToProps = state => ({
@@ -12,7 +14,9 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   fetchAllNotes: () => dispatch(fetchAllNotes()),
-  setActiveNoteIndex: (noteIndex) => dispatch(setActiveNoteIndex(noteIndex))
+  fetchNote: (noteIndex) => dispatch(fetchNote(noteIndex)),
+  setActiveNoteIndex: (noteIndex) => dispatch(setActiveNoteIndex(noteIndex)),
+  setNoteStatus: (status) => dispatch(setNoteStatus(status))
 })
 
 export default connect(
diff --git a/app/containers/SaveModal.js b/app/containers/SaveModal.js
new file mode 100644
index 0000000..cd3fa22
--- /dev/null
+++ b/app/containers/SaveModal.js
@@ -0,0 +1,26 @@
+import { connect } from 'react-redux'
+import SaveModal from '../components/SaveModal'
+import {
+  toggleSaveModal
+} from '../actions/modal'
+import {
+  setSaveDisabled
+} from '../actions/header'
+import {
+  saveNote
+} from '../actions/note'
+
+const mapStateToProps = state => ({
+  showSaveModal: state.modalReducer.showSaveModal
+})
+
+const mapDispatchToProps = dispatch => ({
+  toggleSaveModal: () => dispatch(toggleSaveModal()),
+  setSaveDisabled: (flag) => dispatch(setSaveDisabled(flag)),
+  saveNote: () => dispatch(saveNote())
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(SaveModal)
diff --git a/app/containers/StatusModal.js b/app/containers/StatusModal.js
new file mode 100644
index 0000000..fbf3f21
--- /dev/null
+++ b/app/containers/StatusModal.js
@@ -0,0 +1,25 @@
+import { connect } from 'react-redux'
+import StatusModal from '../components/StatusModal'
+import {
+  updateNoteStatus
+} from '../actions/modal'
+import {
+  setSaveDisabled,
+  setNewNoteDisabled
+} from '../actions/header'
+
+const mapStateToProps = state => ({
+  noteStatus: state.noteReducer.noteStatus
+})
+
+const mapDispatchToProps = dispatch => ({
+  updateNoteStatus: (withTimeOut, status) =>
+    dispatch(updateNoteStatus(withTimeOut, status)),
+  setSaveDisabled: (flag) => dispatch(setSaveDisabled(flag)),
+  setNewNoteDisabled: (flag) => dispatch(setNewNoteDisabled(flag))
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(StatusModal)
diff --git a/app/db.js b/app/db.js
index b6b1166..3b3c037 100644
--- a/app/db.js
+++ b/app/db.js
@@ -11,7 +11,12 @@ export const fetchNotes = () => {
   })
 }
 
-// Adds new note to database then fetches
+// Adds / Updates a note to database.
 export const addNote = (doc) => {
   return notesDB.put(doc)
 }
+
+// Gets a note from database using its ID.
+export const getNote = (noteId) => {
+  return notesDB.get(noteId)
+}
diff --git a/app/reducers/index.js b/app/reducers/index.js
index 2a2335b..390f255 100644
--- a/app/reducers/index.js
+++ b/app/reducers/index.js
@@ -1,14 +1,14 @@
 import { combineReducers } from 'redux'
 import welcome from './welcome'
-import noteEditor from './noteEditor'
 import note from './note'
 import header from './header'
+import modal from './modal'
 
 // Creates a single root reducer out of Deer's reducers and returns an object
 // whose values are reducing functions with keys passed.
 export default combineReducers({
   welcomeReducer: welcome,
-  noteEditorReducer: noteEditor,
   noteReducer: note,
-  headerReducer: header
+  headerReducer: header,
+  modalReducer: modal
 })
diff --git a/app/reducers/noteEditor.js b/app/reducers/modal.js
similarity index 60%
rename from app/reducers/noteEditor.js
rename to app/reducers/modal.js
index 58cb356..20155ec 100644
--- a/app/reducers/noteEditor.js
+++ b/app/reducers/modal.js
@@ -1,16 +1,15 @@
 import { ACTIONS } from '../constants/actions'
-import { EditorState } from 'draft-js'
 
 const INITIAL_STATE = {
-  editorState: EditorState.createEmpty()
+  showSaveModal: false
 }
 
 export default (state = INITIAL_STATE, action) => {
   switch (action.type) {
-    case ACTIONS.UPDATE_EDITOR_STATE:
+    case ACTIONS.TOGGLE_SAVE_MODAL:
       return {
         ...state,
-        editorState: action.payload
+        showSaveModal: !state.showSaveModal
       }
     default:
       return state
diff --git a/app/reducers/note.js b/app/reducers/note.js
index 57dea14..3bb1869 100644
--- a/app/reducers/note.js
+++ b/app/reducers/note.js
@@ -1,11 +1,44 @@
 import uuidv4 from 'uuid/v4'
+import { EditorState } from 'draft-js'
 import { ACTIONS } from '../constants/actions'
+import { NOTE_STATUS } from '../constants/noteStatus'
+import logger from 'electron-log'
 
 const INITIAL_STATE = {
   activeNoteIndex: -1,
+  activeNoteState: EditorState.createEmpty(),
+  noteStatus: NOTE_STATUS.NO_OPERATION,
   notes: []
 }
 
+// Helper method, Updates a field with a newValue of an element in notes array
+// without altering provided state if there is a change in value, otherwise
+// returns provided state.
+const _updateNoteEntry = (state, field, newValue) => {
+  // Just return state as there is no active note.
+  if (state.activeNoteIndex < 0 ||
+      state.activeNoteIndex >= state.notes.length) {
+    logger.warn('UPDATE_NOTE_TITLE action is fired with out of range' +
+                 ' activeNoteIndex')
+    return state
+  }
+
+  const currentNote = Object.create(state.notes[state.activeNoteIndex])
+
+  // Just return the state if there is not a change.
+  if (currentNote[field] === newValue) { return state }
+
+  currentNote[field] = newValue
+  return {
+    ...state,
+    notes: [
+      ...state.notes.slice(0, state.activeNoteIndex),
+      currentNote,
+      ...state.notes.slice(state.activeNoteIndex + 1)
+    ]
+  }
+}
+
 export default (state = INITIAL_STATE, action) => {
   switch (action.type) {
     case ACTIONS.UPDATE_NOTE_LIST:
@@ -14,8 +47,8 @@ export default (state = INITIAL_STATE, action) => {
         notes: action.payload.map(note => {
           return {
             id: note.doc._id,
-            title: note.doc.content,
-            isSaved: true
+            rev: note.doc._rev,
+            title: note.doc.title
           }
         })
       }
@@ -29,34 +62,35 @@ export default (state = INITIAL_STATE, action) => {
         ...state,
         notes: [...state.notes, {
           id: uuidv4(),
-          title: '',
-          isSaved: false
+          rev: '',
+          title: ''
         }],
-        activeNoteIndex: state.notes.length
+        activeNoteIndex: state.notes.length,
+        activeNoteState: EditorState.createEmpty()
       }
     case ACTIONS.UPDATE_NOTE_TITLE:
-      // Just return state as there is no active note.
-      if (state.activeNoteIndex < 0 ||
-          state.activeNoteIndex >= state.notes.length) {
-        console.warn('UPDATE_NOTE_TITLE action is fired with out of range' +
-                     ' activeNoteIndex')
+      return _updateNoteEntry(state, 'title', action.payload)
+    case ACTIONS.UPDATE_NOTE_REV:
+      return _updateNoteEntry(state, 'rev', action.payload)
+    case ACTIONS.UPDATE_ACTIVE_NOTE_STATE:
+      return {
+        ...state,
+        activeNoteState: action.payload
+      }
+    case ACTIONS.SET_NOTE_STATUS:
+      if (!NOTE_STATUS.hasOwnProperty(action.payload)) {
+        logger.warn('Trying to set unsupported noteStatus')
         return state
       }
 
-      const newTitle = action.payload
-      const currentNote = Object.create(state.notes[state.activeNoteIndex])
-
-      // Just return the state if there is not a new list.
-      if (currentNote.title === newTitle) { return state }
-
-      currentNote.title = newTitle
       return {
         ...state,
-        notes: [
-          ...state.notes.slice(0, state.activeNoteIndex),
-          currentNote,
-          ...state.notes.slice(state.activeNoteIndex + 1)
-        ]
+        noteStatus: action.payload
+      }
+    case ACTIONS.LOAD_NOTE_CONTENT:
+      return {
+        ...state,
+        activeNoteState: EditorState.createWithContent(action.payload)
       }
     default:
       return state

From 65ccb17225e51494522be3d3bd42b83187772ab0 Mon Sep 17 00:00:00 2001
From: Abdelrhman Ahmed <a.ahmed1026@gmail.com>
Date: Sun, 16 Sep 2018 10:39:32 +0200
Subject: [PATCH 19/21] Fixes #127: support deleting note (#128)

---
 app/actions/header.js         |  3 ++
 app/actions/modal.js          |  2 +-
 app/actions/note.js           | 29 ++++++++++--
 app/components/Header.js      | 22 +++++++++-
 app/components/Home.js        |  4 +-
 app/components/NoteEditor.js  |  9 +++-
 app/components/NoteList.js    |  5 +--
 app/components/SaveModal.js   | 47 --------------------
 app/components/StatusModal.js | 23 +++++++++-
 app/components/YesNoModal.js  | 83 +++++++++++++++++++++++++++++++++++
 app/constants/actions.js      |  8 +++-
 app/constants/noteStatus.js   |  5 ++-
 app/containers/Header.js      |  7 +--
 app/containers/NoteEditor.js  |  4 +-
 app/containers/NoteList.js    |  6 +--
 app/containers/SaveModal.js   | 26 -----------
 app/containers/StatusModal.js |  6 ++-
 app/containers/YesNoModal.js  | 31 +++++++++++++
 app/db.js                     |  5 +++
 app/reducers/header.js        | 31 ++++++-------
 app/reducers/modal.js         | 12 ++++-
 app/reducers/note.js          |  9 +++-
 22 files changed, 258 insertions(+), 119 deletions(-)
 delete mode 100644 app/components/SaveModal.js
 create mode 100644 app/components/YesNoModal.js
 delete mode 100644 app/containers/SaveModal.js
 create mode 100644 app/containers/YesNoModal.js

diff --git a/app/actions/header.js b/app/actions/header.js
index b807ef1..2ee7430 100644
--- a/app/actions/header.js
+++ b/app/actions/header.js
@@ -6,3 +6,6 @@ export const setNewNoteDisabled = createAction(ACTIONS.UPDATE_NEW_NOTE_STATE)
 
 // Used for updating state of save button (e.g. enabled or disabled).
 export const setSaveDisabled = createAction(ACTIONS.UPDATE_SAVE_NOTE_STATE)
+
+// Used for updating state of deleteing note button (e.g. enabled or disabled).
+export const setDeleteDisabled = createAction(ACTIONS.UPDATE_DELETE_NOTE_STATE)
diff --git a/app/actions/modal.js b/app/actions/modal.js
index 9ebc649..b8106bb 100644
--- a/app/actions/modal.js
+++ b/app/actions/modal.js
@@ -4,7 +4,7 @@ import { NOTE_STATUS } from '../constants/noteStatus'
 import { setNoteStatus } from './note'
 
 // Used for updating visibility of save modal.
-export const toggleSaveModal = createAction(ACTIONS.TOGGLE_SAVE_MODAL)
+export const toggleYesNoModal = createAction(ACTIONS.TOGGLE_SAVE_MODAL)
 
 // Async method, Used for updating note status with two optional parameters
 // - withTimeOut: dispatch action after timeout or not and it's default value
diff --git a/app/actions/note.js b/app/actions/note.js
index 6957979..ae82ac3 100644
--- a/app/actions/note.js
+++ b/app/actions/note.js
@@ -1,7 +1,7 @@
 import { createAction } from 'redux-actions'
 import { ACTIONS } from '../constants/actions'
 import { NOTE_STATUS } from '../constants/noteStatus'
-import { addNote, fetchNotes, getNote } from './../db'
+import { addNote, fetchNotes, getNote, removeNote } from './../db'
 import { convertFromRaw, convertToRaw } from 'draft-js'
 import logger from 'electron-log'
 
@@ -30,6 +30,9 @@ export const setNoteStatus = createAction(ACTIONS.SET_NOTE_STATUS)
 // Used for updating status of the active note.
 export const loadNoteContent = createAction(ACTIONS.LOAD_NOTE_CONTENT)
 
+// Used for deleting a note from noteList.
+export const deleteNoteFromList = createAction(ACTIONS.DELETE_NOTE_FROM_LIST)
+
 // Async method, Used for fetching all notes from database.
 export const fetchAllNotes = () => (dispatch, getState) => {
   fetchNotes().then((result) => {
@@ -73,9 +76,12 @@ export const saveNote = () => (dispatch, getState) => {
   }).catch((err) => _noteSaveFailed(dispatch, err))
 }
 
-// Async method, Used for getting note content from database and loads it.
-export const fetchNote = (noteIndex) => (dispatch, getState) => {
+// Async method, Used for getting active note content from database and loads it.
+export const fetchNote = () => (dispatch, getState) => {
+  setNoteStatus(NOTE_STATUS.LOADING_NOTE)
+
   const state = getState().noteReducer
+  const noteIndex = state.activeNoteIndex
   getNote(state.notes[noteIndex].id).then((result) => {
     dispatch(loadNoteContent(convertFromRaw(result.content)))
     dispatch(setNoteStatus(NOTE_STATUS.NOTE_LOAD_SUCCESS))
@@ -84,3 +90,20 @@ export const fetchNote = (noteIndex) => (dispatch, getState) => {
     logger.error('Unable to get note ' + err)
   })
 }
+
+// Async method, Used for removing active note from database.
+export const deleteNote = () => (dispatch, getState) => {
+  setNoteStatus(NOTE_STATUS.DELETING_NOTE)
+
+  const state = getState().noteReducer
+  const noteIndex = state.activeNoteIndex
+  removeNote(state.notes[noteIndex].id,
+    state.notes[noteIndex].rev).then((result) => {
+    dispatch(deleteNoteFromList(noteIndex))
+    dispatch(setActiveNoteIndex(ACTIONS.NOT_SELECTED_NOTE))
+    dispatch(setNoteStatus(NOTE_STATUS.NOTE_DELETE_SUCCESS))
+  }).catch((err) => {
+    dispatch(setNoteStatus(NOTE_STATUS.NOTE_DELETE_FAIL))
+    logger.error('Unable to remove note ' + err)
+  })
+}
diff --git a/app/components/Header.js b/app/components/Header.js
index dfce39a..63a4567 100644
--- a/app/components/Header.js
+++ b/app/components/Header.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { ACTIONS } from '../constants/actions'
 
 export default class Header extends Component {
   constructor (props) {
@@ -8,6 +9,7 @@ export default class Header extends Component {
 
     this.onAddNote = this.onAddNote.bind(this)
     this.onSaveNote = this.onSaveNote.bind(this)
+    this.onDeleteNote = this.onDeleteNote.bind(this)
   }
 
   onAddNote () {
@@ -22,7 +24,14 @@ export default class Header extends Component {
     // Do not proceed as button is disabled
     if (this.props.isSaveDisabled) return
 
-    this.props.toggleSaveModal()
+    this.props.toggleYesNoModal(ACTIONS.SAVE_NOTE)
+  }
+
+  onDeleteNote () {
+    // Do not proceed as button is disabled
+    if (this.props.isDeleteDisabled) return
+
+    this.props.toggleYesNoModal(ACTIONS.DELETE_NOTE)
   }
 
   render () {
@@ -32,6 +41,9 @@ export default class Header extends Component {
     let saveBtnClass = 'ml-2 btn btn-outline-primary btn-sm'
     if (this.props.isSaveDisabled) { saveBtnClass += ' disabled' }
 
+    let deleteBtnClass = 'ml-2 btn btn-outline-danger btn-sm'
+    if (this.props.isDeleteDisabled) { deleteBtnClass += ' disabled' }
+
     return (
       <nav className='navbar sticky-top navbar-light bg-light'>
         <img
@@ -48,6 +60,11 @@ export default class Header extends Component {
               Save
             </button>
           </li>
+          <li className='nav-item'>
+            <button className={deleteBtnClass} onClick={this.onDeleteNote}>
+              Delete
+            </button>
+          </li>
         </ul>
       </nav>
     )
@@ -59,5 +76,6 @@ Header.propTypes = {
   setNewNoteDisabled: PropTypes.func.isRequired,
   isNewNoteDisabled: PropTypes.bool.isRequired,
   isSaveDisabled: PropTypes.bool.isRequired,
-  toggleSaveModal: PropTypes.func.isRequired
+  isDeleteDisabled: PropTypes.bool.isRequired,
+  toggleYesNoModal: PropTypes.func.isRequired
 }
diff --git a/app/components/Home.js b/app/components/Home.js
index b5cb78e..28f15af 100644
--- a/app/components/Home.js
+++ b/app/components/Home.js
@@ -3,7 +3,7 @@ import { Redirect } from 'react-router-dom'
 import Header from './../containers/Header'
 import NoteList from './../containers/NoteList'
 import HomeContent from './../containers/HomeContent'
-import SaveModal from './../containers/SaveModal'
+import YesNoModal from './../containers/YesNoModal'
 import StatusModal from './../containers/StatusModal'
 import {
   checkRedirectToWelcomePage,
@@ -29,7 +29,7 @@ export default () => {
           <HomeContent />
         </div>
       </div>
-      <SaveModal />
+      <YesNoModal />
       <StatusModal />
     </div>
   )
diff --git a/app/components/NoteEditor.js b/app/components/NoteEditor.js
index 69aef21..3b114ff 100644
--- a/app/components/NoteEditor.js
+++ b/app/components/NoteEditor.js
@@ -37,9 +37,15 @@ export default class NoteEditor extends Component {
     this.props.updateActiveNoteState(newEditorState)
   }
 
+  componentDidMount () {
+    // Enable delete button as editor is mounted.
+    this.props.setDeleteDisabled(false)
+  }
+
   componentWillUnmount () {
-    // Disable save button as editor will be unmounted.
+    // Disable save and delete buttons as editor will be unmounted.
     this.props.setSaveDisabled(true)
+    this.props.setDeleteDisabled(true)
     this.props.updateActiveNoteState(EditorState.createEmpty())
   }
 
@@ -59,6 +65,7 @@ export default class NoteEditor extends Component {
 NoteEditor.propTypes = {
   activeNoteState: PropTypes.object.isRequired,
   setSaveDisabled: PropTypes.func.isRequired,
+  setDeleteDisabled: PropTypes.func.isRequired,
   setNewNoteDisabled: PropTypes.func.isRequired,
   updateActiveNoteState: PropTypes.func.isRequired,
   updateNoteTitle: PropTypes.func.isRequired
diff --git a/app/components/NoteList.js b/app/components/NoteList.js
index 0b6f6bf..7a6f211 100644
--- a/app/components/NoteList.js
+++ b/app/components/NoteList.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import NoteItem from './NoteItem'
-import { NOTE_STATUS } from '../constants/noteStatus'
 
 export default class NoteList extends Component {
   constructor (props) {
@@ -21,7 +20,6 @@ export default class NoteList extends Component {
     if (this.props.activeNoteIndex === noteIndex) { return }
 
     this.props.setActiveNoteIndex(noteIndex)
-    this.props.setNoteStatus(NOTE_STATUS.LOADING_NOTE)
     this.props.fetchNote(noteIndex)
   }
 
@@ -46,6 +44,5 @@ NoteList.propTypes = {
   notes: PropTypes.array.isRequired,
   fetchAllNotes: PropTypes.func.isRequired,
   fetchNote: PropTypes.func.isRequired,
-  setActiveNoteIndex: PropTypes.func.isRequired,
-  setNoteStatus: PropTypes.func.isRequired
+  setActiveNoteIndex: PropTypes.func.isRequired
 }
diff --git a/app/components/SaveModal.js b/app/components/SaveModal.js
deleted file mode 100644
index 7d6e1b9..0000000
--- a/app/components/SaveModal.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { Modal, ModalBody, ModalFooter } from 'reactstrap'
-
-export default class SaveModal extends Component {
-  constructor (props) {
-    // Initialize this using super
-    super()
-
-    this.onSaveNote = this.onSaveNote.bind(this)
-  }
-
-  onSaveNote () {
-    this.props.setSaveDisabled(true)
-    this.props.toggleSaveModal()
-    this.props.saveNote()
-  }
-
-  render () {
-    return (
-      <Modal isOpen={this.props.showSaveModal}>
-        <ModalBody>
-            Do you want to save this note?
-        </ModalBody>
-        <ModalFooter>
-          <button
-            className='ml-2 btn btn-outline-success btn-sm'
-            onClick={this.onSaveNote}>
-             Yes
-          </button>
-          <button
-            className='ml-2 btn btn-outline-danger btn-sm'
-            onClick={this.props.toggleSaveModal}>
-             No
-          </button>
-        </ModalFooter>
-      </Modal>
-    )
-  }
-}
-
-SaveModal.propTypes = {
-  showSaveModal: PropTypes.bool.isRequired,
-  toggleSaveModal: PropTypes.func.isRequired,
-  setSaveDisabled: PropTypes.func.isRequired,
-  saveNote: PropTypes.func.isRequired
-}
diff --git a/app/components/StatusModal.js b/app/components/StatusModal.js
index 90710e2..aa63014 100644
--- a/app/components/StatusModal.js
+++ b/app/components/StatusModal.js
@@ -11,6 +11,7 @@ export default class StatusModal extends Component {
     this._getModalConfig = this._getModalConfig.bind(this)
     this.onSaveFail = this.onSaveFail.bind(this)
     this.onLoadFail = this.onLoadFail.bind(this)
+    this.onDeleteFail = this.onDeleteFail.bind(this)
   }
 
   componentDidUpdate () {
@@ -21,6 +22,7 @@ export default class StatusModal extends Component {
         this.props.updateNoteStatus()
         break
       case NOTE_STATUS.NOTE_LOAD_SUCCESS:
+      case NOTE_STATUS.NOTE_DELETE_SUCCESS:
         this.props.updateNoteStatus()
         break
       default:
@@ -39,13 +41,18 @@ export default class StatusModal extends Component {
     this.props.updateNoteStatus(false)
   }
 
+  onDeleteFail () {
+    this.props.setDeleteDisabled(false)
+    this.props.updateNoteStatus(false)
+  }
+
   _getModalConfig () {
     // This modal is shown when any operation happens.
     let showModal =
       this.props.noteStatus !== NOTE_STATUS.NO_OPERATION
 
     let modalBody = ''
-    let callBack = ''
+    let callBack = () => {}
     let showFooter = false
     switch (this.props.noteStatus) {
       case NOTE_STATUS.SAVING_NOTE:
@@ -70,6 +77,17 @@ export default class StatusModal extends Component {
         showFooter = true
         callBack = this.onLoadFail
         break
+      case NOTE_STATUS.DELETING_NOTE:
+        modalBody = 'Deleting note...'
+        break
+      case NOTE_STATUS.NOTE_DELETE_SUCCESS:
+        modalBody = 'Note deleted successfully.'
+        break
+      case NOTE_STATUS.NOTE_DELETE_FAIL:
+        modalBody = 'Unable to delete note.'
+        showFooter = true
+        callBack = this.onDeleteFail
+        break
       default:
         break
     }
@@ -104,5 +122,6 @@ StatusModal.propTypes = {
   noteStatus: PropTypes.string.isRequired,
   updateNoteStatus: PropTypes.func.isRequired,
   setSaveDisabled: PropTypes.func.isRequired,
-  setNewNoteDisabled: PropTypes.func.isRequired
+  setNewNoteDisabled: PropTypes.func.isRequired,
+  setDeleteDisabled: PropTypes.func.isRequired
 }
diff --git a/app/components/YesNoModal.js b/app/components/YesNoModal.js
new file mode 100644
index 0000000..74eac88
--- /dev/null
+++ b/app/components/YesNoModal.js
@@ -0,0 +1,83 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Modal, ModalBody, ModalFooter } from 'reactstrap'
+import { ACTIONS } from '../constants/actions'
+
+export default class YesNoModal extends Component {
+  constructor (props) {
+    // Initialize this using super
+    super()
+
+    this._getModalConfig = this._getModalConfig.bind(this)
+    this.onSaveNote = this.onSaveNote.bind(this)
+    this.onDeleteNote = this.onDeleteNote.bind(this)
+  }
+
+  // Called when saving is confirmed.
+  onSaveNote () {
+    this.props.setSaveDisabled(true)
+    this.props.toggleYesNoModal()
+    this.props.saveNote()
+  }
+
+  // Called when deleting is confirmed.
+  onDeleteNote () {
+    this.props.setDeleteDisabled(true)
+    this.props.toggleYesNoModal()
+    this.props.deleteNote()
+  }
+
+  _getModalConfig () {
+    let modalBody = ''
+    let callBack = () => {}
+    switch (this.props.yesNoAction) {
+      case ACTIONS.SAVE_NOTE:
+        modalBody = 'Do you want to save this note?'
+        callBack = this.onSaveNote
+        break
+      case ACTIONS.DELETE_NOTE:
+        modalBody = 'Do you want to delete this note?'
+        callBack = this.onDeleteNote
+        break
+      default:
+        break
+    }
+    return {
+      modalBody: modalBody,
+      callBack: callBack
+    }
+  }
+
+  render () {
+    const modalConfig = this._getModalConfig()
+    return (
+      <Modal isOpen={this.props.showYesNoModal}>
+        <ModalBody>
+          {modalConfig.modalBody}
+        </ModalBody>
+        <ModalFooter>
+          <button
+            className='ml-2 btn btn-outline-success btn-sm'
+            onClick={modalConfig.callBack}>
+             Yes
+          </button>
+          <button
+            className='ml-2 btn btn-outline-danger btn-sm'
+            onClick={this.props.toggleYesNoModal}>
+             No
+          </button>
+        </ModalFooter>
+      </Modal>
+    )
+  }
+}
+
+YesNoModal.propTypes = {
+  yesNoAction: PropTypes.string.isRequired,
+  showYesNoModal: PropTypes.bool.isRequired,
+  toggleYesNoModal: PropTypes.func.isRequired,
+  setSaveDisabled: PropTypes.func.isRequired,
+  setDeleteDisabled: PropTypes.func.isRequired,
+  saveNote: PropTypes.func.isRequired,
+  deleteNote: PropTypes.func.isRequired
+}
diff --git a/app/constants/actions.js b/app/constants/actions.js
index e02cdb5..d0356a6 100644
--- a/app/constants/actions.js
+++ b/app/constants/actions.js
@@ -12,5 +12,11 @@ export const ACTIONS = {
   TOGGLE_SAVE_MODAL: 'TOGGLE_SAVE_MODAL',
   SET_NOTE_STATUS: 'SET_NOTE_STATUS',
   UPDATE_NOTE_REV: 'UPDATE_NOTE_REV',
-  LOAD_NOTE_CONTENT: 'LOAD_NOTE_CONTENT'
+  LOAD_NOTE_CONTENT: 'LOAD_NOTE_CONTENT',
+  DELETE_NOTE_FROM_LIST: 'DELETE_NOTE_FROM_LIST',
+  SAVE_NOTE: 'SAVE_NOTE',
+  DELETE_NOTE: 'DELETE_NOTE',
+  UPDATE_DELETE_NOTE_STATE: 'UPDATE_DELETE_NOTE_STATE',
+  NO_ACTION: 'NO_ACTION',
+  NOT_SELECTED_NOTE: -1
 }
diff --git a/app/constants/noteStatus.js b/app/constants/noteStatus.js
index 0e68eca..03cda01 100644
--- a/app/constants/noteStatus.js
+++ b/app/constants/noteStatus.js
@@ -5,5 +5,8 @@ export const NOTE_STATUS = {
   NOTE_SAVE_FAIL: 'NOTE_SAVE_FAIL',
   LOADING_NOTE: 'LOADING_NOTE',
   NOTE_LOAD_SUCCESS: 'NOTE_LOAD_SUCCESS',
-  NOTE_LOAD_FAIL: 'NOTE_LOAD_FAIL'
+  NOTE_LOAD_FAIL: 'NOTE_LOAD_FAIL',
+  DELETING_NOTE: 'DELETING_NOTE',
+  NOTE_DELETE_SUCCESS: 'NOTE_DELETE_SUCCESS',
+  NOTE_DELETE_FAIL: 'NOTE_DELETE_FAIL'
 }
diff --git a/app/containers/Header.js b/app/containers/Header.js
index a93c462..74922cc 100644
--- a/app/containers/Header.js
+++ b/app/containers/Header.js
@@ -7,18 +7,19 @@ import {
   addNewNote
 } from '../actions/note'
 import {
-  toggleSaveModal
+  toggleYesNoModal
 } from '../actions/modal'
 
 const mapStateToProps = state => ({
   isNewNoteDisabled: state.headerReducer.isNewNoteDisabled,
-  isSaveDisabled: state.headerReducer.isSaveDisabled
+  isSaveDisabled: state.headerReducer.isSaveDisabled,
+  isDeleteDisabled: state.headerReducer.isDeleteDisabled
 })
 
 const mapDispatchToProps = dispatch => ({
   addNewNote: () => dispatch(addNewNote()),
   setNewNoteDisabled: (flag) => dispatch(setNewNoteDisabled(flag)),
-  toggleSaveModal: () => dispatch(toggleSaveModal())
+  toggleYesNoModal: (action) => dispatch(toggleYesNoModal(action))
 })
 
 export default connect(
diff --git a/app/containers/NoteEditor.js b/app/containers/NoteEditor.js
index 8b12f4f..8f19153 100644
--- a/app/containers/NoteEditor.js
+++ b/app/containers/NoteEditor.js
@@ -2,7 +2,8 @@ import { connect } from 'react-redux'
 import NoteEditor from '../components/NoteEditor'
 import {
   setSaveDisabled,
-  setNewNoteDisabled
+  setNewNoteDisabled,
+  setDeleteDisabled
 } from '../actions/header'
 import {
   updateNoteTitle,
@@ -16,6 +17,7 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
   updateActiveNoteState: (state) => dispatch(updateActiveNoteState(state)),
   setSaveDisabled: (flag) => dispatch(setSaveDisabled(flag)),
+  setDeleteDisabled: (flag) => dispatch(setDeleteDisabled(flag)),
   setNewNoteDisabled: (flag) => dispatch(setNewNoteDisabled(flag)),
   updateNoteTitle: (content) => dispatch(updateNoteTitle(content))
 })
diff --git a/app/containers/NoteList.js b/app/containers/NoteList.js
index 4242566..325118e 100644
--- a/app/containers/NoteList.js
+++ b/app/containers/NoteList.js
@@ -3,7 +3,6 @@ import NoteList from '../components/NoteList'
 import {
   fetchAllNotes,
   setActiveNoteIndex,
-  setNoteStatus,
   fetchNote
 } from '../actions/note'
 
@@ -14,9 +13,8 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   fetchAllNotes: () => dispatch(fetchAllNotes()),
-  fetchNote: (noteIndex) => dispatch(fetchNote(noteIndex)),
-  setActiveNoteIndex: (noteIndex) => dispatch(setActiveNoteIndex(noteIndex)),
-  setNoteStatus: (status) => dispatch(setNoteStatus(status))
+  fetchNote: () => dispatch(fetchNote()),
+  setActiveNoteIndex: (noteIndex) => dispatch(setActiveNoteIndex(noteIndex))
 })
 
 export default connect(
diff --git a/app/containers/SaveModal.js b/app/containers/SaveModal.js
deleted file mode 100644
index cd3fa22..0000000
--- a/app/containers/SaveModal.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { connect } from 'react-redux'
-import SaveModal from '../components/SaveModal'
-import {
-  toggleSaveModal
-} from '../actions/modal'
-import {
-  setSaveDisabled
-} from '../actions/header'
-import {
-  saveNote
-} from '../actions/note'
-
-const mapStateToProps = state => ({
-  showSaveModal: state.modalReducer.showSaveModal
-})
-
-const mapDispatchToProps = dispatch => ({
-  toggleSaveModal: () => dispatch(toggleSaveModal()),
-  setSaveDisabled: (flag) => dispatch(setSaveDisabled(flag)),
-  saveNote: () => dispatch(saveNote())
-})
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(SaveModal)
diff --git a/app/containers/StatusModal.js b/app/containers/StatusModal.js
index fbf3f21..3637957 100644
--- a/app/containers/StatusModal.js
+++ b/app/containers/StatusModal.js
@@ -5,7 +5,8 @@ import {
 } from '../actions/modal'
 import {
   setSaveDisabled,
-  setNewNoteDisabled
+  setNewNoteDisabled,
+  setDeleteDisabled
 } from '../actions/header'
 
 const mapStateToProps = state => ({
@@ -16,7 +17,8 @@ const mapDispatchToProps = dispatch => ({
   updateNoteStatus: (withTimeOut, status) =>
     dispatch(updateNoteStatus(withTimeOut, status)),
   setSaveDisabled: (flag) => dispatch(setSaveDisabled(flag)),
-  setNewNoteDisabled: (flag) => dispatch(setNewNoteDisabled(flag))
+  setNewNoteDisabled: (flag) => dispatch(setNewNoteDisabled(flag)),
+  setDeleteDisabled: (flag) => dispatch(setDeleteDisabled(flag))
 })
 
 export default connect(
diff --git a/app/containers/YesNoModal.js b/app/containers/YesNoModal.js
new file mode 100644
index 0000000..c77b9ff
--- /dev/null
+++ b/app/containers/YesNoModal.js
@@ -0,0 +1,31 @@
+import { connect } from 'react-redux'
+import YesNoModal from '../components/YesNoModal'
+import {
+  toggleYesNoModal
+} from '../actions/modal'
+import {
+  setSaveDisabled,
+  setDeleteDisabled
+} from '../actions/header'
+import {
+  saveNote,
+  deleteNote
+} from '../actions/note'
+
+const mapStateToProps = state => ({
+  showYesNoModal: state.modalReducer.showYesNoModal,
+  yesNoAction: state.modalReducer.yesNoAction
+})
+
+const mapDispatchToProps = dispatch => ({
+  toggleYesNoModal: (action) => dispatch(toggleYesNoModal(action)),
+  setSaveDisabled: (flag) => dispatch(setSaveDisabled(flag)),
+  setDeleteDisabled: (flag) => dispatch(setDeleteDisabled(flag)),
+  saveNote: () => dispatch(saveNote()),
+  deleteNote: () => dispatch(deleteNote())
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(YesNoModal)
diff --git a/app/db.js b/app/db.js
index 3b3c037..977982c 100644
--- a/app/db.js
+++ b/app/db.js
@@ -20,3 +20,8 @@ export const addNote = (doc) => {
 export const getNote = (noteId) => {
   return notesDB.get(noteId)
 }
+
+// Deletes a note from database using its ID and rev.
+export const removeNote = (noteId, noteRev) => {
+  return notesDB.remove(noteId, noteRev)
+}
diff --git a/app/reducers/header.js b/app/reducers/header.js
index 3d910c4..bb68099 100644
--- a/app/reducers/header.js
+++ b/app/reducers/header.js
@@ -2,27 +2,28 @@ import { ACTIONS } from '../constants/actions'
 
 const INITIAL_STATE = {
   isNewNoteDisabled: false,
-  isSaveDisabled: true
+  isSaveDisabled: true,
+  isDeleteDisabled: true
+}
+
+const _updateNoteState = (state, field, newValue) => {
+  // Just return the state as there is no change in isNewNoteDisabled flag.
+  if (state[field] === newValue) { return state }
+
+  return {
+    ...state,
+    [field]: newValue
+  }
 }
 
 export default (state = INITIAL_STATE, action) => {
   switch (action.type) {
     case ACTIONS.UPDATE_NEW_NOTE_STATE:
-      // Just return the state as there is no change in isNewNoteDisabled flag.
-      if (state.isNewNoteDisabled === action.payload) { return state }
-
-      return {
-        ...state,
-        isNewNoteDisabled: action.payload
-      }
+      return _updateNoteState(state, 'isNewNoteDisabled', action.payload)
     case ACTIONS.UPDATE_SAVE_NOTE_STATE:
-      // Just return the state as there is no change in isSaveDisabled flag.
-      if (state.isSaveDisabled === action.payload) { return state }
-
-      return {
-        ...state,
-        isSaveDisabled: action.payload
-      }
+      return _updateNoteState(state, 'isSaveDisabled', action.payload)
+    case ACTIONS.UPDATE_DELETE_NOTE_STATE:
+      return _updateNoteState(state, 'isDeleteDisabled', action.payload)
     default:
       return state
   }
diff --git a/app/reducers/modal.js b/app/reducers/modal.js
index 20155ec..cf1185e 100644
--- a/app/reducers/modal.js
+++ b/app/reducers/modal.js
@@ -1,15 +1,23 @@
 import { ACTIONS } from '../constants/actions'
 
 const INITIAL_STATE = {
-  showSaveModal: false
+  showYesNoModal: false,
+  yesNoAction: ACTIONS.NO_ACTION
 }
 
 export default (state = INITIAL_STATE, action) => {
   switch (action.type) {
     case ACTIONS.TOGGLE_SAVE_MODAL:
+      let noteAction = state.yesNoAction
+      if (!state.showYesNoModal && action.payload &&
+          ACTIONS.hasOwnProperty(action.payload)) {
+        noteAction = action.payload
+      }
+      console.log(noteAction)
       return {
         ...state,
-        showSaveModal: !state.showSaveModal
+        showYesNoModal: !state.showYesNoModal,
+        yesNoAction: noteAction
       }
     default:
       return state
diff --git a/app/reducers/note.js b/app/reducers/note.js
index 3bb1869..aaacbee 100644
--- a/app/reducers/note.js
+++ b/app/reducers/note.js
@@ -5,7 +5,7 @@ import { NOTE_STATUS } from '../constants/noteStatus'
 import logger from 'electron-log'
 
 const INITIAL_STATE = {
-  activeNoteIndex: -1,
+  activeNoteIndex: ACTIONS.NOT_SELECTED_NOTE,
   activeNoteState: EditorState.createEmpty(),
   noteStatus: NOTE_STATUS.NO_OPERATION,
   notes: []
@@ -79,7 +79,7 @@ export default (state = INITIAL_STATE, action) => {
       }
     case ACTIONS.SET_NOTE_STATUS:
       if (!NOTE_STATUS.hasOwnProperty(action.payload)) {
-        logger.warn('Trying to set unsupported noteStatus')
+        logger.warn('Trying to set unsupported noteStatus: ' + action.payload)
         return state
       }
 
@@ -92,6 +92,11 @@ export default (state = INITIAL_STATE, action) => {
         ...state,
         activeNoteState: EditorState.createWithContent(action.payload)
       }
+    case ACTIONS.DELETE_NOTE_FROM_LIST:
+      return {
+        ...state,
+        notes: state.notes.filter(note => note.id === action.payload)
+      }
     default:
       return state
   }

From 805d86c8035bee2495ac3add7092666c904209fc Mon Sep 17 00:00:00 2001
From: Abdelrhman Ahmed <a.ahmed1026@gmail.com>
Date: Mon, 17 Sep 2018 00:52:45 +0200
Subject: [PATCH 20/21] Fixes #129: support testing (#130)

* Fixes #129: support testing
---
 .eslintignore                                 |   3 +
 .eslintrc                                     |   3 +
 .gitignore                                    |   3 +
 .travis.yml                                   |   1 +
 __mocks__/electron.js                         |   5 +
 __mocks__/pouchdb-browser.js                  |   3 +
 __mocks__/uuid/v4.js                          |   1 +
 .../actions/__snapshots__/header.test.js.snap |  28 +++++
 .../actions/__snapshots__/modal.test.js.snap  |  10 ++
 .../actions/__snapshots__/note.test.js.snap   |  80 +++++++++++++
 .../__snapshots__/welcome.test.js.snap        |  17 +++
 __tests__/actions/header.test.js              |  34 ++++++
 __tests__/actions/modal.test.js               |  22 ++++
 __tests__/actions/note.test.js                |  77 ++++++++++++
 __tests__/actions/welcome.test.js             |  27 +++++
 .../components/__snapshots__/app.test.js.snap |  45 +++++++
 __tests__/components/app.test.js              |  17 +++
 .../__snapshots__/header.test.js.snap         |  33 ++++++
 .../reducers/__snapshots__/modal.test.js.snap |  15 +++
 .../reducers/__snapshots__/note.test.js.snap  |  85 ++++++++++++++
 .../__snapshots__/welcome.test.js.snap        |  74 ++++++++++++
 __tests__/reducers/header.test.js             |  35 ++++++
 __tests__/reducers/modal.test.js              |  22 ++++
 __tests__/reducers/note.test.js               | 110 ++++++++++++++++++
 __tests__/reducers/welcome.test.js            |  30 +++++
 __tests__/setup.js                            |   5 +
 app/reducers/modal.js                         |   1 -
 app/reducers/note.js                          |   2 +-
 appveyor.yml                                  |   1 +
 docs/List-of-dependencies.md                  |  17 ++-
 jest.config.js                                |   4 +
 main.js                                       |   2 +-
 package.json                                  |  16 ++-
 utils/logger.js                               |   2 +-
 34 files changed, 815 insertions(+), 15 deletions(-)
 create mode 100644 __mocks__/electron.js
 create mode 100644 __mocks__/pouchdb-browser.js
 create mode 100644 __mocks__/uuid/v4.js
 create mode 100644 __tests__/actions/__snapshots__/header.test.js.snap
 create mode 100644 __tests__/actions/__snapshots__/modal.test.js.snap
 create mode 100644 __tests__/actions/__snapshots__/note.test.js.snap
 create mode 100644 __tests__/actions/__snapshots__/welcome.test.js.snap
 create mode 100644 __tests__/actions/header.test.js
 create mode 100644 __tests__/actions/modal.test.js
 create mode 100644 __tests__/actions/note.test.js
 create mode 100644 __tests__/actions/welcome.test.js
 create mode 100644 __tests__/components/__snapshots__/app.test.js.snap
 create mode 100644 __tests__/components/app.test.js
 create mode 100644 __tests__/reducers/__snapshots__/header.test.js.snap
 create mode 100644 __tests__/reducers/__snapshots__/modal.test.js.snap
 create mode 100644 __tests__/reducers/__snapshots__/note.test.js.snap
 create mode 100644 __tests__/reducers/__snapshots__/welcome.test.js.snap
 create mode 100644 __tests__/reducers/header.test.js
 create mode 100644 __tests__/reducers/modal.test.js
 create mode 100644 __tests__/reducers/note.test.js
 create mode 100644 __tests__/reducers/welcome.test.js
 create mode 100644 __tests__/setup.js
 create mode 100644 jest.config.js

diff --git a/.eslintignore b/.eslintignore
index 0800076..fb02106 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -10,3 +10,6 @@ build
 # Ignore Logs
 logs
 *.log
+
+# coverage test directory
+coverage
diff --git a/.eslintrc b/.eslintrc
index ec520cd..762feb8 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -4,5 +4,8 @@
     "react": {
       "version": "16.4.0"
     }
+  },
+  "env": {
+    "jest": true
   }
 }
diff --git a/.gitignore b/.gitignore
index a955a19..18817a9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,6 @@ build
 
 # distribution directory
 dist
+
+# coverage test directory
+coverage
diff --git a/.travis.yml b/.travis.yml
index d418413..6ee8dab 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -12,3 +12,4 @@ install:
 script:
   - npm run lint
   - npm run build
+  - npm run test
diff --git a/__mocks__/electron.js b/__mocks__/electron.js
new file mode 100644
index 0000000..e1c2053
--- /dev/null
+++ b/__mocks__/electron.js
@@ -0,0 +1,5 @@
+module.exports = {
+  remote: {
+    getGlobal: jest.fn()
+  }
+}
diff --git a/__mocks__/pouchdb-browser.js b/__mocks__/pouchdb-browser.js
new file mode 100644
index 0000000..a3edaa5
--- /dev/null
+++ b/__mocks__/pouchdb-browser.js
@@ -0,0 +1,3 @@
+module.exports = jest.fn(() => ({
+  name: 'test'
+}))
diff --git a/__mocks__/uuid/v4.js b/__mocks__/uuid/v4.js
new file mode 100644
index 0000000..6200f47
--- /dev/null
+++ b/__mocks__/uuid/v4.js
@@ -0,0 +1 @@
+module.exports = jest.fn(() => 'id-string')
diff --git a/__tests__/actions/__snapshots__/header.test.js.snap b/__tests__/actions/__snapshots__/header.test.js.snap
new file mode 100644
index 0000000..ef71de6
--- /dev/null
+++ b/__tests__/actions/__snapshots__/header.test.js.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`header_actions setDeleteDisabled Dispatches the correct action and payload 1`] = `
+Array [
+  Object {
+    "payload": true,
+    "type": "UPDATE_DELETE_NOTE_STATE",
+  },
+]
+`;
+
+exports[`header_actions setNewNoteDisabled Dispatches the correct action and payload 1`] = `
+Array [
+  Object {
+    "payload": true,
+    "type": "UPDATE_NEW_NOTE_STATE",
+  },
+]
+`;
+
+exports[`header_actions setSaveDisabled Dispatches the correct action and payload 1`] = `
+Array [
+  Object {
+    "payload": true,
+    "type": "UPDATE_SAVE_NOTE_STATE",
+  },
+]
+`;
diff --git a/__tests__/actions/__snapshots__/modal.test.js.snap b/__tests__/actions/__snapshots__/modal.test.js.snap
new file mode 100644
index 0000000..407b785
--- /dev/null
+++ b/__tests__/actions/__snapshots__/modal.test.js.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`modal_actions toggleYesNoModal Dispatches the correct action and payload 1`] = `
+Array [
+  Object {
+    "payload": "SAVE_NOTE",
+    "type": "TOGGLE_SAVE_MODAL",
+  },
+]
+`;
diff --git a/__tests__/actions/__snapshots__/note.test.js.snap b/__tests__/actions/__snapshots__/note.test.js.snap
new file mode 100644
index 0000000..b0c52de
--- /dev/null
+++ b/__tests__/actions/__snapshots__/note.test.js.snap
@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`note_actions addNewNote Dispatches the correct action and payload 1`] = `
+Array [
+  Object {
+    "type": "ADD_NOTE",
+  },
+]
+`;
+
+exports[`note_actions deleteNoteFromList Dispatches the correct action and payload 1`] = `
+Array [
+  Object {
+    "payload": 3,
+    "type": "DELETE_NOTE_FROM_LIST",
+  },
+]
+`;
+
+exports[`note_actions loadNoteContent Dispatches the correct action and payload 1`] = `
+Array [
+  Object {
+    "payload": Object {},
+    "type": "LOAD_NOTE_CONTENT",
+  },
+]
+`;
+
+exports[`note_actions setActiveNoteIndex Dispatches the correct action and payload 1`] = `
+Array [
+  Object {
+    "payload": 3,
+    "type": "SET_ACTIVE_NOTE",
+  },
+]
+`;
+
+exports[`note_actions setNoteStatus Dispatches the correct action and payload 1`] = `
+Array [
+  Object {
+    "payload": "SAVING_NOTE",
+    "type": "SET_NOTE_STATUS",
+  },
+]
+`;
+
+exports[`note_actions updateActiveNoteState Dispatches the correct action and payload 1`] = `
+Array [
+  Object {
+    "payload": Object {},
+    "type": "UPDATE_ACTIVE_NOTE_STATE",
+  },
+]
+`;
+
+exports[`note_actions updateNoteList Dispatches the correct action and payload 1`] = `
+Array [
+  Object {
+    "type": "UPDATE_NOTE_LIST",
+  },
+]
+`;
+
+exports[`note_actions updateNoteRev Dispatches the correct action and payload 1`] = `
+Array [
+  Object {
+    "payload": "a123-a123",
+    "type": "UPDATE_NOTE_REV",
+  },
+]
+`;
+
+exports[`note_actions updateNoteTitle Dispatches the correct action and payload 1`] = `
+Array [
+  Object {
+    "payload": "Hello world",
+    "type": "UPDATE_NOTE_TITLE",
+  },
+]
+`;
diff --git a/__tests__/actions/__snapshots__/welcome.test.js.snap b/__tests__/actions/__snapshots__/welcome.test.js.snap
new file mode 100644
index 0000000..92e7902
--- /dev/null
+++ b/__tests__/actions/__snapshots__/welcome.test.js.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`welcome_actions getNextLang Dispatches the correct action and payload 1`] = `
+Array [
+  Object {
+    "type": "SET_NEXT_LANG",
+  },
+]
+`;
+
+exports[`welcome_actions toggleFade Dispatches the correct action and payload 1`] = `
+Array [
+  Object {
+    "type": "TOGGLE_FADE",
+  },
+]
+`;
diff --git a/__tests__/actions/header.test.js b/__tests__/actions/header.test.js
new file mode 100644
index 0000000..f87b598
--- /dev/null
+++ b/__tests__/actions/header.test.js
@@ -0,0 +1,34 @@
+import configureStore from 'redux-mock-store'
+
+// Actions to be tested
+import * as headerActions from '../../app/actions/header'
+
+const mockStore = configureStore()
+const store = mockStore()
+
+describe('header_actions', () => {
+  beforeEach(() => {
+    store.clearActions()
+  })
+
+  describe('setNewNoteDisabled', () => {
+    test('Dispatches the correct action and payload', () => {
+      store.dispatch(headerActions.setNewNoteDisabled(true))
+      expect(store.getActions()).toMatchSnapshot()
+    })
+  })
+
+  describe('setSaveDisabled', () => {
+    test('Dispatches the correct action and payload', () => {
+      store.dispatch(headerActions.setSaveDisabled(true))
+      expect(store.getActions()).toMatchSnapshot()
+    })
+  })
+
+  describe('setDeleteDisabled', () => {
+    test('Dispatches the correct action and payload', () => {
+      store.dispatch(headerActions.setDeleteDisabled(true))
+      expect(store.getActions()).toMatchSnapshot()
+    })
+  })
+})
diff --git a/__tests__/actions/modal.test.js b/__tests__/actions/modal.test.js
new file mode 100644
index 0000000..6f774fe
--- /dev/null
+++ b/__tests__/actions/modal.test.js
@@ -0,0 +1,22 @@
+import configureStore from 'redux-mock-store'
+import { ACTIONS } from '../../app/constants/actions'
+import * as modalActions from '../../app/actions/modal'
+jest.mock('../../__mocks__/pouchdb-browser')
+
+const mockStore = configureStore()
+const store = mockStore()
+
+global.fetch = () => {}
+
+describe('modal_actions', () => {
+  beforeEach(() => {
+    store.clearActions()
+  })
+
+  describe('toggleYesNoModal', () => {
+    test('Dispatches the correct action and payload', () => {
+      store.dispatch(modalActions.toggleYesNoModal(ACTIONS.SAVE_NOTE))
+      expect(store.getActions()).toMatchSnapshot()
+    })
+  })
+})
diff --git a/__tests__/actions/note.test.js b/__tests__/actions/note.test.js
new file mode 100644
index 0000000..d63a740
--- /dev/null
+++ b/__tests__/actions/note.test.js
@@ -0,0 +1,77 @@
+import configureStore from 'redux-mock-store'
+
+// Actions to be tested
+import * as noteActions from '../../app/actions/note'
+import { NOTE_STATUS } from '../../app/constants/noteStatus'
+
+const mockStore = configureStore()
+const store = mockStore()
+
+describe('note_actions', () => {
+  beforeEach(() => {
+    store.clearActions()
+  })
+
+  describe('addNewNote', () => {
+    test('Dispatches the correct action and payload', () => {
+      store.dispatch(noteActions.addNewNote())
+      expect(store.getActions()).toMatchSnapshot()
+    })
+  })
+
+  describe('updateNoteList', () => {
+    test('Dispatches the correct action and payload', () => {
+      store.dispatch(noteActions.updateNoteList())
+      expect(store.getActions()).toMatchSnapshot()
+    })
+  })
+
+  describe('setActiveNoteIndex', () => {
+    test('Dispatches the correct action and payload', () => {
+      store.dispatch(noteActions.setActiveNoteIndex(3))
+      expect(store.getActions()).toMatchSnapshot()
+    })
+  })
+
+  describe('updateNoteTitle', () => {
+    test('Dispatches the correct action and payload', () => {
+      store.dispatch(noteActions.updateNoteTitle('Hello world'))
+      expect(store.getActions()).toMatchSnapshot()
+    })
+  })
+
+  describe('updateActiveNoteState', () => {
+    test('Dispatches the correct action and payload', () => {
+      store.dispatch(noteActions.updateActiveNoteState({}))
+      expect(store.getActions()).toMatchSnapshot()
+    })
+  })
+
+  describe('updateNoteRev', () => {
+    test('Dispatches the correct action and payload', () => {
+      store.dispatch(noteActions.updateNoteRev('a123-a123'))
+      expect(store.getActions()).toMatchSnapshot()
+    })
+  })
+
+  describe('setNoteStatus', () => {
+    test('Dispatches the correct action and payload', () => {
+      store.dispatch(noteActions.setNoteStatus(NOTE_STATUS.SAVING_NOTE))
+      expect(store.getActions()).toMatchSnapshot()
+    })
+  })
+
+  describe('loadNoteContent', () => {
+    test('Dispatches the correct action and payload', () => {
+      store.dispatch(noteActions.loadNoteContent({}))
+      expect(store.getActions()).toMatchSnapshot()
+    })
+  })
+
+  describe('deleteNoteFromList', () => {
+    test('Dispatches the correct action and payload', () => {
+      store.dispatch(noteActions.deleteNoteFromList(3))
+      expect(store.getActions()).toMatchSnapshot()
+    })
+  })
+})
diff --git a/__tests__/actions/welcome.test.js b/__tests__/actions/welcome.test.js
new file mode 100644
index 0000000..98a56f6
--- /dev/null
+++ b/__tests__/actions/welcome.test.js
@@ -0,0 +1,27 @@
+import configureStore from 'redux-mock-store'
+
+// Actions to be tested
+import * as welcomeActions from '../../app/actions/welcome'
+
+const mockStore = configureStore()
+const store = mockStore()
+
+describe('welcome_actions', () => {
+  beforeEach(() => {
+    store.clearActions()
+  })
+
+  describe('getNextLang', () => {
+    test('Dispatches the correct action and payload', () => {
+      store.dispatch(welcomeActions.getNextLang())
+      expect(store.getActions()).toMatchSnapshot()
+    })
+  })
+
+  describe('toggleFade', () => {
+    test('Dispatches the correct action and payload', () => {
+      store.dispatch(welcomeActions.toggleFade())
+      expect(store.getActions()).toMatchSnapshot()
+    })
+  })
+})
diff --git a/__tests__/components/__snapshots__/app.test.js.snap b/__tests__/components/__snapshots__/app.test.js.snap
new file mode 100644
index 0000000..6da3d4a
--- /dev/null
+++ b/__tests__/components/__snapshots__/app.test.js.snap
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<App /> render() renders the component 1`] = `
+<Router
+  history={
+    Object {
+      "action": "POP",
+      "block": [Function],
+      "createHref": [Function],
+      "go": [Function],
+      "goBack": [Function],
+      "goForward": [Function],
+      "length": 1,
+      "listen": [Function],
+      "location": Object {
+        "hash": "",
+        "pathname": "/",
+        "search": "",
+        "state": undefined,
+      },
+      "push": [Function],
+      "replace": [Function],
+    }
+  }
+>
+  <Switch>
+    <Route
+      component={[Function]}
+      exact={true}
+      key="0"
+      path="/"
+    />
+    <Route
+      component={[Function]}
+      exact={true}
+      key="1"
+      path="/welcome"
+    />
+    <Redirect
+      push={false}
+      to="/"
+    />
+  </Switch>
+</Router>
+`;
diff --git a/__tests__/components/app.test.js b/__tests__/components/app.test.js
new file mode 100644
index 0000000..e13b464
--- /dev/null
+++ b/__tests__/components/app.test.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import toJson from 'enzyme-to-json'
+import App from '../../app/components/App'
+
+jest.mock('../../__mocks__/electron')
+
+describe('<App />', () => {
+  describe('render()', () => {
+    test('renders the component', () => {
+      const wrapper = shallow(<App />)
+      const component = wrapper.dive()
+
+      expect(toJson(component)).toMatchSnapshot()
+    })
+  })
+})
diff --git a/__tests__/reducers/__snapshots__/header.test.js.snap b/__tests__/reducers/__snapshots__/header.test.js.snap
new file mode 100644
index 0000000..01ef2f9
--- /dev/null
+++ b/__tests__/reducers/__snapshots__/header.test.js.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`INITIAL_STATE is correct 1`] = `
+Object {
+  "isDeleteDisabled": true,
+  "isNewNoteDisabled": false,
+  "isSaveDisabled": true,
+}
+`;
+
+exports[`UPDATE_DELETE_NOTE_STATE is correct 1`] = `
+Object {
+  "isDeleteDisabled": false,
+  "isNewNoteDisabled": false,
+  "isSaveDisabled": true,
+}
+`;
+
+exports[`UPDATE_NEW_NOTE_STATE is correct 1`] = `
+Object {
+  "isDeleteDisabled": true,
+  "isNewNoteDisabled": true,
+  "isSaveDisabled": true,
+}
+`;
+
+exports[`UPDATE_SAVE_NOTE_STATE is correct 1`] = `
+Object {
+  "isDeleteDisabled": true,
+  "isNewNoteDisabled": false,
+  "isSaveDisabled": false,
+}
+`;
diff --git a/__tests__/reducers/__snapshots__/modal.test.js.snap b/__tests__/reducers/__snapshots__/modal.test.js.snap
new file mode 100644
index 0000000..09dfcae
--- /dev/null
+++ b/__tests__/reducers/__snapshots__/modal.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`INITIAL_STATE is correct 1`] = `
+Object {
+  "showYesNoModal": false,
+  "yesNoAction": "NO_ACTION",
+}
+`;
+
+exports[`TOGGLE_SAVE_MODAL is correct 1`] = `
+Object {
+  "showYesNoModal": true,
+  "yesNoAction": "SAVE_NOTE",
+}
+`;
diff --git a/__tests__/reducers/__snapshots__/note.test.js.snap b/__tests__/reducers/__snapshots__/note.test.js.snap
new file mode 100644
index 0000000..3de987b
--- /dev/null
+++ b/__tests__/reducers/__snapshots__/note.test.js.snap
@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ADD_NOTE is correct 1`] = `
+Object {
+  "activeNoteIndex": 0,
+  "noteStatus": "NO_OPERATION",
+  "notes": Array [
+    Object {
+      "id": "id-string",
+      "rev": "",
+      "title": "",
+    },
+  ],
+}
+`;
+
+exports[`DELETE_NOTE_FROM_LIST is correct 1`] = `
+Object {
+  "activeNoteIndex": -1,
+  "noteStatus": "NO_OPERATION",
+  "notes": Array [],
+}
+`;
+
+exports[`INITIAL_STATE is correct 1`] = `
+Object {
+  "activeNoteIndex": -1,
+  "noteStatus": "NO_OPERATION",
+  "notes": Array [],
+}
+`;
+
+exports[`SET_ACTIVE_NOTE_INDEX is correct 1`] = `
+Object {
+  "activeNoteIndex": 3,
+  "noteStatus": "NO_OPERATION",
+  "notes": Array [],
+}
+`;
+
+exports[`SET_NOTE_STATUS is correct 1`] = `
+Object {
+  "activeNoteIndex": -1,
+  "noteStatus": "SAVING_NOTE",
+  "notes": Array [],
+}
+`;
+
+exports[`UPDATE_ACTIVE_NOTE_STATE is correct 1`] = `
+Object {
+  "activeNoteIndex": -1,
+  "noteStatus": "NO_OPERATION",
+  "notes": Array [],
+}
+`;
+
+exports[`UPDATE_NOTE_LIST is correct 1`] = `
+Object {
+  "activeNoteIndex": -1,
+  "noteStatus": "NO_OPERATION",
+  "notes": Array [
+    Object {
+      "id": "123",
+      "rev": "123a",
+      "title": "welcome to Deer",
+    },
+  ],
+}
+`;
+
+exports[`UPDATE_NOTE_REV is correct 1`] = `
+Object {
+  "activeNoteIndex": -1,
+  "noteStatus": "NO_OPERATION",
+  "notes": Array [],
+}
+`;
+
+exports[`UPDATE_NOTE_TITLE is correct 1`] = `
+Object {
+  "activeNoteIndex": -1,
+  "noteStatus": "NO_OPERATION",
+  "notes": Array [],
+}
+`;
diff --git a/__tests__/reducers/__snapshots__/welcome.test.js.snap b/__tests__/reducers/__snapshots__/welcome.test.js.snap
new file mode 100644
index 0000000..69ef76a
--- /dev/null
+++ b/__tests__/reducers/__snapshots__/welcome.test.js.snap
@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GET_NEXT_LANG is correct 1`] = `
+Object {
+  "fadeIn": true,
+  "index": 0,
+}
+`;
+
+exports[`INITIAL_STATE is correct 1`] = `
+Object {
+  "fadeIn": true,
+  "index": -1,
+  "langList": Array [
+    Object {
+      "lang": "English",
+      "nextBtn": "Next",
+      "welcome": "Welcome",
+    },
+    Object {
+      "lang": "Arabic",
+      "nextBtn": "التالى",
+      "welcome": "أهلا بك",
+    },
+    Object {
+      "lang": "French",
+      "nextBtn": "Prochain",
+      "welcome": "Bienvenue",
+    },
+    Object {
+      "lang": "Spanish",
+      "nextBtn": "Siguiente",
+      "welcome": "Bienvenido",
+    },
+    Object {
+      "lang": "Italian",
+      "nextBtn": "Il prossimo",
+      "welcome": "Benvenuto",
+    },
+    Object {
+      "lang": "German",
+      "nextBtn": "Nächster",
+      "welcome": "Willkommen",
+    },
+    Object {
+      "lang": "Russian",
+      "nextBtn": "следующий",
+      "welcome": "пожаловать",
+    },
+    Object {
+      "lang": "Chinese",
+      "nextBtn": "下一个",
+      "welcome": "欢迎",
+    },
+    Object {
+      "lang": "Japanese",
+      "nextBtn": "次",
+      "welcome": "ようこそ",
+    },
+    Object {
+      "lang": "Hindi",
+      "nextBtn": "आगामी",
+      "welcome": "स्वागत हे",
+    },
+  ],
+}
+`;
+
+exports[`TOGGLE_FADE is correct 1`] = `
+Object {
+  "fadeIn": false,
+  "index": -1,
+}
+`;
diff --git a/__tests__/reducers/header.test.js b/__tests__/reducers/header.test.js
new file mode 100644
index 0000000..3257e40
--- /dev/null
+++ b/__tests__/reducers/header.test.js
@@ -0,0 +1,35 @@
+
+import headerReducer from '../../app/reducers/header'
+import { ACTIONS } from '../../app/constants/actions'
+
+describe('INITIAL_STATE', () => {
+  test('is correct', () => {
+    const action = { }
+
+    expect(headerReducer(undefined, action)).toMatchSnapshot()
+  })
+})
+
+describe('UPDATE_NEW_NOTE_STATE', () => {
+  test('is correct', () => {
+    const action = { type: ACTIONS.UPDATE_NEW_NOTE_STATE, payload: true }
+
+    expect(headerReducer(undefined, action)).toMatchSnapshot()
+  })
+})
+
+describe('UPDATE_SAVE_NOTE_STATE', () => {
+  test('is correct', () => {
+    const action = { type: ACTIONS.UPDATE_SAVE_NOTE_STATE, payload: false }
+
+    expect(headerReducer(undefined, action)).toMatchSnapshot()
+  })
+})
+
+describe('UPDATE_DELETE_NOTE_STATE', () => {
+  test('is correct', () => {
+    const action = { type: ACTIONS.UPDATE_DELETE_NOTE_STATE, payload: false }
+
+    expect(headerReducer(undefined, action)).toMatchSnapshot()
+  })
+})
diff --git a/__tests__/reducers/modal.test.js b/__tests__/reducers/modal.test.js
new file mode 100644
index 0000000..dc6d3a1
--- /dev/null
+++ b/__tests__/reducers/modal.test.js
@@ -0,0 +1,22 @@
+
+import modalReducer from '../../app/reducers/modal'
+import { ACTIONS } from '../../app/constants/actions'
+
+describe('INITIAL_STATE', () => {
+  test('is correct', () => {
+    const action = { }
+
+    expect(modalReducer(undefined, action)).toMatchSnapshot()
+  })
+})
+
+describe('TOGGLE_SAVE_MODAL', () => {
+  test('is correct', () => {
+    const action = {
+      type: ACTIONS.TOGGLE_SAVE_MODAL,
+      payload: ACTIONS.SAVE_NOTE
+    }
+
+    expect(modalReducer(undefined, action)).toMatchSnapshot()
+  })
+})
diff --git a/__tests__/reducers/note.test.js b/__tests__/reducers/note.test.js
new file mode 100644
index 0000000..1da20cb
--- /dev/null
+++ b/__tests__/reducers/note.test.js
@@ -0,0 +1,110 @@
+import noteReducer from '../../app/reducers/note'
+import { ACTIONS } from '../../app/constants/actions'
+import { NOTE_STATUS } from '../../app/constants/noteStatus'
+
+jest.mock('../../__mocks__/uuid/v4')
+
+describe('INITIAL_STATE', () => {
+  test('is correct', () => {
+    const action = { }
+
+    const result = noteReducer(undefined, action)
+    delete result.activeNoteState
+    expect(result).toMatchSnapshot()
+  })
+})
+
+describe('UPDATE_NOTE_LIST', () => {
+  test('is correct', () => {
+    const notes = [
+      {
+        doc: {
+          _id: '123',
+          _rev: '123a',
+          title: 'welcome to Deer'
+        }
+      }
+    ]
+    const action = { type: ACTIONS.UPDATE_NOTE_LIST, payload: notes }
+
+    const result = noteReducer(undefined, action)
+    delete result.activeNoteState
+    expect(result).toMatchSnapshot()
+  })
+})
+
+describe('SET_ACTIVE_NOTE_INDEX', () => {
+  test('is correct', () => {
+    const action = { type: ACTIONS.SET_ACTIVE_NOTE_INDEX, payload: 3 }
+
+    const result = noteReducer(undefined, action)
+    delete result.activeNoteState
+    expect(result).toMatchSnapshot()
+  })
+})
+
+describe('ADD_NOTE', () => {
+  test('is correct', () => {
+    const action = { type: ACTIONS.ADD_NOTE }
+
+    const result = noteReducer(undefined, action)
+    delete result.activeNoteState
+    expect(result).toMatchSnapshot()
+  })
+})
+
+describe('UPDATE_NOTE_TITLE', () => {
+  test('is correct', () => {
+    const action = { type: ACTIONS.UPDATE_NOTE_TITLE, payload: 'Hello World' }
+
+    const result = noteReducer(undefined, action)
+    delete result.activeNoteState
+    expect(result).toMatchSnapshot()
+  })
+})
+
+describe('UPDATE_NOTE_REV', () => {
+  test('is correct', () => {
+    const action = { type: ACTIONS.UPDATE_NOTE_REV, payload: 'a123-k123' }
+
+    const result = noteReducer(undefined, action)
+    delete result.activeNoteState
+    expect(result).toMatchSnapshot()
+  })
+})
+
+describe('UPDATE_ACTIVE_NOTE_STATE', () => {
+  test('is correct', () => {
+    const action = {
+      type: ACTIONS.UPDATE_ACTIVE_NOTE_STATE,
+      payload: 'new State'
+    }
+
+    const result = noteReducer(undefined, action)
+    delete result.activeNoteState
+    expect(result).toMatchSnapshot()
+  })
+})
+
+describe('SET_NOTE_STATUS', () => {
+  test('is correct', () => {
+    const action = {
+      type: ACTIONS.SET_NOTE_STATUS,
+      payload: NOTE_STATUS.SAVING_NOTE
+    }
+
+    const result = noteReducer(undefined, action)
+    delete result.activeNoteState
+    expect(result).toMatchSnapshot()
+  })
+})
+
+describe('DELETE_NOTE_FROM_LIST', () => {
+  test('is correct', () => {
+    const action = { type: ACTIONS.DELETE_NOTE_FROM_LIST }
+
+    const result = noteReducer(undefined, action)
+    delete result.activeNoteState
+    expect(result).toMatchSnapshot()
+  })
+})
diff --git a/__tests__/reducers/welcome.test.js b/__tests__/reducers/welcome.test.js
new file mode 100644
index 0000000..3e55b67
--- /dev/null
+++ b/__tests__/reducers/welcome.test.js
@@ -0,0 +1,30 @@
+import welcomeReducer from '../../app/reducers/welcome'
+import { ACTIONS } from '../../app/constants/actions'
+
+describe('INITIAL_STATE', () => {
+  test('is correct', () => {
+    const action = { }
+
+    expect(welcomeReducer(undefined, action)).toMatchSnapshot()
+  })
+})
+
+describe('GET_NEXT_LANG', () => {
+  test('is correct', () => {
+    const action = { type: ACTIONS.GET_NEXT_LANG }
+
+    const result = welcomeReducer(undefined, action)
+    delete result.langList
+    expect(result).toMatchSnapshot()
+  })
+})
+
+describe('TOGGLE_FADE', () => {
+  test('is correct', () => {
+    const action = { type: ACTIONS.TOGGLE_FADE }
+
+    const result = welcomeReducer(undefined, action)
+    delete result.langList
+    expect(result).toMatchSnapshot()
+  })
+})
diff --git a/__tests__/setup.js b/__tests__/setup.js
new file mode 100644
index 0000000..f22fd8d
--- /dev/null
+++ b/__tests__/setup.js
@@ -0,0 +1,5 @@
+import Enzyme from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+// React 16 Enzyme adapter
+Enzyme.configure({ adapter: new Adapter() })
diff --git a/app/reducers/modal.js b/app/reducers/modal.js
index cf1185e..0069922 100644
--- a/app/reducers/modal.js
+++ b/app/reducers/modal.js
@@ -13,7 +13,6 @@ export default (state = INITIAL_STATE, action) => {
           ACTIONS.hasOwnProperty(action.payload)) {
         noteAction = action.payload
       }
-      console.log(noteAction)
       return {
         ...state,
         showYesNoModal: !state.showYesNoModal,
diff --git a/app/reducers/note.js b/app/reducers/note.js
index aaacbee..ac3bfae 100644
--- a/app/reducers/note.js
+++ b/app/reducers/note.js
@@ -18,7 +18,7 @@ const _updateNoteEntry = (state, field, newValue) => {
   // Just return state as there is no active note.
   if (state.activeNoteIndex < 0 ||
       state.activeNoteIndex >= state.notes.length) {
-    logger.warn('UPDATE_NOTE_TITLE action is fired with out of range' +
+    logger.warn('action is fired with out of range' +
                  ' activeNoteIndex')
     return state
   }
diff --git a/appveyor.yml b/appveyor.yml
index 6c81905..661799a 100644
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -17,6 +17,7 @@ install:
 test_script:
   - npm run lint
   - npm run build
+  - npm run test
 
 # Don't actually build.
 build: off
diff --git a/docs/List-of-dependencies.md b/docs/List-of-dependencies.md
index b67a2ee..241882f 100644
--- a/docs/List-of-dependencies.md
+++ b/docs/List-of-dependencies.md
@@ -13,18 +13,23 @@ Packages which are used during development or which are used to build Deer's bun
 | electron                | ^2.0.2    | Build cross platform desktop apps |
 | electron-builder        | ^20.15.1  | Package and build a ready for distribution Electron app |
 | electron-reload         | ^1.2.2    | Reload contents of when the source files are changed |
-| eslint                  | ^5.4.0   | Linting utility for JavaScript and JSX |
-| eslint-config-standard  | ^11.0.0   | JavaScript Standard Style |
-| eslint-config-standard-react  | ^6.0.0   | JavaScript Standard Style React/JSX support |
+| enzyme                  | ^3.6.0    | JavaScript Testing utilities for React |
+| enzyme-adapter-react-16 | ^1.5.0    | JavaScript Testing utilities for React |
+| enzyme-to-json          | ^3.3.4    | Convert enzyme wrapper to a format compatible with Jest snapshot |
+| eslint                  | ^5.4.0    | Linting utility for JavaScript and JSX |
+| eslint-config-standard  | ^12.0.0   | JavaScript Standard Style |
+| eslint-config-standard-react  | ^7.0.2   | JavaScript Standard Style React/JSX support |
 | eslint-plugin-import    | ^2.12.0   | Support linting of ES2015+ (ES6+) import/export syntax |
 | eslint-plugin-node      | ^7.0.1    | ESLint's rules for Node.js |
 | eslint-plugin-promise   | ^4.0.0    | Enforce best practices for JavaScript promises |
 | eslint-plugin-react     | ^7.9.1    | React specific linting rules for ESLint |
-| eslint-plugin-standard  | ^3.1.0    | ESlint Plugin for the Standard Linter |
+| eslint-plugin-standard  | ^4.0.0    | ESlint Plugin for the Standard Linter |
 | file-loader             | ^2.0.0    | A Webpack loader responsible for emitting files that will be bundled and returning their public URLs (e.g. Images) |
 | husky                   | ^0.14.3   | Prevent bad commit, push by doing checks before it takes place |
+| jest                    | ^23.6.0   | Delightful JavaScript Testing |
 | jquery                  | ^3.3.1    | Needed for electron-builder packages |
-| style-loader            | ^0.22.1   | A Webpack loader responsibile for taking the output string generated by by css-loader and put it inside the <style> tags |
+| redux-mock-store        | ^1.5.3    | A mock store for testing your redux async action creators and middleware. |
+| style-loader            | ^0.23.0   | A Webpack loader responsibile for taking the output string generated by by css-loader and put it inside the <style> tags |
 | webpack                 | ^4.12.0   | A module bundler for JavaScript files |
 | webpack-cli             | ^3.0.3    | Required by web pack |
 
@@ -40,7 +45,7 @@ Those are dependencies that are essential for software to work.
 | electron-is-dev       | ^0.3.0        | Check if Electron is running in development |
 | electron-log          | ^2.2.15       | A multi-transport async logging library |
 | electron-store        | ^2.0.0        | Save and load user preferences |
-| electron-window-state | ^4.1.1        | Store and restore window sizes and positions |
+| electron-window-state | ^5.0.1        | Store and restore window sizes and positions |
 | pouchdb-browser       | ^7.0.0        | A pocket-sized database. |
 | prop-types            | ^15.6.1       | A Runtime type checking for React props |
 | react                 | ^16.4.0       | A JavaScript library for building user interfaces |
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000..208fc9e
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  setupTestFrameworkScriptFile: '<rootDir>/__tests__/setup.js',
+  testPathIgnorePatterns: ['<rootDir>/__tests__/setup.js']
+}
diff --git a/main.js b/main.js
index 166a98c..32a1e95 100644
--- a/main.js
+++ b/main.js
@@ -1,4 +1,4 @@
-const {app, BrowserWindow} = require('electron')
+const { app, BrowserWindow } = require('electron')
 const path = require('path')
 const url = require('url')
 const isDev = require('electron-is-dev')
diff --git a/package.json b/package.json
index e922d2a..a11f217 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "release:win32": "npm run production && electron-builder --win --ia32",
     "release:win64": "npm run production && electron-builder --win --x64",
     "start": "electron .",
+    "test": "jest --verbose",
     "watch": "webpack --watch"
   },
   "devDependencies": {
@@ -41,18 +42,23 @@
     "electron": "^2.0.2",
     "electron-builder": "^20.15.1",
     "electron-reload": "^1.2.2",
+    "enzyme": "^3.6.0",
+    "enzyme-adapter-react-16": "^1.5.0",
+    "enzyme-to-json": "^3.3.4",
     "eslint": "^5.4.0",
-    "eslint-config-standard": "^11.0.0",
-    "eslint-config-standard-react": "^6.0.0",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-config-standard-react": "^7.0.2",
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-node": "^7.0.1",
     "eslint-plugin-promise": "^4.0.0",
     "eslint-plugin-react": "^7.9.1",
-    "eslint-plugin-standard": "^3.1.0",
+    "eslint-plugin-standard": "^4.0.0",
     "file-loader": "^2.0.0",
     "husky": "^0.14.3",
+    "jest": "^23.6.0",
     "jquery": "^3.3.1",
-    "style-loader": "^0.22.1",
+    "redux-mock-store": "^1.5.3",
+    "style-loader": "^0.23.0",
     "webpack": "^4.12.0",
     "webpack-cli": "^3.0.3"
   },
@@ -62,7 +68,7 @@
     "electron-is-dev": "^0.3.0",
     "electron-log": "^2.2.15",
     "electron-store": "^2.0.0",
-    "electron-window-state": "^4.1.1",
+    "electron-window-state": "^5.0.1",
     "pouchdb-browser": "^7.0.0",
     "prop-types": "^15.6.1",
     "react": "^16.4.0",
diff --git a/utils/logger.js b/utils/logger.js
index 23d1b8b..25eacd2 100644
--- a/utils/logger.js
+++ b/utils/logger.js
@@ -1,5 +1,5 @@
 // Set the logger
-const {app} = require('electron')
+const { app } = require('electron')
 const logger = require('electron-log')
 const path = require('path')
 const fs = require('fs')

From b951fd45bace372e0a0da2eebe29cc569ce9b726 Mon Sep 17 00:00:00 2001
From: Abdelrhman Ahmed <a.ahmed1026@gmail.com>
Date: Mon, 17 Sep 2018 03:32:42 +0200
Subject: [PATCH 21/21] Release v0.1.0 (#132)

---
 README.md    | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index da29c22..c817910 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,10 @@
 + Cross Platform for Desktop and Mobile :computer:
 + Multi-language :earth_americas:
 
+### Download
+Currently, Deer is available for Linux, Mac and Windows :tada::tada:.
+[Download it now!](https://github.com/abahmed/Deer/releases)
+
 
 ### Getting started
 
diff --git a/package.json b/package.json
index a11f217..d0a5437 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "Deer",
   "productName": "Deer",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "A modern, fast, beautiful note taking app",
   "author": "Deer <deer-project@googlegroups.com>",
   "main": "main.js",