fix: remove unneeded import

tnc-ca-geo · Nov 1, 2024 · 066fee6 · 066fee6
1 parent d4a4ab3
commit 066fee6
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 21 deletions.
diff --git a/src/api/buildQuery.js b/src/api/buildQuery.js
@@ -639,7 +639,7 @@ const queries = {
 
   createImageTag: (input) => ({
     template: `
-      mutation CreateImageTag($input: CreateImageTagInput!){
+      mutation CreateImageTag($input: CreateImageTagInput!) {
         createImageTag(input: $input) {
           tags
         }
@@ -648,6 +648,17 @@ const queries = {
     variables: { input: input },
   }),
 
+  deleteImageTag: (input) => ({
+    template: `
+      mutation DeleteImageTag($input: DeleteImageTagInput!) {
+        deleteImageTag(input: $input) {
+          tags 
+        }
+      }
+    `,
+    variables: { input: input },
+  }),
+
   createDeployment: (input) => ({
     template: `
       mutation CreateDeployment($input: CreateDeploymentInput!) {

diff --git a/src/components/TagSelector.jsx b/src/components/TagSelector.jsx
@@ -3,7 +3,6 @@ import { styled } from '../theme/stitches.config.js';
 import { useSelector, useDispatch } from 'react-redux';
 import Select, { createFilter } from 'react-select';
 import {
-  selectProjectTags,
   selectTagsLoading
 } from '../features/projects/projectsSlice.js';
 import { addLabelEnd } from '../features/loupe/loupeSlice.js';
@@ -60,12 +59,12 @@ const StyledTagSelector = styled(Select, {
 
 export const TagSelector = ({
   css,
+  tags,
   handleTagChange,
   handleTagChangeBlur,
   menuPlacement = 'top',
 }) => {
   const tagsLoading = useSelector(selectTagsLoading);
-  const tags = useSelector(selectProjectTags);
   const options = tags.map((tag) => {
     return {
       value: tag._id,
@@ -80,6 +79,7 @@ export const TagSelector = ({
       value={""}
       css={css}
       autoFocus
+      closeMenuOnSelect={options.length <= 1}
       isClearable
       isSearchable
       openMenuOnClick

diff --git a/src/features/loupe/ImageTagsToolbar.jsx b/src/features/loupe/ImageTagsToolbar.jsx
@@ -48,35 +48,41 @@ const Separator = styled('div', {
 });
 
 const getImageTagInfo = (imageTags, projectTags) => {
-  console.log("img", imageTags)
-  console.log("proj", projectTags)
   return projectTags.filter((t) => {
     return imageTags.find((it) => it === t._id) !== undefined
   });
 }
 
+const getUnaddedTags = (imageTags, projectTags) => {
+  return projectTags.filter((t) => imageTags.indexOf(t._id) === -1)
+}
+
 export const ImageTagsToolbar = ({
   image
 }) => {
   const dispatch = useDispatch();
   const projectTags = useSelector(selectProjectTags);
   const [imageTags, setImageTags] = useState(image.tags ?? []);
-
-  console.log("tg", image.tags)
+  const [unaddedTags, setUnaddedTags] = useState([]);
 
   useEffect(() => {
     const imageTagInfo = getImageTagInfo(image.tags ?? [], projectTags);
     setImageTags(imageTagInfo);
+    setUnaddedTags(getUnaddedTags(image.tags ?? [], projectTags));
   }, [image, projectTags])
 
   useEffect(() => {
     const imageTagInfo = getImageTagInfo(image.tags ?? [], projectTags);
-    console.log(imageTagInfo)
     setImageTags(imageTagInfo);
+    setUnaddedTags(getUnaddedTags(image.tags ?? [], projectTags));
   }, []);
 
   const onDeleteTag = (tagId) => {
-    console.log(`delete tag: ${tagId}`)
+    const deleteTagDto = {
+      tagId: tagId,
+      imageId: image._id
+    };
+    dispatch(editTag('delete', deleteTagDto));
   }
 
   const onAddTag = ({ value }) => {
@@ -91,19 +97,20 @@ export const ImageTagsToolbar = ({
     <Toolbar>
       <TagSelectorContainer>
         <TagSelector 
+          tags={unaddedTags}
           handleTagChange={(tag) => onAddTag(tag)} 
         />
       </TagSelectorContainer>
       <Separator />
       <TagsContainer>
         <ScrollContainer>
-          { imageTags.map(({ id, name, color }) => (
+          { imageTags.map(({ _id, name, color }) => (
             <ImageTag
-              key={id}
-              id={id}
+              key={_id}
+              id={_id}
               name={name}
               color={color}
-              onDelete={onDeleteTag}
+              onDelete={(tagId) => onDeleteTag(tagId)}
             />
           ))}
         </ScrollContainer>

diff --git a/src/features/projects/ManageTagsModal/ManageTagsModal.jsx b/src/features/projects/ManageTagsModal/ManageTagsModal.jsx
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { styled } from '../../../theme/stitches.config';
 import { EditableTag } from './EditableTag';
 import { EditTag } from './EditTag';
 import Button from '../../../components/Button';
 import { SimpleSpinner, SpinnerOverlay } from '../../../components/Spinner';
 import { DeleteTagAlert } from './DeleteTagAlert';
 import { useDispatch, useSelector } from 'react-redux';
-import { createProjectTag, deleteProjectTag, selectProjectTags, updateProjectTag } from '../projectsSlice';
+import { createProjectTag, deleteProjectTag, selectProjectTags, selectTagsLoading, updateProjectTag } from '../projectsSlice';
 
 const EditableTagsContainer = styled('div', {
   overflowY: 'scroll',
@@ -33,17 +33,12 @@ export const ManageTagsModal = () => {
   const dispatch = useDispatch();
   const tags = useSelector(selectProjectTags);
 
-  const [isLoading, setIsLoading] = useState(false);
   const [isNewTagOpen, setIsNewTagOpen] = useState(false);
 
   const [isAlertOpen, setIsAlertOpen] = useState(false);
   const [tagToDelete, setTagToDelete] = useState('');
 
-  // TODO
-  // to avoid lint error
-  useEffect(() => {
-    setIsLoading(false)
-  })
+  const isLoading = useSelector(selectTagsLoading);
 
   const onConfirmEdit = (tagId, tagName, tagColor) => {
     console.log("edit", tagId, tagName, tagColor);