User Story: As a user, I want a history page where I can access my previous rides drives.

About History Page

The history page can be accessed by clicking the clock button on the navigation bar.

Features

User Role Based Display: Dynamically displays history entries based on the user's role (driver or passenger). For now, you can do it by changing this userRole in App.tsx

Date Filtering: Allows users to filter the historical data based on a specific date. You can filter the dates by typing in the required date or selecting it. We used React's built in calendar feature for it.

Usage

The 'History' component is used to display a list of ride history entries. It requires 'userRole' to determine the perspective of the history for (Driver or passenger)

Filtering by Date

Users can filter the history entries by selecting a date from the date input field.

User's can also filter the ride by clicking the calendar button on the right side and it prompts up a calendar from where you can choose a date from.

This is the snippet of code used for filtering searches:

  const [searchDate, setSearchDate] = useState('');

  // Filter function
  const filteredEntries = historyEntries.filter(entry => {
    // Convert search date format from YYYY-MM-DD to MM/DD/YYYY
    const convertDateFormat = (dateStr: string) => {
      if (!dateStr) return '';
      const [year, month, day] = dateStr.split('-');
      return `${month}/${day}/${year}`;
    };

    const convertedSearchDate = convertDateFormat(searchDate);
    return entry.date.includes(convertedSearchDate);
  });

userRole

The contents on history page changes based on if the user is looking at it as a driver or a passenger. When in driver's mode they can view it as:

and when in passenger's mode, they can view it as:

Ride data

Since we do not have backend for it and cannot access rides, we've used a sample data 'historyEntries'.

const historyEntries = [
    // Sample data, replace with actual data fetching logic
    { date: "01/10/2024", name: userRole === 'driver' ? "Taylor Swift" : "Chris Hemsworth", totalTime: 3, amount: 50.00 },
    { date: "01/06/2024", name: userRole === 'driver' ? "Ryan Reynolds" : "Benedict Cumberbatch", totalTime: 1.75, amount: 30.00 },
    { date: "01/04/2024", name: userRole === 'driver' ? "George Clooney" : "Julia Roberts", totalTime: 2.6, amount: 47.00 },
];