Refresh + Reload

package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "electron-compile": "^6.4.2",
     "electron-squirrel-startup": "^1.0.0",
+    "immutability-helper": "^2.6.5",
     "markdown-it": "^8.4.0",
     "markdown-it-katex": "^2.0.3",
     "mousetrap": "^1.6.1",

src/components/home/index.js

@@ -61,7 +61,7 @@ class Addset extends Component {
     }
     submit() {
         if (this.state.clickable !== "") {
-            logic.process(this.state.setpath, this.state.setname, this.state.selected, this.props.actualize);
+            logic.make_new(this.state.setpath, this.state.setname, this.state.selected, this.props.actualize);
             //console.log(this.state.setpath, this.state.setname, this.state.selected, this.props.actualize);
             this.closeModal();
         }

src/components/home/logic.js

@@ -12,38 +12,71 @@ var md = require('markdown-it')({
     typographer: true,
 }).use(require('markdown-it-katex'));
 
+/*Function to actualize document*/
+export function refresh(doc_id, actualize) {
+    mypouch.getset(doc_id).then( doc => {
+        console.log(doc);
+        fs.readFile(doc.setpath, 'utf-8', (err, new_data) => {
+            if(err){
+                alert("An error ocurred reading the file :" + err.message);
+                return;
+            }
+            var new_cards = parseMD(new_data, doc.setlevel);
+            doc.cards = new_cards;
+            mypouch.updateset(doc).then( result => {
+                actualize();
+            }).catch(function (err) {
+                console.log(err);
+            });
+        });
+    }).catch(function(err) {
+        console.log(err);
+    });
+    return;
+}
+
+/* Function to create new document*/
 export function get() {
     //getfile
     return remote_dialog.showOpenDialog({ filters: [
         { name: 'markdown', extensions: ['md', 'txt'] }
     ]});
 }
-
-export function process(filepath, setname, headerlevel, actualize) {
+export function make_new(filepath, setname, headerlevel, actualize) {
     fs.readFile(filepath, 'utf-8', (err, data) => {
         if(err){
             alert("An error ocurred reading the file :" + err.message);
             return;
         }
-        parseMD(data, setname, headerlevel, actualize);
+        // create
+        var new_doc = {
+          title: setname,
+          setpath: filepath,
+          setlevel: headerlevel,
+          cards: parseMD(data, headerlevel)
+        };
+        mypouch.addset(new_doc).then( result => {
+            actualize();
+        }).catch(function (err) {
+            console.log(err);
+        });
     });
 }
 
-function parseMD(data, setname, headerlevel, actualize) {
+/* Function to do all the work*/
+function parseMD(data, headerlevel) {
     //to HTML
     var parsed = md.render(data);
 
     //split
     var div = document.createElement("div"), nodes;
     div.innerHTML = parsed;
     nodes = [].slice.call(div.children); // slice in array of all childnodes(childNodes)
-    console.log(nodes);
+    //console.log(nodes);
 
     //cards format: {"f" : "frontside1", "b" : "<b>backside1</b>"}
-    var set = {
-      title: setname,
-      cards: []
-    };
+    var cards = [];
+
     var active = false;
     var length = nodes.length;
     var regex1 = new RegExp('^h[1-' + headerlevel.toString() + ']$', 'i'),
@@ -54,24 +87,20 @@ function parseMD(data, setname, headerlevel, actualize) {
                 active = false;
             }
             else {
-                set.cards[set.cards.length-1].b += node.outerHTML;
+                cards[cards.length-1].b += node.outerHTML;
             }
         }
         if (regex2.test(node.nodeName)) {
             active = true;
-            set.cards.push({"f" : node.innerHTML, "b" : ""});
+            cards.push({"f" : node.innerHTML, "b" : ""});
         }
     });
 
-    console.log(set);
+    console.log(cards);
     //add set to database
-    if (set.cards.length === 0) {
+    if (cards.length === 0) {
         console.log("no cards");
         return;
     }
-    mypouch.addset(set).then( result => {
-        actualize();
-    }).catch(function (err) {
-        console.log(err);
-    });
+    return cards;
 };

src/components/oneset/index.js

@@ -1,14 +1,17 @@
 import React, { Component } from 'react';
+import update from 'immutability-helper';
 import * as Mousetrap from 'mousetrap'
 import './oneset.css';
 import './markdown.css';
 import { Link, Redirect } from 'react-router-dom'
 import * as mypouch from '../../pouch.js';
+import * as logic from '../home/logic.js';
 
 class Card extends Component {
     constructor(props) {
         super(props);
         this.state = {
+            cards: this.props.cards,
             index: 0,
             hidden: true
         };
@@ -18,6 +21,12 @@ class Card extends Component {
         this.forward = this.forward.bind(this);
         this.backward = this.backward.bind(this);
     }
+    componentWillReceiveProps(nextProps){
+        if (nextProps.cards !== this.props.cards) {
+            this.setState({ cards: nextProps.cards })
+        }
+    }
+
     componentDidMount() {
         Mousetrap.bind('space', this.hide);
         Mousetrap.bind('left', this.backward);
@@ -50,26 +59,29 @@ class Card extends Component {
         });
     }
     render() {
+        //console.log("State ", this.state.cards);
+        //console.log("Props ", this.props.cards);
+        console.log("render: ", this.state.cards)
         return (
             <div>
                 <div className="container cardside" id="frontside"
                     onClick={() => this.hide()}>
-                    <h4 dangerouslySetInnerHTML={{__html: this.props.cards[this.state.index].f}}>
+                    <h4 dangerouslySetInnerHTML={{__html: this.state.cards[this.state.index].f}}>
                     </h4>
                 </div>
                 {
                     (!this.state.hidden)? (
                         <div className="cardside container" id="backside">
-                            <div className="innercard markdown-body" dangerouslySetInnerHTML={{__html: this.props.cards[this.state.index].b}}></div>
+                            <div className="innercard markdown-body" dangerouslySetInnerHTML={{__html: this.state.cards[this.state.index].b}}></div>
                         </div>
                     ) : (null)
                 }
                 <div id="arrow-container">
-                    <a className="fa fa-arrow-left fa-lg arrows"
+                    <a className="fa fa-arrow-left fa-lg click"
                         aria-hidden="true"
                         onClick={() => this.backward()}></a>
                     &nbsp;&nbsp;&nbsp;
-                    <a className="fa fa-arrow-right fa-lg arrows"
+                    <a className="fa fa-arrow-right fa-lg click"
                         aria-hidden="true"
                         onClick={() => this.forward()}></a>
                 </div>
@@ -83,23 +95,18 @@ class Oneset extends Component {
         super(props);
         this.state = {
             loaded: false,
+            doc: {},
             redirect: false
         };
-        mypouch.getset(props.match.params.path_id).then( data => {
-            console.log("Successfully got doc!");
-            this.doc = data;
-            this.setState({
-                loaded: true
-            });
-            this.render();
-        }).catch(function(err) {
-            console.log(err);
-        });
         this.render = this.render.bind(this);
         this.componentDidMount = this.componentDidMount.bind(this);
         this.componentWillUnmount = this.componentWillUnmount.bind(this);
         this.setRedirect = this.setRedirect.bind(this);
         this.renderRedirect = this.renderRedirect.bind(this);
+        this.getdoc = this.getdoc.bind(this);
+        this.refresh = this.refresh.bind(this);
+
+        this.getdoc()
     }
     componentDidMount() {
         Mousetrap.bind('esc', this.setRedirect);
@@ -117,21 +124,51 @@ class Oneset extends Component {
             return <Redirect to='/'/>;
         }
     }
+    randomize() {
+        this.setState(update(this.state, {
+            doc: {
+                cards: {$set: this.state.doc.cards.sort(function(a, b){
+                    return 0.5 - Math.random();
+                })}
+            }
+        }));
+    }
+    getdoc() {
+        console.log("getdoc");
+        mypouch.getset(this.props.match.params.path_id).then( data => {
+            console.log("Successfully got doc!");
+            this.setState({
+                loaded: true,
+                doc: data
+            });
+            this.render();
+        }).catch(function(err) {
+            console.log(err);
+        });
+    }
+    refresh() {
+        logic.refresh(this.props.match.params.path_id, this.getdoc);
+    }
     render() {
         if (this.state.loaded) {
             return (
                 <div>
-
-                    {this.renderRedirect()}
                     <div id="header">
-                        <h4>{this.doc.title}</h4>
+                        <h4>{this.state.doc.title}</h4>
                         <Link id="back" to="/">
                             <i className="fa fa-caret-left fa-lg" aria-hidden="true"></i>
                             &nbsp;Sets
                         </Link>
+                        <div id="actions">
+                            <a className="fa fa-random click" title="randomize" aria-hidden="true"
+                                onClick={() => this.randomize()}></a>
+                            &nbsp;&nbsp;
+                            <a className="fa fa-refresh click" title="refresh" aria-hidden="true"
+                                onClick={() => this.refresh()}></a>
+                        </div>
                     </div>
                     <div id="main">
-                        <Card cards={this.doc.cards}/>
+                        <Card cards={this.state.doc.cards}/>
                     </div>
                 </div>
             );

src/components/oneset/oneset.css

@@ -1,15 +1,26 @@
 /* Application */
-.arrows {
+.click {
     cursor: pointer;
+    user-select: none;
 }
 #arrow-container {
     text-align: center;
+    user-select: none;
 }
 #back {
     position: fixed;
     top: 30px;
     left: 30px;
     text-decoration:none;
+    user-select: none;
+}
+#actions {
+    position: fixed;
+    top: 30px;
+    right: 30px;
+    text-decoration:none;
+    user-select: none;
+    cursor: default;
 }
 /* Cards*/
 .cardside {

src/pouch.js

@@ -4,6 +4,9 @@ var db = new PouchDB('./pouch');
 export async function addset(set) {
     return await db.post(set);
 }
+export async function updateset(doc) {
+    return await db.put(doc);
+}
 
 export async function showsets() {
     try {
@@ -24,12 +27,6 @@ export async function showsets() {
 }
 
 export async function deleteid(id) {
-    /*console.log(set);
-    db.remove(set.doc).then( result => {
-      console.log(result);
-    }).catch(function (err) {
-      console.log(err);
-  });*/
   return await db.get(id).then(function(doc) {
       return db.remove(doc);
   });

yarn.lock

@@ -3886,6 +3886,12 @@ immediate@3.0.6, immediate@~3.0.5:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
 
+immutability-helper@^2.6.5:
+  version "2.6.5"
+  resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-2.6.5.tgz#94a10f18f1196244b2dea92d46522d2b4dce7b73"
+  dependencies:
+    invariant "^2.2.0"
+
 import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
@@ -3967,6 +3973,12 @@ interpret@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
 
+invariant@^2.2.0:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.3.tgz#1a827dfde7dcbd7c323f0ca826be8fa7c5e9d688"
+  dependencies:
+    loose-envify "^1.0.0"
+
 invariant@^2.2.1, invariant@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"