A bug while searching for cars from homepage

[ShubhamShrestha60]

The cars are being displayed even when the drop-off location isn't entered and also when both pick-up time and date is same as drop off time and date. `const [showPickupCalendar, setShowPickupCalendar] = useState(false); const [showDropoffCalendar, setShowDropoffCalendar] = useState(false); const [showPickupTimetable, setShowPickupTimetable] = useState(false); const [showDropoffTimetable, setShowDropoffTimetable] = useState(false);

const times = [ '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00','24:00' ];

const togglePickupCalendar = () => { setShowPickupCalendar(!showPickupCalendar); };

const toggleDropoffCalendar = () => { setShowDropoffCalendar(!showDropoffCalendar); };

const togglePickupTimetable = () => { setShowPickupTimetable(!showPickupTimetable); };

const toggleDropoffTimetable = () => { setShowDropoffTimetable(!showDropoffTimetable); };

const handlePickupDateChange = (date) => { setPickupDate(date); setDropoffDate(date); // Set dropoff date to pickup date initially togglePickupCalendar(); };

const handleDropoffDateChange = (date) => { setDropoffDate(date); toggleDropoffCalendar(); };

const handlePickupTimeChange = (time) => { setPickupTime(time); togglePickupTimetable(); };

const handleDropoffTimeChange = (time) => { setDropoffTime(time); toggleDropoffTimetable(); };

const [pickupInput, setPickupInput] = useState(""); const [pickupFilteredResults, setPickupFilteredResults] = useState([]); const [dropoffInput, setDropoffInput] = useState(""); const [dropoffFilteredResults, setDropoffFilteredResults] = useState([]);

const [pickupError, setPickupError] = useState(""); // Pickup location error message const [dropoffError, setDropoffError] = useState(""); // Dropoff location error message const [timeGapError, setTimeGapError] = useState(""); // Time gap error message

// Function to fetch data based on input value const fetchDate = (value, setterFunction, setFilteredResultsFunction) => { fetch("https://jsonplaceholder.typicode.com/users") .then((response) => response.json()) .then((json) => { const filteredResults = json.filter((user) => { return ( value && user && user.name && user.name.toLowerCase().includes(value.toLowerCase()) ); }); setFilteredResultsFunction(filteredResults); }); };

const handleInputChange = (value, setterFunction, setFilteredResultsFunction) => { const lowercaseValue = value.toLowerCase(); setterFunction(lowercaseValue); if (lowercaseValue.trim() === "") { setFilteredResultsFunction([]); return; } fetchDate(lowercaseValue, setterFunction, setFilteredResultsFunction); };

// Function to handle click on suggestion const handleSuggestionClick = (value, setterFunction, setFilteredResultsFunction) => { setterFunction(value); setFilteredResultsFunction([]); };

const navigate = useNavigate()

const handleSubmit = (e) => { e.preventDefault();

// Check for empty pickup location
if (pickupInput.trim() === "") {
    setPickupError("Pickup location cannot be empty");
    return;
} else {
    setPickupError(""); // Clear pickup location error
}

// Check for empty dropoff location
if (dropoffInput.trim() === "") {
    setDropoffError("Dropoff location cannot be empty");
    return;
} else {
    setDropoffError(""); // Clear dropoff location error
}

// Check for matching pickup and dropoff times and dates
const pickupDateTime = new Date(`${pickupDate.toDateString()} ${pickupTime}`);
const dropoffDateTime = new Date(`${dropoffDate.toDateString()} ${dropoffTime}`);

if (pickupDateTime >= dropoffDateTime) {
    setTimeGapError("Dropoff time must be later than pickup time");
    return;
} else {
    setTimeGapError(""); // Clear time gap error
}

const timeDifference = Math.abs(dropoffDateTime - pickupDateTime) / (1000 * 60 * 60); // Difference in hours

if (timeDifference < 1) {
    setTimeGapError("There must be atleast one hour between pickup and dropoff");
    return;
} else {
    setTimeGapError(""); // Clear time gap error
}

axios.post('http://localhost:3001/home', { Location: pickupInput })
    .then(result => {
        console.log(result);
        if (result.data) {
            setResults(result.data);
            navigate('/cars');
        } else {
            console.log("No cars found for the specified location");
        }
    })
    .catch(err => console.log(err));

};

return (

Car hire for any kind of trip

Great deals at great prices

handleInputChange(e.target.value, setPickupInput, setPickupFilteredResults)} /> {pickupError &&

{pickupError}

} {pickupFilteredResults.length > 0 && (

{pickupFilteredResults.map((user, index) => (
• handleSuggestionClick(user.name, setPickupInput, setPickupFilteredResults)}> {user.name}
))}

)} handleInputChange(e.target.value, setDropoffInput, setDropoffFilteredResults)} /> {dropoffError &&

{dropoffError}

} {dropoffFilteredResults.length > 0 && (

{dropoffFilteredResults.map((user, index) => (
• handleSuggestionClick(user.name, setDropoffInput, setDropoffFilteredResults)}> {user.name}
))}

)}

Pickup date

{pickupDate.toLocaleDateString()}

{showPickupCalendar && (

)}

Pickup time

{pickupTime}

{showPickupTimetable && (

{times.map((time, index) => (

handlePickupTimeChange(time)}> {time}

))}

)}

            <div style={{ position: 'relative' }} className="dropoff">
                <button onClick={toggleDropoffCalendar} className="button dropoffdate">
                <p style={{ margin: "auto 0", marginTop: "8px" , fontSize:"9px"}}>Dropoff date</p>
                    <h4 style={{ margin: "auto 0", marginTop: "14px" }}>{dropoffDate.toLocaleDateString()}</h4>
                </button>
                {showDropoffCalendar && (
                    <div className="calendarContainer">
                        <Calendar
                            onChange={handleDropoffDateChange}
                            value={dropoffDate}
                            minDate={pickupDate}
                        />
                    </div>
                )}

               <button onClick={toggleDropoffTimetable} className="button dropofftime">
                <p style={{ margin: "auto 0", marginTop: "8px" , fontSize:"8px"}}>Dropoff time</p>
                    <h4 style={{ margin: "auto 0", marginTop: "14px" }}>{dropoffTime}</h4>

                </button>
                {showDropoffTimetable && (
                    <div className="dropdown">
                        {times.map((time, index) => (
                            <div key={index} onClick={() => handleDropoffTimeChange(time)}>
                                {time}
                            </div>
                        ))}
                    </div>
                )}
                {timeGapError && <p className="timegap_error-message">{timeGapError}</p>}
            </div>

            <button className="search_button" onClick={handleSubmit}>
                Search

            </button>
        </div>
    </div>

    <div className="guide_main">
    <div className="guide">
        <h3>How it works</h3>
        <div className="content">
            <div>

                <img src={logo1} alt="" className="img" />
                <h3 style={{margin:"-10px 0px 0px 11px"}}>Pickup and Dropoff</h3>
                <p style={{margin:"0 0 0 11px"}}>Select the pickup and dropoff<br />
                   point according to your ease.
                   </p>

            </div>
            <div>
            <img src={logo2} alt="" className="img" />
            <h3 style={{margin:"-10px 0px 0px 11px"}}>Select the best car</h3>
                <p style={{margin:"0 0 0 11px"}}>Select the best car that matches<br />
                your criteria.
                   </p>
            </div>
            <div>
                <img src={logo} alt="" className="img" />
                <h3 style={{margin:"-10px 0px 0px 11px"}}>Book and Pay</h3>
                <p style={{margin:"0 0 0 11px"}}>Pick your favourite car,time <br />
                   and place.
                </p>
            </div>
            <div>
            <img src={logo3} alt="" className="img" />
                <h3 style={{margin:"-10px 0px 0px 11px"}}>Enjoy your ride</h3>
                <p style={{margin:"0 0 0 11px"}}>Enjoy your ride to the fullest<br />
                   with vroom cars.
                </p>
            </div>
        </div>
    </div>
    </div>
    </div>

);`

Pratik100-source commented 5 months ago

On it shubham. Will let you know after the completion

Pratik100-source commented 5 months ago

The code is updated shubham.. You can test it now

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[Pratik100-source]

On it shubham. Will let you know after the completion

[Pratik100-source]

The code is updated shubham.. You can test it now