import React, { useMemo } from 'react' import axios from 'axios' import { createContextHook } from '../utils/hooks' import { REST_API_AXIOS_CONFIG } from '../utils/restAPI' import { buildSnippetsAPI } from '../utils/snippets/api' import type { SnippetsAPI } from '../utils/snippets/api' import type { PropsWithChildren } from 'react' import type { AxiosInstance, AxiosResponse } from 'axios' export interface RestAPIContext { api: RestAPI snippetsAPI: SnippetsAPI axiosInstance: AxiosInstance } export interface RestAPI { get: (url: string) => Promise post: (url: string, data?: object) => Promise put: (url: string, data?: object) => Promise del: (url: string) => Promise } const debugRequest = async ( method: 'GET' | 'POST' | 'PUT' | 'DELETE', url: string, doRequest: Promise>, data?: D ): Promise => { console.debug(`${method} ${url}`, ...data ? [data] : []) const response = await doRequest console.debug('Response', response) return response.data } const buildRestAPI = (axiosInstance: AxiosInstance): RestAPI => ({ get: (url: string): Promise => debugRequest('GET', url, axiosInstance.get, never>(url)), post: (url: string, data?: object): Promise => debugRequest('POST', url, axiosInstance.post, typeof data>(url, data), data), del: (url: string): Promise => debugRequest('DELETE', url, axiosInstance.delete, never>(url)), put: (url: string, data?: object): Promise => debugRequest('PUT', url, axiosInstance.put, typeof data>(url, data), data) }) export const [RestAPIContext, useRestAPI] = createContextHook('RestAPI') export const WithRestAPIContext: React.FC = ({ children }) => { const axiosInstance = useMemo(() => axios.create(REST_API_AXIOS_CONFIG), []) const api = useMemo(() => buildRestAPI(axiosInstance), [axiosInstance]) const snippetsAPI = useMemo(() => buildSnippetsAPI(api), [api]) const value: RestAPIContext = { api, snippetsAPI, axiosInstance } return {children} }