WIP : Modal redesign for Available drivers

frontend/src/components/RideModal/Pages/Driver.tsx

@@ -2,22 +2,33 @@ import React, { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { ModalPageProps } from '../../Modal/types';
 import styles from '../ridemodal.module.css';
-import { Label, Input, Button } from '../../FormElements/FormElements';
+import { Label, Button } from '../../FormElements/FormElements';
 import axios from '../../../util/axios';
 
 const DriverPage = ({ onBack, onSubmit, formData }: ModalPageProps) => {
-  const { register, handleSubmit, formState } = useForm({
+  const { register, handleSubmit, formState, setValue } = useForm({
     defaultValues: {
       driver: formData?.driver ?? '',
     },
   });
   const { errors } = formState;
   const [loaded, setLoaded] = useState(false);
+  const [selectedDriver, setSelectedDriver] = useState(formData?.driver ?? '');
 
   const { date, pickupTime: startTime, dropoffTime: endTime } = formData!;
-  type DriverOption = { id: string; firstName: string; lastName: string };
+  type DriverOption = {
+    id: string;
+    firstName: string;
+    lastName: string;
+    photoLink: string;
+  };
   const [availableDrivers, setAvailableDrivers] = useState<DriverOption[]>([]);
 
+  const selectDriver = (driverId: string) => {
+    setValue('driver', driverId);
+    setSelectedDriver(driverId);
+  };
+
   useEffect(() => {
     if (startTime && endTime && date) {
       axios
@@ -35,35 +46,48 @@ const DriverPage = ({ onBack, onSubmit, formData }: ModalPageProps) => {
     }
   }, [startTime, endTime, date]);
 
+  useEffect(() => {
+    register('driver', { required: 'Please select a driver' });
+  }, [register]);
+
   return (
     <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
       <div className={styles.inputContainer}>
         <div className={styles.drivers}>
           {loaded ? (
             availableDrivers.map((d) => (
               <div className={styles.driver} key={d.id}>
-                <Label
-                  htmlFor={d.firstName + d.lastName}
-                  className={styles.driverLabel}
+                <div className={styles.driverInfo}>
+                  <Label
+                    htmlFor={d.firstName + d.lastName}
+                    className={styles.driverLabel}
+                  >
+                    <img
+                      src={d.photoLink}
+                      alt=""
+                      className={styles.driverPhoto}
+                    />
+                    {`${d.firstName} ${d.lastName}`}
+                  </Label>
+                </div>
+                <Button
+                  className={
+                    selectedDriver === d.id
+                      ? styles.selectedButton
+                      : styles.selectButton
+                  }
+                  onClick={() => selectDriver(d.id)}
+                  type="button"
                 >
-                  {d.firstName}
-                </Label>
-                <Input
-                  id={d.firstName + d.lastName}
-                  className={styles.driverRadio}
-                  name="driver"
-                  type="radio"
-                  value={d.id}
-                  ref={register({ required: true })}
-                  aria-required="true"
-                />
+                  {selectedDriver === d.id ? 'Selected' : 'Select'}
+                </Button>
               </div>
             ))
           ) : (
             <p>Loading...</p>
           )}
         </div>
-        {errors.driver?.type === 'required' && (
+        {errors.driver && (
           <p className={styles.error} style={{ textAlign: 'center' }}>
             Please select a driver
           </p>

frontend/src/components/RideModal/ridemodal.module.css

@@ -69,18 +69,40 @@
 
 .drivers {
   display: flex;
-  flex-wrap: wrap;
-  max-width: 30rem;
-  justify-content: center;
+  flex-direction: column;
+  height: 15rem;
+  overflow-y: auto;
+  justify-content: flex-start;
+  padding: 0.5rem;
+  border-radius: 8px;
 }
 
 .driver {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
-  margin: 0 0.625rem;
+  justify-content: space-between;
+  margin-bottom: 0.625rem;
+  height: 5rem;
+  background-color: #f2f2f2;
+  border: 1px solid black;
+  border-radius: 10px;
+  padding: 10px;
 }
 
+.driverPhoto {
+  height: 20px;
+  width: 20px;
+  border-radius: 100%;
+}
+.selectButton {
+  background-color: #00c48c;
+}
+.selectedButton {
+  background-color: #f2f2f2;
+  border: 1px solid black;
+  color: black;
+}
 .driverLabel {
   margin: 0;
 }