The Find Driver's page shows a list of passenger's looking for drivers:

It shows the person's name, rating, distance away, drop-off location, and pay rate.

It also contains 3 options at the top for filtering, searching for specific people, or optimizing choices.

The list of people get fed through a map function to be shown in individual divs:

This list is hard-coded in at the moment as we don't have a backend database as of sprint 1.

This is the code that separates the people's information into their own elements:

{/* PEOPLE */}
{drivers.map((driver: DriverType) => (
  <Person 
    name={driver.name}
    rating={driver.rating} 
    distance={driver.distance} 
    location={driver.location} 
    payMin={driver.payMin} 
    payMax={driver.payMax} 
  />
))}

This was made to help make elements for the people so they could be filtered through the map function.

One thing to note is that framer-motion is used to give the elements slight animation.

<motion.div 
    className="px-2 py-2 x-[-1]"
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true, amount: 0.5 }}
    transition={{ duration: 0.5 }}
    variants={{
        hidden: { opacity: 0, x:-50 },
        visible: { opacity: 1, x:0 },
    }}
>

The filter button toggles a boolean variable to switch which in turn makes a div visible for the filter modal

const [isMenuToggled, setIsMenuToggled] = useState<boolean>(false);

{/* FILTER MODAL */}
{ isMenuToggled && (
      <div 
        className="fixed left-0 top-20 z-40 h-80 w-[300px] bg-primary-green-500 drop-shadow-xl rounded-md"
      >
          <p>Filter options will go here</p>
      </div>
  )}

Currently, there is no options in the filter modal

In the future, the optimize button will try to find passengers with similar schedules to the driver's, however that shall be saved for a future user story.

Currently, all the button does is shuffle the people's order.

Shuffle function called with the button click, ChatGPT was used for this:

const shuffleDrivers = () => {
 const shuffledBoxes = [...drivers].sort(() => Math.random() - 0.5);
 setDrivers(shuffledBoxes);
};

The search bar at the moment will filter the divs be name, removing the elements that don't match.

This is the function that handles the search, ChatGPT was used for this:

const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
  setSearchTerm(e.target.value);
  // You can filter the drivers based on the search term here
  const filteredBoxes = initalDrivers.filter(value =>
    value.name.toLowerCase().includes(e.target.value.toLowerCase())
  );
  setDrivers(filteredBoxes);
};