Implement Citizenship#destroy

app/assets/stylesheets/application.bootstrap.scss

@@ -13,6 +13,20 @@ $primary: #262626;
 @import 'search_location';
 @import 'visas';
 
+.delete-button {
+  background: none;
+	color: inherit;
+	border: none;
+	padding: 0;
+	font: inherit;
+	cursor: pointer;
+	outline: inherit;
+
+  i {
+    color: $danger;
+  }
+}
+
 .navbar-actions {
   display: flex;
 }

app/assets/stylesheets/visas.scss

@@ -1,17 +1,3 @@
-.delete-button {
-  background: none;
-	color: inherit;
-	border: none;
-	padding: 0;
-	font: inherit;
-	cursor: pointer;
-	outline: inherit;
-
-  i {
-    color: $danger;
-  }
-}
-
 .eligible-country-container {
   display: flex;
 }

app/controllers/citizenships_controller.rb

@@ -36,7 +36,30 @@ def create
   end
 
   def destroy
-    raise NotImplementedError, "TODO"
+    @citizenship = Citizenship.find(params[:id])
+
+    authorize(@citizenship)
+    @citizenship.destroy!
+
+    respond_to do |format|
+      format.turbo_stream do
+        render turbo_stream: turbo_stream.replace(
+          "profile-citizenship-section",
+          partial: "profiles/citizenships"
+        )
+      end
+    end
+  end
+
+  def cancel
+    respond_to do |format|
+      format.turbo_stream do
+        render turbo_stream: turbo_stream.replace(
+          "profile-citizenship-section",
+          partial: "profiles/citizenships"
+        )
+      end
+    end
   end
 
   private

app/policies/citizenship_policy.rb

@@ -2,4 +2,8 @@ class CitizenshipPolicy < ApplicationPolicy
   def create?
     record.user == user
   end
+
+  def destroy?
+    create?
+  end
 end

app/views/citizenships/_add_citizenship_form.html.erb

@@ -3,15 +3,6 @@
     data-controller="search-countries"
     data-search-countries-search-url-value=<%= citizenships_search_countries_path %>
     >
-    <ul>
-      <li>
-        TODO delete button for citizenships
-      </li>
-      <li>
-        TODO cancel button for this section
-      </li>
-    </ul>
-
     <%= label_tag "I am a citizen of..." %>
     <%= text_field_tag(
       "search-countries",
@@ -28,5 +19,12 @@
       <div data-search-countries-target="searchResults">
       </div>
     <% end %>
+
+    <%= link_to(
+      "Cancel",
+      cancel_citizenships_path,
+      class: "btn btn-danger",
+      "data-turbo-stream": ""
+    ) %>
   </div>
 <% end %>

app/views/profiles/_citizenships.html.erb

@@ -10,14 +10,31 @@
     <div>
       I am a citizen of
       <% if current_user.citizenships.count == 1 %>
+        <% citizenship = current_user.citizenships.first %>
         <span class="fw-bold">
-          <%= current_user.citizenships.first.country.name %>
+          <%= citizenship.country.name %>
+          <%= button_to(
+            citizenship_path(citizenship),
+            method: :delete,
+            class: "delete-button",
+            form_class: "d-inline-block"
+          ) do %>
+            <i class="bi bi-x-circle-fill"></i>
+          <% end %>
         </span>
       <% else %>
         <ul>
           <% current_user.citizenships.each do |citizenship| %>
             <li>
               <span class="fw-bold"><%= citizenship.country.name %></span>
+              <%= button_to(
+                citizenship_path(citizenship),
+                method: :delete,
+                class: "delete-button",
+                form_class: "d-inline-block"
+              ) do %>
+                <i class="bi bi-x-circle-fill"></i>
+              <% end %>
             </li>
           <% end %>
         </ul>

config/routes.rb

@@ -22,7 +22,11 @@
     end
   end
   resource :choose_plan, only: [:show]
-  resources :citizenships, only: [:new, :create, :destroy]
+  resources :citizenships, only: [:new, :create, :destroy] do
+    collection do
+      get :cancel
+    end
+  end
   namespace :citizenships do
     resources :search_countries, only: [:index]
   end