src/context/github/githubState.js - hooks - valslava/react-practice_project

src/context/github/githubState.js

81 строка2 KB

valslava2

profile page show detailed info about github user

29 мар 2024, 00:55

29 мар 2024, 00:55853f50e

import React, { useReducer } from "react"
import { GithubContext } from "./githubContext"
import { githubReducer } from "./githubReducer"
import { CLEAR_USERS, GET_REPOS, GET_USER, SEARCH_USERS, SET_LOADING } from "../types"
import axios from "axios"

//const CLIENT_ID  = process.env.REACT_APP_CLIENT_ID
//const CLIENT_SECRET = process.env.REACT_APP_CLIENT_SECRET

const GITHUB_TOKEN = process.env.REACT_APP_GITHUB_TOKEN

const axiosGitHub = axios.create({  
    baseURL: 'https://api.github.com/',  
    headers: {  
        Authorization: `token ${GITHUB_TOKEN}`  
    }  
})

export const GithubState = ({children}) => {
    const initialState = {
        user: {},
        users: [],
        loading: false,
        repos: []
    }
    const [state, dispatch] = useReducer(githubReducer, initialState)

    const search = async value => {
        
        const response = await axiosGitHub.get(`/search/users?q=${value}`)

        setLoading()

        dispatch({
            type: SEARCH_USERS,
            payload: response.data.items
        })
    }

    const getUser = async name => {
        
        const response = await axiosGitHub.get(`/users/${name}`)

        setLoading()

        dispatch({
            type: GET_USER,
            payload: response.data,
        })
    }

    const getRepos = async name => {
        
        const response = await axiosGitHub.get(`/users/${name}/repos?per_page=5`)
        // const response = await axios.get(
        //     withCreds(`https://api.github.com/users/${name}/repos?per_page=5&`)
        // )

        setLoading()

        dispatch({
            type: GET_REPOS,
            payload: response.data,
        })
    }
    
    const clearUsers = () => dispatch({type: CLEAR_USERS})

    const setLoading = () => dispatch({type: SET_LOADING})

    const {user, users, repos, loading} = state

    return (
        <GithubContext.Provider value={{
            search, getUser, getRepos, setLoading, clearUsers,
            user, users, repos, loading
        }}>
            {children}
        </GithubContext.Provider>
    )
}