Skip to content

Commit 09bd6d0

Browse files
LewisYoulLewisYoul
committed
fix/Handle snippet deletion in browser
1 parent 28e144b commit 09bd6d0

File tree

6 files changed

+74
-61
lines changed

6 files changed

+74
-61
lines changed

‎app/controllers/snippets_controller.rb‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -172,28 +172,14 @@ def update
172172
end
173173

174174
def destroy
175-
@snippet = Snippet.find(params[:id])
176-
177-
respond_to do |format|
178-
format.html do
179-
if @snippet.destroy
180-
flash[:notice] = 'Snippet deleted!'
181-
182-
head :ok
183-
else
184-
# Not handling this event in browser
185-
flash[:alert] = 'Unable to delete snippet'
186-
head :bad_request
187-
end
188-
end
175+
@snippet = current_user.snippets.find(params[:id])
189176

190-
format.json do
191-
if @snippet.destroy
192-
render json: { message: 'Snippet deleted!' }
193-
else
194-
render json: { message: 'Unable to delete snippet' }, status: 401
195-
end
196-
end
177+
if @snippet&.destroy
178+
flash[:notice] = 'Snippet deleted!'
179+
180+
render json: { resource_id: @snippet.client_id }
181+
else
182+
head :bad_request
197183
end
198184
end
199185

‎app/javascript/controllers/snippets_controller.js‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@ export default class extends Controller {
3333
update(event) {
3434
const element = document.getElementById(event.detail.client_id)
3535

36-
if (element) { element.outerHTML = event.detail.element }
36+
if (element) {
37+
element.outerHTML = event.detail.element
38+
}
3739
}
3840

3941
onCreateSuccess(event) {
@@ -63,6 +65,23 @@ export default class extends Controller {
6365
this.errorsTarget.innerHTML = data.element;
6466
}
6567

68+
onDeleteSuccess(event) {
69+
const [data, status, xhr] = event.detail;
70+
const resourceId = data.resource_id
71+
const element = document.getElementById(resourceId)
72+
73+
if (element.dataset.redirectAfterDelete) {
74+
Turbolinks.visit('/')
75+
} else {
76+
element.remove()
77+
this.emitEvent('close-alert')
78+
}
79+
}
80+
81+
onDeleteError() {
82+
this.emitEvent('close-alert')
83+
}
84+
6685
modal_search(event) {
6786
const searchTerm = event.target.value.toLowerCase();
6887

‎app/views/alerts/snippets/delete.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
snippet_path(@snippet),
44
method: :delete,
55
remote: true,
6-
data: { toast_message: 'Snippet deleted!', resource_id: @snippet.client_id, action: 'ajax:success->alert#deleteSuccess' },
6+
data: { controller: "snippets", toast_message: 'Snippet deleted!', resource_id: @snippet.client_id, action: 'ajax:success->snippets#onDeleteSuccess ajax:error->snippets#onDeleteError' },
77
class: "button--cta-primary ml-2"
88
) %>

‎app/views/layouts/alert.html.erb‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
<!-- This example requires Tailwind CSS v2.0+ -->
2-
<div class="fixed z-10 inset-0 overflow-y-auto" data-controller="alert" data-alert-target="alert">
2+
<div
3+
class="fixed z-10 inset-0 overflow-y-auto"
4+
data-controller="alert"
5+
data-alert-target="alert"
6+
data-action="close-alert@window->alert#close"
7+
>
38
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
49
<!--
510
Background overlay, show/hide based on modal state.

‎app/views/shared/cards/_card.html.erb‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1-
<div class="px-4 py-5 sm:p-4 bg-white shadow rounded-lg mb-4 <%= defined?(classes) ? classes : '' %>">
1+
<div
2+
class="px-4 py-5 sm:p-4 bg-white shadow rounded-lg mb-4 <%= defined?(classes) ? classes : '' %>"
3+
<% if defined?(id) %>
4+
id="<%= id %>"
5+
<% end %>
6+
<% if defined?(data) %>
7+
<% data.each do |key, value| %>
8+
data-<%= key.to_s.dasherize %>="<%= value %>"
9+
<% end %>
10+
<% end %>
11+
>
212
<%= yield %>
313
</div>

‎app/views/snippets/_snippet.html.erb‎

Lines changed: 29 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,38 @@
11
<% folder = snippet.folder_for_user(current_user) %>
22

3-
<%= render 'shared/cards/card' do %>
4-
<div
5-
id="<%= snippet.client_id %>"
6-
data-controller="snippets"
7-
data-action="snippet-updated@window->snippets#update"
8-
data-redirect-after-delete="true"
9-
>
10-
<div class="relative flex items-start space-x-3">
11-
<%= render partial: 'users/preview', locals: { resource: snippet, user: snippet.user } %>
12-
<div>
13-
<div style="display: flex; flex-direction: column;">
14-
<div style="display: flex; justify-content: flex-end; margin-bottom: 8px; align-items: center;">
15-
<% if snippet.private? %>
16-
<img class="margin-right--tiny" data-checkbox-target="icon" title="This snippet is only visible to you" src="/icons/lock-closed.svg" width="16">
17-
<% end %>
18-
<% if folder %>
19-
<div class="folder-tag">
20-
<img src="/icons/white/folder.svg" width="12">
21-
<span class="block margin-left--tiny"><%= folder.name %></span>
22-
</div>
23-
<% end%>
24-
<% if @display_popover %>
25-
<%= render partial: 'shared/popover_trigger', locals: { popover_path: popover_snippet_path(snippet) } %>
26-
<% end %>
27-
</div>
3+
<%= render 'shared/cards/card', id: snippet.client_id, data: { controller: "snippets", action: "snippet-updated@window->snippets#update", redirect_after_delete: true } do %>
4+
<div class="relative flex items-start space-x-3">
5+
<%= render partial: 'users/preview', locals: { resource: snippet, user: snippet.user } %>
6+
<div>
7+
<div style="display: flex; flex-direction: column;">
8+
<div style="display: flex; justify-content: flex-end; margin-bottom: 8px; align-items: center;">
9+
<% if snippet.private? %>
10+
<img class="margin-right--tiny" data-checkbox-target="icon" title="This snippet is only visible to you" src="/icons/lock-closed.svg" width="16">
11+
<% end %>
12+
<% if folder %>
13+
<div class="folder-tag">
14+
<img src="/icons/white/folder.svg" width="12">
15+
<span class="block margin-left--tiny"><%= folder.name %></span>
16+
</div>
17+
<% end%>
18+
<% if @display_popover %>
19+
<%= render partial: 'shared/popover_trigger', locals: { popover_path: popover_snippet_path(snippet) } %>
20+
<% end %>
2821
</div>
2922
</div>
3023
</div>
31-
32-
<div class="flex mt-4 mb-2 justify-between">
33-
<div>
34-
<h5 class="m-0"><%= snippet.description %></h5>
35-
</div>
36-
37-
<div class="flex">
38-
<%= render partial: 'shared/like_button', locals: { snippet: snippet } %>
39-
<%= render partial: 'shared/comment_button', locals: { snippet: snippet } %>
40-
</div>
24+
</div>
25+
26+
<div class="flex mt-4 mb-2 justify-between">
27+
<div>
28+
<h5 class="m-0"><%= snippet.description %></h5>
4129
</div>
4230

43-
<%= render partial: 'shared/codemirror', locals: { code: snippet.body, mode: snippet.language.slug, read_only: true } %>
31+
<div class="flex">
32+
<%= render partial: 'shared/like_button', locals: { snippet: snippet } %>
33+
<%= render partial: 'shared/comment_button', locals: { snippet: snippet } %>
34+
</div>
4435
</div>
36+
37+
<%= render partial: 'shared/codemirror', locals: { code: snippet.body, mode: snippet.language.slug, read_only: true } %>
4538
<% end %>

0 commit comments

Comments
 (0)