feat: display new invitation link with copy button

tamu-edu-students · Apr 16, 2024 · 39d7bcf · 39d7bcf
1 parent e48aa6f
commit 39d7bcf
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 72 deletions.
diff --git a/rails_root/app/controllers/invitations_controller.rb b/rails_root/app/controllers/invitations_controller.rb
@@ -6,7 +6,10 @@ def create
     @parent_survey_response = SurveyResponse.find_by!(id: params[:parent_survey_response_id])
     @invitation = Invitation.create!(parent_response: @parent_survey_response, last_sent: Time.now, visited: false)
 
-    redirect_to invitation_created_invitation_path(@invitation.token)
+    render json: {
+      message: "Invitation link created: #{invitation_url(@invitation.token)}",
+      invitation_url: invitation_url(@invitation.token)
+    }
   end
 
   def show
@@ -32,14 +35,6 @@ def not_found
     render :not_found
   end
 
-  def invitation_created
-    @invitation = Invitation.find_by(token: params[:token])
-
-    return unless @invitation.nil?
-
-    redirect_to not_found_invitations_path
-  end
-
   private
 
   def claim_invitation(user_profile)

diff --git a/rails_root/app/views/invitations/invitation_created.html.erb b/rails_root/app/views/invitations/invitation_created.html.erb
diff --git a/rails_root/app/views/survey_responses/show.html.erb b/rails_root/app/views/survey_responses/show.html.erb
@@ -1,5 +1,4 @@
 <p style="color: green"><%= notice %></p>
-
 <%# FIXME: Move this to a stylesheet when we have time %>
 <style>
   .section-header {
@@ -28,7 +27,6 @@
     transition: height 0.0s ease;
   }
 </style>
-
 <div class="container-lg">
   <h1 class="text-center">Your leadership type is: (tbd)</h1>
   <div class="row d-flex justify-content-center">
@@ -93,54 +91,112 @@
                 <td><%= ans.question.text %></td>
                 <td><%= choices[ans.choice] %></td>
                 <% 4.times do |i| %>
-                <td>
-                  <input
+                  <td>
+                    <input
                     type="radio"
                     disabled="disabled"
                     <%= 'checked="checked"' if i == ans.choice %>
                   >
-                </td>
-                <% end %>
-              </tr>
-              <tr class="collapse" id="<%= question_collapse_id %>">
-                <td colspan="6">
+                    </td>
+                  <% end %>
+                </tr>
+                <tr class="collapse" id="<%= question_collapse_id %>">
+                  <td colspan="6">
                     <%= ans.question.explanation %>
-                </td>
-              </tr>
-            <% end %>
-          </table>
+                  </td>
+                </tr>
+              <% end %>
+            </table>
+          </div>
+        <% end %>
+      </div>
+    </div>
+    <hr>
+    <%# this is the view containing the link %>
+    <div id="invitation-link-container" class="mt-4" style="display: none;">
+      <div class="card">
+        <div class="card-body">
+          <h5 class="card-title">Invitation Link Created</h5>
+          <p class="card-text">
+            <span id="invitation-link"></span>
+          </p>
+          <button class="btn btn-primary" onclick="copyToClipboard()">Copy Link</button>
         </div>
-      <% end %>
+      </div>
+      <hr>
     </div>
-  </div>
-  <hr>
-  <div class="row d-flex justify-content-center">
-    <div class="col-8 btn-group" role="group">
-      <%= link_to "Edit Response",
+    <script>
+      function copyToClipboard() {
+        var linkText = document.getElementById("invitation-link").innerText;
+        navigator.clipboard.writeText(linkText)
+          .then(() => {
+            alert("Link copied to clipboard!");
+          })
+          .catch((error) => {
+            console.error("Failed to copy link: ", error);
+          });
+      }
+    </script>
+    <div class="row d-flex justify-content-center">
+      <div class="col-8 btn-group" role="group">
+        <%= link_to "Edit Response",
             edit_survey_response_path(@survey_response),
             class: "btn btn-outline-primary"
-      %>
-      <%= button_to "Create Invitation",
-            invitations_path(parent_survey_response_id: @survey_response.id),
-            method: :post,
-            id: "invitation-button",
-            form_class: "btn btn-outline-success",
-            class: "btn-passthrough"
-      %>
-      <%= button_to "Delete Response",
+      	%>
+        <%= button_tag "Create Invitation",
+			data: { parent_survey_response_id: @survey_response.id },
+			id: "invitation-button",
+			class: "btn btn-outline-success"
+		%>
+        <%= button_to "Delete Response",
             @survey_response,
             method: :delete,
 
             form_class: "btn btn-outline-danger",
             class: "btn-passthrough"
-      %>
+      	%>
+      </div>
     </div>
-  </div>
-  <br>
-  <div class="row d-flex justify-content-center">
-    <div class="col-6 text-center">
-      <%= link_to "Back to survey responses", survey_responses_path %>
-      <%= link_to "Back to home", root_path %>
-    <div>
-  </div>
-</div>
+    <%# show invitation link if it exist %>
+    <script>
+      function initializeInvitation() {
+          var invitationButton = document.getElementById('invitation-button');
+          var invitationLinkContainer = document.getElementById('invitation-link-container');
+          var invitationLink = document.getElementById('invitation-link');
+
+          invitationButton.addEventListener('click', function() {
+      var parentSurveyResponseId = this.getAttribute('data-parent-survey-response-id');
+
+      fetch('/invitations', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+        },
+        body: JSON.stringify({ parent_survey_response_id: parentSurveyResponseId })
+      })
+      .then(response => response.json())
+      .then(data => {
+        invitationLink.textContent = data.invitation_url;
+        invitationLinkContainer.style.display = 'block';
+      })
+      .catch(error => {
+        console.error('Error:', error);
+      });
+          });
+        }
+
+      			if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', initializeInvitation);
+        } else {
+          initializeInvitation();
+        }
+    </script>
+    <br>
+    <div class="row d-flex justify-content-center">
+      <div class="col-6 text-center">
+        <%= link_to "Back to survey responses", survey_responses_path %>
+        <%= link_to "Back to home", root_path %>
+        <div>
+        </div>
+      </div>
diff --git a/rails_root/config/routes.rb b/rails_root/config/routes.rb
@@ -19,10 +19,6 @@
     collection do
       get :not_found
     end
-
-    member do
-      get :invitation_created
-    end
   end
 
   get '/auth/auth0/callback' => 'auth0#callback'

diff --git a/rails_root/features/invitation.feature b/rails_root/features/invitation.feature
@@ -9,7 +9,6 @@ Feature: Invitation
         When I create an invitation at the bottom of the response page
 		Then the invitation's sharecode should be set to the response's sharecode
 		And the invitation's parent_response_id should be set to the response's id
-        And I should see a link that can be copied
 
 	Scenario: Generate unique invitation URL
 		Given an invitation exists

diff --git a/rails_root/features/step_definitions/invitation_steps.rb b/rails_root/features/step_definitions/invitation_steps.rb
@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-require 'webmock/cucumber'
+# require 'webmock/cucumber'
 
 Given('I have completed the survey as user {string}') do |id|
   profile = SurveyProfile.find_or_create_by(user_id: id)
@@ -12,9 +12,17 @@
 
   click_button 'Create Invitation'
 
-  # Wait for the flash message to appear and extract the invitation token from it
-  expect(page).to have_content('Invitation Created')
-  @token = page.text.match(%r{Your invitation link is: #{Capybara.current_host}/invitations/([a-zA-Z0-9\-_]+)})[1]
+  # TODO: Set up Capybara for AJAX calls
+  response = page.driver.post(invitations_path, {
+                                parent_survey_response_id: @survey_response.id
+                              })
+
+  json_response = JSON.parse(response.body)
+
+  invitation_link = json_response['invitation_url']
+
+  # extract token
+  @token = invitation_link.match(%r{#{Capybara.current_host}/invitations/([a-zA-Z0-9\-_]+)})[1]
   @invitation = Invitation.find_by(token: @token)
 end
 
@@ -26,10 +34,6 @@
   expect(@invitation.parent_response_id).to eq(@survey_response.id)
 end
 
-Then('I should see a link that can be copied') do
-  expect(page.body).to match(%r{Your invitation link is: #{Capybara.current_host}/invitations/#{@token}})
-end
-
 ###
 
 Then('the invitation should have a unique token') do

diff --git a/rails_root/spec/controllers/invitations_controller_spec.rb b/rails_root/spec/controllers/invitations_controller_spec.rb
@@ -76,13 +76,4 @@
       end
     end
   end
-
-  describe 'GET #invitation_created' do
-    context 'when invitation is not found' do
-      it 'redirects to not_found' do
-        get :invitation_created, params: { token: 'nonexistent_token' }
-        expect(response).to redirect_to(not_found_invitations_path)
-      end
-    end
-  end
 end