Added contact info and "add items" to donation

frontend/src/components/donor/donation/Donation.tsx

@@ -106,12 +106,13 @@ function Donation(): React.ReactNode {
     (state: RootState) => state.donation.dimensions,
   );
   const storedPhotos = useSelector((state: RootState) => state.donation.photos);
-  const [itemDescription, setItemDescription] = useState(storedDesc);
-  const [itemDimensions, setItemDimensions] = useState(storedDims);
+  const [itemDescription, setItemDescription] = useState<string[]>([]);
+  const [itemDimensions, setItemDimensions] = useState<string[]>([]);
   const [photos, setPhotos] = useState(storedPhotos);
   const [descError, setDescError] = useState("");
   const [dimError, setDimError] = useState("");
-
+  const [labels, setLabels] = useState<string[]>([""]);
+  const [labelError, setLabelsError] = useState("");
   const router = useRouter();
   const dispatch = useDispatch();
 
@@ -134,17 +135,11 @@ function Donation(): React.ReactNode {
   };
 
   const validInput = () => {
-    let valid = true;
+    const valid = true;
     setDescError("");
     setDimError("");
-    if (!itemDescription?.match(/\S/)) {
-      setDescError("Please enter an item description");
-      valid = false;
-    }
-    if (!itemDimensions?.match(/\S/)) {
-      setDimError("Please enter item dimensions");
-      valid = false;
-    }
+    setLabelsError("");
+
     return valid;
   };
 
@@ -154,64 +149,77 @@ function Donation(): React.ReactNode {
     dispatch(updatePhotos(photos));
   };
 
+  const [items, setItems] = useState([
+    { name: "", description: "", dimensions: "" },
+  ]);
+  const addNewItem = () => {
+    setItems([...items, { name: "", description: "", dimensions: "" }]);
+  };
+
   const dropzoneProps = {
     photos,
     setPhotos,
   };
 
+  const handleAddLabel = () => {
+    setLabels([...labels, ""]);
+  };
+
+  const handleDescriptionChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    const updatedDescription = [...itemDescription];
+    updatedDescription[index] = event.target.value;
+    setItemDescription(updatedDescription);
+  };
+  const handleDimensionChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    const updatedDimensions = [...itemDimensions];
+    updatedDimensions[index] = event.target.value;
+    setItemDimensions(updatedDimensions);
+  };
+
   return (
     <>
       <DonatorNavbar />
       <ContentContainer>
         <DonationHeader>Make a donation</DonationHeader>
         <ProgressBar activeStep={1} />
         <ItemHeader>Item Information</ItemHeader>
-        <InputSectionContainer>
-          <InputContainer>
-            <SubHeader>Item Description/Name</SubHeader>
-            <StyledInput
-              type="text"
-              value={itemDescription}
-              onChange={(event) => {
-                setItemDescription(event.target.value);
-              }}
-            />
-            <div className="inputError">{descError}</div>
-          </InputContainer>
-          <InputContainer>
-            <SubHeader>Item Dimensions</SubHeader>
-            <StyledInput
-              type="text"
-              value={itemDimensions}
-              onChange={(event) => {
-                setItemDimensions(event.target.value);
-              }}
-            />
-            <div className="inputError">{dimError}</div>
-          </InputContainer>
-        </InputSectionContainer>
+        {labels.map((label, index) => (
+          <InputSectionContainer key={index}>
+            <InputContainer>
+              <SubHeader>Item Description/Name</SubHeader>
+              <StyledInput
+                type="text"
+                value={itemDescription[index]}
+                onChange={(event) => handleDescriptionChange(event, index)}
+              />
+              <div className="inputError">{descError}</div>
+            </InputContainer>
+            <InputContainer>
+              <SubHeader>Item Dimensions</SubHeader>
+              <StyledInput
+                type="text"
+                value={itemDimensions[index]}
+                onChange={(event) => handleDimensionChange(event, index)}
+              />
+              <div className="inputError">{dimError}</div>
+            </InputContainer>
+          </InputSectionContainer>
+        ))}
+        <button type="button" onClick={handleAddLabel}>
+          Add Another Item
+        </button>
         <UploadContainer>
           <SubHeader>Item Photos</SubHeader>
           <Dropzone {...dropzoneProps} />
         </UploadContainer>
-        <div
-          id="donPickupButtons"
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "space-between",
-            marginBottom: "30px",
-            marginTop: "30px",
-          }}
-        >
-          <button
-            type="button"
-            value="backButton"
-            className="donPickupButton backButton"
-            onClick={backButtonNavigation}
-          >
-            Back
-          </button>
+
+        <div id="donPickupButtons">
           <button
             type="button"
             value="nextButton"

frontend/src/redux/donationSlice.ts

@@ -24,12 +24,12 @@ const initialState: DonationState = {
   dimensions: "",
   photos: [],
   address: "",
+  donorID: "",
   city: "",
   state: "",
   zipCode: 0,
   dropoff: true,
   pickupTimes: [],
-  donorID: "",
 };
 
 // state.donation.name
@@ -52,6 +52,9 @@ export const donationSlice = createSlice({
     updateCity: (state, action) => {
       state.city = action.payload;
     },
+    updateDonorID: (state, action) => {
+      state.donorID = action.payload;
+    },
     updateState: (state, action) => {
       state.state = action.payload;
     },
@@ -64,9 +67,6 @@ export const donationSlice = createSlice({
     updatePickupTimes: (state, action) => {
       state.pickupTimes = action.payload;
     },
-    updateDonorID: (state, action) => {
-      state.donorID = action.payload;
-    },
     clearAll: () => {
       storage.removeItem("persist:donation");
       return initialState;