Created
August 22, 2022 12:30
-
-
Save neysidev/b8fd0f5dc9f3bd210f533ed18df33490 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { useState } from "react"; | |
| const { REACT_APP_API_URL, REACT_APP_API_VERSION } = process.env; | |
| const buildUrl = (pathname, query) => { | |
| const apiUrl = `${REACT_APP_API_URL}api/v${REACT_APP_API_VERSION}`; | |
| const url = new URL(apiUrl + pathname); | |
| Object.keys(query).forEach(queryKey => | |
| url.searchParams.set(queryKey, query[queryKey].toString()) | |
| ); | |
| return url.toString(); | |
| }; | |
| export function useApiRequest( | |
| endpoint, | |
| { | |
| query = {}, | |
| method = "GET", // GET, POST, PUT, DELETE | |
| headers, | |
| body = undefined, | |
| responseType = "json", // json, text, blob, arraybuffer, document | |
| } = {} | |
| ) { | |
| const [result, setResult] = useState(null); | |
| const [error, setError] = useState(null); | |
| const [status, setStatus] = useState(null); | |
| const [loading, setLoading] = useState(false); | |
| const controller = new AbortController(); | |
| const fetchData = () => { | |
| const isJson = responseType === "json"; | |
| const auth = localStorage.getItem("auth"); | |
| const url = buildUrl(endpoint, query); | |
| const reqHeaders = new Headers(); | |
| if (auth) reqHeaders.append("Authorization", `Bearer ${auth}`); | |
| if (isJson) reqHeaders.append("Content-Type", "application/json"); | |
| if (headers) | |
| Object.entries(headers).forEach(([key, value]) => | |
| reqHeaders.append(key, value) | |
| ); | |
| setLoading(true); | |
| fetch(url, { | |
| method, | |
| headers: reqHeaders, | |
| body: body && isJson ? JSON.stringify(body) : body, | |
| signal: controller.signal, | |
| }) | |
| .then(async res => { | |
| const parsed = await res[responseType](); | |
| setStatus(res.status); | |
| setResult(parsed.result || parsed.data); | |
| }) | |
| .catch(err => { | |
| setStatus(err.status); | |
| setError(err); | |
| }) | |
| .finally(() => { | |
| setLoading(false); | |
| }); | |
| }; | |
| const cancelFetch = () => { | |
| controller.abort(); | |
| }; | |
| const resendFetch = () => { | |
| cancelFetch(); | |
| fetchData(); | |
| }; | |
| const data = { result, error, status, loading }; | |
| return [data, fetchData, cancelFetch, resendFetch]; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment