← All changes | js/hooks/useRestAPI.tsx +38 -23 3.9.6 → trunk View file →

		@@ -1,22 +1,20 @@
1	1	import React, { useMemo } from 'react'
2	2	import axios from 'axios'
3		-import { createContextHook } from '../utils/hooks'
4		-import { REST_API_AXIOS_CONFIG } from '../utils/restAPI'
5		-import { buildSnippetsAPI } from '../utils/snippets/api'
6		-import type { SnippetsAPI } from '../utils/snippets/api'
	3	+import { createContextHook } from '../utils/bootstrap'
	4	+import { REST_API_AXIOS_CONFIG, applyMethodOverride, applyRestNonce, listenForNonceRefresh } from '../utils/restAPI'
7	5	import type { PropsWithChildren } from 'react'
8		-import type { AxiosInstance, AxiosResponse } from 'axios'
	6	+import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
9	7
10	8	export interface RestAPIContext {
11	9	api: RestAPI
12		- snippetsAPI: SnippetsAPI
13	10	axiosInstance: AxiosInstance
14	11	}
15	12
16	13	export interface RestAPI {
17	14	get: <T>(url: string) => Promise<T>
18		- post: <T>(url: string, data?: object) => Promise<T>
	15	+ getResponse: <T>(url: string) => Promise<AxiosResponse<T>>
	16	+ post: <T, D = never>(url: string, data?: D, config?: AxiosRequestConfig<D>) => Promise<T>
19	17	put: <T>(url: string, data?: object) => Promise<T>
20	18	del: <T>(url: string) => Promise<T>
21	19	}
22	20
		@@ -24,37 +22,54 @@
24	22	method: 'GET' | 'POST' | 'PUT' | 'DELETE',
25	23	url: string,
26	24	doRequest: Promise<AxiosResponse<T, D>>,
27	25	data?: D
28		-): Promise<T> => {
29		- console.debug(`${method} ${url}`, ...data ? [data] : [])
30		- const response = await doRequest
31		- console.debug('Response', response)
32		- return response.data
	26	+): Promise<AxiosResponse<T>> => {
	27	+ if (window.CODE_SNIPPETS?.debug) {
	28	+ console.debug(`${method} ${url}`, ...data ? [data] : [])
	29	+ const response = await doRequest
	30	+ console.debug('Response', response)
	31	+ return response
	32	+ } else {
	33	+ return await doRequest
	34	+ }
33	35	}
34	36
35	37	const buildRestAPI = (axiosInstance: AxiosInstance): RestAPI => ({
	38	+ getResponse: <T, >(url: string): Promise<AxiosResponse<T>> =>
	39	+ debugRequest('GET', url, axiosInstance.get<T, AxiosResponse<T, never>, never>(url)),
	40	+
36	41	get: <T, >(url: string): Promise<T> =>
37		- debugRequest('GET', url, axiosInstance.get<T, AxiosResponse<T, never>, never>(url)),
	42	+ debugRequest('GET', url, axiosInstance.get<T, AxiosResponse<T, never>, never>(url))
	43	+ .then(response => response.data),
38	44
39		- post: <T, >(url: string, data?: object): Promise<T> =>
40		- debugRequest('POST', url, axiosInstance.post<T, AxiosResponse<T, typeof data>, typeof data>(url, data), data),
	45	+ post: <T, D = never>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<T> =>
	46	+ debugRequest('POST', url, axiosInstance.post<T, AxiosResponse<T>>(url, data, config), data)
	47	+ .then(response => response.data),
41	48
42	49	del: <T, >(url: string): Promise<T> =>
43		- debugRequest('DELETE', url, axiosInstance.delete<T, AxiosResponse<T, never>, never>(url)),
	50	+ debugRequest('DELETE', url, axiosInstance.delete<T, AxiosResponse<T, never>, never>(url))
	51	+ .then(response => response.data),
44	52
45	53	put: <T, >(url: string, data?: object): Promise<T> =>
46		- debugRequest('PUT', url, axiosInstance.put<T, AxiosResponse<T, typeof data>, typeof data>(url, data), data)
	54	+ debugRequest('PUT', url, axiosInstance.put<T, AxiosResponse<T>>(url, data), data)
	55	+ .then(response => response.data),
47	56	})
48	57
49		-export const [RestAPIContext, useRestAPI] = createContextHook<RestAPIContext>('RestAPI')
	58	+const [Context, useRestAPI] = createContextHook<RestAPIContext>('useRestAPI')
50	59
51	60	export const WithRestAPIContext: React.FC<PropsWithChildren> = ({ children }) => {
52		- const axiosInstance = useMemo(() => axios.create(REST_API_AXIOS_CONFIG), [])
	61	+ const axiosInstance = useMemo(() => {
	62	+ const instance = axios.create(REST_API_AXIOS_CONFIG)
	63	+ instance.interceptors.request.use(applyRestNonce)
	64	+ instance.interceptors.request.use(applyMethodOverride)
	65	+ listenForNonceRefresh()
	66	+ return instance
	67	+ }, [])
53	68
54	69	const api = useMemo(() => buildRestAPI(axiosInstance), [axiosInstance])
55		- const snippetsAPI = useMemo(() => buildSnippetsAPI(api), [api])
	70	+ const value: RestAPIContext = { api, axiosInstance }
56	71
57		- const value: RestAPIContext = { api, snippetsAPI, axiosInstance }
	72	+ return <Context.Provider value={value}>{children}</Context.Provider>
	73	+}
58	74
59		- return <RestAPIContext.Provider value={value}>{children}</RestAPIContext.Provider>
60		-}
	75	+export { useRestAPI }