instructions.txt

Rails 6.1 ActionCable

# Create rails app:

rails new cableguy --database=mysql

cd cableguy

# create a model

rails g resource libraryBook title status status_date:datetime

rails db:create
rails db:migrate

add seeds:
libary_books = LibraryBook.create([{title: 'Moby Dick', status: 'on-shelf'}, {title: 'Cruel Shoes', status: 'on-shelf'}])

rails db:seed


# update routes
root "library_books#index"

# get all the books in the controller
def index
@books = LibraryBook.all
end

# create index in app/views/libary_books/index.html.erb
<h1>Our Books</h1>

<% if !@books.blank? %>
  <% for book in @books %>
    
  <% end %>
<% end %>

# add bootstrap to layout application.html.erb
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

# wrap yeild in container div
    <div class='container'>
    <%= yield %>
    </div>

# quick check of books index:
    <div class='row'>
        <div class='col'>
        <%= book.title%>
        </div>
        <div class='col'>
        <%= book.status.titleize%>
        </div>
    </div>


# create a partial to render a book
# move code into it
    <div class='row'>
        <div class='col'>
        <%= book.title%>
        </div>
        <div class='col'>
        <%= book.status.titleize%>
        </div>
    </div>

# call partial in index.html.erb
  <%= render partial: "one_book", locals: {book: book} %>

######## end of the basics ########

# add stimulus

yarn add stimulus

# add stimulus stuff to application.js

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("../controllers", true, /\.js$/)
application.load(definitionsFromContext(context))

# create a stimulus controller app/javascript/contollers/book_status_controller.js
import { Controller } from "stimulus"
import consumer from '../channels/consumer';

export default class extends Controller {
  static targets = ['bookstatus']

  connect() {
    console.log('Will create subscription to: channel: "LibraryBookStatusChannel" library_book_id: ' + this.data.get('bookid'));

    this.channel = consumer.subscriptions.create({ channel: 'LibraryBookStatusChannel', library_book_id: this.data.get('bookid') }, {
      connected: this._cableConnected.bind(this),
      disconnected: this._cableDisconnected.bind(this),
      received: this._cableReceived.bind(this),
    });
  }

  _cableConnected() {
    // Called when the subscription is ready for use on the server
    console.log('_cableConnected');
  }

  _cableDisconnected() {
    // Called when the subscription has been terminated by the server
    console.log('_cableDisconnected');
  }

  _cableReceived(data) {
    console.log('_cableReceived');
    // Called when there's incoming data on the websocket for this channel
    this.bookstatusTarget.innerHTML = data.message;
    if (data.status.localeCompare('completed', 'en', { sensitivity: 'base' })) {
      console.log('completed');
      this.bookstatusTarget.innerHTML = data.message;      
    } else {
      console.log(data.status);
      this.bookstatusTarget.innerHTML = data.message;
    }
  }
}

# add stimulus stuff to index.html.erb
    <div data-controller="book-status" data-book-status-bookid="<%= book.id %>">
      <div data-book-status-target='bookstatus'>
        <%= render partial: "one_book", locals: {book: book} %>
      </div>
    </div>

#restart server

# see output in chrome console

# see nothing gets update even we update model

#### model stuff ####

# create channel in app/channels/library_book_status_channel.rb
class LibraryBookStatusChannel < ApplicationCable::Channel
  def subscribed
  # the param name is set in the stimulus controller
    stream_from "LibraryBookStatusChannel:#{params[:library_book_id]}"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
    stop_all_streams
  end
end

# add callback on after_commit in libary_book.rb
  after_commit :broadcast_me

  def broadcast_me
    ActionCable.server.broadcast "LibraryBookStatusChannel:#{id}", {
      status: status.titleize,
      message: LibraryBooksController.render(partial: 'one_book', locals: { book: self }).squish
    }
  end

#### why nothing works!?

# add redis
gem 'redis'
#update cable.yml
development:
    adapter: redis