Implement remark preview

assets/css/simple.css

@@ -64,6 +64,12 @@
   padding: 0.5em 1em;
 }
 
+.form-preview {
+    background-color: var(--dark-warm-gray);
+    border: inset var(--dark-warm-gray) 0.18rem;
+    padding: 0.25em 0.5em;
+}
+
 .form-body {
   background-color: var(--light-warm-gray);
   border: outset var(--light-warm-gray) 0.18rem;

lib/PostText/Controller/Remark.pm

@@ -17,37 +17,43 @@ sub by_id($self) {
 sub create($self) {
     my $thread_id = $self->param('thread_id');
     my $remark_id = $self->param('remark_id');
-    my $v;
+    my ($v, $draft);
 
     $v = $self->validation if $self->req->method eq 'POST';
 
     if ($v && $v->has_data) {
-        $v->required('author')->size(1,   63);
-        $v->required('body'  )->size(2, 4000);
-        $v->optional('bump'  );
+        $v->required('author' )->size(1,   63);
+        $v->required('body'   )->size(2, 4000);
+        $v->optional('bump'   );
+        $v->optional('preview');
 
         if ($v->has_error) {
             $self->stash(status => 400)
         }
         else {
-            my $remark_author = $v->param('author');
-            my $remark_body   = $v->param('body'  );
-            my $bump_thread   = $v->param('bump'  );
-
-            $self->remark->create(
-                $thread_id,
-                $remark_author,
-                $remark_body
-                );
+            my $remark_author = $v->param('author' );
+            my $remark_body   = $v->param('body'   );
+            my $bump_thread   = $v->param('bump'   );
+            my $preview       = $v->param('preview');
 
             $self->session(author => $remark_author);
 
-            $self->thread->bump($thread_id) if $bump_thread;
+            unless ($preview) {
+                $self->remark->create(
+                    $thread_id,
+                    $remark_author,
+                    $remark_body
+                    );
 
-            return $self->redirect_to($self->url_for(single_thread => {
-                thread_id   => $thread_id,
-                thread_page => $self->remark->last_page_for($thread_id)
-            })->fragment('remarks'));
+                $self->thread->bump($thread_id) if $bump_thread;
+
+                return $self->redirect_to($self->url_for(single_thread => {
+                    thread_id   => $thread_id,
+                    thread_page => $self->remark->last_page_for($thread_id)
+                })->fragment('remarks'));
+            }
+
+            $draft = $remark_body;
         }
     }
 
@@ -58,7 +64,8 @@ sub create($self) {
 
     $self->stash(
         thread      => $thread,
-        last_remark => $last_remark
+        last_remark => $last_remark,
+        draft       => $draft
         );
 
     $self->stash(status => 404, error => 'Thread not found 🤷')

t/preview.t

@@ -0,0 +1,37 @@
+use Mojo::Base -strict;
+use Test::More;
+use Test::Mojo;
+
+my $t = Test::Mojo->new('PostText');
+
+#my %preview_thread = (
+#    author  => 'Anonymous',
+#    title   => 'hi',
+#    body    => 'ayy... lmao',
+#    preview => 1
+#    );
+my %preview_remark = (
+    author  => 'Anonymous',
+    body    => 'ayy... lmao',
+    preview => 1
+    );
+
+subtest 'Check the form + button', sub {
+    $t->get_ok('/remark/post/1')->status_is(200)
+        ->element_exists('input[id="preview"]');
+
+    #$t->get_ok('/thread/post')->status_is(200)
+    #    ->element_exists('input[id="preview"]');
+};
+
+subtest 'Submit input', sub {
+    $t->post_ok('/remark/post/1', form => \%preview_remark)
+        ->status_is(200)
+        ->text_like(p => qr/ayy\.\.\. lmao/);
+
+    #$t->post_ok('/thread/post', form => \%preview_thread)
+    #    ->status_is(200)
+    #    ->text_like(p => qr/ayy\.\.\. lmao/);
+};
+
+done_testing;

templates/remark/create.html.ep

@@ -14,6 +14,11 @@
         content="Remark on thread #<%= $thread->{'id'} %>.">
 <% end %>
 <form method="post" class="form-body">
+  <% if ($draft) { =%>
+  <div class="form-preview">
+    <%== markdown $draft =%>
+  </div>
+  <% } =%>
   <div class="form-field">
     <% if (my $error = validation->error('author')) { =%>
     <p class="field-with-error">Must be between <%= $error->[2] %>
@@ -46,6 +51,10 @@
     <%= check_box bump => 1, id => 'bump', checked => undef %>
     <%= label_for bump => 'Bump' %>
   </div>
+  <div class="form-checkbox">
+    <%= check_box preview => 1, id => 'preview' %>
+    <%= label_for preview => 'Preview' %>
+  </div>
   <button type="submit" class="form-button">Post</button>
 </form>
 <%# Putting this first above the thread body (nested if, yucky sry) %>