Displaying Trip-Specific Passengers in Estrella Tour with Next.js

Introduction

In the Estrella Tour project, we recently implemented a new feature to display all passengers associated with a specific trip on a dedicated, fixed template page. This enhancement provides a clear and organized view of trip attendees, improving the overall usability for administrators and tour operators.

The Challenge: Connecting Trips and Passengers

The core challenge was to efficiently fetch and present passenger data for a particular trip. This involves not only retrieving the trip details but also all the related passenger records and rendering them in a structured and readable format on a specialized page within our Next.js application.

Building the Dedicated Page

Leveraging Next.js, we structured a new page component responsible for this view. This component needs to handle data fetching on load and then iterate through the passenger list to display each one. The "fixed template page" approach means that while the data displayed changes per trip, the layout and structure of the page remain consistent.

Our data fetching strategy typically involves making an API call to a backend endpoint. This endpoint would receive a trip identifier, query the database for all passengers linked to that trip, and return the relevant data.

Data Fetching and Rendering Example

Here’s a simplified illustration of how a React component within our Next.js page might fetch and display passenger data:

import React, { useState, useEffect } from 'react';

function TripPassengersPage({ tripId }) {
  const [trip, setTrip] = useState(null);
  const [passengers, setPassengers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!tripId) return;

    const fetchTripData = async () => {
      try {
        setLoading(true);
        const tripResponse = await fetch(`/api/trips/${tripId}`);
        if (!tripResponse.ok) throw new Error('Failed to fetch trip details');
        const tripData = await tripResponse.json();
        setTrip(tripData);

        const passengerResponse = await fetch(`/api/trips/${tripId}/passengers`);
        if (!passengerResponse.ok) throw new Error('Failed to fetch passengers');
        const passengerData = await passengerResponse.json();
        setPassengers(passengerData);

      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    fetchTripData();
  }, [tripId]);

  if (loading) return <p>Loading trip details and passengers...</p>;
  if (error) return <p>Error: {error}</p>;
  if (!trip) return <p>Trip not found.</p>;

  return (
    <div>
      <h1>Trip: {trip.name}</h1>
      <p>Destination: {trip.destination}</p>
      <h2>Passengers:</h2>
      {passengers.length === 0 ? (
        <p>No passengers found for this trip.</p>
      ) : (
        <ul>
          {passengers.map(passenger => (
            <li key={passenger.id}>{passenger.name} - {passenger.email}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default TripPassengersPage;

This snippet demonstrates a React component that, upon receiving a tripId, fetches both the trip's main details and its associated passengers. It manages loading states and errors, then renders the information in a list format. This modular approach ensures that our UI remains responsive and informative.

Conclusion

Implementing dedicated pages for displaying related entities, like passengers for a specific trip, significantly enhances data visibility and management. By combining Next.js's page routing capabilities with React's component-based rendering and a clear data fetching strategy, we can build robust and user-friendly interfaces. The key takeaway is to design your data fetching and component structure to align with the relationships in your data model, ensuring efficient retrieval and intuitive display.

Generated with Gitvlg.com