Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update useFetch.js #134

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion 18-pagination/final/src/useFetch.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,34 @@
// Importing necessary React hooks
import { useState, useEffect } from 'react'
// Importing the paginate function for pagination logic
import paginate from './utils'

// The URL for fetching the followers data from GitHub API
const url = 'https://api.github.com/users/john-smilga/followers?per_page=100'

export const useFetch = () => {
// State to track loading status
const [loading, setLoading] = useState(true)
// State to store the fetched data
const [data, setData] = useState([])

// Async function to fetch the data from the GitHub API
const getProducts = async () => {
// Fetching data from the URL
const response = await fetch(url)
// Parsing the response to JSON format
const data = await response.json()
// Applying pagination to the data and updating the state
setData(paginate(data))
// Setting loading to false once the data is fetched
setLoading(false)
}

// Using useEffect hook to call getProducts on component mount
useEffect(() => {
getProducts()
}, [])
}, []) // Empty dependency array to call only once on mount

// Returning the loading state and the fetched data
return { loading, data }
}