changes complete

app/assets/config/manifest.js

@@ -1,2 +1,3 @@
 //= link_tree ../images
 //= link_directory ../stylesheets .css
+//= link application.css

app/assets/stylesheets/components/_chatroom.scss

@@ -0,0 +1,97 @@
+.chatroom {
+  background: white;
+  height: calc(100vh - 75px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-grow: 1;
+
+  h1 {
+    border-bottom: 1px solid $red-poppy;
+    margin-bottom: 0;
+    padding: 1rem;
+  }
+
+  .messages {
+    height: 100%;
+    overflow: scroll;
+    padding: 1rem;
+  }
+}
+
+.new_message {
+  border-top: 1px solid #a8a8a8;
+  padding: 1rem;
+  font-size: 16px;
+  background-color: #f7f7f7;
+
+  .form-group {
+    margin-bottom: 0;
+  }
+}
+
+.all_chats {
+  height: calc(100vh - 75px);
+  background: white;
+  border-right: 3px solid $red-poppy ;
+  h1 {
+    border-bottom: 1px solid $red-poppy;
+  }
+}
+
+#new_message {
+  background-color: $red-poppy;
+}
+
+#input_form {
+  margin: 0
+}
+
+
+.chatbox_box {
+  border: 1px solid rgb(220, 220, 220);
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+
+.card-chat {
+  overflow: hidden;
+  height: 120px;
+  background: white;
+  box-shadow: 0 0 15px rgba(0,0,0,0.2);
+  display: flex;
+  align-items: center;
+  width: 500px;
+  margin: 10px;
+  .avatar{
+    width: 40px;
+    height: 40px;
+    border: 1px solid white;
+    margin-right: -15px;
+  }
+}
+
+.card-chat-image {
+  height: 100%;
+  width: 120px;
+  object-fit: cover;
+}
+
+.card-chat h2 {
+  font-size: 16px;
+  font-weight: bold;
+  margin: 0;
+}
+
+.card-chat p {
+  font-size: 12px;
+  line-height: 1.4;
+  opacity: .7;
+  margin-bottom: 0;
+  margin-top: 8px;
+}
+
+.card-chat .card-chat-infos {
+  padding: 16px;
+}

app/assets/stylesheets/components/_index.scss

@@ -13,8 +13,6 @@
 @import "sweetalert";
 @import "calendar";
 @import "card-user";
-<<<<<<< HEAD
 @import "tags";
-=======
 @import "carousel";
->>>>>>> 96b69c1725fad720aefa56df629d515fd3b4c494
+@import "chatroom";

app/channels/chatroom_channel.rb

@@ -0,0 +1,11 @@
+class ChatroomChannel < ApplicationCable::Channel
+  def subscribed
+    # stream_from "some_channel"
+    chatroom = Chatroom.find(params[:id])
+    stream_for chatroom
+  end
+
+  def unsubscribed
+    # Any cleanup needed when channel is unsubscribed
+  end
+end

app/controllers/activities_controller.rb

@@ -100,6 +100,7 @@ def create
     @activity.owner = current_user
     if @activity.save!
       redirect_to activity_path(@activity)
+      Chatroom.create(activity: @activity, name: "#{@activity.name} chat")
     else
       render :new
     end

app/controllers/chatrooms_controller.rb

@@ -2,5 +2,7 @@ class ChatroomsController < ApplicationController
   def show
     @activity = Activity.find(params[:activity_id])
     @chatroom = Chatroom.find(params[:id])
+    @message = Message.new
+    authorize @chatroom
   end
 end

app/controllers/messages_controller.rb

@@ -0,0 +1,25 @@
+class MessagesController < ApplicationController
+  def create
+  @chatroom = Chatroom.find(params[:chatroom_id])
+  @message = Message.new(message_params)
+  @message.chatroom = @chatroom
+  @message.user = current_user
+  authorize @message
+  if @message.save!
+    ChatroomChannel.broadcast_to(
+      @chatroom,
+      render_to_string(partial: "message", locals: { message: @message , new: 'true'})
+    )
+    redirect_to activity_chatroom_path(@chatroom.activity, @chatroom, anchor: "message-#{@message.id}")
+    # render plain:""
+  else
+    render "chatrooms/show"
+  end
+  end
+
+  private
+
+  def message_params
+    params.require(:message).permit(:content)
+  end
+end

app/javascript/controllers/chatroom_subscription_controller.js

@@ -0,0 +1,31 @@
+import { Controller } from "stimulus";
+import consumer from "../channels/consumer";
+
+export default class extends Controller {
+  static values = { chatroomId: Number }
+  static targets = ["allmessages"]
+
+  connect() {
+    this.allmessagesTarget.scrollTop = this.allmessagesTarget.scrollHeight
+    this.channel = consumer.subscriptions.create(
+      { channel: "ChatroomChannel", id: this.chatroomIdValue },
+
+      { received: data => {
+        // const last_message = document.querySelector(".new_message");
+        // if (last_message) {
+        //   last_message.classList.remove("new_message")
+        // }
+        this.allmessagesTarget.insertAdjacentHTML("beforeend", data);
+        this.allmessagesTarget.scrollTop = this.allmessagesTarget.scrollHeight
+      }
+    }
+        // this.element.insertAdjacentHTML("beforeend", data) }
+    )
+    console.log(`Subscribe to the chatroom with the id ${this.chatroomIdValue}.`);
+  }
+
+  disconnect() {
+    console.log("Unsubscribed from the chatroom")
+    this.channel.unsubscribe()
+  }
+}

app/models/activity.rb

@@ -3,7 +3,7 @@ class Activity < ApplicationRecord
   has_many :bookings
   has_many :users, through: :bookings
   has_one_attached :photo
-  has_one :chatroom
+  has_one :chatroom, dependent: :destroy
 
   # Geocoding set-up
   geocoded_by :place

app/models/chatroom.rb

@@ -1,4 +1,4 @@
 class Chatroom < ApplicationRecord
-  has_many :messages
-  belong_to :activity
+  has_many :messages, dependent: :destroy
+  belongs_to :activity
 end

app/models/message.rb

@@ -1,4 +1,5 @@
 class Message < ApplicationRecord
   belongs_to :chatroom
   belongs_to :user
+  validates :content, presence: true
 end

app/policies/chatroom_policy.rb

@@ -0,0 +1,11 @@
+class ChatroomPolicy < ApplicationPolicy
+  class Scope < Scope
+    def resolve
+      scope.all
+    end
+  end
+
+  def show?
+    true
+  end
+end

app/policies/message_policy.rb

@@ -0,0 +1,11 @@
+class MessagePolicy < ApplicationPolicy
+  class Scope < Scope
+    def resolve
+      scope.all
+    end
+  end
+
+  def create?
+    return true
+  end
+end

app/views/activities/index.html.erb

@@ -60,5 +60,3 @@
     data-mapbox-markers-value="<%= @markers.to_json %>"
     data-mapbox-api-key-value="<%= ENV['MAPBOX_API_KEY'] %>">
   </div>
-
-<%= console %>

app/views/chatrooms/show.html.erb

@@ -1,15 +1,41 @@
-<div class="container chatroom">
-  <h1>#<%= @chatroom.name %></h1>
-
-  <div class="messages">
-    <% @chatroom.messages.each do |message| %>
-      <div id="message-<%= message.id %>">
-        <small>
-          <strong><%= message.user.first_name %></strong>
-          <i><%= message.created_at.strftime("%a %b %e at %l:%M %p") %></i>
-        </small>
-        <p><%= message.content %></p>
+<div class="container">
+<div class="d-flex chatbox_box">
+
+  <div class="all_chats">
+    <h2 class="container mt-2 mb-5">Chats</h2>
+    <% @current_user.activities.each do |activity| %>
+      <div>
+        <div class="card-chat">
+          <%= cl_image_tag activity.photo.key, class:"card-chat-image" %>
+          <div class="card-chat-infos d-flex">
+            <div style= "width: 260px">
+              <h2><%= activity.name %></h2>
+              <p><%= activity.chatroom.messages.last.user.first_name %>:  <%= activity.chatroom.messages.last.content %></p>
+            </div>
+            <div>
+              <% activity.users.first(3).each do |user| %>
+                <%= cl_image_tag user.photo.key, crop: :thumb, class: "avatar", alt: "avatar" %>
+              <% end %>
+              <p>+<%= activity.users.count - 3 %></p>
+            </div>
+          </div>
+        </div>
       </div>
     <% end %>
   </div>
+
+  <div class="chatroom" data-controller="chatroom-subscription" data-chatroom-subscription-chatroom-id-value="<%= @chatroom.id %>">
+    <h1>#<%= @chatroom.name %></h1>
+
+    <div class="messages" data-chatroom-subscription-target="allmessages">
+      <% @chatroom.messages.each do |message| %>
+        <%= render "messages/message", message: message, new: 'false' %>
+      <% end %>
+    </div>
+
+    <%= simple_form_for [@activity, @chatroom, @message], remote: true, data:{action: "submit->chatroom-subscription#disconnect"} do |f| %>
+      <%= f.input :content, id: "input_form", label: false, placeholder: "Message ##{@chatroom.name}" %>
+    <% end %>
+  </div>
+
 </div>

app/views/messages/_message.html.erb

@@ -0,0 +1,12 @@
+<div id="message-<%= message.id %>" class="d-flex <%= 'new_message' if new == 'true'%>">
+  <div>
+    <%= cl_image_tag message.user.photo.key, crop: :thumb, class:"avatar" %>
+  </div>
+  <div class="ms-3">
+  <small>
+    <strong><%= message.user.first_name %> <%= message.user.last_name %></strong>
+    <i class="ms-3 text-secondary"><%= message.created_at.strftime("%a %b %e at %l:%M %p") %></i>
+  </small>
+  <p><%= message.content %></p>
+  </div>
+</div>

app/views/pages/dashboard.html.erb

@@ -57,6 +57,19 @@
                       <i class="fas fa-exchange-alt"></i>
                     <% end %>
                   </td>
+                  <td>
+                    <% if Activity.find_by_id(booking.activity_id).chatroom.messages.length == 0 %>
+                      <%= link_to activity_chatroom_path(Activity.find_by_id(booking.activity_id), Activity.find_by_id(booking.activity_id).chatroom) do %>
+                    <%# activity_chatroom_path(@chatroom.activity, @chatroom, anchor: "message-#{@message.id}") %>
+                      <i class="far fa-comment-dots"></i>
+                      <% end %>
+                    <% else %>
+                      <%= link_to activity_chatroom_path(Activity.find_by_id(booking.activity_id), Activity.find_by_id(booking.activity_id).chatroom, anchor: "message-#{Activity.find_by_id(booking.activity_id).chatroom.messages.last.id}" ) do %>
+                    <%# activity_chatroom_path(@chatroom.activity, @chatroom, anchor: "message-#{@message.id}") %>
+                      <i class="far fa-comment-dots"></i>
+                      <% end %>
+                    <% end %>
+                  </td>
                 </tr>
               <% end %>
             </table>

config/routes.rb

@@ -4,7 +4,9 @@
   # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
   resources :activities, only: [:index, :show] do
     resources :bookings, only: [:create, :destroy]
-    resources :chatrooms, only: :show
+    resources :chatrooms, only: [:index, :show, :create] do
+      resources :messages, only: :create
+    end
   end
   resources :users, only: [:show]
 

db/schema.rb

@@ -10,8 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-
-ActiveRecord::Schema.define(version: 2021_11_26_113845) do
+ActiveRecord::Schema.define(version: 2021_11_26_143436) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -80,7 +79,8 @@
     t.datetime "updated_at", precision: 6, null: false
     t.index ["chatroom_id"], name: "index_messages_on_chatroom_id"
     t.index ["user_id"], name: "index_messages_on_user_id"
-=======
+  end
+
   create_table "taggings", id: :serial, force: :cascade do |t|
     t.integer "tag_id"
     t.string "taggable_type"
@@ -148,7 +148,6 @@
   add_foreign_key "activities", "users", column: "owner_id"
   add_foreign_key "bookings", "activities"
   add_foreign_key "bookings", "users"
-
   add_foreign_key "chatrooms", "activities"
   add_foreign_key "messages", "chatrooms"
   add_foreign_key "messages", "users"

db/seeds.rb

@@ -133,7 +133,8 @@
   activity = Activity.new(attributes)
   activity.photo.attach(io: URI.open(attributes[:photo]), filename: "#{activity.owner_id}_#{index}.jpg", content_type: "image/jpg")
   activity.save
-  puts "Created #{activity.name} 🌉"
+  Chatroom.create(activity: activity, name: "#{activity.name} chat")
+  puts "Created #{activity.name} and the dedicated chatroom 🌉"
 end
 
 puts "Creating bookings..."

test/channels/chatroom_channel_test.rb

@@ -0,0 +1,8 @@
+require "test_helper"
+
+class ChatroomChannelTest < ActionCable::Channel::TestCase
+  # test "subscribes" do
+  #   subscribe
+  #   assert subscription.confirmed?
+  # end
+end