Add post previews (#63)

* Add post previews

* Update changelog

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.9.0-beta IN PROGRESS WIP NOT YET TAGGED
+
+- Add post previews
+
 ## 0.8.0-alpha (2017-04-20)
 
 - Initial release. Basic working project with lots left to do.

apps/firestorm_web/assets/js/api.js

@@ -35,8 +35,26 @@ const UploadSignature = {
   }
 }
 
+const Preview = {
+  create: (postBody) => {
+    const payload = {
+      post: {
+        body: postBody
+      }
+    }
+    const fetch = createFetch(
+      commonStack,
+      method('POST'),
+      body(JSON.stringify(payload), 'application/json')
+    )
+
+    return fetch('/preview')
+  }
+}
+
 const Api = {
-  UploadSignature
+  UploadSignature,
+  Preview,
 }
 
 export default Api

apps/firestorm_web/assets/js/app.js

@@ -18,4 +18,5 @@ AutoExpand.expand()
 Tags.handleEditor()
 Reaction.mount()
 Posts.decorate()
+Posts.preview()
 Attachments.mount()

apps/firestorm_web/assets/js/components/attachments.js

@@ -50,6 +50,7 @@ const appendToTextArea = (filename, mimeType, xml) => {
   const $textArea = $(textAreaSelector)
   const fileMarkdown = makeMarkdown(filename, mimeType, location)
   $textArea.val(`${$textArea.val()}\n\n${fileMarkdown}`)
+  $textArea.change()
 }
 
 const mount = () => {

apps/firestorm_web/assets/js/components/posts.js

@@ -1,3 +1,5 @@
+const $ = require('jquery')
+
 import Prism from 'prismjs'
 import 'prismjs/themes/prism-solarizedlight.css'
 import 'prismjs/components/prism-elixir'
@@ -12,13 +14,30 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
 import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace'
 import 'prismjs/plugins/toolbar/prism-toolbar'
 import 'prismjs/plugins/toolbar/prism-toolbar.css'
+import Api from '../api'
 
 const decorate = () => {
   Prism.highlightAll()
 }
 
+const preview = () => {
+  const textareaSelector = '.post-editor textarea'
+  const previewContentSelector = '.post-preview .content'
+  const $textarea = $(textareaSelector)
+  const $previewContent = $(previewContentSelector)
+
+  const updatePreview = () => {
+    const body = $textarea.val()
+    Api.Preview.create(body)
+      .then(response => { $previewContent.html(response.jsonData.data.html) })
+  }
+
+  $textarea.on('keyup change', updatePreview)
+}
+
 const Posts = {
-  decorate
+  decorate,
+  preview
 }
 
 export default Posts

apps/firestorm_web/lib/firestorm_web/web/controllers/api/v1/preview_controller.ex

@@ -0,0 +1,10 @@
+defmodule FirestormWeb.Web.Api.V1.PreviewController do
+  use FirestormWeb.Web, :controller
+  alias FirestormWeb.Markdown
+
+  def create(conn, %{"post" => post_params}) do
+      conn
+      |> put_status(201)
+      |> render("show.json", html: Markdown.render(post_params["body"]))
+  end
+end

apps/firestorm_web/lib/firestorm_web/web/router.ex

@@ -52,6 +52,7 @@ defmodule FirestormWeb.Web.Router do
     get "/home", HomeController, :index
     resources "/fetch", FetchController
     resources "/upload_signature", UploadSignatureController, only: [:create]
+    resources "/preview", PreviewController, only: [:create]
   end
 
   # Inbound email routes

apps/firestorm_web/lib/firestorm_web/web/templates/post/new.html.haml

@@ -15,3 +15,7 @@
       %button.pure-button.button-primary.reply{type: "submit"}
         %i.fa.fa-mail-reply
         Reply
+
+.post-preview
+  %h3 Preview
+  .content

apps/firestorm_web/lib/firestorm_web/web/views/api/v1/preview_view.ex

@@ -0,0 +1,7 @@
+defmodule FirestormWeb.Web.Api.V1.PreviewView do
+  use FirestormWeb.Web, :view
+
+  def render("show.json", %{html: html}) do
+    %{data: %{ html: html } }
+  end
+end

apps/firestorm_web/test/controllers/api/v1/preview_controller_test.exs

@@ -0,0 +1,17 @@
+defmodule FirestormWeb.Web.Api.V1.PreviewControllerTest do
+  use FirestormWeb.ConnCase
+  alias FirestormWeb.Markdown
+
+  setup do
+    :ok = Ecto.Adapters.SQL.Sandbox.checkout(Repo)
+  end
+
+  test "POST /", %{conn: conn} do
+    post = %{
+      "body" => "this is **neat**",
+    }
+    conn = post conn, "/api/v1/preview", post: post
+    response = json_response(conn, 201)["data"]
+    assert response["html"] == Markdown.render(post["body"])
+  end
+end