Add Delete

src/api/test/protectedApiClient.test.ts

@@ -1489,6 +1489,33 @@ describe('Protected API Client Tests', () => {
         expect(result).toEqual(response);
       });
     });
+
+    describe('deleteSiteImage', () => {
+      it('makes the right request', async () => {
+        const response = 'Image Deleted Correctly';
+
+        nock(BASE_URL)
+          .post(ParameterizedApiRoutes.DELETE_IMAGE(1))
+          .reply(200, response);
+
+        const result = await ProtectedApiClient.deleteImage(1);
+
+        expect(result).toEqual(response);
+      });
+      it('makes a bad request', async () => {
+        const response = 'Invalid Image ID';
+
+        nock(BASE_URL)
+          .post(ParameterizedApiRoutes.DELETE_IMAGE(-1))
+          .reply(400, response);
+
+        const result = await ProtectedApiClient.deleteImage(-1).catch(
+          (err) => err.response.data,
+        );
+
+        expect(result).toEqual(response);
+      });
+    });
   });
 
   describe('updateSite', () => {

src/components/careEntry/index.tsx

@@ -13,10 +13,7 @@ import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
 import { useDispatch, useSelector } from 'react-redux';
 import { isAdmin, getUserID } from '../../auth/ducks/selectors';
 import styled from 'styled-components';
-import {
-  EditButton,
-  StyledClose,
-} from '../themedComponents';
+import { EditButton, StyledClose } from '../themedComponents';
 import StewardshipForm from '../forms/stewardshipForm';
 import { LinkButton } from '../linkButton';
 import { useParams } from 'react-router-dom';
@@ -29,7 +26,7 @@ import { C4CState } from '../../store';
 import { useTranslation } from 'react-i18next';
 import { site } from '../../constants';
 import { n } from '../../utils/stringFormat';
-import ConfirmationModel from '../confirmationModal';
+import ConfirmationModal from '../confirmationModal';
 
 const Entry = styled.div`
   margin: 15px;
@@ -179,7 +176,7 @@ const CareEntry: React.FC<CareEntryProps> = ({ activity }) => {
           initialDate={treeCareToMoment(activity)}
         />
       </Modal>
-      <ConfirmationModel
+      <ConfirmationModal
         visible={showDeleteForm}
         onOk={() => setShowDeleteForm(false)}
         onCancel={() => setShowDeleteForm(false)}

src/components/confirmationModal/index.tsx

@@ -13,7 +13,7 @@ const ConfirmDeleteButton = styled(Button)`
   }
 `;
 
-interface ConfirmationModelProps {
+interface ConfirmationModalProps {
   visible: boolean;
   onOk: () => void;
   onCancel: () => void;
@@ -22,7 +22,7 @@ interface ConfirmationModelProps {
   onConfirm: () => void;
 }
 
-const ConfirmationModel: React.FC<ConfirmationModelProps> = ({
+const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   visible,
   onOk,
   onCancel,
@@ -47,4 +47,4 @@ const ConfirmationModel: React.FC<ConfirmationModelProps> = ({
   );
 };
 
-export default ConfirmationModel;
+export default ConfirmationModal;

src/components/treePage/siteImageCarousel.tsx

@@ -2,9 +2,14 @@ import React, { useState } from 'react';
 import { Carousel, message, Space } from 'antd';
 import LeftOutlined from '@ant-design/icons/lib/icons/LeftOutlined';
 import RightOutlined from '@ant-design/icons/lib/icons/RightOutlined';
+import { isAdmin, getUserID } from '../../auth/ducks/selectors';
 import { useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
+import { getSiteData } from '../../containers/treePage/ducks/thunks';
+import { TreeParams } from '../../containers/treePage';
+import { useParams } from 'react-router-dom';
 
 import { getLatestEntrySiteImages } from '../../containers/treePage/ducks/selectors';
 import { C4CState } from '../../store';
@@ -13,7 +18,7 @@ import { site } from '../../constants';
 import { LinkButton } from '../linkButton';
 import { LIGHT_GREY, LIGHT_RED, WHITE } from '../../utils/colors';
 import protectedApiClient from '../../api/protectedApiClient';
-import ConfirmationModel from '../confirmationModal';
+import ConfirmationModal from '../confirmationModal';
 
 const CarouselContainer = styled.div`
   margin-top: 20px;
@@ -69,6 +74,8 @@ export const DeleteSiteImageButton = styled(LinkButton)`
 
 export const SiteImageCarousel: React.FC = () => {
   const { t } = useTranslation(n(site, 'treePage'), { nsMode: 'fallback' });
+  const dispatch = useDispatch();
+  const id = Number(useParams<TreeParams>().id);
 
   const [showDeleteForm, setShowDeleteForm] = useState<boolean>(false);
 
@@ -81,12 +88,22 @@ 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);
-    });
+    protectedApiClient
+      .deleteImage(imageId)
+      .then((ok) => {
+        message.success('success');
+        setShowDeleteForm(false);
+      })
+      .finally(() => dispatch(getSiteData(id)));
   }
 
+  const userIsAdmin: boolean = useSelector((state: C4CState) =>
+    isAdmin(state.authenticationState.tokens),
+  );
+
+  const userId: number = useSelector((state: C4CState) =>
+    getUserID(state.authenticationState.tokens),
+  );
   return (
     <>
       {latestEntrySiteImages.length > 0 && (
@@ -118,16 +135,19 @@ export const SiteImageCarousel: React.FC = () => {
                   t('site_image.no_upload_date')}
               </div>
               <div>
-                <DeleteSiteImageButton
-                  type="primary"
-                  onClick={() => setShowDeleteForm(!showDeleteForm)}
-                >
-                  Delete
-                </DeleteSiteImageButton>
+                {(latestEntrySiteImages[currSlideIndex].uploaderId === userId ||
+                  userIsAdmin) && (
+                  <DeleteSiteImageButton
+                    type="primary"
+                    onClick={() => setShowDeleteForm(!showDeleteForm)}
+                  >
+                    Delete
+                  </DeleteSiteImageButton>
+                )}
               </div>
             </Space>
           </FooterContainer>
-          <ConfirmationModel
+          <ConfirmationModal
             visible={showDeleteForm}
             onOk={() => setShowDeleteForm(false)}
             onCancel={() => setShowDeleteForm(false)}

src/containers/treePage/ducks/types.ts

@@ -295,6 +295,7 @@ export interface SiteEntryImage {
   uploaderUsername: string;
   uploadedAt: string;
   imageUrl: string;
+  uploaderId: number;
 }
 
 export interface TreeBenefits {

src/containers/treePage/test/selectors.test.ts

@@ -124,12 +124,14 @@ describe('Tree Page Selectors', () => {
             imageUrl: 'http://www.some-address.com',
             uploadedAt: '09/06/2023',
             uploaderUsername: 'First Last',
+            uploaderId: 1,
           },
           {
             imageId: 2,
             imageUrl: 'http://www.some-other-address.com',
             uploadedAt: '01/01/2023',
             uploaderUsername: 'Hello World',
+            uploaderId: 2,
           },
         ],
       },
@@ -147,6 +149,7 @@ describe('Tree Page Selectors', () => {
             imageUrl: 'http://www.should-not-be-returned.com',
             uploadedAt: '01/01/2022',
             uploaderUsername: 'Code4Community',
+            uploaderId: 1,
           },
         ],
       },
@@ -281,12 +284,14 @@ describe('Tree Page Selectors', () => {
           imageUrl: 'http://www.some-address.com',
           uploadedAt: '09/06/2023',
           uploaderUsername: 'First Last',
+          uploaderId: 1,
         },
         {
           imageId: 2,
           imageUrl: 'http://www.some-other-address.com',
           uploadedAt: '01/01/2023',
           uploaderUsername: 'Hello World',
+          uploaderId: 2,
         },
       ];