From 54646ba61f9e5148ae724fa776d4081f7d686269 Mon Sep 17 00:00:00 2001 From: SurabhiKeesara Date: Wed, 8 Nov 2023 19:26:34 -0500 Subject: [PATCH 1/3] Add Delete Button Component --- src/components/careEntry/index.tsx | 4 +- src/components/treePage/siteImageCarousel.tsx | 60 +++++++++++++++++-- 2 files changed, 56 insertions(+), 8 deletions(-) diff --git a/src/components/careEntry/index.tsx b/src/components/careEntry/index.tsx index 44909a93..910e28b0 100644 --- a/src/components/careEntry/index.tsx +++ b/src/components/careEntry/index.tsx @@ -47,7 +47,7 @@ const EntryMessage = styled(Typography.Paragraph)` color: ${TEXT_GREY}; `; -const DeleteActivityButton = styled(LinkButton)` +export const DeleteActivityButton = styled(LinkButton)` color: ${WHITE}; margin: 10px; padding: 0px 10px; @@ -60,7 +60,7 @@ const DeleteActivityButton = styled(LinkButton)` } `; -const ConfirmDelete = styled(Button)` +export const ConfirmDelete = styled(Button)` margin: 10px; padding-left: 10px; diff --git a/src/components/treePage/siteImageCarousel.tsx b/src/components/treePage/siteImageCarousel.tsx index a86964e8..6174bd95 100644 --- a/src/components/treePage/siteImageCarousel.tsx +++ b/src/components/treePage/siteImageCarousel.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Carousel } from 'antd'; +import {Button, Carousel, message, Modal, Space} from 'antd'; import LeftOutlined from '@ant-design/icons/lib/icons/LeftOutlined'; import RightOutlined from '@ant-design/icons/lib/icons/RightOutlined'; import { useSelector } from 'react-redux'; @@ -10,6 +10,13 @@ import { getLatestEntrySiteImages } from '../../containers/treePage/ducks/select import { C4CState } from '../../store'; import { n } from '../../utils/stringFormat'; import { site } from '../../constants'; +import { ConfirmDelete } from '../careEntry'; +// import { DeleteOutlined } from '@ant-design/icons'; +// import {GreenButton, StyledClose} from '../themedComponents'; +import { LinkButton } from '../linkButton'; +import { LIGHT_GREY, LIGHT_RED, WHITE } from '../../utils/colors'; +import protectedApiClient from "../../api/protectedApiClient"; +import {getSiteData} from "../../containers/treePage/ducks/thunks"; const CarouselContainer = styled.div` margin-top: 20px; @@ -50,9 +57,28 @@ const FooterContainer = styled.div` margin-top: 10px; `; +export const DeleteSiteImageButton = styled(LinkButton)` + color: ${LIGHT_RED}; + margin: 10px; + padding: 0px 10px; + border: none; + background-color: ${LIGHT_GREY}; + + & :hover { + color: ${LIGHT_GREY}; + background-color: ${LIGHT_RED}; + } +`; + +function onClickDeleteImage() { + protectedApiClient.delete +} + export const SiteImageCarousel: React.FC = () => { const { t } = useTranslation(n(site, 'treePage'), { nsMode: 'fallback' }); + const [showDeleteForm, setShowDeleteForm] = useState(false); + const latestEntrySiteImages = useSelector((state: C4CState) => { return getLatestEntrySiteImages(state.siteState.siteData); }); @@ -78,7 +104,6 @@ export const SiteImageCarousel: React.FC = () => { ))} -
{t('site_image.uploaded_by', { @@ -87,13 +112,36 @@ export const SiteImageCarousel: React.FC = () => { 'Anonymous', })}
-
- {latestEntrySiteImages[currSlideIndex].uploadedAt || - t('site_image.no_upload_date')} -
+ +
+ {latestEntrySiteImages[currSlideIndex].uploadedAt || + t('site_image.no_upload_date')} + {/**/} +
+
+ setShowDeleteForm(!showDeleteForm)} + > + Delete + {/**/} + +
+ )} + setShowDeleteForm(false)} + onCancel={() => setShowDeleteForm(false)} + footer={null} + // closeIcon={} + > +

Are you sure you want to delete this image?

+ Delete + ); }; From 86fddd637144f2c7808ff2f7e598c8c22fa4119c Mon Sep 17 00:00:00 2001 From: nalinikantheti Date: Wed, 8 Nov 2023 19:55:33 -0500 Subject: [PATCH 2/3] implemented delete modal button functionality --- src/api/protectedApiClient.ts | 12 +++++++ src/components/treePage/siteImageCarousel.tsx | 33 +++++++++++-------- 2 files changed, 31 insertions(+), 14 deletions(-) diff --git a/src/api/protectedApiClient.ts b/src/api/protectedApiClient.ts index e9410fb6..0fec67a3 100644 --- a/src/api/protectedApiClient.ts +++ b/src/api/protectedApiClient.ts @@ -127,6 +127,9 @@ export interface ProtectedApiClient { ) => Promise; readonly addSites: (request: AddSitesRequest) => Promise; readonly sendEmail: (request: SendEmailRequest) => Promise; + readonly deleteImage: ( + imageId: number, + ) => Promise; readonly filterSites: ( params: FilterSitesParams, ) => Promise; @@ -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 => { ); }; +const deleteImage = (imageId: number): Promise => { + return AppAxiosInstance.delete( + ParameterizedApiRoutes.DELETE_IMAGE(imageId), + ).then((res) => res.data); +}; + const filterSites = ( params: FilterSitesParams, ): Promise => { @@ -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 index 6174bd95..1ad28a29 100644 --- 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 = () => { + setShowDeleteForm(false)} + onCancel={() => setShowDeleteForm(false)} + footer={null} + // closeIcon={} + > +

Are you sure you want to delete this image?

+ onClickDeleteImage(latestEntrySiteImages[currSlideIndex].imageId)}>Delete + )} - setShowDeleteForm(false)} - onCancel={() => setShowDeleteForm(false)} - footer={null} - // closeIcon={} - > -

Are you sure you want to delete this image?

- Delete - ); }; From d3b407cd22e7287f19c8fc3af06ec749dd0f6755 Mon Sep 17 00:00:00 2001 From: SurabhiKeesara Date: Wed, 8 Nov 2023 20:02:20 -0500 Subject: [PATCH 3/3] Fix Formatting --- src/api/protectedApiClient.ts | 6 ++---- src/components/treePage/siteImageCarousel.tsx | 16 ++++++++++------ 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/api/protectedApiClient.ts b/src/api/protectedApiClient.ts index 0fec67a3..71339a01 100644 --- a/src/api/protectedApiClient.ts +++ b/src/api/protectedApiClient.ts @@ -127,9 +127,7 @@ export interface ProtectedApiClient { ) => Promise; readonly addSites: (request: AddSitesRequest) => Promise; readonly sendEmail: (request: SendEmailRequest) => Promise; - readonly deleteImage: ( - imageId: number, - ) => Promise; + readonly deleteImage: (imageId: number) => Promise; readonly filterSites: ( params: FilterSitesParams, ) => Promise; @@ -201,7 +199,7 @@ export const ParameterizedApiRoutes = { NAME_SITE_ENTRY: (siteId: number): string => `${baseSiteRoute}${siteId}/name_entry`, DELETE_IMAGE: (imageId: number): string => - `${baseSiteRoute}site_image/${imageId}`, + `${baseSiteRoute}site_image/${imageId}`, }; export const ParameterizedAdminApiRoutes = { diff --git a/src/components/treePage/siteImageCarousel.tsx b/src/components/treePage/siteImageCarousel.tsx index 1ad28a29..f0957a76 100644 --- a/src/components/treePage/siteImageCarousel.tsx +++ b/src/components/treePage/siteImageCarousel.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import {Button, Carousel, message, Modal, Space} from 'antd'; +import { Button, Carousel, message, Modal, Space } from 'antd'; import LeftOutlined from '@ant-design/icons/lib/icons/LeftOutlined'; import RightOutlined from '@ant-design/icons/lib/icons/RightOutlined'; import { useSelector } from 'react-redux'; @@ -15,8 +15,7 @@ import { ConfirmDelete } from '../careEntry'; // import {GreenButton, StyledClose} from '../themedComponents'; import { LinkButton } from '../linkButton'; import { LIGHT_GREY, LIGHT_RED, WHITE } from '../../utils/colors'; -import protectedApiClient from "../../api/protectedApiClient"; -import {getSiteData} from "../../containers/treePage/ducks/thunks"; +import protectedApiClient from '../../api/protectedApiClient'; const CarouselContainer = styled.div` margin-top: 20px; @@ -70,8 +69,6 @@ export const DeleteSiteImageButton = styled(LinkButton)` } `; - - export const SiteImageCarousel: React.FC = () => { const { t } = useTranslation(n(site, 'treePage'), { nsMode: 'fallback' }); @@ -143,7 +140,14 @@ export const SiteImageCarousel: React.FC = () => { >

Are you sure you want to delete this image?

onClickDeleteImage(latestEntrySiteImages[currSlideIndex].imageId)}>Delete + onClick={() => + onClickDeleteImage( + latestEntrySiteImages[currSlideIndex].imageId, + ) + } + > + Delete + )}