first working version

Author: Keven Lefebvre

package-lock.json

@@ -8,7 +8,6 @@
     "deepmerge": "^2.1.1",
     "draft-js": "^0.10.5",
     "history": "^4.7.2",
-    "js-cookie": "^2.2.0",
     "react": "^16.4.1",
     "react-app-state": "github:rodrigocfd/react-app-state#master",
     "react-dom": "^16.4.1",

package.json

@@ -7,6 +7,19 @@ import logo from '../assets/images/logo.svg';
 
 export default AuthStore.subscribe(
     class App extends Component {
+        renderIconItem = (title, icon, url) => (
+            <Popup
+                trigger={
+                    <Menu.Item as={Link} to={url}>
+                        <Icon name={icon} />
+                    </Menu.Item>
+                }
+                content={title}
+                inverted
+                position="right center"
+            />
+        );
+
         render() {
             return (
                 <Menu icon vertical>
@@ -20,19 +33,10 @@ export default AuthStore.subscribe(
                         </React.Fragment>
                     ) : (
                         <React.Fragment>
-                            <Popup
-                                trigger={
-                                    <Menu.Item as={Link} name="New note" to="/notes/new">
-                                        <Icon name="add circle" />
-                                    </Menu.Item>
-                                }
-                                content="New note"
-                                inverted
-                                position="right center"
-                            />
-                            <Menu.Item as={Link} name="Your notes" to="/notes" />
-                            <Menu.Item as={Link} name="Settings" to="/settings" />
-                            <Menu.Item as={Link} name="Logout" to="/auth/logout" />
+                            {this.renderIconItem('Your notes', 'sticky note', '/notes')}
+                            {this.renderIconItem('New note', 'add circle', '/notes/new')}
+                            {this.renderIconItem('Settings', 'settings', '/settings')}
+                            {this.renderIconItem('Logout', 'log out', '/auth/logout')}
                         </React.Fragment>
                     )}
                 </Menu>

src/components/Menu.jsx

@@ -44,9 +44,14 @@ export default EditorStore.subscribe(
 
         handleSave = () => {
             EditorStore.set({ loading: true });
-            Notes.save(this.props.note).then(() => {
+            Notes.save(this.props.note).then(({ data }) => {
+                if (this.props.note.id !== data.data.id) {
+                    History.push(`/notes/edit/${data.data.id}`);
+                }
+
                 EditorStore.set({
-                    originalNote: this.props.note,
+                    note: data.data,
+                    originalNote: data.data,
                     loading: false
                 });
             });

src/components/notes/Attributes.jsx

@@ -6,11 +6,13 @@ import TextEditor from './editors/TextEditor';
 import { EditorStore, HelpStore } from '../../stores';
 import { Notes } from '../../models';
 import History from '../../helpers/History';
+import { checkIfShouldRenderFirstNoteEncryptionNotice } from '../../helpers/Help';
 
 export default HelpStore.subscribe(
     EditorStore.subscribe(
         class extends Component {
             componentWillMount = () => {
+                checkIfShouldRenderFirstNoteEncryptionNotice();
                 if (this.props.match.params.id) {
                     EditorStore.set({
                         type: 'edit',
@@ -30,6 +32,7 @@ export default HelpStore.subscribe(
                     EditorStore.new();
                 }
             };
+
             componentWillUnmount = () => EditorStore.reset();
 
             renderFirstNoteAlert = () => (

src/components/notes/Editor.jsx

@@ -2,8 +2,6 @@ import React, { Component } from 'react';
 import { Header, Menu } from 'semantic-ui-react';
 import { ViewerStore } from '../../stores';
 import { Notes } from '../../models';
-import History from '../../helpers/History';
-import { checkIfShouldRenderFirstNoteEncryptionNotice } from '../../helpers/Help';
 import RawSegment from '../RawSegment';
 
 export default ViewerStore.subscribe(
@@ -12,22 +10,30 @@ export default ViewerStore.subscribe(
             loading: false
         };
 
-        componentWillMount = () => {
+        componentDidUpdate = prevProps => {
+            if (prevProps.location.pathname !== this.props.location.pathname) {
+                this.refreshNotes();
+            }
+        };
+
+        componentDidMount = () => this.refreshNotes();
+
+        refreshNotes = () => {
             this.setState({ loading: true });
             Notes.get().then(({ data }) => {
                 this.setState({ loading: false });
-                ViewerStore.set({ notes: data.data }, checkIfShouldRenderFirstNoteEncryptionNotice);
+                ViewerStore.set({ notes: data.data });
             });
         };
 
-        openNote = note => () => History.push(`/notes/view/${note.id}`);
+        openNote = note => () => this.props.history.push(`/notes/view/${note.id}`);
 
         renderNotes = () => {
             const { notes } = this.props;
 
             if (notes.length === 0) {
                 return (
-                    <Menu.Item onClick={() => History.push('/notes/new')}>
+                    <Menu.Item onClick={() => this.props.history.push('/notes/new')}>
                         <p>Your notes will appear here. Click here to start writing one!</p>
                     </Menu.Item>
                 );

src/components/notes/Finder.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Segment, Menu, Icon, Message } from 'semantic-ui-react';
+import { Segment, Menu, Icon, Message, Modal, Button } from 'semantic-ui-react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { docco } from 'react-syntax-highlighter/styles/hljs';
 import CryptoJS from 'crypto-js';
@@ -11,6 +11,10 @@ import History from '../../helpers/History';
 
 export default ViewerStore.subscribe(
     class extends Component {
+        state = {
+            renderDeleteConfirm: false
+        };
+
         componentWillMount = () => {
             if (this.props.match.params.id) {
                 ViewerStore.set({ loading: true });
@@ -30,8 +34,39 @@ export default ViewerStore.subscribe(
 
         handleEdit = () => History.push(`/notes/edit/${this.props.note.id}`);
 
+        handleDelete = () => this.setState({ renderDeleteConfirm: true });
+
         handleClose = () => History.push('/notes');
 
+        renderDeleteConfirmation = () => (
+            <Modal
+                open={this.state.renderDeleteConfirm}
+                onClose={() => this.setState({ renderDeleteConfirm: false })}
+            >
+                <Modal.Header>Delete a note</Modal.Header>
+                <Modal.Content>
+                    <p>Are you sure you want to delete this note? This action is not reversible.</p>
+                </Modal.Content>
+                <Modal.Actions>
+                    <Button onClick={() => this.setState({ renderDeleteConfirm: false })}>
+                        Nope, wrong button
+                    </Button>
+                    <Button
+                        onClick={() => {
+                            this.setState({ renderDeleteConfirm: false });
+                            ViewerStore.set({ loading: true });
+                            Notes.delete(this.props.note.id).then(() => {
+                                History.push(`/notes`);
+                            });
+                        }}
+                        negative
+                        icon="warning sign"
+                        content="Yes, delete this note"
+                    />
+                </Modal.Actions>
+            </Modal>
+        );
+
         renderTopMenu = () => {
             return this.props.note ? (
                 <Menu secondary attached="top">
@@ -50,6 +85,9 @@ export default ViewerStore.subscribe(
                     <Menu.Item onClick={this.handleEdit}>
                         <Icon name="pencil" /> Edit
                     </Menu.Item>
+                    <Menu.Item onClick={this.handleDelete}>
+                        <Icon name="trash" /> Delete
+                    </Menu.Item>
                     <Menu.Item onClick={this.handleClose}>
                         <Icon name="times" /> Close
                     </Menu.Item>
@@ -113,6 +151,7 @@ export default ViewerStore.subscribe(
 
             return (
                 <Segment loading={loading} className="raw calepin-viewer">
+                    {this.renderDeleteConfirmation()}
                     {this.renderTopMenu()}
                     <Segment attached={note ? 'bottom' : null}>{this.renderViewer()}</Segment>
                 </Segment>

src/components/notes/Viewer.jsx

@@ -1,18 +1,16 @@
 import axios from 'axios';
-import AuthStore from '../stores/Auth';
+import { AuthStore, SettingsStore } from '../stores';
 import history from './History';
 
 class Api {
     constructor() {
-        let service = axios.create({
-            baseURL: 'https://api.calepin.io/api/v1'
-        });
-
+        let service = axios.create();
         service.interceptors.response.use(this.handleSuccess, this.handleError);
         this.service = service;
     }
 
     beforeRequest() {
+        this.service.defaults.baseURL = SettingsStore.get('api_url');
         this.service.defaults.headers.common['Authorization'] = AuthStore.get('access_token')
             ? `Bearer ${AuthStore.get('access_token')}`
             : undefined;
@@ -23,19 +21,23 @@ class Api {
     }
 
     handleError = error => {
-        switch (error.response.status) {
-            case 401:
-                history.push('/auth/login');
-                break;
-            case 404:
-                history.push('/404');
-                break;
-            case 422:
-                window.alert(Object.values(error.response.data.errors).join('\r\n'));
-                break;
-            default:
-                history.push('/500');
-                break;
+        if (error.response && error.response.status) {
+            switch (error.response.status) {
+                case 401:
+                    history.push('/auth/login');
+                    break;
+                case 404:
+                    history.push('/404');
+                    break;
+                case 422:
+                    window.alert(Object.values(error.response.data.errors).join('\r\n'));
+                    break;
+                default:
+                    history.push('/500');
+                    break;
+            }
+        } else {
+            history.push('/500');
         }
         return Promise.reject(error);
     };
@@ -64,6 +66,11 @@ class Api {
             data: payload
         });
     }
+
+    delete(path, config) {
+        this.beforeRequest();
+        return this.service.delete(path, config);
+    }
 }
 
 export default new Api();

src/helpers/Api.js

@@ -1,7 +1,7 @@
-import { AuthStore, ViewerStore, HelpStore } from '../stores';
+import { AuthStore, HelpStore } from '../stores';
 
 export const checkIfShouldRenderFirstNoteEncryptionNotice = function() {
-    if (_checkIfShouldRenderFirstNoteEncryptionNotice === true) {
+    if (_checkIfShouldRenderFirstNoteEncryptionNotice() === true) {
         HelpStore.set({
             renderFirstNoteAlert: true
         });
@@ -14,12 +14,6 @@ function _checkIfShouldRenderFirstNoteEncryptionNotice() {
     }
 
     if (AuthStore.get('user') && !AuthStore.get('user').previous_login) {
-        console.log(AuthStore.get('user').previous_login);
-        return true;
-    }
-
-    if (!ViewerStore.get('notes').length) {
-        console.log(ViewerStore.get('notes').length);
         return true;
     }
 

src/helpers/Help.js

@@ -22,6 +22,10 @@ export default new class {
         return Api[method](url, this.encryptNote(note));
     }
 
+    delete(uuid) {
+        return Api.delete(`notes/${uuid}`);
+    }
+
     encryptNote = note => {
         // Encrypt if needed
         if (note.encrypted) {