diff --git a/frontend/src/components/RideModal/Pages/RideTimes.tsx b/frontend/src/components/RideModal/Pages/RideTimes.tsx
index 86d4f6e5..a797d7ae 100644
--- a/frontend/src/components/RideModal/Pages/RideTimes.tsx
+++ b/frontend/src/components/RideModal/Pages/RideTimes.tsx
@@ -166,7 +166,10 @@ const RideTimesPage: React.FC
= ({
watch,
} = methods;
const watchRepeats = watch('repeats');
-
+ const repeatOptions = Object.values(RepeatValues).map((value) => ({
+ id: value,
+ name: value,
+ }));
useEffect(() => {
setIsRepeating(watchRepeats !== RepeatValues.DoesNotRepeat);
}, [watchRepeats]);
@@ -191,6 +194,7 @@ const RideTimesPage: React.FC = ({
},
})}
aria-required="true"
+ className={cn(styles.dateStyle)}
/>
{errors.date?.type === 'required' && (
Please enter a date
@@ -205,13 +209,14 @@ const RideTimesPage: React.FC = ({
@@ -225,6 +230,7 @@ const RideTimesPage: React.FC = ({
{
@@ -247,6 +253,7 @@ const RideTimesPage: React.FC = ({
{
diff --git a/frontend/src/components/RideModal/Pages/RiderInfo.tsx b/frontend/src/components/RideModal/Pages/RiderInfo.tsx
index 55afb52f..03b80aee 100644
--- a/frontend/src/components/RideModal/Pages/RiderInfo.tsx
+++ b/frontend/src/components/RideModal/Pages/RiderInfo.tsx
@@ -3,7 +3,12 @@ import { useForm } from 'react-hook-form';
import cn from 'classnames';
import { ObjectType, Location, Rider } from '../../../types';
import { ModalPageProps } from '../../Modal/types';
-import { Button, Input, Label } from '../../FormElements/FormElements';
+import {
+ Button,
+ Input,
+ Label,
+ SelectComponent,
+} from '../../FormElements/FormElements';
import styles from '../ridemodal.module.css';
import { useRiders } from '../../../context/RidersContext';
import { useLocations } from '../../../context/LocationsContext';
@@ -16,6 +21,7 @@ interface FormData {
const RiderInfoPage = ({ formData, onBack, onSubmit }: ModalPageProps) => {
const {
+ control,
register,
handleSubmit,
formState: { errors },
@@ -31,12 +37,20 @@ const RiderInfoPage = ({ formData, onBack, onSubmit }: ModalPageProps) => {
const [locationToId, setLocationToId] = useState({});
const { locations } = useLocations();
const { riders } = useRiders();
-
- const beforeSubmit = ({ name, pickupLoc, dropoffLoc }: FormData) => {
- const rider = nameToId[name.toLowerCase()];
+ const beforeSubmit = ({ name, pickupLoc, dropoffLoc }: ObjectType) => {
const startLocation = locationToId[pickupLoc] ?? pickupLoc;
const endLocation = locationToId[dropoffLoc] ?? dropoffLoc;
- onSubmit({ rider, startLocation, endLocation });
+ /**Payload needed because the form is registered to expect rider instead of name
+ * If name passed straightaway it results in the database receiving an empty field for rider
+ *
+ */
+ const payload = {
+ rider: name,
+ startLocation,
+ endLocation,
+ };
+ console.log(payload);
+ onSubmit(payload);
};
useEffect(() => {
@@ -59,7 +73,7 @@ const RiderInfoPage = ({ formData, onBack, onSubmit }: ModalPageProps) => {
-
{
validate: (name: string) =>
nameToId[name.toLowerCase()] !== undefined,
})}
+ /> */}
+
+ name="name"
+ datalist={Object.entries(nameToId).map(([name, id]) => ({
+ id,
+ name,
+ }))}
+ isSearchable={true}
+ control={control}
+ rules={{ required: 'Rider name is required' }}
/>
+
{errors.name && Rider not found
}