'How should I add error handling to the constructURL function

I'm working on a project that is helping me to learn about JavaScript for an incoming internship that I have. In the constructURL function I'm using an if-else statement to help me adjust the URL for a user that hasn't inputted the date, camera, or rover. I also want to throw an error that alerts the user about the missing fields that they haven't inputted any information into. How would I go about adding error handling to the constructURL function?

import './App.css';
import React, { useEffect, useState } from 'react';


const App = () => {

  const [photos, setPhotos] = useState([]);
  const [camera, setCamera] = useState('');
  const [rover, setRover] = useState('');
  const [date, setDate] = useState('');
  const [url, setURL] = useState('');

  let constructURL = (camera, rover, date) => {
    let userURL = "https://api.nasa.gov/mars-photos/api/v1/rovers/" + rover + "/photos?earth_date=" + date + "&camera=" + camera + "&api_key=DEMO_KEY";
    
    if(camera === ''){
      userURL = "https://api.nasa.gov/mars-photos/api/v1/rovers/" + rover + "/photos?earth_date" + date + "&api_key=DEMO_KEY";
    }
    else if(rover === ''){
      userURL = "https://api.nasa.gov/mars-photos/api/v1/photos?earth_date=" + date + "&camera=" + camera + "&api_key=DEMO_KEY";
    }
    else if(date === ''){
      userURL = "https://api.nasa.gov/mars-photos/api/v1/rovers/" + rover + "/photos?&camera=" + camera + "&api_key=DEMO_KEY";
    }
    else if(camera === '' && rover === ''){
      userURL = "https://api.nasa.gov/mars-photos/api/v1/photos?earth_date=" + date + "&api_key=DEMO_KEY";
    }
    else if(camera === '' && date === ''){
      userURL = "https://api.nasa.gov/mars-photos/api/v1/rovers/" + rover + "/photos?" + "&api_key=DEMO_KEY";
    }
    else if(rover === '' && date === ''){
      userURL = "https://api.nasa.gov/mars-photos/api/v1/camera=" + camera + "&api_key=DEMO_KEY";
    }
    else
    {
      console.log('Please enter a camera, rover, and date')
    }
    return userURL
    // Adjust the URL to make sure if the user hasn't inputted a camera, rover or date;
  }
  
  const getDate = (d) => {
    const inputedDate = d.target.value;
    setDate(d.target.value);
    console.log(date);
  }

  const getRover = (r) => {
    const inputedRover = r.target.value;
    setRover(r.target.value);
    console.log(inputedRover);
  }

  const getCamera = (c) => {
    const inputedCamera = c.target.value;
    setCamera(c.target.value);
    console.log(inputedCamera);
  }
  const gettingInfo = () => {
    fetch(url)
    .then((response) => {return response.json()
  }).then((result) => {setPhotos(result['photos'])})
    .catch(() => console.log("Fetch Failed")) 
  }; 

  useEffect(() => {
    const newUrl = constructURL(camera, rover, date)
    setURL(newUrl)
  },[date, camera, rover])

  return (
    <div className="App">
      <header className="App-header">
        <div id='container'>
          <div>
            <input type="text" id="date-picker" name="date-picker" placeholder="Enter a date" onChange={getDate}></input>
            <input type="text" id="rover" name="rover" placeholder="Enter a rover" onChange={getRover}></input>
            <input type="text" id="camera" name="camera" placeholder="Enter a camera" onChange={getCamera}></input>
          </div>
          <button onClick={gettingInfo}> Search </button>
          {photos? <div> {photos.map((item, index ) => {return <img key={index} src={item['img_src']}/>})} </div>: null}
        </div>
      </header>
      <body>
      </body>
    </div>
  );
}

export default App;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How should I add error handling to the constructURL function

Sources

Related Questions