story-content: Added edit/delete chapters

marko/page/story-content/components/story-content-menu/component.js

@@ -3,35 +3,32 @@ const moment = require("moment")
 module.exports = class {
   onCreate(input) {
     this.state = {
-      chapterTitles: {},
-      fdateLink: "",
-      fdate: "",
-      selectedChapter: ""
+      selectedChapter: "",
+      bullshit: 0,
     }
   }
 
   onMount() {
     this.state.selectedChapter = (window.location.hash||"#").slice(1)
+
+    // Marko is being silly and needs a state change to re-render
+    setInterval(() => {
+      this.state.bullshit++  
+      if (this.state.bullshit > 10000) {
+        this.state.bullshit = 0
+      }
+    }, 250)
   }
 
-  onInput(input) {
-    if (input.story.fictionalDate && input.story.fictionalDate.getUTCFullYear() > 10) {
-      const fdate = input.story.fictionalDate
-      
-      this.state.fdateLink = `/story/by-month/${moment(fdate).format("YYYY-MM")}`
-      this.state.fdate = moment(fdate).format("MMM D, YYYY")
+  chapterTitle(chapter) {
+    let title = "Chapter " + this.input.story.chapters.indexOf(chapter) + 1
+    if (chapter.title) {
+      title = chapter.title
+    } else if (chapter.fictionalDate && chapter.fictionalDate.getUTCFullYear() > 1) {
+      title = moment(chapter.fictionalDate).format("MMM D, YYYY")
     }
 
-    for (const chapter of input.story.chapters) {
-      let title = "Chapter " + input.story.chapters.indexOf(chapter) + 1
-      if (chapter.title) {
-        title = chapter.title
-      } else if (chapter.fictionalDate && chapter.fictionalDate.getUTCFullYear() > 1) {
-        title = moment(chapter.fictionalDate).format("MMM D, YYYY")
-      }
-
-      this.state.chapterTitles[chapter.id] = title
-    }
+    return title
   }
 
   selectChapter(id) {

marko/page/story-content/components/story-content-menu/index.marko

@@ -1,9 +1,6 @@
 <menu user=input.user>
-  <if(input.story.chapters.length > 1)>
-    <menu-header>${input.story.name}</menu-header>
-    <for(chapter in input.story.chapters | status-var=loop)>
-      <menu-link on-click("selectChapter", chapter.id) href=("#" + chapter.id) selected=(state.selectedChapter === chapter.id) icon=(loop.getIndex()+1)>${state.chapterTitles[chapter.id]}</menu-link>
-    </for>
-    <menu-gap />
-  </if>
+  <menu-header>${input.story.name}</menu-header>
+  <for(chapter in input.story.chapters | status-var=loop)>
+    <menu-link key=chapter.id on-click("selectChapter", chapter.id) href=("#" + chapter.id) selected=(state.selectedChapter === chapter.id) icon=(loop.getIndex()+1)>${component.chapterTitle(chapter)}</menu-link>
+  </for>
 </menu>