Add image upload to camp creation (#224)

* Add image upload to camp creation

* aspect ratio fixes

* Add error handling so that when a user tries to click next, errors are shown (if any).

Co-authored-by: twilkhoo <tejaswilkhoo@hotmail.com>

Author: e-wai

frontend/src/APIClients/CampsAPIClient.ts

@@ -36,6 +36,7 @@ const getCampById = async (id: string): Promise<CampResponse> => {
 
 const createNewCamp = async (
   camp: CreateUpdateCampRequest,
+  fileURL?: string,
 ): Promise<CreateUpdateCampResponse> => {
   // Check if atleast the first step and 1 session is scheduled
   if (!isMinCampDetailsFilled(camp)) {
@@ -47,6 +48,11 @@ const createNewCamp = async (
   const formData = new FormData();
   formData.append("data", JSON.stringify(camp));
 
+  if (fileURL) {
+    const file = await fetch(fileURL).then((res) => res.blob());
+    formData.append("file", file);
+  }
+
   const { data } = await baseAPIClient.post("/camp", formData, {
     headers: { Authorization: getBearerToken() },
   });
@@ -56,6 +62,7 @@ const createNewCamp = async (
 const editCampById = async (
   id: string,
   camp: CreateUpdateCampRequest,
+  fileURL?: string,
 ): Promise<CreateUpdateCampResponse> => {
   // Check if atleast the first step and 1 session is scheduled
   if (!isMinCampDetailsFilled(camp)) {
@@ -66,6 +73,12 @@ const editCampById = async (
 
   const formData = new FormData();
   formData.append("data", JSON.stringify({ ...camp }));
+
+  if (fileURL) {
+    const file = await fetch(fileURL).then((res) => res.blob());
+    formData.append("file", file);
+  }
+
   const { data } = await baseAPIClient.patch(`/camp/${id}`, formData, {
     headers: {
       Authorization: getBearerToken(),

frontend/src/components/pages/CampCreation/CampCreationFooter.tsx

@@ -11,6 +11,7 @@ export type CampCreationFooterProps = {
     isPublishedCamp: boolean,
     isNewCamp: boolean,
   ) => Promise<void>;
+  setShowCreationErrors: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 const CampCreationFooter = ({
@@ -19,6 +20,7 @@ const CampCreationFooter = ({
   handleStepNavigation,
   createUpdateCamp,
   isEditingCamp,
+  setShowCreationErrors,
 }: CampCreationFooterProps): React.ReactElement => {
   const [isAwaitingReq, setIsAwaitingReq] = React.useState(false);
 
@@ -30,6 +32,10 @@ const CampCreationFooter = ({
   };
 
   const onNextStep = async () => {
+    if (!isCurrentStepCompleted) {
+      setShowCreationErrors(true);
+      return;
+    }
     handleStepNavigation(1);
 
     if (currentStep === CampCreationPages.RegistrationFormPage) {
@@ -79,7 +85,12 @@ const CampCreationFooter = ({
         height="48px"
         variant="primary"
         onClick={onNextStep}
-        disabled={!isCurrentStepCompleted}
+        background={
+          isCurrentStepCompleted
+            ? "primary.green.100"
+            : "primary.green_disabled.100"
+        }
+        _hover={{ cursor: isCurrentStepCompleted ? "pointer" : "not-allowed" }}
         isLoading={
           isAwaitingReq &&
           currentStep === CampCreationPages.RegistrationFormPage

frontend/src/components/pages/CampCreation/CampDetails/index.tsx

@@ -11,6 +11,8 @@ import {
   Checkbox,
   Button,
   Image,
+  AspectRatio,
+  VStack,
 } from "@chakra-ui/react";
 import IconImage from "../../../../assets/icon_image.svg";
 import { MAX_CAMP_DESC_LENGTH } from "../../../../constants/CampManagementConstants";
@@ -56,6 +58,7 @@ type CampCreationDetailsProps = {
   handleProvince: (event: React.ChangeEvent<HTMLSelectElement>) => void;
   handlePostalCode: (event: React.ChangeEvent<HTMLInputElement>) => void;
   setCampImageURL: React.Dispatch<React.SetStateAction<string>>;
+  showErrors: boolean;
 };
 
 const CampCreationDetails = ({
@@ -95,8 +98,8 @@ const CampCreationDetails = ({
   handleProvince,
   handlePostalCode,
   setCampImageURL,
+  showErrors,
 }: CampCreationDetailsProps): React.ReactElement => {
-  const [showErrors, setShowErrors] = useState<boolean>(false);
   const [showImageError, setShowImageError] = useState<boolean>(false);
 
   const errorText = (input: boolean | string | number, message: string) => {
@@ -149,10 +152,8 @@ const CampCreationDetails = ({
   };
 
   return (
-    <Box paddingLeft="200px">
-      <Text textStyle="displayXLarge" marginTop="56px">
-        Camp Details
-      </Text>
+    <Box paddingLeft="200px" my="56px">
+      <Text textStyle="displayXLarge">Camp Details</Text>
       <Text textStyle="displayLarge" marginTop="32px">
         Overview
       </Text>
@@ -552,44 +553,43 @@ const CampCreationDetails = ({
         style={{ display: "none" }}
         accept="image/*"
       />
-      <Box
-        marginTop="32px"
-        bg="background.grey.200"
-        width="528px"
-        height="325px"
-        border="3px"
-        borderStyle="dashed"
-        borderColor="gray.200"
-        onDragOver={handleOnDragOver}
-        onDrop={handleOnDrop}
-        _hover={{
-          borderColor: "gray.400",
-        }}
-        onClick={handleCampImageClick}
-        cursor="pointer"
-      >
-        {!campImageURL ? (
-          <>
+      <AspectRatio marginTop="32px" width="528px" ratio={16 / 9}>
+        <Box
+          bg="background.grey.200"
+          border="3px"
+          borderStyle="dashed"
+          borderColor="gray.200"
+          onDragOver={handleOnDragOver}
+          onDrop={handleOnDrop}
+          _hover={{
+            borderColor: "gray.400",
+          }}
+          onClick={handleCampImageClick}
+          cursor="pointer"
+        >
+          {!campImageURL ? (
+            <VStack spacing={4} justify="center">
+              <Image src={IconImage} alt="File upload icon" width="150px" />
+              <Text
+                textStyle="buttonSemiBold"
+                textAlign="center"
+                marginTop="30px"
+              >
+                Click or drag and drop to add an image
+                <br />
+                Max File Size: 5 MB{" "}
+              </Text>
+            </VStack>
+          ) : (
             <Image
-              margin="35px auto 0 auto"
-              src={IconImage}
-              alt="File upload icon"
-              width="190px"
+              src={campImageURL}
+              alt="Selected camp image"
+              objectFit="scale-down"
             />
-            <Text
-              textStyle="buttonSemiBold"
-              textAlign="center"
-              marginTop="30px"
-            >
-              Click or drag and drop to add an image
-              <br />
-              Max File Size: 5 MB{" "}
-            </Text>
-          </>
-        ) : (
-          <Image width="528px" height="319px" src={campImageURL} alt="camp" />
-        )}
-      </Box>
+          )}
+        </Box>
+      </AspectRatio>
+
       <Text
         textStyle="caption"
         color="red"
@@ -615,10 +615,6 @@ const CampCreationDetails = ({
       >
         Replace Image
       </Button>
-
-      <Box marginTop="20px">
-        <Button onClick={() => setShowErrors(true)}>Dummy Submit</Button>
-      </Box>
     </Box>
   );
 };

frontend/src/components/pages/CampCreation/index.tsx

@@ -51,6 +51,8 @@ const CampCreationPage = (): React.ReactElement => {
 
   const [visitedRegistrationPage, setVisitedRegistrationPage] = useState(false);
 
+  const [showCreationErrors, setShowCreationErrors] = useState<boolean>(false);
+
   // Variables to determine whether or not all required fields have been filled out.
   // NOTE: This will depend on what type of state a page requires, i.e. determining
   // if a checkbox is checked is different than determining if an input field is filled.
@@ -295,11 +297,15 @@ const CampCreationPage = (): React.ReactElement => {
       let campResponse: CreateUpdateCampResponse;
 
       if (isNewCamp) {
-        campResponse = await CampsAPIClient.createNewCamp(campFields);
+        campResponse = await CampsAPIClient.createNewCamp(
+          campFields,
+          campImageURL,
+        );
       } else {
         campResponse = await CampsAPIClient.editCampById(
           editCampId,
           campFields,
+          campImageURL,
         );
       }
 
@@ -416,6 +422,7 @@ const CampCreationPage = (): React.ReactElement => {
                 setPostalCode(event.target.value)
               }
               setCampImageURL={setCampImageURL}
+              showErrors={showCreationErrors}
             />
           </React.Fragment>
         );
@@ -471,6 +478,7 @@ const CampCreationPage = (): React.ReactElement => {
         handleStepNavigation={handleStepNavigation}
         createUpdateCamp={createUpdateCampHelper}
         isEditingCamp={editCampId !== undefined}
+        setShowCreationErrors={setShowCreationErrors}
       />
     </VStack>
   );

frontend/src/theme/colors.ts

@@ -5,6 +5,9 @@ const colors = {
       200: "#3A7035",
       600: "#146600",
     },
+    green_disabled: {
+      100: "#B5CFB3",
+    },
   },
   secondary: {
     critical: {