This challenge asks you to refactor the existing code of the ISS Tracker to use SWR. You will need to fetch on interval and refetch on click of a button.

• Start the development server and make yourself familiar with the application.
• Switch to the ISSTracker component: it features a coords state, a getISSCoords function and a useEffect to fetch data on interval.

• Comment out all unnecessary code:

  • the coords state,
  • the getISSCoords function,
  • the useEffect,
  • for now: the onRefresh prop passed to the Controls component (you will adapt this in a minute).

• Implement fetching of the same data with SWR.

  • SWR is already installed, so you just have to import it.
  • Handle the isLoading and error states provided by SWR as well.
  • Make sure data is defined before working with it.
  • Remember to adapt the fetcher function to create a proper error state as explained in the SWR docs.
  • Note: SWR needs you to destructure a data object, but the Map and Controls component need longitude and latitude as separate props; how can you simply pass the coordinates from data without changing the Map/index.js and Controls/index.js files? (Hint: there are several ways to do this!)

✨ You should now see the exact position of the ISS again when refreshing the page!

• Refetch the data of the ISS on an interval of 5 seconds. See the SWR docs to find help how to do it.

The only thing not working yet is the "Refresh" button because the getISSCords function does not exist anymore.

• Destructure the mutate function provided by the useSWR hook.
• Pass it to the onRefresh prop of the Controls component. You can use an inline function as in onReload={() => handleReload()}.

✨ Congratulations, you can now see the exact position of the ISS whenever you want with the help of SWR!

• You only have to touch the /components/ISSTracker/index.js file.

Select the "Browser" tab to view this project. If this project contains tests, select the "Tests" tab to check your progress.

💡 Please note that Next.js support on CodeSandbox is not great.

To run project commands locally, you need to install the dependencies using npm i first.

You can then use the following commands:

• npm run dev to start the development server
• npm run build to create a production build
• npm run start to start the production build
• npm run test to run the tests in watch mode (if available)

💡 This project requires a bundler. You can use npm run dev to start the development server. You can then view the project in the browser at http://localhost:3000. The Live Preview Extension for Visual Studio Code will not work for this project.