Sk.cl.upload site image

src/api/protectedApiClient.ts

@@ -130,6 +130,10 @@ export interface ProtectedApiClient {
   readonly filterSites: (
     params: FilterSitesParams,
   ) => Promise<FilterSitesResponse>;
+  readonly uploadImage: (
+    siteEntryId: number,
+    imageFile: string | ArrayBuffer,
+  ) => Promise<void>;
 }
 
 export enum ProtectedApiClientRoutes {
@@ -197,6 +201,8 @@ export const ParameterizedApiRoutes = {
   UPDATE_SITE: (siteId: number): string => `${baseSiteRoute}${siteId}/update`,
   NAME_SITE_ENTRY: (siteId: number): string =>
     `${baseSiteRoute}${siteId}/name_entry`,
+  UPLOAD_IMAGE: (siteEntryId: number): string =>
+    `${baseSiteRoute}site_image/${siteEntryId}`,
 };
 
 export const ParameterizedAdminApiRoutes = {
@@ -564,6 +570,16 @@ const filterSites = (
   ).then((res) => res.data);
 };
 
+const uploadImage = (
+  siteEntryId: number,
+  imageFile: string | ArrayBuffer,
+): Promise<void> => {
+  return AppAxiosInstance.post(
+    ParameterizedApiRoutes.UPLOAD_IMAGE(siteEntryId),
+    { anonymous: false, image: imageFile },
+  ).then((res) => res.data);
+};
+
 const Client: ProtectedApiClient = Object.freeze({
   makeReservation,
   completeReservation,
@@ -612,6 +628,7 @@ const Client: ProtectedApiClient = Object.freeze({
   addSites,
   sendEmail,
   filterSites,
+  uploadImage,
 });
 
 export default Client;

src/api/test/protectedApiClient.test.ts

@@ -2186,4 +2186,61 @@ describe('Admin Protected Client Routes', () => {
       expect(result).toEqual(response);
     });
   });
+
+  describe('uploadImage', () => {
+    let imageToUpload: string | ArrayBuffer;
+
+    beforeEach(() => {
+      const reader = new FileReader();
+      const imageFile = new File(['image-data'], 'image.jpg', {
+        type: 'image/jpeg',
+      });
+      reader.addEventListener(
+        'loadend',
+        () => {
+          imageToUpload = reader.result ?? '';
+        },
+        false,
+      );
+      reader.readAsDataURL(imageFile);
+    });
+    it('makes the right request', async () => {
+      const response = 'Image uploaded successfully';
+      nock(BASE_URL)
+        .post(ParameterizedApiRoutes.UPLOAD_IMAGE(11934))
+        .reply(200, response);
+
+      const result = await ProtectedApiClient.uploadImage(11934, imageToUpload);
+
+      expect(result).toEqual(response);
+    });
+
+    it('makes a bad request', async () => {
+      const response = 'invalid site entry id';
+
+      nock(BASE_URL)
+        .post(ParameterizedApiRoutes.UPLOAD_IMAGE(-1))
+        .reply(400, response);
+
+      const result = await ProtectedApiClient.uploadImage(
+        -1,
+        imageToUpload,
+      ).catch((err) => err.response.data);
+
+      expect(result).toEqual(response);
+    });
+
+    it('invalid or incorrectly formatted image file', async () => {
+      const response = 'Invalid image format';
+
+      nock(BASE_URL)
+        .post(ParameterizedApiRoutes.UPLOAD_IMAGE(11934))
+        .reply(400, response);
+
+      const result = await ProtectedApiClient.uploadImage(
+        11934,
+        imageToUpload,
+      ).catch((err) => err.response.data);
+    });
+  });
 });

src/components/treePage/treeInfo.tsx

@@ -20,6 +20,7 @@ import { site } from '../../constants';
 import { n } from '../../utils/stringFormat';
 import { isSFTT } from '../../utils/isCheck';
 import { getCommonName } from '../../utils/treeFunctions';
+import UploadSiteImageButton from '../uploadSiteImageButton';
 
 const TreeHeader = styled.div`
   text-transform: capitalize;
@@ -163,6 +164,10 @@ export const TreeInfo: React.FC<TreeProps> = ({
             isAdopted={isAdopted}
           />
 
+          {userOwnsTree && treePresent && (
+            <TreePageUploadSiteImageButton siteData={siteData} />
+          )}
+
           {userOwnsTree && treePresent && (
             <StewardshipContainer>
               <Typography.Title level={3}>
@@ -235,3 +240,13 @@ const TreePageShareButton: React.FC<TreePageShareButtonProps> = ({
     />
   );
 };
+
+interface TreeUploadProps {
+  readonly siteData: SiteProps;
+}
+
+const TreePageUploadSiteImageButton: React.FC<TreeUploadProps> = ({
+  siteData,
+}) => {
+  return <UploadSiteImageButton siteEntryId={siteData.entries[0].id} />;
+};

src/components/uploadSiteImageButton/index.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Modal } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { site } from '../../constants';
+import { n } from '../../utils/stringFormat';
+import { GreenButton, StyledClose, SubmitButton } from '../themedComponents';
+import { InboxOutlined } from '@ant-design/icons';
+import { message, Upload } from 'antd';
+import { UploadProps } from 'antd/lib/upload/interface';
+import { LIGHT_GREEN, LIGHT_GREY } from '../../utils/colors';
+import protectedApiClient from '../../api/protectedApiClient';
+
+const { Dragger } = Upload;
+
+const StyledInboxOutline = styled(InboxOutlined)`
+  color: black;
+`;
+
+const ConfirmUpload = styled(SubmitButton)`
+  margin: 10px;
+  padding-left: 10px;
+
+  & :hover {
+    background-color: ${LIGHT_GREY};
+  }
+`;
+
+interface UploadImageProps {
+  readonly siteEntryId: number;
+}
+
+const UploadSiteImageButton: React.FC<UploadImageProps> = ({ siteEntryId }) => {
+  const { t } = useTranslation(n(site, ['treeInfo']), {
+    nsMode: 'fallback',
+  });
+  const [showMenu, setShowMenu] = useState(false);
+  let imageToUpload: string | ArrayBuffer | null;
+
+  const props: UploadProps = {
+    name: 'file',
+    multiple: false,
+    beforeUpload: async (file) => {
+      const reader = new FileReader();
+      reader.addEventListener(
+        'loadend',
+        () => {
+          imageToUpload = reader.result;
+        },
+        false,
+      );
+      reader.readAsDataURL(file);
+      return false;
+    },
+    onChange(info) {
+      const { status } = info.file;
+      if (status === 'done') {
+        message.success(`${info.file.name} file selected successfully.`);
+      } else if (status === 'error') {
+        message.error(`${info.file.name} file upload failed.`);
+      }
+    },
+  };
+
+  function onClickUploadSiteImage() {
+    if (imageToUpload) {
+      protectedApiClient.uploadImage(siteEntryId, imageToUpload).then(() => {
+        message.success('Sent!');
+        setShowMenu(!showMenu);
+      });
+    }
+  }
+
+  return (
+    <>
+      <GreenButton
+        type="text"
+        onClick={() => {
+          setShowMenu(!showMenu);
+        }}
+      >
+        Upload Tree Images
+      </GreenButton>
+      <Modal
+        title={t('uploadSiteImage.upload_title')} // pass on as input
+        visible={showMenu}
+        footer={null}
+        onCancel={() => setShowMenu(false)}
+        closeIcon={<StyledClose />}
+      >
+        <Dragger {...props}>
+          <p className="ant-upload-drag-icon">
+            <StyledInboxOutline style={{ color: LIGHT_GREEN }} />
+          </p>
+          <p className="ant-upload-text">
+            {t('uploadSiteImage.upload_drag_header')}
+          </p>
+          <p className="ant-upload-hint">
+            {t('uploadSiteImage.upload_drag_description')}
+          </p>
+        </Dragger>
+        <ConfirmUpload onClick={onClickUploadSiteImage}>
+          {t('uploadSiteImage.upload_button_message')}
+        </ConfirmUpload>
+      </Modal>
+    </>
+  );
+};
+
+export default UploadSiteImageButton;

src/i18n/en/treePage/treeInfo.json

@@ -15,6 +15,12 @@
     "adopt": "Adopt",
     "force_unadopt": "Force Unadopt"
   },
+  "uploadSiteImage": {
+    "upload_title": "Upload an Image of this Site",
+    "upload_drag_header": "Click or drag file to this area to upload",
+    "upload_drag_description": "Upload an image of your adopted tree!",
+    "upload_button_message": "Upload"
+  },
   "log_in": "Log in to adopt this tree!",
   "name_prompt": "Name this tree!"
 }