Trying to add a comment form to wall index page

Gemfile

@@ -16,6 +16,7 @@ gem 'coffee-rails', '~> 4.2'
 # gem 'therubyracer', platforms: :ruby
 # Use jquery as the JavaScript library
 gem 'jquery-rails'
+gem 'jquery-ui-rails'
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
 gem 'turbolinks', '~> 5'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
@@ -32,6 +33,7 @@ gem "mini_magick"
 gem 'rmagick'
 gem "animate-rails"
 gem 'best_in_place', '~> 3.0.1'
+gem 'simple_form'
 
 # Use Capistrano for deployment
 # gem 'capistrano-rails', group: :development

Gemfile.lock

@@ -81,6 +81,8 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
+    jquery-ui-rails (5.0.5)
+      railties (>= 3.2.16)
     json (2.0.2)
     listen (3.0.8)
       rb-fsevent (~> 0.9, >= 0.9.4)
@@ -146,6 +148,9 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
+    simple_form (3.3.1)
+      actionpack (> 4, < 5.1)
+      activemodel (> 4, < 5.1)
     spring (1.7.2)
     spring-watcher-listen (2.0.0)
       listen (>= 2.7, < 4.0)
@@ -191,13 +196,15 @@ DEPENDENCIES
   devise
   jbuilder (~> 2.5)
   jquery-rails
+  jquery-ui-rails
   listen (~> 3.0.5)
   mini_magick
   pg
   puma (~> 3.0)
   rails (~> 5.0.0)
   rmagick
   sass-rails (~> 5.0)
+  simple_form
   spring
   spring-watcher-listen (~> 2.0.0)
   sqlite3

app/assets/javascripts/application.js

@@ -12,6 +12,7 @@
 //
 //= require jquery
 //= require best_in_place
+//= require jquery-ui
 //= require jquery_ujs
 //= require turbolinks
 //= require_tree .

app/assets/javascripts/autosize.js

@@ -0,0 +1,55 @@
+/*!
+ * jQuery Textarea AutoSize plugin
+ * Author: Javier Julio
+ * Licensed under the MIT license
+ */
+;(function ($, window, document, undefined) {
+
+  var pluginName = "textareaAutoSize";
+  var pluginDataName = "plugin_" + pluginName;
+
+  var containsText = function (value) {
+    return (value.replace(/\s/g, '').length > 0);
+  };
+
+  function Plugin(element, options) {
+    this.element = element;
+    this.$element = $(element);
+    this.init();
+  }
+
+  Plugin.prototype = {
+    init: function() {
+      var diff = parseInt(this.$element.css('paddingBottom')) +
+                 parseInt(this.$element.css('paddingTop')) +
+                 parseInt(this.$element.css('borderTopWidth')) +
+                 parseInt(this.$element.css('borderBottomWidth')) || 0;
+
+      if (containsText(this.element.value)) {
+        this.$element.height(this.element.scrollHeight - diff);
+      }
+
+      // keyup is required for IE to properly reset height when deleting text
+      this.$element.on('input keyup', function(event) {
+        var $window = $(window);
+        var currentScrollPosition = $window.scrollTop();
+
+        $(this)
+          .height(0)
+          .height(this.scrollHeight - diff);
+
+        $window.scrollTop(currentScrollPosition);
+      });
+    }
+  };
+
+  $.fn[pluginName] = function (options) {
+    this.each(function() {
+      if (!$.data(this, pluginDataName)) {
+        $.data(this, pluginDataName, new Plugin(this, options));
+      }
+    });
+    return this;
+  };
+
+})(jQuery, window, document);

app/assets/stylesheets/mixins/introduction.sass

@@ -2,5 +2,4 @@
   height: 24px
   width: 24px
   background-repeat: no-repeat
-  background-size: auto
   content: ''

app/assets/stylesheets/sections/_user-show.sass

@@ -114,26 +114,42 @@
     margin: 0
 
   .globe
+    +introduction
+    background-image: image-url('globe.png')
+    background-size: cover
+    display: inline-block
     height: 24px
     width: 24px
     margin-right: 0.5rem
 
-  .edit-user
-    text-align: right
+  a
+    height: 18px
+    width: 18px
+    position: relative
+    padding: 3px
+    border-radius: 3px
+    float: right
+    display: inline-block
 
-    &:before
+    &:hover
+      background-color: #3b5998 
+
+    &:hover .edit-user
+      opacity: 1
+      background-image: image-url('icons2.png')
+      background-size: 27px 219px
+      background-position: -13px -141px
+
+    .edit-user
+      text-align: right
       +introduction
       background-image: image-url('icons2.png')
-      background-position: 0 -141px
       background-size: 27px 219px
+      background-position: 0 -141px
       height: 12px
       width: 12px
-      display: inline-block
-      opacity: .4
-
-    // &:hover
-    //   background-color: #3b5998
-
+      display: block
+      opacity: .6
 
   ul
     margin: 0

app/assets/stylesheets/sections/_wall.sass

@@ -134,3 +134,13 @@
   top: 0
   right: 0
   border-left: 1px solid #ccc
+
+.comments
+  display: block
+  width: 100%
+  max-width: 100%
+  min-height: 32px
+  word-wrap: break-word
+  border-radius: 0px
+  overflow: hidden
+  resize: none

app/controllers/comments_controller.rb

@@ -1,2 +1,41 @@
 class CommentsController < ApplicationController
+  before_action :find_post
+  before_action :find_post, only: [:show, :edit, :update, :destroy]
+
+  def index
+    @comments = @post.comment
+  end
+
+  def new
+    @comment = Comment.new
+    @comment = @post.comment.build
+  end
+
+  def create
+    @comment = @post.comments.create(params[:comment].permit(:content))
+    @comment.post_id = @post.id
+    @comment.user_id = current_user.id
+    # @comment = @post.comments.create(params[:comment].permit[:content])
+    # @comment.post_id = @post.id
+     if @comment.save
+        redirect_to root_path
+      #  format.json { render :show, status: :created, location: @post }
+      else
+        render 'new'
+      end
+
+  end
+
+  private
+    # Use callbacks to share common setup or constraints between actions.
+    # def comment_params
+    #    params.require(:comment).permit(:content)
+    # end
+
+    def find_post
+      @post = Post.find(params[:post_id])
+    end
+
+
+    # Never trust parameters from the scary internet, only allow the white list through.
 end

app/controllers/posts_controller.rb

@@ -2,16 +2,9 @@ class PostsController < ApplicationController
   before_action :set_post, only: [:show, :edit, :update, :destroy]
   before_action :authenticate_user!
 
-  # GET /posts
-  # GET /posts.json
-
-
-  # GET /posts/1
-  # GET /posts/1.json
-
-  # GET /posts/new
   def new
     @post = Post.new
+    @comment = Comment.new
   end
 
   # GET /posts/1/edit

app/controllers/walls_controller.rb

@@ -1,12 +1,14 @@
 class WallsController < ApplicationController
   respond_to :json, :html
+
+
   def index
     @posts = Post.order("created_at DESC")
     @post = Post.new
-    @walls = Wall.all.includes(:user, :post).to_json(:include => [{post: {only: %i(username image content youtube_url)}},{:user => {only: %i(id)}}])
+    @walls = Wall.all.includes(:user, :post, :comment).to_json(:include => [{post: {only: %i(username image content youtube_url)}},{:user => {only: %i(id)}},{:comment => {only: %i(content)}}])
     respond_with @wall
     @user = User.all
+    @comment = Comment.new
+    @comments = Comment.order("created_at DESC")
   end
-
-
 end

app/helpers/variables/_colors.sass

@@ -0,0 +1,5 @@
+$white: #fff
+$dark-blue: #101b25
+$border-color: #ece8e8
+$black: #000
+$fb-blue: #1c4c77

app/helpers/variables/_vars.sass

@@ -0,0 +1,25 @@
+.m-top
+  margin-top: 3em
+
+.n-m
+  margin: 0
+
+.card
+  background-color: #fff
+  padding: 0.75em
+  border: 1px solid #ece8e8
+  border-radius: 4px
+  width: 100%
+  max-width: 100%
+  margin-bottom: 1em
+  position: relative
+
+.bold
+  font-weight: bold
+
+img
+  height: auto
+  max-width: 100%
+
+.table
+  display: table

app/models/comment.rb

@@ -1,2 +1,4 @@
 class Comment < ApplicationRecord
+  belongs_to :post
+  belongs_to :user
 end

app/models/post.rb

@@ -1,5 +1,6 @@
 class Post < ApplicationRecord
-   belongs_to :user, required: true
+   belongs_to :user
+   has_many :comments
    mount_uploader :image, AvatarUploader
    validates :content, presence: true, length: {minimum: 5}
    delegate :username, :username=, :email, :email=,:avatar, :avatar=, :to => :user, allow_nil: true

app/models/user.rb

@@ -10,6 +10,7 @@ class User < ApplicationRecord
   # Setup accessible (or protected) attributes for your model
 
   has_many :posts, dependent: :delete_all
+  has_many :comments, dependent: :delete_all
   attr_accessor :login
 
   validates :username,

app/models/wall.rb

@@ -1,6 +1,8 @@
 class Wall < ApplicationRecord
-  has_many :posts
+  has_many :post
   has_many :users
+  has_many :comments
+
   delegate :username, :username=,:avatar, :avatar=, :email, :email=, :to => :user, allow_nil: true
   devise :database_authenticatable, :registerable,
          :recoverable, :rememberable, :trackable, :validatable

app/views/comments/_comments.html.erb

@@ -0,0 +1 @@
+

app/views/comments/_form.html.erb

@@ -0,0 +1,6 @@
+<div class="comments">
+<%= form_for([@post, @post.comments.build]) do |f| %>
+    <%= f.text_area :content, class: 'comments js-auto-size', id: 'alex2' ,:rows => 1  %>
+    <%= f.submit "Submit", class: "btn btn-default" %>
+  <% end %>
+</div>

app/views/comments/index.html.erb

@@ -0,0 +1,3 @@
+<%= @comments.each do |comment|  %>
+<h2><%= comment.content %></h2>
+<% end %>

app/views/comments/new.html.erb

@@ -0,0 +1,2 @@
+<h2> New Comment </h2>
+<%= render 'form' %>

app/views/comments/show.html.erb

@@ -0,0 +1 @@
+<h2> <%=  @comment.content %></h2>

app/views/layouts/application.html.erb

@@ -17,5 +17,11 @@
     <% end %>
     <%= render partial: "shared/navbar" %>
     <%= yield %>
+
+    <script>
+      $(document).on('turbolinks:load', function() {
+        $('textarea.js-auto-size').textareaAutoSize();
+      });
+    </script>
   </body>
 </html>

app/views/posts/index.html.erb

@@ -25,5 +25,5 @@
 </table>
 
 <br>
-
+<%= link_to "Comments", new_post_comment_path(@post) %>
 <%= link_to 'New Post', new_post_path %>

app/views/posts/show.html.erb

@@ -10,5 +10,6 @@
   <%= @post.image %>
 </p>
 
+
 <%= link_to 'Edit', edit_post_path(@post) %> |
 <%= link_to 'Back', posts_path %>

app/views/users/show.html.erb

@@ -25,10 +25,12 @@
 
 <div class="row">
   <div class="four columns card user-show-experience">
-    <%= image_tag 'globe.png', class: 'two columns globe' %>
-    <p class="intro six columns ">Introduction
-    </p>
-    <%= link_to '', edit_user_path(@user), class: 'edit-user four columns' %>
+    <i class="two columns globe"></i>
+    <p class="intro six columns ">Introduction</p>
+
+    <%= link_to  edit_user_path(@user), class: '' do %>
+      <i class="edit-user"></i>
+    <% end %>
     <div class="u-cf"></div>
     <hr>
     <ul>

app/views/walls/_comments.html.erb

@@ -0,0 +1,5 @@
+<div class="product-reviews">
+  <% @comments.each do |comment| %>
+   <p><%= comment.content %></p>
+  <% end %>
+</div>