use zipper module for cycling through posts to edit

src/posts.py

@@ -49,3 +49,6 @@ class Posts:
 
     def getpost(self, _id):
         return jsonify(self.db[_id])
+
+    def delete(self, _id):
+        return self.db[_id].delete()

src/scripts/editor.tag

@@ -2,43 +2,56 @@
   <div class="centered container">
     <div class="columns">
       <div class="column col-6">
-        <ul>
+        <div>
-          <li each={this.currentPosts}>
+          <span>
-            <p>
+            {this.currentPost().title} by {this.currentPost().author}
-              {title} by {author}
+          </span>
-            </p>
           <button
             class="btn btn-primary"
-              onclick={loadPost(this._id)}>
+            onclick={loadPost(this.currentPost()._id)}>
               Load it
           </button>
-          </li>
+        </div>
-        </ul>
+        <button
+          class="btn btn-primary"
+          onclick={goLeft}
+        >
+          Prev
+        </button>
+        <button
+          class="btn btn-primary"
+          onclick={goRight}
+        >
+          Next
+        </button>
+        <p>
           <button
             class="btn btn-primary"
             onclick={newPost}
           >
             New Post
           </button>
+        </p>
 
+        <p>
           <span>title</span><input ref="title">
           <span>author</span><input ref="author"></input>
-        <span>Editing post {_id}</span>
+          <span>Editing post {this.currentPost()._id}</span>
           <textarea onfocus={clearplaceholder}
                     onblur={checkplaceholder}
                     oninput={echo}
-                  rows="30"
+                    rows="10"
                     cols="10"
                     __disabled={""}
                     class="editor form-input centered"
-                  ref="textarea"
+                    ref="textarea">
-                  maxlength={this.maxlength}>
             { placeholder }
           </textarea>
           <button onclick={submit}
                   class="btn post-submit centered">
             Submit Post
           </button>
+        </p>
       </div>
 
       <div class="column col-6">
@@ -66,9 +79,28 @@ this.placeholderText = "Write a post!"
 this.placeholder = this.placeholderText;
 this.focused = false;
 
-this.currentPosts = [];
+this.currentPosts = Z.empty;
+
 var self = this;
 
+currentPost() {
+  var defaultPost = {
+    "_id" : "",
+    "title" : "",
+    "author" : ""
+  };
+
+  return Z.focus(self.currentPosts, defaultPost);
+}
+
+goRight() {
+  self.update({"currentPosts" : Z.goRight(self.currentPosts)});
+}
+
+goLeft() {
+  self.update({"currentPosts" : Z.goLeft(self.currentPosts)});
+}
+
 clearplaceholder() {
   if (!this.focused) {
     this.update({
@@ -90,8 +122,7 @@ checkplaceholder() {
 echo(ev) {
   this.update({
       "converted" : this.converter.makeHtml(
-                      this.refs.textarea.value.trim()
+                      this.refs.textarea.value.trim())
-                    )
     });
 }
 
@@ -138,7 +169,7 @@ submit() {
 
 loadPost(_id) {
   return function() {
-    axios.get(`/blog/getpost/${_id}`)
+    axios.get(`/blog/getpost/${self.currentPost()._id}`)
     .then(function(resp) {
 
       self.refs.textarea.value = resp.data.content;
@@ -159,7 +190,11 @@ loadPost(_id) {
 listPosts() {
   axios.get("/blog/allposts")
   .then(function(resp) {
-    self.update({"currentPosts" : resp.data});
+    self.update(
+      {
+        "currentPosts" : Z.extend(self.currentPosts, resp.data)
+      }
+    );
   })
   .catch(function(err) {
     console.log(err);

src/scripts/zipper.js

@@ -43,6 +43,10 @@ function goLeft(z) {
                 z.right.unshift(z.left.first()));
 }
 
+function extend(z, xs) {
+  return Zipper(z.left, z.right.concat(xs));
+}
+
 var empty = fromList([]);
 
 export default {
@@ -51,5 +55,6 @@ export default {
   "goRight" : goRight,
   "goLeft" : goLeft,
   "empty" : empty,
-  "fromList" : fromList
+  "fromList" : fromList,
+  "extend" : extend
 };

src/styles/riotblog.scss

@@ -86,6 +86,4 @@ $branding: #5764c6;
   margin-top: 10%;
 }
 
-.editor {
+.editor {}
-  height: 100% !important;
-}

src/website.py

@@ -101,6 +101,11 @@ def NeverWhere(configfile=None):
     def getpost(_id):
         return posts.getpost(_id)
 
+    @app.route("/blog/del/<_id>")
+    @login_required
+    def delete(_id):
+        return posts.delete(_id)
+
     # editor routes
 
     @app.route("/blog/editor/", methods=("GET", "POST"))