From 19f25462ea27998aa33ae5ac7e457c9a66bb2d66 Mon Sep 17 00:00:00 2001
From: Jan Tojnar <jtojnar@gmail.com>
Date: Tue, 12 Jul 2022 19:31:49 +0200
Subject: [PATCH] client: Fix deletion of source form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This was missed in https://github.com/fossar/selfoss/commit/0432fedbe49c17d5a4a7b0eab2c16d4cb40e725c

The menu element is removed from DOM by the time the deletion handler
run so jQuery’s `parents()` function will not be able to locate the form.

Let’s store an explicit reference to the form and pass it to the event handler.
---
 assets/js/templates/Source.jsx | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/assets/js/templates/Source.jsx b/assets/js/templates/Source.jsx
index fbd9205e5e..229b6e5b5a 100644
--- a/assets/js/templates/Source.jsx
+++ b/assets/js/templates/Source.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useRef } from 'react';
 import { Button as MenuButton, Wrapper as MenuWrapper, Menu, MenuItem } from 'react-aria-menubutton';
 import { useHistory, useLocation } from 'react-router-dom';
 import { makeEntriesLinkLocation } from '../helpers/uri';
@@ -14,12 +15,17 @@ import { LoadingState } from '../requests/LoadingState';
 import { LocalizationContext } from '../helpers/i18n';
 
 // cancel source editing
-function handleCancel({ event, source, setSources, setEditedSource }) {
+function handleCancel({
+    event,
+    source,
+    sourceElem,
+    setSources,
+    setEditedSource
+}) {
     const id = source.id;
 
     if (id.toString().startsWith('new-')) {
-        const parent = $(event.target).parents('.source');
-        parent.fadeOut('fast', () => {
+        $(sourceElem.current).fadeOut('fast', () => {
             // Remove the source from this page’s model.
             setSources((sources) =>
                 sources.filter((source) => source.id !== id)
@@ -124,6 +130,7 @@ function handleSave({
 function handleDelete({
     event,
     source,
+    sourceElem,
     setSources,
     setSourceBeingDeleted,
     setDirty,
@@ -147,8 +154,7 @@ function handleDelete({
     sourceRequests
         .remove(id)
         .then(() => {
-            const parent = $(event.target).parents('.source');
-            parent.fadeOut('fast', () => {
+            $(sourceElem.current).fadeOut('fast', () => {
                 // Remove the source from this page’s model.
                 setSources((sources) =>
                     sources.filter((source) => source.id !== id)
@@ -247,6 +253,7 @@ function daysAgo(date) {
 
 function SourceEditForm({
     source,
+    sourceElem,
     sourceError,
     setSources,
     spouts,
@@ -335,11 +342,12 @@ function SourceEditForm({
             handleCancel({
                 event,
                 source,
+                sourceElem,
                 setSources,
                 setEditedSource
             });
         },
-        [source, setSources, setEditedSource, dirty, setDirty]
+        [source, sourceElem, setSources, setEditedSource, dirty, setDirty]
     );
 
     const _ = React.useContext(LocalizationContext);
@@ -518,6 +526,7 @@ function SourceEditForm({
 
 SourceEditForm.propTypes = {
     source: PropTypes.object.isRequired,
+    sourceElem: PropTypes.object.isRequired,
     sourceError: PropTypes.string,
     setSources: PropTypes.func.isRequired,
     spouts: PropTypes.object.isRequired,
@@ -582,12 +591,15 @@ export default function Source({ source, setSources, spouts, setSpouts, dirty, s
     const history  = useHistory();
     const location  = useLocation();
 
+    const sourceElem = useRef(null);
+
     const extraMenuOnSelection = React.useCallback(
         (value, event) => {
             if (value === 'delete') {
                 handleDelete({
                     event,
                     source,
+                    sourceElem,
                     setSources,
                     setSourceBeingDeleted,
                     setDirty,
@@ -596,7 +608,7 @@ export default function Source({ source, setSources, spouts, setSpouts, dirty, s
                 history.push(makeEntriesLinkLocation(location, { category: `source-${source.id}` }));
             }
         },
-        [source, setSources, setDirty, location, history]
+        [source, sourceElem, setSources, setDirty, location, history]
     );
 
     const _ = React.useContext(LocalizationContext);
@@ -606,6 +618,7 @@ export default function Source({ source, setSources, spouts, setSpouts, dirty, s
             className={classNames(classes)}
             data-id={source.id}
             id={`source-${source.id}`}
+            ref={sourceElem}
         >
             <div className="source-icon">
                 {source.icon && source.icon != '0' ? (
@@ -705,6 +718,7 @@ export default function Source({ source, setSources, spouts, setSpouts, dirty, s
                         setSourceErrors,
                         dirty,
                         setDirty,
+                        sourceElem,
                     }}
                     sourceError={source.error}
                     source={editedSource}