move tagging to the tags column, move meta-structuring to the name co…

…lumn
cardinalitypuzzles · Jan 15, 2025 · e5ff4b9 · e5ff4b9
1 parent 2a84a9b
commit e5ff4b9
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 32 deletions.
diff --git a/hunts/src/EditPuzzleModal.tsx b/hunts/src/EditPuzzleModal.tsx
@@ -1,8 +1,10 @@
 import React, { FormEvent } from "react";
 import { Button, Form, Modal } from "react-bootstrap";
-import { useDispatch } from "react-redux";
-import { updatePuzzle } from "./puzzlesSlice";
+import { useDispatch, useSelector } from "react-redux";
+import { selectHuntTags } from "./huntSlice";
+import { selectPuzzleTags, updatePuzzle } from "./puzzlesSlice";
 import { hideModal } from "./modalSlice";
+import EditableTagList from "./EditableTagList";
 
 import type { Dispatch } from "./store";
 import type { HuntId, PuzzleId } from "./types";
@@ -29,6 +31,16 @@ function EditPuzzleModal({
   const [newIsMeta, setNewIsMeta] = React.useState(isMeta);
   const [createChannels, setCreateChannels] = React.useState(hasChannels);
   const dispatch = useDispatch<Dispatch>();
+
+  const huntTags = useSelector(selectHuntTags);
+  const puzzleTags = useSelector(selectPuzzleTags);
+  // Use a map to concat huntTags and puzzleTags and then dedupe by id.
+  const tagMap = new Map();
+  for (const tag of huntTags.concat(puzzleTags)) {
+    tagMap.set(tag.id, tag);
+  }
+  const allTags = Array.from(tagMap.values());
+
   const onSubmit = (e: FormEvent) => {
     e.preventDefault();
     dispatch(
@@ -80,6 +92,11 @@ function EditPuzzleModal({
             checked={newIsMeta}
             onChange={(e: ChangeEvent) => setNewIsMeta(e.target.checked)}
           />
+          <h5 style={{ textAlign: "center" }}>Parent Metas</h5>
+          <EditableTagList
+            puzzleId={puzzleId}
+            tags={allTags.filter((tag) => tag.is_meta && tag.name != name)}
+          />
           <Form.Check
             type="checkbox"
             label="Create discord channels"

diff --git a/hunts/src/EditPuzzleTagsModal.tsx b/hunts/src/EditPuzzleTagsModal.tsx
@@ -38,12 +38,6 @@ function EditPuzzleTagsModal({
         <Modal.Title>Edit Tags for {puzzleName}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        <h5 style={{ textAlign: "center" }}>Metas</h5>
-        <EditableTagList
-          puzzleId={puzzleId}
-          tags={allTags.filter((tag) => tag.is_meta)}
-        />
-        <br />
         <h5 style={{ textAlign: "center" }}>Locations</h5>
         <EditableTagList
           puzzleId={puzzleId}

diff --git a/hunts/src/NameCell.tsx b/hunts/src/NameCell.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Badge, Popover, OverlayTrigger } from "react-bootstrap";
 import { useSelector, useDispatch } from "react-redux";
 import { faTrashAlt } from "@fortawesome/free-regular-svg-icons";
-import { faWrench, faTag } from "@fortawesome/free-solid-svg-icons";
+import { faWrench } from "@fortawesome/free-solid-svg-icons";
 import { showModal } from "./modalSlice";
 import ClickableIcon from "./ClickableIcon";
 import { toggleCollapsed } from "./collapsedPuzzlesSlice";
@@ -172,21 +172,6 @@ export default function NameCell({
               )
             }
           />{" "}
-          <ClickableIcon
-            icon={faTag}
-            onClick={() =>
-              dispatch(
-                showModal({
-                  type: "EDIT_TAGS",
-                  props: {
-                    huntId,
-                    puzzleId: row.values.id,
-                    puzzleName: row.values.name,
-                  },
-                })
-              )
-            }
-          />{" "}
           <ClickableIcon
             icon={faTrashAlt}
             onClick={() =>

diff --git a/hunts/src/TagCell.tsx b/hunts/src/TagCell.tsx
@@ -1,31 +1,51 @@
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { showModal } from "./modalSlice";
+import { faTag } from "@fortawesome/free-solid-svg-icons";
 import { toggleFilterTag } from "./filterSlice";
 import TagPill from "./TagPill";
+import ClickableIcon from "./ClickableIcon";
 
-import type { Puzzle, Row } from "./types";
+import type { RootState } from "./store";
+import type { Hunt, Puzzle, Row } from "./types";
 
 function TagCell({ row }: { row: Row<Puzzle> }) {
   const dispatch = useDispatch();
+  const { id: huntId } = useSelector<RootState, Hunt>((state) => state.hunt);
   const puzzleId = row.original.id;
 
   const shouldShowMetaTags =
-    row.original.tags.filter((t) => t.is_meta).length > 1;
+  row.original.tags.filter((t) => t.is_meta).length > 1;
   const tagsToShow = shouldShowMetaTags
-    ? row.original.tags
-    : row.original.tags.filter((t) => !t.is_meta);
+  ? row.original.tags
+  : row.original.tags.filter((t) => !t.is_meta);
 
   return (
     <>
       {tagsToShow.map(({ name, color, id }) => (
         <TagPill
-          name={name}
-          color={color}
-          key={name}
-          onClick={() => dispatch(toggleFilterTag({ name, color, id }))}
+        name={name}
+        color={color}
+        key={name}
+        onClick={() => dispatch(toggleFilterTag({ name, color, id }))}
         />
       ))}{" "}
+
+      <ClickableIcon
+      icon={faTag}
+      onClick={() =>
+        dispatch(
+          showModal({
+            type: "EDIT_TAGS",
+            props: {
+              huntId,
+              puzzleId: row.values.id,
+              puzzleName: row.values.name,
+            },
+          })
+        )
+      }
+      />{" "}
     </>
   );
 }