Standup meeting group refactor (#138)

* wip

* wip

* Define @standup_meeting_group_user variable in
joined_card_component.rb
co-author: Roc Devenport rubykod@gmail.com

* Add standup_meeting_groups::joins_controller.rb
destroy action
co-author: Roc Devenport rubykod@gmail.com

* Defines @standup_meeting_group_user variable in
joined_card_component.html.erb
co-authored-by: Roc Devenport rubykod@gmail.com

* .

* Adds destroy.turbo_stream.erb file and updates
controller to render turbo stream on destroy
co-authored-by: RocDavenport rubykod@gmail.com

* fixes linting error

* breaks @joinable_standup_meeting_groups line the standup_meeting_groups_controller.rb

* .

* .

* wip: adding joinable_item_component specs

* removes join_button_component

* removes leave_button_component

* removed base_botton_component

* Remove uneeded code from
_standup_meeting_group_list_item.erb

* adds styling changes to joined_card_component.html.erb

* Refactores standup meeting group index to only
display 3 cards per row.

* clean code

* Address pr comments

* centered joined_card_components on small screen

* deleted commented out code

* wip: adding checkin_status feature to joined_cards

* reverting to split up issues

* adds icons and flash text for checkins messages

* cleans code for pr

* Adds test for joinableItemComponent

* adds joined card component test

* fixes rubocop errors

* removes turbo from leave button and adds a redirect to joins destroy action

* Changes joined card components container from
grid to flexbox

* refactor standup_meeting_groups turbo_stream
to render JoinableItemComponent

* remove _standup_meeting_group_list item partial

---------

Co-authored-by: Gustavo Valenzuela <gustavo.devvv@gmail.com>

app/components/flash_component.rb

@@ -2,6 +2,7 @@
 
 class FlashComponent < ViewComponent::Base
   TYPE_THEMES = {
+    success: 'success',
     notice: 'success',
     alert: 'error',
     form_errors: 'error'

app/components/standup_meeting_group/joinable_item_component.html.erb

@@ -0,0 +1,7 @@
+<%= tag.li(id: dom_id(standup_meeting_group), class: " justify-between flex flex-row p-4 mb-2 border-black border-2 items-center") do %>
+  <h1 class=""><%= standup_meeting_group.name %></h1>
+
+  <div class="">
+      <%= button_to 'Join', standup_meeting_group_joins_path(@standup_meeting_group), class: 'btn btn-success' %>
+  </div>
+<% end %>

app/components/standup_meeting_group/joinable_item_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class StandupMeetingGroup::JoinableItemComponent < ViewComponent::Base
+  include Turbo::FramesHelper
+
+  with_collection_parameter :standup_meeting_group
+
+  attr_reader :standup_meeting_group, :user
+
+  def initialize(standup_meeting_group:, current_user:)
+    @standup_meeting_group = standup_meeting_group
+    @user = current_user
+  end
+end

app/components/standup_meeting_group/joined_card_component.html.erb

@@ -0,0 +1,17 @@
+<%= tag.div(id: dom_id(standup_meeting_group), class: "card card-bordered w-72") do %>
+  <div class="card-body flex flex-row p-4">
+    <div class="w-1/2">
+      <h4 class="card-title font-bold text-lg"><%= link_to standup_meeting_group %></h4>
+      <div class="checkin_message">
+        <p class="text-xs"> <i class="fa-solid fa-check"></i> Checked in </p> 
+       <p class="text-xs"> <i class="fa-solid fa-triangle-exclamation"></i> Outstanding check in</p> 
+      </div>
+    </div>
+    <div class="w-1/2">
+      <div class="card-actions flex space-x-2 justify-end">
+        <button class="btn btn-sm">Check In</button>
+        <button class="btn btn-sm">Skip</button>        
+      </div>
+    </div>
+  </div>
+<% end %>

app/components/standup_meeting_group/joined_card_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class StandupMeetingGroup::JoinedCardComponent < ViewComponent::Base
+  with_collection_parameter :standup_meeting_group
+
+  attr_reader :standup_meeting_group, :user
+
+  def initialize(standup_meeting_group:, current_user:)
+    @standup_meeting_group = standup_meeting_group
+    @user = current_user
+    @standup_meeting_group_user = standup_meeting_group.standup_meeting_groups_users.find_by(user:)
+  end
+end

app/controllers/standup_meeting_groups/joins_controller.rb

@@ -5,15 +5,11 @@ def create
 
     authorize @standup_meeting_group_user, policy_class: StandupMeetingGroup::JoinPolicy
 
-    @standup_meeting_group_user.save
-    # flash[:notice] = 'You have joined this standup meeting group.'
-
-    component = ::StandupMeetingGroup::LeaveButtonComponent.new(standup_meeting_group: @standup_meeting_group,
-      current_user:, standup_meeting_group_user: @standup_meeting_group_user)
+    @standup_meeting_group_user.save!
 
     respond_to do |format|
       format.turbo_stream do
-        render turbo_stream: turbo_stream.update(helpers.dom_id(@standup_meeting_group, :join_or_leave), component)
+        flash.now[:notice] = "You have joined #{@standup_meeting_group.name}!"
       end
     end
   end
@@ -25,20 +21,8 @@ def destroy
     authorize @standup_meeting_group_user, policy_class: StandupMeetingGroup::JoinPolicy
 
     @standup_meeting_group_user.destroy
-
-    component = ::StandupMeetingGroup::JoinButtonComponent.new(
-      standup_meeting_group: @standup_meeting_group, current_user:
-    )
-
     respond_to do |format|
-      format.turbo_stream do
-        render turbo_stream: turbo_stream.update(
-          helpers.dom_id(@standup_meeting_group, :join_or_leave), component
-        )
-      end
-      format.html do
-        redirect_to standup_meeting_groups_path
-      end
+      format.html { redirect_to standup_meeting_groups_path, notice: 'You have left the standup meeting group.' }
     end
   end
 end

app/controllers/standup_meeting_groups_controller.rb

@@ -2,7 +2,9 @@ class StandupMeetingGroupsController < ApplicationController
   before_action :set_standup_meeting_group, only: %i[edit update destroy]
 
   def index
-    @standup_meeting_groups = StandupMeetingGroup.includes(:standup_meeting_groups_users).all
+    @my_standup_meeting_groups = policy_scope(StandupMeetingGroup).includes(:standup_meeting_groups_users)
+    @joinable_standup_meeting_groups = StandupMeetingGroup.includes(:standup_meeting_groups_users)
+                                                          .excluding(@my_standup_meeting_groups)
   end
 
   def show
@@ -36,22 +38,24 @@ def edit; end
 
   def create
     @standup_meeting_group = StandupMeetingGroup.new(standup_meeting_group_params)
-    @new_standup_meeting_group = StandupMeetingGroup.new
 
     authorize(@standup_meeting_group)
 
     respond_to do |format|
       if @standup_meeting_group.save
-        format.turbo_stream
+        format.turbo_stream do
+          @new_standup_meeting_group = StandupMeetingGroup.new
+
+          flash.now[:success] = "#{@standup_meeting_group.name} was successfully created."
+        end
+
         format.html do
           redirect_to standup_meeting_group_url(@standup_meeting_group),
             notice: 'Standup meeting group was successfully created.'
         end
       else
-        # NOTE: figure out how to do errors
         format.turbo_stream do
-          render turbo_stream: turbo_stream.update(@standup_meeting_group, partial: 'form',
-            locals: { standup_meeting_group: @standup_meeting_group })
+          flash.now[:form_errors] = @standup_meeting_group.errors.full_messages
         end
         format.html { render :new, status: :unprocessable_entity }
       end

app/models/standup_meeting_group.rb

@@ -25,4 +25,8 @@ class StandupMeetingGroup < ApplicationRecord
   def standup_meeting_group_user(user_id)
     standup_meeting_groups_users.find_by(user_id:)
   end
+
+  def to_s
+    name
+  end
 end

app/views/standup_meeting_groups/_form.html.erb

@@ -1,17 +1,4 @@
 <%= form_with(model: standup_meeting_group) do |form| %>
-  <%# NOTE: can prob consolidate this into a shared partial %>
-  <% if standup_meeting_group.errors.any? %>
-    <div class="text-error">
-      <h2><%= pluralize(standup_meeting_group.errors.count, "error") %> prohibited this standup_meeting_group from being saved:</h2>
-
-      <ul>
-        <% standup_meeting_group.errors.each do |error| %>
-          <li><%= error.full_message %></li>
-        <% end %>
-      </ul>
-    </div>
-  <% end %>
-
   <div class="flex flex-col justify-between md:flex-row">
     <div class="flex flex-col md:flex-row gap-y-2">
       <div class="flex gap-x-2">

app/views/standup_meeting_groups/_standup_meeting_group.html.erb

@@ -7,7 +7,7 @@
   </div>
   <div class="py-4 flex justify-between">
     <h1 class="text-3xl font-bold text-left mb-4 md:mb-0"><%= standup_meeting_group.name %></h1>
-    <%= button_to 'Leave', standup_meeting_group_join_path(standup_meeting_group, standup_meeting_group_user), method: :delete, data: { turbo: false }, class: 'link mt-4' %>
+    <%= button_to 'Leave', standup_meeting_group_join_path(standup_meeting_group, standup_meeting_group_user), method: :delete, class: 'link mt-4' %>
   </div>
   <%= render StandupMeeting::CheckInCtaComponent.new(standup_meeting_group: standup_meeting_group, standup_meeting: current_user_standup_meeting, current_user:) %>
   <div class="divider my-4 "></div>

app/views/standup_meeting_groups/create.turbo_stream.erb

@@ -1,11 +1,12 @@
-<%= turbo_stream.prepend(
-  "standup_meeting_group_list",
-  partial: 'standup_meeting_group_list_item',
-  locals: { standup_meeting_group: @standup_meeting_group }
-  )
-%>
+<%= turbo_stream.update "flash", partial: "layouts/flash" %>
 
-<%= turbo_stream.update "new_standup_meeting_group"  do %>
-  <%= render "form", standup_meeting_group: @new_standup_meeting_group %>
+<% if @standup_meeting_group.valid? %>
+  <%= turbo_stream.prepend  "find-standup-meeting-groups" do %>
+    <%= render StandupMeetingGroup::JoinableItemComponent.new(standup_meeting_group: @standup_meeting_group, current_user: current_user) %>
+  <% end %>
+
+  <%= turbo_stream.update "new_standup_meeting_group"  do %>
+    <%= render "form", standup_meeting_group: @new_standup_meeting_group %>
+  <% end %>
 <% end %>
 

app/views/standup_meeting_groups/index.html.erb

@@ -1,13 +1,19 @@
-<h1>Standup Meeting Groups</h1>
-
 <% if policy(:standup_meeting_group).new? %>
   <div class="p-2 border-black border-2" id="new_standup_meeting_group">
     <%= render 'form', standup_meeting_group: StandupMeetingGroup.new %>
   </div>
 <% end %>
 
-<hr class="mb-5 mt-5 border-b-2">
+<div class="flex flex-col justify-center">
+  <h2 class="font-bold text-3xl pl-5 text-center md:text-left">My Standups</h2>
+  <div id="my-standup-meeting-groups" class=" flex justify-center flex flex-wrap gap-5 pl-5 pt-5 pb-5">
+    <%= render StandupMeetingGroup::JoinedCardComponent.with_collection(@my_standup_meeting_groups, current_user:) %>
+  </div>
+</div>
 
-<ul role="list" id="standup_meeting_group_list">
-  <%= render partial: 'standup_meeting_group_list_item', collection: @standup_meeting_groups, as: :standup_meeting_group %>
-</ul>
+<div class="flex flex-col">
+ <h2 class="font-bold text-3xl pl-5 text-center md:text-left">Find a Standup</h2>
+  <ul id="find-standup-meeting-groups" class="flex flex-col pl-5 pt-5 pb-5">
+    <%= render StandupMeetingGroup::JoinableItemComponent.with_collection(@joinable_standup_meeting_groups, current_user:) %>
+  </ul>
+</div>

app/views/standup_meeting_groups/joins/create.turbo_stream.erb

@@ -0,0 +1,4 @@
+<%= turbo_stream.remove @standup_meeting_group %>
+<%= turbo_stream.prepend 'my-standup-meeting-groups' do %>
+  <%= render StandupMeetingGroup::JoinedCardComponent.new(standup_meeting_group: @standup_meeting_group, current_user: current_user) %>
+<% end %>

app/views/standup_meeting_groups/joins/destroy.turbo_stream.erb

@@ -0,0 +1,5 @@
+<%= turbo_stream.remove @standup_meeting_group %>
+
+<%= turbo_stream.prepend 'find-standup-meeting-groups' do %>
+  <%= render StandupMeetingGroup::JoinableItemComponent.new(standup_meeting_group: @standup_meeting_group, current_user: current_user ) %>
+<% end %>

spec/components/standup_meeting_group/joinable_item_component_spec.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe StandupMeetingGroup::JoinableItemComponent, type: :component do
+  let(:standup_meeting_group) { create(:standup_meeting_group) }
+  let(:user) { create(:user) }
+
+  context 'when standup meeting group is present and user is not a member' do
+    it 'renders the join button' do
+      render_inline(described_class.new(standup_meeting_group:, current_user: user))
+
+      expect(page).to have_button(text: 'Join')
+    end
+  end
+end

spec/components/standup_meeting_group/joined_card_component_spec.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe StandupMeetingGroup::JoinedCardComponent, type: :component do
+  let(:standup_meeting_group) { create(:standup_meeting_group, name: 'Test Group') }
+  let(:user) { create(:user) }
+
+  it 'renders the joined card with the right name' do
+    render_inline(described_class.new(standup_meeting_group:, current_user: user))
+
+    expect(page).to have_css('h4', text: 'Test Group')
+  end
+end