GLOW: Data Scrubbing for API Call

[SJDiggs]

The vehicle listings API leveraged was very particular about the parameters used to provide the expected data. For example the Params are case sensitive, so passing in make="ranger" would result in false positives as the expected param on the API is expecting it to be "Ranger". I implemented the following solution to ensure the first letter of each 'make' param being passed is converted to uppercase by using the charAt(0) ((first character)) and toUpperCase method, then using slice to replace the first letter with the corresponding uppercase letter.

const handleFindMeClick = async (make, model, year) => {

    // Only grab the first word in 'model' otherwise we will get false positives from the fetch
    let fmtModel = model.split(' ')[0];

    // Check for exceptions for vehicles like 'model 3', 'santa fe', etc
    if (fmtModel.toLowerCase() === 'model' || fmtModel.toLowerCase() === 'santa') {
        fmtModel = model; // Keep the original make for exceptions
    } else {
        fmtModel = fmtModel.charAt(0).toUpperCase() + fmtModel.slice(1);
    }

    // The listings api will provide accurate results only if the first letter in make and model is capitalized
    const capMake = make.charAt(0).toUpperCase() + make.slice(1);
    const capModel = fmtModel.charAt(0).toUpperCase() + fmtModel.slice(1);

    const url = import.meta.env.VITE_LISTINGS_URL
    const apiKey = import.meta.env.VITE_LISTINGS_API_KEY

    try {
        const response = await fetch(`${url}apiKey=${apiKey}&make=${capMake}&model=${capModel}&year_min=${year}&year_max=${year}`)

[doniellekinchen]

I really appreciate that you fixed this case sensitivity. Good job on the code structure and finding the work-around to make it more accessible to users. I sometimes do not like using sentence casing on first hand, so being able to just type with the lowercase casing in mind is neat!