Move searches list group in to Search component

opensafely-core · Jan 9, 2025 · 6b46f90 · 6b46f90
1 parent 9b73f90
commit 6b46f90
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 55 deletions.
diff --git a/assets/src/scripts/components/CodelistBuilder.jsx b/assets/src/scripts/components/CodelistBuilder.jsx
@@ -182,24 +182,10 @@ class CodelistBuilder extends React.Component {
             <hr />
 
             {this.props.searches.length > 0 && (
-              <>
-                <h3 className="h6">Searches</h3>
-                <ListGroup>
-                  {this.props.searches.map((search) => (
-                    <Search key={search.url} search={search} />
-                  ))}
-                  {this.props.searches.some((search) => search.active) ? (
-                    <ListGroup.Item
-                      action
-                      className="py-1 px-2 font-italic"
-                      href={encodeURI(this.props.draftURL)}
-                    >
-                      show all
-                    </ListGroup.Item>
-                  ) : null}
-                </ListGroup>
-                <hr />
-              </>
+              <Search
+                draftURL={this.props.draftURL}
+                searches={this.props.searches}
+              />
             )}
 
             {this.props.isEditable && (

diff --git a/assets/src/scripts/components/Search.jsx b/assets/src/scripts/components/Search.jsx
@@ -3,43 +3,64 @@ import React from "react";
 import { Button, Form, ListGroup } from "react-bootstrap";
 import { getCookie } from "../_utils";
 
-function Search({ search }) {
-  return search.delete_url ? (
-    <ListGroup.Item
-      action
-      active={search.active}
-      className="py-1 px-2"
-      href={search.url}
-    >
-      <Form action={search.delete_url} method="post">
-        <Form.Control
-          name="csrfmiddlewaretoken"
-          type="hidden"
-          value={getCookie("csrftoken")}
-        />
-        {search.term_or_code}
-        <Button
-          aria-label="remove search"
-          className="float-right p-0 px-1"
-          name="delete-search"
-          type="submit"
-          size="sm"
-          variant="danger"
-        >
-          &times;
-        </Button>
-      </Form>
-    </ListGroup.Item>
-  ) : (
-    <ListGroup.Item
-      action
-      active={search.active}
-      className="py-1 px-2"
-      href={encodeURI(search.url)}
-      key={search.url}
-    >
-      {search.term_or_code}
-    </ListGroup.Item>
+function Search({ draftURL, searches }) {
+  return (
+    <>
+      <h3 className="h6">Searches</h3>
+      <ListGroup>
+        {searches.map((search) => (
+          <React.Fragment key={search.url}>
+            {search.delete_url ? (
+              <ListGroup.Item
+                action
+                active={search.active}
+                className="py-1 px-2"
+                href={search.url}
+              >
+                <Form action={search.delete_url} method="post">
+                  <Form.Control
+                    name="csrfmiddlewaretoken"
+                    type="hidden"
+                    value={getCookie("csrftoken")}
+                  />
+                  {search.term_or_code}
+                  <Button
+                    aria-label="remove search"
+                    className="float-right p-0 px-1"
+                    name="delete-search"
+                    type="submit"
+                    size="sm"
+                    variant="secondary"
+                  >
+                    &times;
+                  </Button>
+                </Form>
+              </ListGroup.Item>
+            ) : (
+              <ListGroup.Item
+                action
+                active={search.active}
+                className="py-1 px-2"
+                href={encodeURI(search.url)}
+              >
+                {search.term_or_code}
+              </ListGroup.Item>
+            )}
+          </React.Fragment>
+        ))}
+
+        {searches.some((search) => search.active) ? (
+          <ListGroup.Item
+            action
+            className="py-1 px-2 font-italic"
+            href={encodeURI(draftURL)}
+          >
+            show all
+          </ListGroup.Item>
+        ) : null}
+      </ListGroup>
+      <hr />
+    </>
   );
 }