Skip to content

Commit

Permalink
Finish restructure
Browse files Browse the repository at this point in the history
  • Loading branch information
@ColinToft
ColinToft committed Aug 1, 2023
1 parent 3c64c5b commit 8c99c00
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 35 deletions.
82 changes: 71 additions & 11 deletions frontend/src/components/asp/requests/CreateMealRequest.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,43 @@ import {
Text,
useBreakpointValue,
} from "@chakra-ui/react";
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";

import SchedulingForm from "./SchedulingForm";
import SchedulingFormWeekly from "./SchedulingFormWeekly";
import TitleSection from "./TitleSection";

const CreateMealRequest = (): React.ReactElement => {
const fontSize = useBreakpointValue({ base: "12px", sm: "16px", md: "20px" });

const [tabIndex, setTabIndex] = useState(0);
const [completedTab, setCompletedTab] = useState(-1); // The highest tab index that has been completed

// Part 1: Scheduling
const [isWeeklyInput, setIsWeeklyInput] = useState(true); // Are we in weekly input mode (false means we are in calendar mode)
const [donationFrequency, setDonationFrequency] = useState("");
const [startDate, setStartDate] = useState("");
const [endDate, setEndDate] = useState("");
const [scheduledDropOffTime, setScheduledDropOffTime] = useState("");

// Button state (array of booleans)
const [weekdayButtonStates, setWeekdayButtonStates] = useState(
Array(7).fill(false),
);

const handleNext = () => {
const thisTab = tabIndex;
setTabIndex((prevIndex) => prevIndex + 1);
setCompletedTab((prevIndex) => Math.max(prevIndex, thisTab));

// TODO: once the last tab is reached, submit the form
// Below is a way to get a list of days, i.e. the indexes of the true values in the boolean array
const selectedDays = weekdayButtonStates
.map((state, i) => (state ? i : -1))
.filter((day) => day !== -1);

console.log(selectedDays);

Check warning on line 47 in frontend/src/components/asp/requests/CreateMealRequest.tsx

View workflow job for this annotation

GitHub Actions / run-lint 

Unexpected console statement
};

const alertUser = (e: {
returnValue: string;
preventDefault: () => void;
Expand Down Expand Up @@ -46,46 +75,60 @@ const CreateMealRequest = (): React.ReactElement => {
align="center"
overflowX="auto"
overflowY="hidden"
index={tabIndex}
onChange={setTabIndex}
>
<TabList>
<Tab>
<HStack direction="row" spacing={4}>
<Avatar
bgColor="primary.blue"
bgColor={tabIndex === 0 ? "primary.blue" : "gray"}
name="1"
src="https://bit.ly/broken-link"
size="xs"
/>
<Text as="b" color="primary.blue" fontSize={fontSize}>
<Text
as="b"
color={tabIndex === 0 ? "primary.blue" : "gray"}
fontSize={fontSize}
>
Scheduling
</Text>
</HStack>
</Tab>

<Tab isDisabled>
<Tab isDisabled={completedTab < 0}>
<HStack direction="row" spacing={4}>
<Avatar
bgColor="gray"
bgColor={tabIndex === 1 ? "primary.blue" : "gray"}
name="2"
src="https://bit.ly/broken-link"
size="xs"
/>

<Text as="b" color="gray" fontSize={fontSize}>
<Text
as="b"
color={tabIndex === 1 ? "primary.blue" : "gray"}
fontSize={fontSize}
>
Meal Donation Information
</Text>
</HStack>
</Tab>

<Tab isDisabled>
<Tab isDisabled={completedTab < 1}>
<HStack direction="row" spacing={4}>
<Avatar
bgColor="gray"
bgColor={tabIndex === 2 ? "primary.blue" : "gray"}
name="3"
src="https://bit.ly/broken-link"
size="xs"
/>
<Text as="b" color="gray" fontSize={fontSize}>
<Text
as="b"
color={tabIndex === 2 ? "primary.blue" : "gray"}
fontSize={fontSize}
>
Review & Submit
</Text>
</HStack>
Expand All @@ -94,7 +137,24 @@ const CreateMealRequest = (): React.ReactElement => {

<TabPanels>
<TabPanel>
<SchedulingForm />
{isWeeklyInput ? (
<SchedulingFormWeekly
donationFrequency={donationFrequency}
setDonationFrequency={setDonationFrequency}
weekdayButtonStates={weekdayButtonStates}
setWeekdayButtonStates={setWeekdayButtonStates}
startDate={startDate}
setStartDate={setStartDate}
endDate={endDate}
setEndDate={setEndDate}
scheduledDropOffTime={scheduledDropOffTime}
setScheduledDropOffTime={setScheduledDropOffTime}
setIsWeeklyInput={setIsWeeklyInput}
onComplete={handleNext}
/>
) : (
<p>one!</p>
)}
</TabPanel>
<TabPanel>
<p>two!</p>
Expand Down
65 changes: 41 additions & 24 deletions ...omponents/asp/requests/SchedulingForm.tsx → ...nts/asp/requests/SchedulingFormWeekly.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,38 +11,53 @@ import {
} from "@chakra-ui/react";
import React, { useState } from "react";

const SchedulingForm = () => {
const [donationFrequency, setDonationFrequency] = useState("");
const [donationDays, setDonationDays] = useState([] as string[]);
const [startDate, setStartDate] = useState("");
const [endDate, setEndDate] = useState("");
const [scheduledDropOffTime, setScheduledDropOffTime] = useState("");
type SchedulingFormWeeklyProps = {
donationFrequency: string;
setDonationFrequency: (donationFrequency: string) => void;
weekdayButtonStates: boolean[];
setWeekdayButtonStates: (weekdayButtonStates: boolean[]) => void;
startDate: string;
setStartDate: (startDate: string) => void;
endDate: string;
setEndDate: (endDate: string) => void;
scheduledDropOffTime: string;
setScheduledDropOffTime: (scheduledDropOffTime: string) => void;
setIsWeeklyInput: (isWeeklyInput: boolean) => void;
onComplete: () => void;
};

const SchedulingFormWeekly: React.FunctionComponent<SchedulingFormWeeklyProps> = ({
donationFrequency,
setDonationFrequency,
weekdayButtonStates,
setWeekdayButtonStates,
startDate,
setStartDate,
endDate,
setEndDate,
scheduledDropOffTime,
setScheduledDropOffTime,
setIsWeeklyInput,
onComplete,
}) => {
const dayNames = ["Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"];

const [nextButtonEnabled, setNextButtonEnabled] = useState(false);

// Button state (array of booleans)
const [weekdayButtonStates, setWeekdayButtonStates] = useState(
Array(7).fill(false),
);
const numberOfChosenDays = weekdayButtonStates.filter((state) => state)
.length;

// Turn button to solid variant when clicked
const handleClick = (index: number) => {
const newButtonState = [...weekdayButtonStates];
newButtonState[index] = !newButtonState[index];
setWeekdayButtonStates(newButtonState);

// update the donationDays list on which days are selected from the boolean array
const selectedDays = newButtonState
.map((state, i) => (state ? dayNames[i] : "") as string)
.filter((day) => day !== "");

setDonationDays(selectedDays);
};

const validateData = () => {
if (
donationFrequency === "" ||
donationDays.length === 0 ||
numberOfChosenDays === 0 ||
startDate === "" ||
endDate === "" ||
scheduledDropOffTime === ""
Expand All @@ -56,7 +71,8 @@ const SchedulingForm = () => {

// Data is valid, continue to the next step
console.log("Data is valid!");

Check warning on line 73 in frontend/src/components/asp/requests/SchedulingFormWeekly.tsx

View workflow job for this annotation

GitHub Actions / run-lint 

Unexpected console statement
// Proceed with further actions or form submission

onComplete();
};

return (
Expand All @@ -75,12 +91,13 @@ const SchedulingForm = () => {
<GridItem colSpan={{ base: 1, md: 2 }}>
<Text color="primary.blue" fontSize="xs">
If this is not a weekly donation,&nbsp;
<a
href="https://www.google.com"
<button
style={{ textDecoration: "underline" }}
onClick={() => setIsWeeklyInput(false)}
type="button"
>
click here to enter dates manually
</a>
</button>
.
</Text>
<br />
Expand Down Expand Up @@ -108,7 +125,7 @@ const SchedulingForm = () => {
<br />
<Text
color={
donationDays.length === 0 && nextButtonEnabled ? "red" : "black"
numberOfChosenDays === 0 && nextButtonEnabled ? "red" : "black"
}
as="b"
>
Expand Down Expand Up @@ -243,4 +260,4 @@ const SchedulingForm = () => {
);
};

export default SchedulingForm;
export default SchedulingFormWeekly;

0 comments on commit 8c99c00

Please sign in to comment.