From 60a76979df5170ab4026e1122cd1e8f31d174e50 Mon Sep 17 00:00:00 2001
From: James Shiffer <2191476+scoliono@users.noreply.github.com>
Date: Tue, 1 Sep 2020 21:30:40 -0700
Subject: [PATCH] article edit feature

---
 src/models/article.js        |  1 +
 src/routes/a/[slug].json.js  |  4 +-
 src/routes/a/[slug].svelte   |  3 ++
 src/routes/cms/create.svelte | 13 +++--
 src/routes/cms/edit.svelte   | 42 ++++++++++++++++
 src/routes/cms/index.svelte  |  2 +-
 src/server.js                | 97 ++++++++++++++++++++++++------------
 7 files changed, 123 insertions(+), 39 deletions(-)
 create mode 100644 src/routes/cms/edit.svelte

diff --git a/src/models/article.js b/src/models/article.js
index 550baf4..5cc4c10 100644
--- a/src/models/article.js
+++ b/src/models/article.js
@@ -11,6 +11,7 @@ const ArticleSchema = new Schema({
     slug: { type: String, index: { unique: true } },
     image: { type: String, required: true },
     created_at: { type: Date, default: Date.now },
+    updated_at: { type: Date },
     html: { type: String, required: true },
     comments: [{
         content: { type: String, required: true },
diff --git a/src/routes/a/[slug].json.js b/src/routes/a/[slug].json.js
index 22b1771..1abc16d 100644
--- a/src/routes/a/[slug].json.js
+++ b/src/routes/a/[slug].json.js
@@ -12,7 +12,9 @@ export async function get(req, res, next) {
     });
 
     if (article) {
-        article.set({ views: article.views + 1 });
+        if (req.query.no_view !== '1') {
+            article.set({ views: article.views + 1 });
+        }
         await article.save();
         res.writeHead(200, {
             'Content-Type': 'application/json'
diff --git a/src/routes/a/[slug].svelte b/src/routes/a/[slug].svelte
index 46d51bd..435a501 100644
--- a/src/routes/a/[slug].svelte
+++ b/src/routes/a/[slug].svelte
@@ -214,6 +214,9 @@
             <p>Author: <img class="avatar" alt={article.author.realname} src={`/u/${article.author.avatar || 'default.jpg'}`}> <strong>{article.author.realname}</strong></p>
             <p>Category: <strong><a href={`/c/${article.category.slug}`}>{article.category.name}</a></strong></p>
             <p>Published: <strong>{new Date(article.created_at).toLocaleString()}</strong></p>
+            {#if article.updated_at}
+            <p>Last Updated: <strong>{new Date(article.updated_at).toLocaleString()}</strong></p>
+            {/if}
             <p>Views: <strong>{article.views}</strong></p>
         </blockquote>
     </div>
diff --git a/src/routes/cms/create.svelte b/src/routes/cms/create.svelte
index fec1d73..6cf6009 100644
--- a/src/routes/cms/create.svelte
+++ b/src/routes/cms/create.svelte
@@ -6,7 +6,9 @@
         }
         const res = await this.fetch('/c.json');
         const categories = await res.json();
-        return { user: session.user, categories };
+        const origRes = page.query.edit && await this.fetch(`/a/${page.query.edit}.json?no_view=1`)
+        const editArticle = origRes && await origRes.json();
+        return { user: session.user, categories, editArticle };
     }
 </script>
 
@@ -20,6 +22,7 @@
     let editor, form, uploadForm;
     let loading = false, loadingAttach = false;
     let title = '', category = '';
+    export let editArticle = undefined;
     export let categories;
 
     let actions = [
@@ -55,9 +58,9 @@
     ];
 
     onMount(function load() {
-        title = window.localStorage['title'] || '';
-        category = window.localStorage['category'] || '';
-        editor.setHtml(window.localStorage['html'] || '', false);
+        title = editArticle ? editArticle.title : (window.localStorage['title'] || '');
+        category = editArticle ? editArticle.category.slug : (window.localStorage['category'] || '');
+        editor.setHtml(editArticle ? editArticle.html : (window.localStorage['html'] || ''), false);
     });
 
     async function submit()
@@ -67,7 +70,7 @@
         fd.append('html', html);
         loading = true;
         try {
-            const res = await fetch(`/cms/article`, {
+            const res = await fetch(editArticle ? `/cms/article/${editArticle.slug}` : `/cms/article`, {
                 method: 'POST',
                 headers: {
                     'Accept': 'application/json'
diff --git a/src/routes/cms/edit.svelte b/src/routes/cms/edit.svelte
new file mode 100644
index 0000000..f888651
--- /dev/null
+++ b/src/routes/cms/edit.svelte
@@ -0,0 +1,42 @@
+<script context="module">
+    export async function preload(page, session)
+    {
+        if (!session.user || !session.user.author) {
+            return this.redirect(302, '/cms');
+        }
+        const res = await this.fetch(`/c/all.json`);
+        const json = await res.json();
+        if (res.status === 200) {
+            return { articles: json.articles, user: session.user };
+        } else {
+            this.error(res.status, json.message);
+        }
+    }
+</script>
+
+<svelte:head>
+    <title>Edit Article | HOWFEED.BIZ</title>
+</svelte:head>
+
+<script>
+    import { goto } from '@sapper/app';
+    export let articles = [];
+</script>
+
+<div class="content">
+    <a href="/cms">&lt; Back to Dashboard</a>
+    <h1>Edit an Article</h1>
+    <p>Choose an article to edit:</p>
+    <ul>
+    {#each articles as article}
+        <li>
+            <a href={`/cms/create?edit=${encodeURIComponent(article.slug)}`}>
+                <strong>{article.title}</strong> by <strong>{article.author.realname}</strong>
+                ({article.views} views)
+            </a>
+        </li>
+    {:else}
+        <li>There are no published articles.</li>
+    {/each}
+    </ul>
+</div>
diff --git a/src/routes/cms/index.svelte b/src/routes/cms/index.svelte
index 8b5a522..7bc34d0 100644
--- a/src/routes/cms/index.svelte
+++ b/src/routes/cms/index.svelte
@@ -22,7 +22,7 @@
     {#if user.author}
         <h1>HowFeed Publisher Dashboard</h1>
         <p><a href="/cms/create">Publish a new article</a></p>
-        <p><strike><a href="/cms/update">Edit an existing article</a></strike> Coming soon!</p>
+        <p><a href="/cms/edit">Edit an existing article</a></p>
         <p><a href="/cms/delete">Delete an article</a></p>
         <h1>Account Settings</h1>
         <p><a href="/me/avatar">Change your avatar</a></p>
diff --git a/src/server.js b/src/server.js
index 804e4e2..91e12b7 100644
--- a/src/server.js
+++ b/src/server.js
@@ -251,13 +251,27 @@ express()
         });
     })
 
-    .post('/cms/article',
+    .post('/cms/article/:edit?',
         isAuthor,
         async function(req, res, next) {
             try {
+                let editArticle;
+                if (req.params.edit) {
+                    editArticle = await Article.findOne({ slug: req.params.edit });
+                    if (!editArticle) {
+                        res.writeHead(404, {
+                            'Content-Type': 'application/json'
+                        });
+                        res.end(JSON.stringify({
+                            message: `Article to edit not found`
+                        }));
+                        return false;
+                    }
+                }
+
                 const { html, title, category } = req.body;
-                const { image } = req.files;
-                if (!title || !image || !html || !category) {
+                const image = req.files && req.files.image;
+                if (!title || (!editArticle && !image) || !html || !category) {
                     res.writeHead(422, {
                         'Content-Type': 'application/json'
                     });
@@ -266,23 +280,30 @@ express()
                     }));
                     return false;
                 }
-                if (!/^image\//.test(image.mimetype)) {
-                    res.writeHead(422, {
-                        'Content-Type': 'application/json'
-                    });
-                    res.end(JSON.stringify({
-                        message: `Invalid MIME type for the header image file.`
-                    }));
-                    return false;
-                }
-                if (image.truncated) {
-                    res.writeHead(422, {
-                        'Content-Type': 'application/json'
-                    });
-                    res.end(JSON.stringify({
-                        message: `Received truncated image file. Try again with a smaller file.`
-                    }));
-                    return false;
+                let ext, filename, url;
+                if (image) {
+                    if (!/^image\//.test(image.mimetype)) {
+                        res.writeHead(422, {
+                            'Content-Type': 'application/json'
+                        });
+                        res.end(JSON.stringify({
+                            message: `Invalid MIME type for the header image file.`
+                        }));
+                        return false;
+                    }
+                    if (image.truncated) {
+                        res.writeHead(422, {
+                            'Content-Type': 'application/json'
+                        });
+                        res.end(JSON.stringify({
+                            message: `Received truncated image file. Try again with a smaller file.`
+                        }));
+                        return false;
+                    }
+                    ext = image.name.match(/(\.[^.]+)$/)[0];
+                    filename = crypto.randomBytes(20).toString('hex') + ext;
+                    url = `/a/${filename}`;
+                    await image.mv('./static' + url);
                 }
                 const cat = await Category.findOne({ slug: category });
                 if (!cat) {
@@ -294,18 +315,30 @@ express()
                     }));
                     return false;
                 }
-                const ext = image.name.match(/(\.[^.]+)$/)[0];
-                const filename = crypto.randomBytes(20).toString('hex') + ext;
-                const url = `/a/${filename}`;
-                await image.mv('./static' + url);
-                const article = await new Article({ html, title, image: filename, category: cat, author: req.user._id });
-                await article.save();
-                res.writeHead(200, {
-                    'Content-Type': 'application/json'
-                });
-                res.end(JSON.stringify({
-                    slug: article.slug
-                }));
+                if (editArticle) {
+                    let newObj = {
+                        html, title, category: cat, updated_at: Date.now()
+                    };
+                    if (filename) {
+                        newObj.image = filename;
+                    }
+                    await Article.updateOne({ slug: editArticle.slug }, { $set: newObj });
+                    res.writeHead(200, {
+                        'Content-Type': 'application/json'
+                    });
+                    res.end(JSON.stringify({
+                        slug: editArticle.slug
+                    }));
+                } else {
+                    const article = await new Article({ html, title, image: filename, category: cat, author: req.user._id });
+                    await article.save();
+                    res.writeHead(200, {
+                        'Content-Type': 'application/json'
+                    });
+                    res.end(JSON.stringify({
+                        slug: article.slug
+                    }));
+                }
             } catch (err) {
                 res.writeHead(500, {
                     'Content-Type': 'application/json'