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 acoords
state, agetISSCoords
function and auseEffect
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 theControls
component (you will adapt this in a minute).
- the
-
Implement fetching of the same data with
SWR
.SWR
is already installed, so you just have to import it.- Handle the
isLoading
anderror
states provided bySWR
as well. - Make sure
data
is defined before working with it. - Remember to adapt the
fetcher
function to create a propererror
state as explained in the SWR docs. - Note:
SWR
needs you to destructure adata
object, but theMap
andControls
component needlongitude
andlatitude
as separate props; how can you simply pass the coordinates fromdata
without changing theMap/index.js
andControls/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 theuseSWR
hook. - Pass it to the
onRefresh
prop of theControls
component. You can use an inline function as inonReload={() => 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.
To work locally, please install the dependencies using npm i
first.
Run npm run dev
to start a development server and open the displayed URL in a browser.
Use npm run test
to run the tests.
Select the "Preview: 3000" tab to view this project.
Select the "Tests: logs" tab to view the tests.
The
npm run dev
andnpm run test
scripts run automatically.
You can use the following commands:
npm run dev
to start a development servernpm run build
to build the projectnpm run start
to start a production servernpm run test
to run the testsnpm run lint
to run the linter