feat(GoalPage): user can remove tags from GoalPage

taskany-inc · Sep 21, 2023 · 5cffea1 · 5cffea1
1 parent 98ee83c
commit 5cffea1
Showing 1 changed file with 17 additions and 2 deletions.
diff --git a/src/components/GoalPage/GoalPage.tsx b/src/components/GoalPage/GoalPage.tsx
@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import dynamic from 'next/dynamic';
 import styled from 'styled-components';
 import { gapM, gray7 } from '@taskany/colors';
-import { Button, Card, CardInfo, CardContent, nullable, Text, Tag } from '@taskany/bricks';
+import { Button, Card, CardInfo, CardContent, nullable, Text, Tag, TagCleanButton } from '@taskany/bricks';
 import { IconEditOutline, IconBinOutline, IconPlusCircleOutline, IconArrowRightOutline } from '@taskany/icons';
 
 import { ExternalPageProps } from '../../utils/declareSsrProps';
@@ -188,6 +188,18 @@ export const GoalPage = ({ user, ssrTime, params: { id } }: ExternalPageProps<{
         [goal, invalidate, goalTagsUpdate],
     );
 
+    const onGoalTagRemove = useCallback(
+        (value: TagObject) => async () => {
+            if (!goal) return;
+
+            const tags = goal.tags.filter((tag) => tag.id !== value.id);
+            await goalTagsUpdate(tags);
+
+            invalidate();
+        },
+        [goal, invalidate, goalTagsUpdate],
+    );
+
     const onGoalAssigneeChange = useCallback(
         async (activity?: NonNullable<ActivityByIdReturnType>) => {
             if (!activity?.user?.activityId) return;
@@ -500,7 +512,10 @@ export const GoalPage = ({ user, ssrTime, params: { id } }: ExternalPageProps<{
                         <>
                             <IssueMeta title={tr('Tags')}>
                                 {goal.tags?.map((tag) => (
-                                    <Tag key={tag.id}>{tag.title}</Tag>
+                                    <Tag key={tag.id}>
+                                        <TagCleanButton onClick={onGoalTagRemove(tag)} />
+                                        {tag.title}
+                                    </Tag>
                                 ))}
                             </IssueMeta>
                             {nullable(goal._isEditable, () => (