implemented delete modal button functionality

Code-4-Community · Nov 9, 2023 · 86fddd6 · 86fddd6
1 parent 54646ba
commit 86fddd6
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 14 deletions.
diff --git a/src/api/protectedApiClient.ts b/src/api/protectedApiClient.ts
@@ -127,6 +127,9 @@ export interface ProtectedApiClient {
   ) => Promise<void>;
   readonly addSites: (request: AddSitesRequest) => Promise<void>;
   readonly sendEmail: (request: SendEmailRequest) => Promise<void>;
+  readonly deleteImage: (
+      imageId: number,
+  ) => Promise<void>;
   readonly filterSites: (
     params: FilterSitesParams,
   ) => Promise<FilterSitesResponse>;
@@ -197,6 +200,8 @@ export const ParameterizedApiRoutes = {
   UPDATE_SITE: (siteId: number): string => `${baseSiteRoute}${siteId}/update`,
   NAME_SITE_ENTRY: (siteId: number): string =>
     `${baseSiteRoute}${siteId}/name_entry`,
+  DELETE_IMAGE: (imageId: number): string =>
+      `${baseSiteRoute}site_image/${imageId}`,
 };
 
 export const ParameterizedAdminApiRoutes = {
@@ -556,6 +561,12 @@ const sendEmail = (request: SendEmailRequest): Promise<void> => {
   );
 };
 
+const deleteImage = (imageId: number): Promise<void> => {
+  return AppAxiosInstance.delete(
+    ParameterizedApiRoutes.DELETE_IMAGE(imageId),
+  ).then((res) => res.data);
+};
+
 const filterSites = (
   params: FilterSitesParams,
 ): Promise<FilterSitesResponse> => {
@@ -611,6 +622,7 @@ const Client: ProtectedApiClient = Object.freeze({
   nameSiteEntry,
   addSites,
   sendEmail,
+  deleteImage,
   filterSites,
 });
 

diff --git a/src/components/treePage/siteImageCarousel.tsx b/src/components/treePage/siteImageCarousel.tsx
@@ -70,9 +70,7 @@ export const DeleteSiteImageButton = styled(LinkButton)`
   }
 `;
 
-function onClickDeleteImage() {
-  protectedApiClient.delete
-}
+
 
 export const SiteImageCarousel: React.FC = () => {
   const { t } = useTranslation(n(site, 'treePage'), { nsMode: 'fallback' });
@@ -87,6 +85,12 @@ export const SiteImageCarousel: React.FC = () => {
 
   const onAfterChange = (currentSlide: number) =>
     setCurrSlideIndex(currentSlide);
+  function onClickDeleteImage(imageId: number) {
+    protectedApiClient.deleteImage(imageId).then((ok) => {
+      message.success('success');
+      setShowDeleteForm(false);
+    });
+  }
 
   return (
     <>
@@ -129,19 +133,20 @@ export const SiteImageCarousel: React.FC = () => {
               </div>
             </Space>
           </FooterContainer>
+          <Modal
+            title="Delete Site Image"
+            visible={showDeleteForm}
+            onOk={() => setShowDeleteForm(false)}
+            onCancel={() => setShowDeleteForm(false)}
+            footer={null}
+            // closeIcon={<StyledClose />}
+          >
+            <p>Are you sure you want to delete this image?</p>
+            <ConfirmDelete
+                onClick={() => onClickDeleteImage(latestEntrySiteImages[currSlideIndex].imageId)}>Delete</ConfirmDelete>
+          </Modal>
         </CarouselContainer>
       )}
-      <Modal
-        title="Delete Site Image"
-        visible={showDeleteForm}
-        onOk={() => setShowDeleteForm(false)}
-        onCancel={() => setShowDeleteForm(false)}
-        footer={null}
-        // closeIcon={<StyledClose />}
-      >
-        <p>Are you sure you want to delete this image?</p>
-        <ConfirmDelete onClick={onClickDeleteImage}>Delete</ConfirmDelete>
-      </Modal>
     </>
   );
 };