Hagglehaul UI Documentation
Index
Component Name: LeafletMapRoute
Component Name: WithdrawBidModal
Component Name: ModifyBidModal
Component Name: PassengerDropdown
Component Name: SelectBidModal
Component Name: AddressSearchBar
Component Name: CancellationModal
Component Name: CancellationModal
Component Name: DriverLaunchModal
Component Name: DriverSearchTrip
Description:
The TripMapModal component is responsible for displaying a modal dialog with a map preview of a given route. It uses the react-leaflet package to render the map and the route.
Props:
Usage:
<TripMapModal
show={modalVisible}
setShow={setModalVisible}
mapGeoJSON={routeData}
/>
Styling:
The component uses a custom CSS class hh-map-frame to define the dimensions and other styles for the map frame within the modal. The class trip-map-modal is used for styling the modal dialog.
Dependencies:
Remarks:
This component is typically used to preview routes for trips, providing an interactive map experience within a modal dialog.
Description:
The LeafletMapRoute component is a map component used to display geographic routes. It leverages react-leaflet's GeoJSON component to render the route based on GeoJSON data passed through the mapGeoJSON prop.
Props:
Usage:
<LeafletMapRoute mapGeoJSON={geoJSONData} />
Styling:
The route is styled within the component using inline styles that set the color and weight of the route line.
Dependencies:
Remarks:
This component should be a child of a react-leaflet Map component and expects GeoJSON data to represent the route.
Description:
The WithdrawBidModal component is a dialog that allows users to withdraw their previously placed bid on a trip. It confirms the user's action before sending a delete request to the server.
Props:
Behavior:
When the user confirms the bid withdrawal, the component makes a DELETE request to the server API endpoint for bid removal using the tripId prop. It handles the loading state and displays a spinner while the request is in progress. Upon success or failure, it refreshes the page or displays an error message, respectively.
Styling:
The component uses the cancellation-modal class for styling, defined in WithdrawBidModal.css.
Dependencies:
Remarks:
WithdrawBidModal is a part that allows users who bid the trip to change their decision, and prevents unwanted trips from being eventually confirmed.
Description:
The ModifyBidModal component is a dialog that allows users to adjust the amount of a bid they have previously placed. The modal presents an input for the new bid amount and handles the PATCH request to update the bid on the server.
Props:
Behavior:
Users can enter a new bid amount, which updates the cents state on input change. On submitting the new bid, the component makes a PATCH request to the server with the new bid amount. It manages a waiting state to show a loading spinner during the request.
Styling:
The component uses styles from ModifyBidModal.css and inline styles for button coloring and spinner display.
Dependencies:
Remarks:
ModifyBidModal is a part that allows users who bid the trip to change their bid, and prevents unwanted bid from being eventually confirmed.
Description:
The PassengerDropdown component provides a dropdown select input that allows users to choose the number of passengers for a trip. It is a form control that can be integrated into larger forms or used standalone.
Props:
Behavior:
It displays a dropdown with options ranging from 1 to 10, representing the number of passengers. When a user selects a number, the onChange function is called with the new value.
Styling:
The component uses .passenger-dropdown for styling the outer div and .form-control for the select input.
Description:
This component allows users to rate a trip by presenting a modal with a star rating system. Users can select their rating and confirm their choice, which is then posted to an API endpoint.
Props:
Behavior:
On clicking a star, the localRating state is updated. When submitting the rating, an HTTP POST request is sent with the user's token, trip ID, and selected rating. The modal displays a spinner during the request and refreshes the page upon success.
Styling:
The modal uses custom styling defined in RateTripModal.css, and the stars are rendered with conditional classes for filled or unfilled states.
Dependencies:
Description:
This component is designed for riders to request new trips. It includes input fields for specifying the origin and destination addresses, selecting the trip date and time, and choosing the number of passengers.
Features:
Styling:
Usage:
The component is used within the application where riders have the option to add a trip, typically accessed through a dedicated page or modal.
Description:
This component presents a modal that prompts the user to confirm the selection of a bid for a trip. It displays a message asking for confirmation and provides "Yes" and "No" options.
Props:
Behavior:
Upon clicking "Yes", the selectBid function is executed, which sends a POST request to the server with the selected bid's data. The modal shows a spinner while waiting for the request to complete and refreshes the page upon success or sets an error on failure.
Styling:
Custom styles are applied from SelectBidModal.css, and inline styles are used to set the primary color for buttons and the spinner.
Dependencies:
Remarks:
SelectBidModal is critical in ensuring users to select big and ask them to confirm, preventing selecting wrong trips accidentally.
Description:
The TripCard component displays a card with trip details suitable for listings or search results. It features an image, title, various trip attributes, and action components that can be interacted with.
Props:
Usage:
<TripCard
image="image_url_here"
title="Trip Title Here"
attributes={[
["Date", "Tomorrow"],
["Seats Available", "3"],
["Price", "$20"]
]}
actionComponent={<Button>Join Trip</Button>}
bidComponents={[<p>Bid 1</p>, <p>Bid 2</p>]}
onClickImg={() => console.log("Image Clicked!")}
/>
Styling:
The component uses two sets of styles to adapt to different screen sizes, one for smaller views and another for larger views, controlled by .small-medium-card and .large-card CSS classes respectively.
Remarks:
Trip card is an essential part of the page to allow users to see the trips by displaying information for each trip.
Description:
The AddBidModal component provides a user interface for adding a bid to a specific trip. It features an input for bid amounts and posts the bid to the server after form submission.
Props:
Behavior:
Users input their bid, which updates the cents state. The addBid function handles the form submission, performing a POST request with the bid details.
Styling:
Styled with AddBidModal.css and uses inline styles for buttons and spinner.
Dependencies:
Remarks:
The component includes input validation and error handling, updating the UI with a spinner during the API request and refreshing the page on success.
Description:
The AddressSearchBar component facilitates location searching for users. It allows the input of address text, debounces the input to limit API calls, and fetches address suggestions dynamically.
Props:
Behavior:
As the user types an address, the component debounces the input to minimize API requests. Once the user enters a sufficient number of characters, it fetches potential address matches. The user can then select from these suggestions, setting both the address text and coordinates in the application state.
Styling:
Styled with AddressSearchBar.css, providing a clean and intuitive interface for address input and suggestions display.
Dependencies:
Remarks:
This component is crucial for user interfaces requiring address input, ensuring a smooth user experience by reducing unnecessary API calls and providing visual feedback of address suggestions.
Description:
The CancellationModal provides an interface for users to confirm the cancellation of a trip. It displays a modal with a warning message and options to confirm or cancel the action.
Props:
Behavior:
The modal presents a confirmation question and waits for user interaction. If confirmed, it sends a DELETE request to the server with the cancellation ID and handles the response, refreshing the page or setting an error as needed.
Styling:
The modal uses the cancellation-modal class for styling and includes a spinner for loading indication.
Dependencies:
Remarks:
CancellationModal is critical in ensuring users intentionally confirm the cancellation of trips, preventing accidental data loss and providing feedback on the action taken.
Description:
The DatePicker component wraps a third-party date picker to enable users to select dates and times for their activities. It's configured to show both date and time selection with custom formatting.
Props:
Usage:
<DatePickerComponent
selectedDate={selectedDate}
onChange={handleDateChange}
/>
Styling:
The component inherits styles from react-datepicker/dist/react-datepicker.css for the date picker's UI.
Dependencies:
Remarks:
The component is customizable and can be tailored with additional props from the react-datepicker library to fit various date and time selection scenarios.
Description:
This component renders a modal window that allows users to add a new trip. It is designed to be large, centered, and includes a header with a title and a close button. The body of the modal contains the RiderAddTrip component which handles the actual trip creation process.
Props:
Usage:
<AddTripModal show={showModal} setShow={setShowModal} />
Styling:
The modal is styled with a corresponding CSS file, referenced as AddTripModal.css, ensuring consistent visual presentation across the application.
Dependencies:
Remarks:
AddTripModal is an integral part of the code that allows users to add trips and input information about the trips.
Description:
The CancellationModal provides an interface for users to confirm the cancellation of a trip. It displays a modal with a warning message and options to confirm or cancel the action.
Props:
Behavior:
The modal presents a confirmation question and waits for user interaction. If confirmed, it sends a DELETE request to the server with the cancellation ID and handles the response, refreshing the page or setting an error as needed.
Styling:
The modal uses the cancellation-modal class for styling and includes a spinner for loading indication.
Dependencies:
Remarks:
CancellationModal is critical in ensuring users intentionally confirm the cancellation of trips, preventing accidental data loss and providing feedback on the action taken.
Description:
The DatePicker component wraps a third-party date picker to enable users to select dates and times for their activities. It's configured to show both date and time selection with custom formatting.
Props:
Usage:
<DatePickerComponent
selectedDate={selectedDate}
onChange={handleDateChange}
/>
Styling:
The component inherits styles from react-datepicker/dist/react-datepicker.css for the date picker's UI.
Dependencies:
Remarks:
The component is customizable and can be tailored with additional props from the react-datepicker library to fit various date and time selection scenarios.
Description:
The DriverLaunchModal component is designed to provide drivers with quick navigation options to the pickup and destination points using various mapping services. It displays modal with actionable buttons linking to Google Maps, Apple Maps, and Waze with pre-filled coordinates for directions.
Props:
Behavior:
The modal offers buttons for different mapping services which open the respective apps or websites when clicked. It also provides direct communication links to call, text, or email the rider.
Styling:
Styled primarily through DriverLaunchModal.css, with additional inline styles for specific buttons.
Dependencies:
Remarks:
This modal is a utility for drivers to quickly navigate and communicate with riders, centralizing various actions in a single interface.
Description:
The DriverSearchTrip component is a simple functional component that renders a button to navigate to the search trips page. It's a straightforward navigation aid without any complex logic or state management.
Props: None
Behavior:
When the button is clicked, it triggers the handleSearchClick function that uses React Router's navigate function to redirect the user to the /search-trips route.
Styling:
The button is styled using the DriverSearchTrip.css file, which likely contains specific styles for the .search-button class to ensure it aligns with the application's design.
Dependencies:
Usage:
<DriverSearchTrip />
Remarks:
This component is typically used in the driver's dashboard or a similar context where quick access to the trip search functionality is required.