fix(AuthoringToolPage): remove tag component and associated code

UoaWDCC · May 27, 2024 · a7b05e2 · a7b05e2
1 parent 4a29841
commit a7b05e2
Show file tree

Hide file tree

Showing 7 changed files with 4 additions and 287 deletions.
diff --git a/frontend/src/containers/pages/AuthoringTool/AuthoringToolPage.jsx b/frontend/src/containers/pages/AuthoringTool/AuthoringToolPage.jsx
@@ -79,23 +79,9 @@ export default function AuthoringToolPage() {
     reFetch();
   }
 
-  async function saveTags() {
-    const updatedScenes = scenes.map(({ tag, _id, name }) => ({
-      tag,
-      _id,
-      name,
-    }));
-    await usePut(
-      `/api/scenario/${scenarioId}/scene/tags`,
-      updatedScenes,
-      getUserIdToken
-    );
-  }
-
   /** called when save button is clicked */
   async function save() {
     saveScene();
-    saveTags();
     setSaveButtonText("Saved!");
     setTimeout(() => {
       setSaveButtonText("Save");
@@ -105,7 +91,6 @@ export default function AuthoringToolPage() {
   /** called when save and close button is clicked */
   function savePlusClose() {
     saveScene();
-    saveTags();
     /* redirects user to the scenario page */
     window.location.href = `/scenario/${currentScenario?._id}`;
   }

diff --git a/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneListItem.jsx b/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneListItem.jsx
@@ -2,60 +2,8 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 
-import { useRef } from "react";
-import styles from "styling/SceneNavigator.module.scss";
-import { noTagSymbol, tagColours, tagOptions } from "./SceneTagCustomization";
-
-const SceneListItem = ({
-  sceneId,
-  tag,
-  thumbnail,
-  showingTagInputFor,
-  showTagInputFor,
-  selectTagEl,
-}) => {
-  const tagRef = useRef(null);
-  const fullTagRef = useRef(null);
-
-  function toggleTagOnHover() {
-    const tagEl = tagRef.current;
-    const fullTagEl = fullTagRef.current;
-
-    tagEl.classList.toggle(styles.hidden);
-    fullTagEl.classList.toggle(styles.showing);
-  }
-
-  function toggleInputBox() {
-    showTagInputFor(showingTagInputFor === sceneId ? null : sceneId);
-    selectTagEl(showingTagInputFor === sceneId ? null : tagRef.current);
-  }
-
-  const noTagClassName = tag === noTagSymbol ? styles.noTag : "";
-
-  return (
-    <li key={sceneId}>
-      {thumbnail}
-      <p
-        className={`${noTagClassName} ${styles.playersTag}`}
-        style={{ borderColor: tagColours[tag] || "black" }}
-        onMouseEnter={() => toggleTagOnHover(sceneId)}
-        onClick={() => toggleInputBox(sceneId)}
-        ref={tagRef}
-      >
-        {tag}
-      </p>
-
-      <p
-        className={`${noTagClassName} ${styles.playersTagFull}`}
-        style={{ borderColor: tagColours[tag] || "black" }}
-        onMouseLeave={() => toggleTagOnHover(sceneId)}
-        onClick={() => toggleInputBox(sceneId)}
-        ref={fullTagRef}
-      >
-        {tagOptions[tag]}
-      </p>
-    </li>
-  );
+const SceneListItem = ({ sceneId, thumbnail }) => {
+  return <li key={sceneId}>{thumbnail}</li>;
 };
 
 export default SceneListItem;
diff --git a/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneNavigator.jsx b/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneNavigator.jsx
@@ -4,45 +4,19 @@ import { useContext, useEffect, useState } from "react";
 import { useHistory, useParams } from "react-router-dom";
 import styles from "styling/SceneNavigator.module.scss";
 import SceneListItem from "./SceneListItem";
-import SceneTagInput from "./SceneTagInput";
 
 const SceneNavigator = ({ saveScene }) => {
   const [thumbnails, setThumbnails] = useState(null);
-  const { scenes, setScenes, currentScene, currentSceneRef, setCurrentScene } =
+  const { scenes, currentScene, currentSceneRef, setCurrentScene } =
     useContext(SceneContext);
   const { scenarioId } = useParams();
   const history = useHistory();
 
-  // showing tag modal
-
-  const [showingTagInputFor, showTagInputFor] = useState(null);
-
-  function getIndexOfSceneId(sceneId) {
-    if (!thumbnails) return -1;
-    return thumbnails.findIndex((thumbnail) => thumbnail.sceneId === sceneId);
-  }
-
-  function changeTag(sceneId, newTag) {
-    const sceneIndex = getIndexOfSceneId(sceneId);
-
-    setThumbnails((currentThumbnails) => {
-      currentThumbnails[sceneIndex].tag = newTag;
-      return [...currentThumbnails];
-    });
-
-    setScenes((currScenes) => {
-      const index = currScenes.findIndex((scene) => scene._id === sceneId);
-      currScenes[index].tag = newTag;
-      return currScenes;
-    });
-  }
-
   useEffect(() => {
     if (scenes !== undefined) {
       setThumbnails(
         scenes.map((scene, index) => ({
           sceneId: scene._id,
-          tag: scene.tag,
           sceneListItem: (
             <>
               <p
@@ -86,38 +60,20 @@ const SceneNavigator = ({ saveScene }) => {
     }
   }, [scenes, currentScene]);
 
-  // for the scene/tag inputs
-  const [selectedTagEl, selectTagEl] = useState(null);
-
   return (
     thumbnails && (
       <div style={{ display: "flex", position: "relative" }}>
         <ul className={styles.sceneNavigator}>
-          {thumbnails.map(({ sceneListItem: thumbnail, sceneId, tag }) => (
+          {thumbnails.map(({ sceneListItem: thumbnail, sceneId }) => (
             <SceneListItem
               {...{
                 thumbnail,
                 sceneId,
-                tag,
-                showingTagInputFor,
-                showTagInputFor,
-                selectTagEl,
                 key: sceneId,
               }}
             />
           ))}
         </ul>
-
-        {showingTagInputFor && (
-          <SceneTagInput
-            {...{
-              selectedTagEl,
-              changeTag,
-              showTagInputFor,
-              showingTagInputFor,
-            }}
-          />
-        )}
       </div>
     )
   );

diff --git a/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneTagCustomization.js b/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneTagCustomization.js
diff --git a/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneTagInput.jsx b/frontend/src/containers/pages/AuthoringTool/SceneNavigator/SceneTagInput.jsx
diff --git a/frontend/src/containers/pages/AuthoringTool/ToolBar/Background/PlayerListSubContainer.jsx b/frontend/src/containers/pages/AuthoringTool/ToolBar/Background/PlayerListSubContainer.jsx
diff --git a/frontend/src/styling/SceneNavigator.module.scss b/frontend/src/styling/SceneNavigator.module.scss
@@ -20,34 +20,6 @@
     gap: 10px;
   }
 
-  .playersTag,
-  .playersTagFull {
-    border: 1.8px solid magenta;
-    background-color: rgb(218, 209, 209);
-    border-radius: 15px;
-    padding: 5px 10px;
-    cursor: pointer;
-    height: 20px;
-
-    &.hidden {
-      visibility: hidden;
-    }
-
-    &.showing {
-      display: initial;
-    }
-  }
-
-  .playersTagFull {
-    display: none;
-    position: absolute;
-    right: 16px;
-  }
-
-  .playersTag.noTag {
-    background: none;
-  }
-
   .sceneButton {
     border: 3px solid transparent;
     width: max-content;
@@ -69,37 +41,3 @@
     border: 3px solid #cfcfcf;
   }
 }
-
-.popupForSceneTagInput {
-  z-index: 2;
-
-  position: absolute;
-  left: calc(100% + 10px);
-  --vertical-pos: 50%;
-  top: calc(var(--vertical-pos) + 100% - 100vh - 10px);
-
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
-  background-color: white;
-  border: 2px solid black;
-  padding: 10px 20px;
-  border-radius: 10px;
-
-  label {
-    display: flex;
-    flex: 1;
-    gap: 10px;
-    text-wrap: nowrap;
-  }
-
-  button {
-    outline: none;
-    border: none;
-    cursor: pointer;
-    align-self: flex-end;
-    background: none;
-    text-decoration: underline;
-  }
-}