Merge pull request #843 from AppQuality/add-delete-comment-media-action

feat: added delete action to comment medias

Author: iacopolea

src/common/schema.ts

@@ -306,6 +306,15 @@ export interface paths {
       };
     };
   };
+  '/media-comment/{mcid}': {
+    /** Delete a media-comment */
+    delete: operations['delete-media-comment-mcid'];
+    parameters: {
+      path: {
+        mcid: string;
+      };
+    };
+  };
   '/projects': {
     post: operations['post-projects'];
   };
@@ -640,7 +649,7 @@ export interface components {
       /**
        * @description -1: no bug form;
        * 0: only bug form;
-       * 1: bug form with bug parade';
+       * 1: bug form with bug parade;
        */
       bug_form?: number;
       type: {
@@ -2222,7 +2231,7 @@ export interface operations {
         };
       };
     };
-    /** If there's a group, post new tag into that group; otherwise, create the group and add tag into the new group. */
+    /** If there is a group, post new tag into that group; otherwise, create the group and add tag into the new group. */
     requestBody: {
       content: {
         'application/json': {
@@ -2381,6 +2390,26 @@ export interface operations {
       302: never;
     };
   };
+  /** Delete a media-comment */
+  'delete-media-comment-mcid': {
+    parameters: {
+      path: {
+        mcid: string;
+      };
+    };
+    responses: {
+      /** OK */
+      200: {
+        content: {
+          'application/json': { [key: string]: unknown };
+        };
+      };
+      /** Unauthorized */
+      401: unknown;
+      /** Not Found */
+      404: unknown;
+    };
+  };
   'post-projects': {
     responses: {
       /** OK */

src/features/api/index.ts

@@ -374,6 +374,15 @@ const injectedRtkApi = api.injectEndpoints({
     getMediaById: build.query<GetMediaByIdApiResponse, GetMediaByIdApiArg>({
       query: (queryArg) => ({ url: `/media/${queryArg.id}` }),
     }),
+    deleteMediaCommentByMcid: build.mutation<
+      DeleteMediaCommentByMcidApiResponse,
+      DeleteMediaCommentByMcidApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/media-comment/${queryArg.mcid}`,
+        method: 'DELETE',
+      }),
+    }),
     postProjects: build.mutation<PostProjectsApiResponse, PostProjectsApiArg>({
       query: (queryArg) => ({
         url: `/projects`,
@@ -1149,7 +1158,7 @@ export type PostCampaignsByCidVideoTagsApiResponse =
   /** status 200 OK */ VideoTag;
 export type PostCampaignsByCidVideoTagsApiArg = {
   cid: string;
-  /** If there's a group, post new tag into that group; otherwise, create the group and add tag into the new group. */
+  /** If there is a group, post new tag into that group; otherwise, create the group and add tag into the new group. */
   body: {
     group: {
       name: string;
@@ -1230,6 +1239,10 @@ export type GetMediaByIdApiResponse = unknown;
 export type GetMediaByIdApiArg = {
   id: string;
 };
+export type DeleteMediaCommentByMcidApiResponse = /** status 200 OK */ object;
+export type DeleteMediaCommentByMcidApiArg = {
+  mcid: string;
+};
 export type PostProjectsApiResponse = /** status 200 OK */ Project;
 export type PostProjectsApiArg = {
   body: {
@@ -1571,7 +1584,7 @@ export type Campaign = {
   is_public: number;
   /** -1: no bug form;
     0: only bug form;
-    1: bug form with bug parade'; */
+    1: bug form with bug parade; */
   bug_form?: number;
   type: {
     id: number;
@@ -2054,6 +2067,7 @@ export const {
   useDeleteInsightsByIidMutation,
   usePatchInsightsByIidMutation,
   useGetMediaByIdQuery,
+  useDeleteMediaCommentByMcidMutation,
   usePostProjectsMutation,
   useGetProjectsByPidQuery,
   usePatchProjectsByPidMutation,

src/pages/Bug/Actions.tsx

@@ -1,4 +1,10 @@
-import { ChatProvider, LG, Skeleton } from '@appquality/unguess-design-system';
+import {
+  ChatProvider,
+  LG,
+  Skeleton,
+  useToast,
+  Notification,
+} from '@appquality/unguess-design-system';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
@@ -12,6 +18,7 @@ import {
   useGetCampaignsByCidBugsAndBidQuery,
   usePostCampaignsByCidBugsAndBidCommentsMutation,
   usePostCampaignsByCidBugsAndBidMediaMutation,
+  useDeleteMediaCommentByMcidMutation,
 } from 'src/features/api';
 import { styled } from 'styled-components';
 import { Data } from '@appquality/unguess-design-system/build/stories/chat/context/chatContext';
@@ -88,6 +95,10 @@ export const Actions = () => {
 
   const [uploadMedia] = usePostCampaignsByCidBugsAndBidMediaMutation();
 
+  const [deleteMediaComment] = useDeleteMediaCommentByMcidMutation();
+
+  const { addToast } = useToast();
+
   interface MyFormData extends FormData {
     media: string | string[];
   }
@@ -129,6 +140,28 @@ export const Actions = () => {
 
   // return data;
 
+  const handleDeleteMediaComment = (mcid: string) => {
+    deleteMediaComment({ mcid })
+      .unwrap()
+      .then(() => {
+        refetch();
+      })
+      .catch((e) => {
+        addToast(
+          ({ close }) => (
+            <Notification
+              onClose={close}
+              type="error"
+              message={e.message ? e.message : 'Error while deleting media'}
+              closeText="X"
+              isPrimary
+            />
+          ),
+          { placement: 'top' }
+        );
+      });
+  };
+
   const createCommentHandler = useCallback(
     (editor, mentions) => {
       if (editor) {
@@ -189,6 +222,11 @@ export const Actions = () => {
           setMediaIds((prev) =>
             prev.filter((media) => media.internal_id !== internalId)
           );
+          const mediaToDelete = mediaIds.find(
+            (media) => media.internal_id === internalId
+          );
+          if (mediaToDelete)
+            handleDeleteMediaComment(mediaToDelete.id.toString());
         }}
       >
         <Divider style={{ margin: `${appTheme.space.md} auto` }} />