Ruby on Rails - 댓글 실시간 로딩

gem 'react-rails'

$ bundle install
$ rails webpacker:install         # OR (on rails version < 5.0) rake webpacker:install
$ rails webpacker:install:react   # OR (on rails version < 5.0) rake webpacker:install:react
$ rails generate react:install

 $ yarn add jquery

 const webpack = require('webpack')
 environment.plugins.prepend('Provide',
   new webpack.ProvidePlugin({
     $: 'jquery/src/jquery',
     jQuery: 'jquery/src/jquery'
   })
)

module.exports = environment

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

// Support component names relative to this directory:
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

require("@rails/ujs").start()
require("jquery")

<%= javascript_pack_tag 'application' %>

$ rails g react:component CommentSection commentsPath:string

gem 'active_model_serializers'

$ rails g serializer Comment

class CommentSerializer < ActiveModel::Serializer
    attributes :id, :text
end

$  mkdir api

$ touch posts_controller.rb

class Api::PostsController < ApplicationController
    before_action :set_post, only: [:comments]

    def comments
        render json: @post.comments, each_serializer: CommentSerializer
    end

    private

    def set_post
       @post = Post.find(params[:id])
    end
 end

Rails.application.routes.draw do
 # other routes

 namespace :api do
    resource :posts, only: [], defaults: {format: "json"} do
        member do
            get "/:id/comments" => "posts#comments", as: "comments"
        end
    end
 end
end

<!--app/views/posts/show.html.erb-->
<p id="notice"><%= notice %></p>

<%= @post.title %>
<br>
<%= @post.text %>
<br>

<b>Comments</b>
<br>

<%= react_component("CommentSection", { commentsPath: comments_api_posts_path(id: @post.id)}) %>

<%= render "comments/form", comment: @comment, post_id: @post.id%>

<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>

import React from "react"
import PropTypes from "prop-types"

class CommentSection extends React.Component {
   constructor(props){
      super(props);

      this.state = {
          comments: []
      }
   }

   componentDidMount(){
       //Run fetchComments() for the first time
       this.fetchComments();

       //Set Interval for running fetchComments()
       this.interval = setInterval(() =>{
           this.fetchComments();
       }, 1000);
   }

   componentWillUnmount(){
       // Clear the interval right before component unmount
       clearInterval(this.interval);
   }

   // Fetches Comments
   fetchComments(){

       $.ajax({
           url: this.props.commentsPath,
           dataType: 'json',
           success: function (result){
               //Set state based on result
               this.setState({comments: result})
          }.bind(this)
       });
   }

   render () {
       return (
           <React.Fragment>
               <ul>
                   {
                     this.state.comments.map(function(comment, index){

                     return <li key={index}>{comment.text}</li>
                   })
                   }
              </ul>
           </React.Fragment>
       );
   }
 }

 export default CommentSection

 <!-- app/views/comments/_form.html.erb -->
 <!--  add 'local:false' in the form_with-->

 <%= form_with(model: comment, local: false) do |form| %>

 # app/controllers/comments_controller.rb
 # edit create action

 def create
     @comment = Comment.new(comment_params)

     if @comment.save
         respond_to do |format|
             format.js{ render :js => "document.getElementById('comment_text').value = '';" }
         end
     end
 end