react/kiez-search-profile: refactor search profile and update alerts

changelog/_8895.md

@@ -1,3 +1,4 @@
 ### Added
 
-- Added search profile alerts to plan list page.
+- Added search profile alerts to `ProjectsListMapBox` component.
+- Added `DeleteModal` to `SearchProfile` component.

meinberlin/assets/scss/components_user_facing/_search-profiles.scss

@@ -83,11 +83,6 @@
     text-decoration: underline;
 }
 
-.search-profiles-list__error,
-.search-profile__error {
-    color: $danger;
-}
-
 .search-profile__form {
     margin-bottom: 1.2rem;
 }
@@ -121,14 +116,6 @@
     margin-left: auto;
 }
 
-.search-profile__alert {
-    margin-top: -1.5em;
-
-    @media screen and (min-width: $breakpoint-tablet-landscape) {
-        margin-top: -2.5em;
-    }
-}
-
 .search-profile__toggle-switch {
     display: flex;
     margin-bottom: 1rem;

meinberlin/react/kiezradar/DeleteModal.jsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useRef } from 'react'
+import django from 'django'
+
+const closeText = django.gettext('Close')
+const deleteText = django.gettext('Delete')
+
+export default function DeleteModal ({ title, message, onDelete, onClose }) {
+  const dialogRef = useRef(null)
+
+  const closeModal = () => {
+    if (dialogRef.current) {
+      dialogRef.current.close()
+      onClose()
+    }
+  }
+
+  useEffect(() => {
+    if (dialogRef.current) {
+      dialogRef.current.showModal()
+    }
+  }, [])
+
+  return (
+    <dialog
+      className="kiezradar__modal"
+      ref={dialogRef}
+      aria-labelledby="modal-title"
+      onKeyDown={(event) => {
+        if (event.key === 'Escape') closeModal()
+      }}
+    >
+      <button type="button" className="kiezradar__modal-close" aria-label={closeText} onClick={closeModal}>
+        <span className="fa fa-times" aria-hidden="true" />
+      </button>
+      <h3 id="modal-title" className="kiezradar__modal-title">{title}</h3>
+      <p className="kiezradar__modal-text">{message}</p>
+      <div className="kiezradar__modal-buttons">
+        <button className="link" onClick={closeModal}>
+          {closeText}
+        </button>
+        <button className="button kiezradar__modal-button-open" onClick={onDelete}>
+          {deleteText}
+        </button>
+      </div>
+    </dialog>
+  )
+}

meinberlin/react/kiezradar/KiezradarList.jsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState } from 'react'
 import django from 'django'
 import { Link } from 'react-router-dom'
 import Loading from './Loading'
 import { alert as Alert } from 'adhocracy4'
 import { updateItem } from '../contrib/helpers'
+import DeleteModal from './DeleteModal'
 
 const noSavedKiezradarsText = django.gettext('No saved Kiezes')
 const addKiezText = django.gettext('Add Kiez')
@@ -14,7 +15,6 @@ const errorDeleteKiezesText = django.gettext(
 )
 const editText = django.gettext('Edit')
 const deleteText = django.gettext('Delete')
-const closeText = django.gettext('Close')
 const viewProjectsText = django.gettext('View projects')
 const confirmDeletionText = (name) =>
   django.interpolate(
@@ -70,7 +70,8 @@ export default function KiezradarList ({
             <>
               {deleteModal?.kiezradar && (
                 <DeleteModal
-                  kiezradar={deleteModal.kiezradar}
+                  title={confirmDeletionText(deleteModal.kiezradar.name)}
+                  message={confirmDeletionDescriptionText}
                   onDelete={() => handleDelete(deleteModal.kiezradar)}
                   onClose={() => setDeleteModal(null)}
                 />
@@ -173,44 +174,3 @@ function DeleteButton ({ onDelete }) {
     </button>
   )
 }
-
-function DeleteModal ({ kiezradar, onDelete, onClose }) {
-  const dialogRef = useRef(null)
-
-  const closeModal = () => {
-    dialogRef.current.close()
-    onClose()
-  }
-
-  useEffect(() => {
-    const handleKeyDown = (event) => {
-      if (event.key === 'Escape') closeModal()
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [])
-
-  useEffect(() => {
-    dialogRef.current.showModal()
-  }, [])
-
-  return (
-    <dialog className="kiezradar__modal" ref={dialogRef} aria-modal="true">
-      <button type="button" className="kiezradar__modal-close" aria-label={closeText} onClick={closeModal}>
-        <span className="fa fa-times" aria-hidden="true" />
-      </button>
-      <h3 className="kiezradar__modal-title">{confirmDeletionText(kiezradar.name)}</h3>
-      <p className="kiezradar__modal-text">{confirmDeletionDescriptionText}</p>
-      <div className="kiezradar__modal-buttons">
-        <button className="link" onClick={closeModal}>
-          {closeText}
-        </button>
-        <button className="button kiezradar__modal-button-open" onClick={onDelete}>
-          {deleteText}
-        </button>
-      </div>
-    </dialog>
-  )
-}