Pull request for submission

Gemfile

@@ -68,6 +68,7 @@ gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 # ==================
 group :development do
   gem 'annotate'
+  gem 'htmlbeautifier'
   gem 'awesome_print'
   gem 'better_errors'
   gem 'binding_of_caller'

Gemfile.lock

@@ -136,6 +136,7 @@ GEM
       rchardet (~> 1.8)
     globalid (1.0.0)
       activesupport (>= 5.0)
+    htmlbeautifier (1.4.2)
     i18n (1.10.0)
       concurrent-ruby (~> 1.0)
     indefinite_article (0.2.5)
@@ -200,7 +201,7 @@ GEM
       rack (>= 1.2.0)
     rack-protection (2.2.0)
       rack
-    rack-proxy (0.7.2)
+    rack-proxy (0.7.6)
       rack
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
@@ -376,6 +377,7 @@ DEPENDENCIES
   devise
   draft_generators!
   faker
+  htmlbeautifier
   jbuilder (~> 2.7)
   listen (~> 3.3)
   pg (~> 1.1)

app/controllers/comments_controller.rb

@@ -21,6 +21,7 @@ def new
   def edit
     respond_to do |format|
       format.html
+      format.js
     end
   end
 
@@ -33,6 +34,7 @@ def create
       if @comment.save
         format.html { redirect_back fallback_location: root_path, notice: "Comment was successfully created." }
         format.json { render :show, status: :created, location: @comment }
+        format.js
       else
         format.html { render :new, status: :unprocessable_entity }
         format.json { render json: @comment.errors, status: :unprocessable_entity }
@@ -46,6 +48,7 @@ def update
       if @comment.update(comment_params)
         format.html { redirect_to root_url, notice: "Comment was successfully updated." }
         format.json { render :show, status: :ok, location: @comment }
+        format.js
       else
         format.html { render :edit, status: :unprocessable_entity }
         format.json { render json: @comment.errors, status: :unprocessable_entity }
@@ -59,6 +62,7 @@ def destroy
     respond_to do |format|
       format.html { redirect_back fallback_location: root_url, notice: "Comment was successfully destroyed." }
       format.json { head :no_content }
+      format.js
     end
   end
 

app/controllers/likes_controller.rb

@@ -27,6 +27,7 @@ def create
       if @like.save
         format.html { redirect_back fallback_location: root_url, notice: "Like was successfully created." }
         format.json { render :show, status: :created, location: @like }
+        format.js
       else
         format.html { render :new, status: :unprocessable_entity }
         format.json { render json: @like.errors, status: :unprocessable_entity }
@@ -53,6 +54,7 @@ def destroy
     respond_to do |format|
       format.html { redirect_back fallback_location: root_url, notice: "Like was successfully destroyed." }
       format.json { head :no_content }
+      format.js
     end
   end
 

app/views/comments/_comment.html.erb

@@ -1,4 +1,4 @@
-<li class="list-group-item">
+<li id="<%= dom_id(comment) %>" class="list-group-item">
   <div class="media">
     <%= image_tag comment.author.avatar_image, class: "rounded-circle mr-2", width: 36 %>
     <div class="media-body">
@@ -9,17 +9,17 @@
 
         <div>
           <% if current_user == comment.author %>
-            <%= link_to edit_comment_path(comment), class: "btn btn-link btn-sm text-muted" do %>
+            <%= link_to edit_comment_path(comment), class: "btn btn-link btn-sm text-muted", remote: :true do %>
               <i class="fas fa-edit fa-fw"></i>
             <% end %>
 
-            <%= link_to comment, method: :delete, class: "btn btn-link btn-sm text-muted" do %>
+            <%= link_to comment, method: :delete, class: "btn btn-link btn-sm text-muted", remote: true do %>
               <i class="fas fa-trash fa-fw"></i>
             <% end %>
           <% end %>
         </div>
       </div>
       <p><%= comment.body %></p>
     </div>
-  </div> 
+  </div>
 </li>

app/views/comments/_form.html.erb

@@ -1,5 +1,5 @@
-<li class="list-group-item">
-  <%= form_with(model: comment) do |form| %>
+<li id="<%= context_id %>_form" class="list-group-item">
+  <%= form_with(model: comment, local: false ) do |form| %>
     <% if comment.errors.any? %>
       <div id="error_explanation">
         <ul class="list-unstyled">

app/views/comments/create.js.erb

@@ -0,0 +1,9 @@
+var added_comment = $("<%= j(render 'comments/comment', comment: @comment) %>");
+
+added_comment.hide();
+
+$("#<%= dom_id(@comment.photo) %> #new_comment_form").before(added_comment);
+
+added_comment.slideDown();
+
+$("#<%= dom_id(@comment.photo) %> #new_comment_form #comment_body").val("");

app/views/comments/destroy.js.erb

@@ -0,0 +1,3 @@
+$("#<%= dom_id(@comment) %>").slideUp(500, function() {
+$(this).remove();
+});

app/views/comments/edit.html.erb

@@ -1,7 +1,7 @@
 <div class="row mb-4">
   <div class="col-md-6 offset-md-3">
     <h1 class="display-4">editing comment</h1>
-    
-    <%= render 'form', comment: @comment %>
+
+    <%= render 'form', comment: @comment, context_id: dom_id(@comment) %>
   </div>
-</div>
+</div>

app/views/comments/edit.js.erb

@@ -0,0 +1,3 @@
+var edit_comment = $("<%= j(render 'comments/form', comment: @comment, context_id: dom_id(@comment)) %>");
+$("#<%= dom_id(@comment) %>").after(edit_comment);
+$("#<%= dom_id(@comment) %>").remove();

app/views/comments/new.html.erb

@@ -1,5 +1,5 @@
 <h1>New Comment</h1>
 
-<%= render 'form', comment: @comment %>
+<%= render 'form', comment: @comment, context_id: "new_comment" %>
 
 <%= link_to 'Back', comments_path %>

app/views/comments/update.js.erb

@@ -0,0 +1,2 @@
+var updated_comment = $("<%= j(render 'comments/comment', comment: @comment) %>");
+$("#<%= dom_id(@comment) %>_form").after(updated_comment).remove();

app/views/likes/_form.html.erb

@@ -1,4 +1,4 @@
-<%= form_with(model: like, class: "d-inline-block") do |form| %>
+<%= form_with(model: like, local: false) do |form| %>
   <%= form.hidden_field :fan_id %>
 
   <%= form.hidden_field :photo_id %>

app/views/likes/create.js.erb

@@ -0,0 +1,5 @@
+var change_like = "<%= j(render 'photos/likes', photo: @like.photo) %>";
+$("#<%= dom_id(@like.photo) %>_likes").replaceWith(change_like);
+
+var change_likes_count = "<%= j(render 'users/likes_count', user: current_user) %>";
+$("#<%= dom_id(current_user) %>_likes_count").replaceWith(change_likes_count);

app/views/likes/destroy.js.erb

@@ -0,0 +1,5 @@
+var change_like = "<%= j(render 'photos/likes', photo: @like.photo) %>";
+$("#<%= dom_id(@like.photo) %>_likes").replaceWith(change_like);
+
+var change_likes_count = "<%= j(render 'users/likes_count', user: current_user) %>";
+$("#<%= dom_id(current_user) %>_likes_count").replaceWith(change_likes_count);

app/views/photos/_likes.html.erb

@@ -0,0 +1,15 @@
+<div class="d-flex align-items-center", id="<%= dom_id(photo) %>_likes">
+  <%= pluralize(photo.likes_count, "like") %>
+
+  <% like = current_user.likes.find_by(photo: photo) %>
+
+  <% if like %>
+    <%= link_to like, class: "btn btn-link", method: :delete, remote: true do %>
+      <i class="fas fa-heart fa-fw"></i>
+
+      Un-like
+    <% end %>
+  <% else %>
+    <%= render "likes/form", like: photo.likes.build(fan: current_user) %>
+  <% end %>
+</div>

app/views/photos/_photo.html.erb

@@ -12,42 +12,27 @@
           <i class="fas fa-edit fa-fw"></i>
         <% end %>
 
-
         <%= link_to photo, method: :delete, class: "btn btn-link btn-sm text-muted" do %>
           <i class="fas fa-trash fa-fw"></i>
         <% end %>
       <% end %>
-      
+
     </div>
   </div>
 
   <%= image_tag photo.image, class: "img-fluid" %>
-  
+
   <div class="card-body">
     <div class="mb-3 d-flex justify-content-between">
-      <div class="d-flex align-items-baseline">
-        <%= pluralize(photo.likes_count, "like") %>
 
-        <% like = current_user.likes.find_by(photo: photo) %>
-
-        <% if like %>
-          <%= link_to like, class: "btn btn-link", method: :delete do %>
-            <i class="fas fa-heart fa-fw"></i>
-
-            Un-like
-          <% end %>
-        <% else %>
-          <%= render "likes/form", like: photo.likes.build(fan: current_user) %>
-        <% end %>
-      </div>
+      <%= render 'photos/likes', photo: photo %>
 
       <div>
         <% unless policy(photo).show? %>
           <%= render "follow_requests/follow_unfollow", recipient: photo.owner %>
         <% end %>
       </div>
     </div>
-
 
     <p class="card-text"><%= photo.caption %></p>
   </div>
@@ -57,8 +42,8 @@
       <% photo.comments.default_order.each do |comment| %>
         <%= render "comments/comment", comment: comment %>
       <% end %>
-      
-      <%= render "comments/form", comment: photo.comments.build %>
+
+      <%= render "comments/form", comment: photo.comments.build, context_id: "new_comment" %>
     </ul>
   <% end %>
 </div>

app/views/shared/_navbar.html.erb

@@ -11,7 +11,7 @@
         <% if user_signed_in? %>
           <li class="nav-item">
             <%= link_to feed_path(current_user.username), class: "nav-link" do %>
-              <i class="fas fa-users fa-fw"></i></i>
+              <i class="fas fa-users fa-fw"></i>
 
               Feed
             <% end %>
@@ -63,4 +63,4 @@
       </ul>
     </div>
   </div>
-</nav>
+</nav>

app/views/users/_likes_count.html.erb

@@ -0,0 +1,3 @@
+<span class="badge badge-pill badge-secondary", id="<%= dom_id(user) %>_likes_count">
+  <%= user.likes.count %>
+</span>

app/views/users/_profile_nav.html.erb

@@ -1,12 +1,12 @@
-<ul class="nav nav-tabs nav-justified mb-1">    
+<ul class="nav nav-tabs nav-justified mb-1">
   <li class="nav-item">
     <%=
       active_link_to user_path(user.username),
         class: "nav-link",
         active: :exclusive do %>
-      
+
       Posts
-      
+
       <span class="badge badge-pill badge-secondary">
         <%= user.own_photos.count %>
       </span>
@@ -19,10 +19,7 @@
         class: "nav-link" do %>
 
       Liked
-
-      <span class="badge badge-pill badge-secondary">
-        <%= user.likes.count %>
-      </span>
+      <%= render "users/likes_count", user: user %>
     <% end %>
   </li>
-</ul> 
+</ul>

babel.config.js

@@ -53,18 +53,6 @@ module.exports = function(api) {
           useBuiltIns: true
         }
       ],
-      [
-        '@babel/plugin-proposal-private-methods',
-        {
-          loose: true
-        }
-      ],
-      [
-        '@babel/plugin-proposal-private-property-in-object',
-        {
-          loose: true
-        }
-      ],
       [
         '@babel/plugin-transform-runtime',
         {

config/database.yml

@@ -23,7 +23,7 @@ default: &default
 
 development:
   <<: *default
-  database: vanilla_rails_development
+  database: photogram_development
 
   # The specified database role being used to connect to postgres.
   # To create additional roles in postgres see `$ createuser --help`.
@@ -57,7 +57,7 @@ development:
 # Do not set this db to the same as development or production.
 test:
   <<: *default
-  database: vanilla_rails_test
+  database: photogram_test
 
 # As with config/credentials.yml, you never want to store sensitive information,
 # like your database password, in your source code. If your source code is

package.json

@@ -1,10 +1,15 @@
 {
+  "name": "vanilla-rails",
+  "private": true,
   "dependencies": {
-    "@rails/webpacker": "5.4.3",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12"
+    "@rails/actioncable": "^6.0.0",
+    "@rails/activestorage": "^6.0.0",
+    "@rails/ujs": "^6.0.0",
+    "@rails/webpacker": "5.2.1",
+    "turbolinks": "^5.2.0"
   },
+  "version": "0.1.0",
   "devDependencies": {
-    "webpack-dev-server": "^3"
+    "webpack-dev-server": "^3.11.2"
   }
 }