feature/Create snippet from rails views

Author: LewisYoul

app/controllers/snippets_controller.rb

@@ -123,13 +123,13 @@ def show
   end
 
   def new
-    @page_title = 'New Snippet'
+    @snippet = Snippet.new
 
     if params[:folder_id]
       @folder_id = params[:folder_id]
       @redirect_url = params[:redirect_url]
     end
-    @folders = current_user.folders.to_json
+    @folders = current_user.folders
   end
 
   def create
@@ -148,9 +148,9 @@ def create
     end
 
     if snippet.save
-      render json: { snippet: snippet.serialize(current_user) }
+      head :ok
     else
-      render json: { errors: snippet.errors.full_messages }, status: 400
+      render partial: 'shared/errors', locals: { resource: snippet }, status: :bad_request
     end
   end
 

app/javascript/controllers/highlight_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from 'stimulus';
+
+export default class extends Controller {
+  static targets = ["code", "languages", "highlightedBody"];
+
+  connect() {
+    this.addLanguagesToSelect()
+  }
+
+  highlight(event) {
+    const rawCode = event.currentTarget.value
+    const highlightedCode = hljs.highlight('ruby', rawCode).value
+
+    this.codeTarget.innerHTML = highlightedCode
+    this.highlightedBodyTarget.value = highlightedCode
+  }
+
+  addLanguagesToSelect() {
+    hljs.listLanguages().forEach(language => {
+      const option = document.createElement('option')
+      option.text = language
+      option.value = language
+
+      this.languagesTarget.add(option)
+    })
+  }
+}

app/javascript/controllers/snippets_controller.js

@@ -2,7 +2,7 @@ import { Controller } from 'stimulus';
 import axios from 'axios';
 
 export default class extends Controller {
-  static targets = ["moveButton", "listItem"];
+  static targets = ["moveButton", "listItem", "errors"];
 
 
   initialize() {
@@ -16,6 +16,17 @@ export default class extends Controller {
     }
   }
 
+  onCreateSuccess(event) {
+    console.log('yay')
+    window.location.href = '/'
+  }
+
+  onCreateError(event) {
+    console.log('noo')
+    const [data, status, xhr] = event.detail;
+    this.errorsTarget.innerHTML = xhr.response;
+  }
+
   view_snippet(event) {
     event.stopPropagation()
     const snippetUrl = event.currentTarget.dataset.snippetUrl

app/models/snippet.rb

@@ -8,6 +8,8 @@ class Snippet < ApplicationRecord
   validates_presence_of :description
   validate :owner_folder_presence
 
+  attr_accessor :folder_id
+
   # TODO: Don't call serializers from model - just instantiate in controller
   def serializable(current_user)
     SnippetSerializer.new(self, scope: current_user)

app/views/shared/_errors.html.erb

@@ -0,0 +1,5 @@
+<ul style="color: #86181d; border: 1px solid lightgray; font-weight: 100; padding: 6px; list-style-position:inside; border-radius: 2px; background-color: #f9bbbb; font-size: 14px;">
+  <% resource.errors.full_messages.each do |message| %>
+    <li><%= message %></li>
+  <% end %>
+</ul>

app/views/snippets/new.html.erb

@@ -1,3 +1,43 @@
-<new-snippet
-  :folders="<%= @folders %>"/>
-</new-snippet>
+<div data-controller="tabs" class="card--container-padding card--container">
+  <div class="tabs--headers-container">
+    <div><h1></h1></div>
+    <div class="tabs--headers-wrapper">
+      <div data-target="tabs.tab" data-action="click->tabs#change" class="tabs--header tabs--header-active">
+        <span>Write</span>
+      </div>
+      <div data-target="tabs.tab" data-action="click->tabs#change" class="tabs--header">
+        <span>Preview</span>
+      </div>
+    </div>
+  </div>
+
+  <div data-controller="highlight snippets">
+    <div data-target="snippets.errors"></div>
+    <%= form_for @snippet, remote: true, html: { data: { type: "html", action: "ajax:success->snippets#onCreateSuccess ajax:error->snippets#onCreateError" } } do |f| %>
+      <div class="tabs-details">
+        <div data-target="tabs.panel">
+          <%= f.text_field :description, { class: "new-snippet--description", placeholder: "Snippet description..." } %>
+          <%= f.text_area :body, { data: { action: "input->highlight#highlight" }, class: "new-snippet--body", placeholder: "Snippet body..." } %>
+          <%= f.text_area :highlighted_body, { data: { target: "highlight.highlightedBody" }, class: "hidden" } %>
+        </div>
+
+        <div data-target="tabs.panel" class="hidden">
+          <pre class="code-highlight">
+            <code data-target="highlight.code"></code>
+          </pre>
+        </div>
+      </div>
+
+      <div class="create-snippet--options-wrapper">
+        <%= f.select :folder_id, options_from_collection_for_select(@folders, :id, :name) %>
+        <%= f.select :language, [], {}, { data: { target: "highlight.languages" } } %>
+        <%# <select v-model="snippetParams.language">
+          <option v-for="language in languages" :key="language" :value="language">{{ language }}</option>
+        </select> %>
+
+        <%= f.submit 'SAVE', class: "button--cta-new" %>
+      </div>
+    <% end %>
+
+  </div>
+</div>