diff --git a/packages/app-webhooks/@typing/App.d.ts b/packages/app-webhooks/@typing/App.d.ts index bcd996c..6d05345 100644 --- a/packages/app-webhooks/@typing/App.d.ts +++ b/packages/app-webhooks/@typing/App.d.ts @@ -4,39 +4,30 @@ declare module 'App' { export interface WebhookDetailsContextValue { state: WebhookDetailsContextState refetch: () => Promise - deleteWebhook: () => Promise resetWebhookCircuit: () => Promise } export interface WebhookDetailsContextState { data?: Webhook isLoading: boolean - isDeleting: boolean - isCircuitResetting: boolean - isPolling: boolean isNotFound: boolean } export interface WebhookDeleteContextValue extends Omit { state: WebhookFormContextState + deleteWebhook: () => Promise } - export type WebhookDeleteContextState = Omit< - WebhookDetailsContextState, - 'isCircuitResetting' - > + export interface WebhookDeleteContextState + extends WebhookDetailsContextState { + isDeleting: boolean + } export interface WebhookFormContextValue - extends Omit< - WebhookDetailsContextValue, - 'deleteWebhook' | 'resetWebhookCircuit' | 'state' - > { + extends Omit { state: WebhookFormContextState } - export type WebhookFormContextState = Omit< - WebhookDetailsContextState, - 'isCircuitResetting' - > + export interface WebhookFormContextState extends WebhookDetailsContextState {} } diff --git a/packages/app-webhooks/src/components/Delete/Provider.tsx b/packages/app-webhooks/src/components/Delete/Provider.tsx index 12b5863..19ff133 100644 --- a/packages/app-webhooks/src/components/Delete/Provider.tsx +++ b/packages/app-webhooks/src/components/Delete/Provider.tsx @@ -6,8 +6,7 @@ import { useCallback, useContext, useEffect, - useReducer, - useRef + useReducer } from 'react' import { initialState, initialValues } from './data' import { reducer } from './reducer' @@ -18,8 +17,6 @@ interface WebhookDeleteProviderProps { children: ((props: WebhookDeleteContextValue) => ReactNode) | ReactNode } -const POLLING_INTERVAL = 4000 - const Context = createContext(initialValues) export const useWebhookDeleteContext = (): WebhookDeleteContextValue => useContext(Context) @@ -30,56 +27,32 @@ export function WebhookDeleteProvider({ children }: WebhookDeleteProviderProps): JSX.Element { const [state, dispatch] = useReducer(reducer, initialState) - const intervalId = useRef(null) - const fetchWebhook = useCallback( - async ({ handleLoadingState }: { handleLoadingState: boolean }) => { - handleLoadingState && dispatch({ type: 'setLoading', payload: true }) - try { - const webhookDelete = await sdkClient.webhooks.retrieve(webhookId) - dispatch({ type: 'setData', payload: webhookDelete }) - } catch { - dispatch({ type: 'setNotFound', payload: true }) - dispatch({ type: 'togglePolling', payload: false }) - } - handleLoadingState && dispatch({ type: 'setLoading', payload: false }) - }, - [webhookId] - ) + const fetchWebhook = useCallback(async () => { + try { + const webhook = await sdkClient.webhooks.retrieve(webhookId) + dispatch({ type: 'webhook/loaded', payload: webhook }) + } catch { + dispatch({ type: 'webhook/onError' }) + } + }, [webhookId]) const deleteWebhook = useCallback(async (): Promise => { - dispatch({ type: 'setDeleting', payload: true }) return await sdkClient.webhooks .delete(webhookId) .then(() => true) .catch(() => { - dispatch({ type: 'setDeleting', payload: false }) return false }) }, [webhookId]) - useEffect( - function startPolling() { - void fetchWebhook({ handleLoadingState: true }) - if (!state.isPolling) { - return - } - intervalId.current = setInterval(() => { - void fetchWebhook({ handleLoadingState: false }) - }, POLLING_INTERVAL) - - return () => { - if (intervalId.current != null) { - clearInterval(intervalId.current) - } - } - }, - [state.isPolling] - ) + useEffect(function init() { + void fetchWebhook() + }, []) const value: WebhookDeleteContextValue = { state, - refetch: async () => await fetchWebhook({ handleLoadingState: false }), + refetch: async () => await fetchWebhook(), deleteWebhook } diff --git a/packages/app-webhooks/src/components/Delete/data.ts b/packages/app-webhooks/src/components/Delete/data.ts index dee562d..d8afe3a 100644 --- a/packages/app-webhooks/src/components/Delete/data.ts +++ b/packages/app-webhooks/src/components/Delete/data.ts @@ -1,16 +1,13 @@ -import { WebhookDetailsContextState, WebhookDetailsContextValue } from 'App' +import { WebhookDeleteContextState, WebhookDeleteContextValue } from 'App' -export const initialState: WebhookDetailsContextState = { +export const initialState: WebhookDeleteContextState = { isLoading: true, - isPolling: false, isDeleting: false, - isCircuitResetting: false, isNotFound: false } -export const initialValues: WebhookDetailsContextValue = { +export const initialValues: WebhookDeleteContextValue = { state: initialState, refetch: async () => undefined, - deleteWebhook: async () => false, - resetWebhookCircuit: async () => {} + deleteWebhook: async () => false } diff --git a/packages/app-webhooks/src/components/Delete/reducer.ts b/packages/app-webhooks/src/components/Delete/reducer.ts index 397ea4b..c7e6fad 100644 --- a/packages/app-webhooks/src/components/Delete/reducer.ts +++ b/packages/app-webhooks/src/components/Delete/reducer.ts @@ -2,41 +2,25 @@ import { Webhook } from '@commercelayer/sdk' import { WebhookDeleteContextState } from 'App' type Action = - | { type: 'setLoading'; payload: boolean } - | { type: 'setDeleting'; payload: boolean } - | { type: 'setNotFound'; payload: boolean } - | { type: 'setData'; payload: Webhook } - | { type: 'togglePolling'; payload: boolean } + | { type: 'webhook/loaded'; payload: Webhook } + | { type: 'webhook/onError' } export const reducer = ( state: WebhookDeleteContextState, action: Action ): WebhookDeleteContextState | never => { switch (action.type) { - case 'setLoading': + case 'webhook/loaded': return { ...state, - isLoading: action.payload + data: action.payload, + isLoading: false } - case 'setDeleting': + case 'webhook/onError': return { ...state, - isDeleting: action.payload - } - case 'setNotFound': - return { - ...state, - isNotFound: action.payload - } - case 'setData': - return { - ...state, - data: action.payload - } - case 'togglePolling': - return { - ...state, - isPolling: action.payload + isNotFound: true, + isLoading: false } default: return state diff --git a/packages/app-webhooks/src/components/Details/Provider.tsx b/packages/app-webhooks/src/components/Details/Provider.tsx index 3bed4e4..f04606f 100644 --- a/packages/app-webhooks/src/components/Details/Provider.tsx +++ b/packages/app-webhooks/src/components/Details/Provider.tsx @@ -6,8 +6,7 @@ import { useCallback, useContext, useEffect, - useReducer, - useRef + useReducer } from 'react' import { initialState, initialValues } from './data' import { reducer } from './reducer' @@ -18,8 +17,6 @@ interface WebhookDetailsProviderProps { children: ((props: WebhookDetailsContextValue) => ReactNode) | ReactNode } -const POLLING_INTERVAL = 4000 - const Context = createContext(initialValues) export const useWebhookDetailsContext = (): WebhookDetailsContextValue => useContext(Context) @@ -30,71 +27,39 @@ export function WebhookDetailsProvider({ children }: WebhookDetailsProviderProps): JSX.Element { const [state, dispatch] = useReducer(reducer, initialState) - const intervalId = useRef(null) - const fetchWebhook = useCallback( - async ({ handleLoadingState }: { handleLoadingState: boolean }) => { - handleLoadingState && dispatch({ type: 'setLoading', payload: true }) - try { - const webhookDetails = await sdkClient.webhooks.retrieve(webhookId, { - include: ['last_event_callbacks'] - }) - dispatch({ type: 'setData', payload: webhookDetails }) - } catch { - dispatch({ type: 'setNotFound', payload: true }) - dispatch({ type: 'togglePolling', payload: false }) - dispatch({ type: 'setLoading', payload: false }) - } - handleLoadingState && dispatch({ type: 'setLoading', payload: false }) - }, - [webhookId] - ) - - const deleteWebhook = useCallback(async (): Promise => { - dispatch({ type: 'setDeleting', payload: true }) - return await sdkClient.webhooks - .delete(webhookId) - .then(() => true) - .catch(() => { - dispatch({ type: 'setDeleting', payload: false }) - return false + const fetchWebhook = useCallback(async () => { + try { + const webhook = await sdkClient.webhooks.retrieve(webhookId, { + include: ['last_event_callbacks'] }) + dispatch({ type: 'webhook/loaded', payload: webhook }) + } catch { + dispatch({ type: 'webhook/onError' }) + } }, [webhookId]) const resetWebhookCircuit = useCallback(async (): Promise => { - dispatch({ type: 'setCircuitResetting', payload: true }) await sdkClient.webhooks - .update({ id: webhookId, _reset_circuit: true }) - .then(() => true) - .catch(() => { - dispatch({ type: 'setCircuitResetting', payload: false }) - void fetchWebhook({ handleLoadingState: true }) + .update( + { id: webhookId, _reset_circuit: true }, + { + include: ['last_event_callbacks'] + } + ) + .then((webhook) => { + dispatch({ type: 'webhook/loaded', payload: webhook }) }) + .catch(() => {}) }, [webhookId]) - useEffect( - function startPolling() { - void fetchWebhook({ handleLoadingState: true }) - if (!state.isPolling) { - return - } - intervalId.current = setInterval(() => { - void fetchWebhook({ handleLoadingState: false }) - }, POLLING_INTERVAL) - - return () => { - if (intervalId.current != null) { - clearInterval(intervalId.current) - } - } - }, - [state.isPolling] - ) + useEffect(function init() { + void fetchWebhook() + }, []) const value: WebhookDetailsContextValue = { state, - refetch: async () => await fetchWebhook({ handleLoadingState: false }), - deleteWebhook, + refetch: async () => await fetchWebhook(), resetWebhookCircuit } diff --git a/packages/app-webhooks/src/components/Details/data.ts b/packages/app-webhooks/src/components/Details/data.ts index dee562d..53aea62 100644 --- a/packages/app-webhooks/src/components/Details/data.ts +++ b/packages/app-webhooks/src/components/Details/data.ts @@ -2,15 +2,11 @@ import { WebhookDetailsContextState, WebhookDetailsContextValue } from 'App' export const initialState: WebhookDetailsContextState = { isLoading: true, - isPolling: false, - isDeleting: false, - isCircuitResetting: false, isNotFound: false } export const initialValues: WebhookDetailsContextValue = { state: initialState, refetch: async () => undefined, - deleteWebhook: async () => false, resetWebhookCircuit: async () => {} } diff --git a/packages/app-webhooks/src/components/Details/reducer.ts b/packages/app-webhooks/src/components/Details/reducer.ts index 250f2a6..847c0b5 100644 --- a/packages/app-webhooks/src/components/Details/reducer.ts +++ b/packages/app-webhooks/src/components/Details/reducer.ts @@ -2,47 +2,25 @@ import { Webhook } from '@commercelayer/sdk' import { WebhookDetailsContextState } from 'App' type Action = - | { type: 'setLoading'; payload: boolean } - | { type: 'setDeleting'; payload: boolean } - | { type: 'setCircuitResetting'; payload: boolean } - | { type: 'setNotFound'; payload: boolean } - | { type: 'setData'; payload: Webhook } - | { type: 'togglePolling'; payload: boolean } + | { type: 'webhook/loaded'; payload: Webhook } + | { type: 'webhook/onError' } export const reducer = ( state: WebhookDetailsContextState, action: Action ): WebhookDetailsContextState | never => { switch (action.type) { - case 'setLoading': + case 'webhook/loaded': return { ...state, - isLoading: action.payload + data: action.payload, + isLoading: false } - case 'setDeleting': + case 'webhook/onError': return { ...state, - isDeleting: action.payload - } - case 'setCircuitResetting': - return { - ...state, - isCircuitResetting: action.payload - } - case 'setNotFound': - return { - ...state, - isNotFound: action.payload - } - case 'setData': - return { - ...state, - data: action.payload - } - case 'togglePolling': - return { - ...state, - isPolling: action.payload + isNotFound: true, + isLoading: false } default: return state diff --git a/packages/app-webhooks/src/components/EventCallbacks/Provider.tsx b/packages/app-webhooks/src/components/EventCallbacks/Provider.tsx index af1b2d6..9b2224d 100644 --- a/packages/app-webhooks/src/components/EventCallbacks/Provider.tsx +++ b/packages/app-webhooks/src/components/EventCallbacks/Provider.tsx @@ -10,8 +10,7 @@ import { useCallback, useEffect, useReducer, - useContext, - useRef + useContext } from 'react' import { initialValues, initialState } from './data' @@ -23,7 +22,6 @@ interface ListEventCallbackProviderProps { children: ((props: ListEventCallbackContextValue) => ReactNode) | ReactNode sdkClient: CommerceLayerClient } -const POLLING_INTERVAL = 10000 const Context = createContext(initialValues) @@ -37,61 +35,37 @@ export function ListEventCallbackProvider({ sdkClient }: ListEventCallbackProviderProps): JSX.Element { const [state, dispatch] = useReducer(reducer, initialState) - const intervalId = useRef(null) const changePage = useCallback( - (page: number) => dispatch({ type: 'changePage', payload: page }), + (page: number) => + dispatch({ type: 'eventCallbacks/changePage', payload: page }), [] ) - const fetchList = useCallback( - async ({ handleLoadingState }: { handleLoadingState: boolean }) => { - handleLoadingState && dispatch({ type: 'setLoading', payload: true }) - if (webhookId != null) { - try { - const list = await getAllEventCallbacks({ - cl: sdkClient, - state, - webhookId, - pageSize - }) - dispatch({ type: 'setList', payload: list }) - } finally { - handleLoadingState && dispatch({ type: 'setLoading', payload: false }) - } - } - }, - [webhookId, state.currentPage] - ) + const fetchList = useCallback(async () => { + if (webhookId != null) { + const eventCallbacks = await getAllEventCallbacks({ + cl: sdkClient, + state, + webhookId, + pageSize + }) + dispatch({ type: 'eventCallbacks/loaded', payload: eventCallbacks }) + } + }, [webhookId, state.currentPage]) useEffect( function handleChangePageSkippingFirstRender() { if (state.list?.meta.currentPage != null) { - void fetchList({ handleLoadingState: false }) + void fetchList() } }, [webhookId, state.currentPage] ) - useEffect( - function startPolling() { - void fetchList({ handleLoadingState: true }) - if (!state.isPolling) { - return - } - // start polling - intervalId.current = setInterval(() => { - void fetchList({ handleLoadingState: false }) - }, POLLING_INTERVAL) - - return () => { - if (intervalId.current != null) { - clearInterval(intervalId.current) - } - } - }, - [state.isPolling] - ) + useEffect(function init() { + void fetchList() + }, []) const value: ListEventCallbackContextValue = { state, diff --git a/packages/app-webhooks/src/components/EventCallbacks/data.ts b/packages/app-webhooks/src/components/EventCallbacks/data.ts index 7fe7663..edc559c 100644 --- a/packages/app-webhooks/src/components/EventCallbacks/data.ts +++ b/packages/app-webhooks/src/components/EventCallbacks/data.ts @@ -5,7 +5,6 @@ import { export const initialState: ListEventCallbackContextState = { isLoading: true, - isPolling: false, currentPage: 1, sort: { created_at: 'desc' diff --git a/packages/app-webhooks/src/components/EventCallbacks/reducer.ts b/packages/app-webhooks/src/components/EventCallbacks/reducer.ts index 7138480..8708137 100644 --- a/packages/app-webhooks/src/components/EventCallbacks/reducer.ts +++ b/packages/app-webhooks/src/components/EventCallbacks/reducer.ts @@ -3,38 +3,28 @@ import { ListResponse } from '@commercelayer/sdk/lib/cjs/resource' import { ListEventCallbackContextState } from 'App' type Action = - | { type: 'setLoading'; payload: boolean } - | { type: 'setList'; payload: ListResponse } - | { type: 'changePage'; payload: number } - | { type: 'togglePolling'; payload: boolean } - | { type: 'sort'; payload: 'asc' | 'desc' } + | { type: 'eventCallbacks/loaded'; payload: ListResponse } + | { type: 'eventCallbacks/changePage'; payload: number } + | { type: 'eventCallbacks/changeSort'; payload: 'asc' | 'desc' } export const reducer = ( state: ListEventCallbackContextState, action: Action ): ListEventCallbackContextState => { switch (action.type) { - case 'setLoading': + case 'eventCallbacks/loaded': return { ...state, - isLoading: action.payload + list: action.payload, + isLoading: false } - case 'setList': + case 'eventCallbacks/changePage': return { ...state, - list: action.payload + currentPage: action.payload, + isLoading: true } - case 'changePage': - return { - ...state, - currentPage: action.payload - } - case 'togglePolling': - return { - ...state, - isPolling: action.payload - } - case 'sort': + case 'eventCallbacks/changeSort': return { ...state, sort: { diff --git a/packages/app-webhooks/src/components/EventCallbacks/types.d.ts b/packages/app-webhooks/src/components/EventCallbacks/types.d.ts index 07d58d9..bfcbe32 100644 --- a/packages/app-webhooks/src/components/EventCallbacks/types.d.ts +++ b/packages/app-webhooks/src/components/EventCallbacks/types.d.ts @@ -7,16 +7,9 @@ declare module 'App' { changePage: (page: number) => void } - export type ListEventCallbackAllowedStatusType = - | 'completed' - | 'interrupted' - | 'in_progress' - | 'pending' - export interface ListEventCallbackContextState { list?: ListResponse isLoading: boolean - isPolling: boolean currentPage: number sort: { created_at: 'asc' | 'desc' diff --git a/packages/app-webhooks/src/components/Form/Provider.tsx b/packages/app-webhooks/src/components/Form/Provider.tsx index d452011..52c3133 100644 --- a/packages/app-webhooks/src/components/Form/Provider.tsx +++ b/packages/app-webhooks/src/components/Form/Provider.tsx @@ -6,8 +6,7 @@ import { useCallback, useContext, useEffect, - useReducer, - useRef + useReducer } from 'react' import { initialState, initialValues } from './data' import { reducer } from './reducer' @@ -18,8 +17,6 @@ interface WebhookFormProviderProps { children: ((props: WebhookFormContextValue) => ReactNode) | ReactNode } -const POLLING_INTERVAL = 4000 - const Context = createContext(initialValues) export const useWebhookFormContext = (): WebhookFormContextValue => useContext(Context) @@ -30,46 +27,23 @@ export function WebhookFormProvider({ children }: WebhookFormProviderProps): JSX.Element { const [state, dispatch] = useReducer(reducer, initialState) - const intervalId = useRef(null) - - const fetchJob = useCallback( - async ({ handleLoadingState }: { handleLoadingState: boolean }) => { - handleLoadingState && dispatch({ type: 'setLoading', payload: true }) - try { - const webhookForm = await sdkClient.webhooks.retrieve(webhookId) - dispatch({ type: 'setData', payload: webhookForm }) - } catch { - dispatch({ type: 'setNotFound', payload: true }) - dispatch({ type: 'togglePolling', payload: false }) - dispatch({ type: 'setLoading', payload: false }) - } - handleLoadingState && dispatch({ type: 'setLoading', payload: false }) - }, - [webhookId] - ) - useEffect( - function startPolling() { - void fetchJob({ handleLoadingState: true }) - if (!state.isPolling) { - return - } - intervalId.current = setInterval(() => { - void fetchJob({ handleLoadingState: false }) - }, POLLING_INTERVAL) + const fetchJob = useCallback(async () => { + try { + const webhook = await sdkClient.webhooks.retrieve(webhookId) + dispatch({ type: 'webhook/loaded', payload: webhook }) + } catch { + dispatch({ type: 'webhook/onError' }) + } + }, [webhookId]) - return () => { - if (intervalId.current != null) { - clearInterval(intervalId.current) - } - } - }, - [state.isPolling] - ) + useEffect(function init() { + void fetchJob() + }, []) const value: WebhookFormContextValue = { state, - refetch: async () => await fetchJob({ handleLoadingState: false }) + refetch: async () => await fetchJob() } return ( diff --git a/packages/app-webhooks/src/components/Form/WebhookForm.tsx b/packages/app-webhooks/src/components/Form/WebhookForm.tsx index ccfadfc..f55dd4a 100644 --- a/packages/app-webhooks/src/components/Form/WebhookForm.tsx +++ b/packages/app-webhooks/src/components/Form/WebhookForm.tsx @@ -87,7 +87,6 @@ const WebhookForm = ({ webhookData }: Props): JSX.Element | null => { const hasApiError = apiError != null && apiError.length > 0 if (sdkClient == null) { - console.warn('Waiting for SDK client') return null } diff --git a/packages/app-webhooks/src/components/Form/data.ts b/packages/app-webhooks/src/components/Form/data.ts index d884ad0..1417d77 100644 --- a/packages/app-webhooks/src/components/Form/data.ts +++ b/packages/app-webhooks/src/components/Form/data.ts @@ -2,8 +2,6 @@ import { WebhookFormContextState, WebhookFormContextValue } from 'App' export const initialState: WebhookFormContextState = { isLoading: true, - isPolling: false, - isDeleting: false, isNotFound: false } diff --git a/packages/app-webhooks/src/components/Form/reducer.ts b/packages/app-webhooks/src/components/Form/reducer.ts index d3f34da..827d8a6 100644 --- a/packages/app-webhooks/src/components/Form/reducer.ts +++ b/packages/app-webhooks/src/components/Form/reducer.ts @@ -2,41 +2,25 @@ import { Webhook } from '@commercelayer/sdk' import { WebhookFormContextState } from 'App' type Action = - | { type: 'setLoading'; payload: boolean } - | { type: 'setDeleting'; payload: boolean } - | { type: 'setNotFound'; payload: boolean } - | { type: 'setData'; payload: Webhook } - | { type: 'togglePolling'; payload: boolean } + | { type: 'webhook/onError' } + | { type: 'webhook/loaded'; payload: Webhook } export const reducer = ( state: WebhookFormContextState, action: Action ): WebhookFormContextState | never => { switch (action.type) { - case 'setLoading': + case 'webhook/onError': return { ...state, - isLoading: action.payload + isNotFound: true, + isLoading: false } - case 'setDeleting': + case 'webhook/loaded': return { ...state, - isDeleting: action.payload - } - case 'setNotFound': - return { - ...state, - isNotFound: action.payload - } - case 'setData': - return { - ...state, - data: action.payload - } - case 'togglePolling': - return { - ...state, - isPolling: action.payload + data: action.payload, + isLoading: false } default: return state diff --git a/packages/app-webhooks/src/components/List/Provider.tsx b/packages/app-webhooks/src/components/List/Provider.tsx index c78d3ff..6f47f6b 100644 --- a/packages/app-webhooks/src/components/List/Provider.tsx +++ b/packages/app-webhooks/src/components/List/Provider.tsx @@ -7,8 +7,7 @@ import { useCallback, useEffect, useReducer, - useContext, - useRef + useContext } from 'react' import { initialValues, initialState } from './data' @@ -19,7 +18,6 @@ interface ListWebhookProviderProps { children: ((props: ListWebhookContextValue) => ReactNode) | ReactNode sdkClient: CommerceLayerClient } -const POLLING_INTERVAL = 10000 const Context = createContext(initialValues) @@ -31,72 +29,33 @@ export function ListWebhookProvider({ sdkClient }: ListWebhookProviderProps): JSX.Element { const [state, dispatch] = useReducer(reducer, initialState) - const intervalId = useRef(null) const changePage = useCallback( - (page: number) => dispatch({ type: 'changePage', payload: page }), + (page: number) => dispatch({ type: 'webhooks/changePage', payload: page }), [] ) - const fetchList = useCallback( - async ({ handleLoadingState }: { handleLoadingState: boolean }) => { - handleLoadingState && dispatch({ type: 'setLoading', payload: true }) - try { - const list = await getAllWebhooks({ - cl: sdkClient, - state, - pageSize - }) - dispatch({ type: 'setList', payload: list }) - } finally { - handleLoadingState && dispatch({ type: 'setLoading', payload: false }) - } - }, - [state.currentPage] - ) + const fetchList = useCallback(async () => { + const webhooks = await getAllWebhooks({ + cl: sdkClient, + state, + pageSize + }) + dispatch({ type: 'webhooks/loaded', payload: webhooks }) + }, [state.currentPage]) useEffect( function handleChangePageSkippingFirstRender() { if (state.list?.meta.currentPage != null) { - void fetchList({ handleLoadingState: false }) + void fetchList() } }, [state.currentPage] ) - useEffect( - function handlePollingState() { - if (state.list == null || state.list.length === 0) { - return - } - - const shouldPoll = state.list.some((job) => - statusForPolling.includes(job.circuit_state) - ) - dispatch({ type: 'togglePolling', payload: shouldPoll }) - }, - [state.list] - ) - - useEffect( - function startPolling() { - void fetchList({ handleLoadingState: true }) - if (!state.isPolling) { - return - } - // start polling - intervalId.current = setInterval(() => { - void fetchList({ handleLoadingState: false }) - }, POLLING_INTERVAL) - - return () => { - if (intervalId.current != null) { - clearInterval(intervalId.current) - } - } - }, - [state.isPolling] - ) + useEffect(function init() { + void fetchList() + }, []) const value: ListWebhookContextValue = { state, @@ -126,5 +85,3 @@ const getAllWebhooks = async ({ include: ['last_event_callbacks'] }) } - -const statusForPolling: Array = ['closed', 'open'] diff --git a/packages/app-webhooks/src/components/List/data.ts b/packages/app-webhooks/src/components/List/data.ts index d73cf15..45a2103 100644 --- a/packages/app-webhooks/src/components/List/data.ts +++ b/packages/app-webhooks/src/components/List/data.ts @@ -2,7 +2,6 @@ import { ListWebhookContextValue, ListWebhookContextState } from 'App' export const initialState: ListWebhookContextState = { isLoading: true, - isPolling: false, currentPage: 1, sort: { created_at: 'desc' diff --git a/packages/app-webhooks/src/components/List/reducer.ts b/packages/app-webhooks/src/components/List/reducer.ts index 24e085d..a837fd8 100644 --- a/packages/app-webhooks/src/components/List/reducer.ts +++ b/packages/app-webhooks/src/components/List/reducer.ts @@ -3,38 +3,28 @@ import { ListResponse } from '@commercelayer/sdk/lib/cjs/resource' import { ListWebhookContextState } from 'App' type Action = - | { type: 'setLoading'; payload: boolean } - | { type: 'setList'; payload: ListResponse } - | { type: 'changePage'; payload: number } - | { type: 'togglePolling'; payload: boolean } - | { type: 'sort'; payload: 'asc' | 'desc' } + | { type: 'webhooks/loaded'; payload: ListResponse } + | { type: 'webhooks/changePage'; payload: number } + | { type: 'webhooks/changeSort'; payload: 'asc' | 'desc' } export const reducer = ( state: ListWebhookContextState, action: Action ): ListWebhookContextState => { switch (action.type) { - case 'setLoading': + case 'webhooks/loaded': return { ...state, - isLoading: action.payload + list: action.payload, + isLoading: false } - case 'setList': + case 'webhooks/changePage': return { ...state, - list: action.payload + currentPage: action.payload, + isLoading: true } - case 'changePage': - return { - ...state, - currentPage: action.payload - } - case 'togglePolling': - return { - ...state, - isPolling: action.payload - } - case 'sort': + case 'webhooks/changeSort': return { ...state, sort: { diff --git a/packages/app-webhooks/src/components/List/types.d.ts b/packages/app-webhooks/src/components/List/types.d.ts index 6e58c45..0dc5bd1 100644 --- a/packages/app-webhooks/src/components/List/types.d.ts +++ b/packages/app-webhooks/src/components/List/types.d.ts @@ -7,16 +7,9 @@ declare module 'App' { changePage: (page: number) => void } - export type ListWebhookAllowedStatusType = - | 'completed' - | 'interrupted' - | 'in_progress' - | 'pending' - export interface ListWebhookContextState { list?: ListResponse isLoading: boolean - isPolling: boolean currentPage: number sort: { created_at: 'asc' | 'desc' diff --git a/packages/app-webhooks/src/pages/DetailsPage.tsx b/packages/app-webhooks/src/pages/DetailsPage.tsx index a8176e7..f24db25 100644 --- a/packages/app-webhooks/src/pages/DetailsPage.tsx +++ b/packages/app-webhooks/src/pages/DetailsPage.tsx @@ -49,7 +49,6 @@ const DetailsPage = (): JSX.Element | null => { } if (sdkClient == null) { - console.warn('Waiting for SDK client') return } @@ -88,8 +87,11 @@ const DetailsPage = (): JSX.Element | null => { return ( - {({ state: { isLoading, data } }) => - isLoading ? ( + {({ state: { isLoading, data } }) => { + const showWebhookCircuit = + data?.last_event_callbacks !== undefined && + data?.last_event_callbacks.length > 0 + return isLoading ? ( ) : data == null ? ( @@ -102,12 +104,11 @@ const DetailsPage = (): JSX.Element | null => { }} actionButton={contextMenu} > - {data.last_event_callbacks !== undefined && - data.last_event_callbacks.length > 0 && ( - - - - )} + {showWebhookCircuit && ( + + + + )} @@ -119,7 +120,7 @@ const DetailsPage = (): JSX.Element | null => { ) - } + }} ) } diff --git a/packages/app-webhooks/src/pages/EditWebhookPage.tsx b/packages/app-webhooks/src/pages/EditWebhookPage.tsx index d8b5b17..1dd9846 100644 --- a/packages/app-webhooks/src/pages/EditWebhookPage.tsx +++ b/packages/app-webhooks/src/pages/EditWebhookPage.tsx @@ -42,7 +42,6 @@ const EditWebhookPage = (): JSX.Element | null => { } if (sdkClient == null) { - console.warn('Waiting for SDK client') return } diff --git a/packages/app-webhooks/src/pages/EventCallbacksPage.tsx b/packages/app-webhooks/src/pages/EventCallbacksPage.tsx index 888bedb..0f56264 100644 --- a/packages/app-webhooks/src/pages/EventCallbacksPage.tsx +++ b/packages/app-webhooks/src/pages/EventCallbacksPage.tsx @@ -46,7 +46,6 @@ function EventCallbacksPage(): JSX.Element { } if (sdkClient == null) { - console.warn('Waiting for SDK client') return } diff --git a/packages/app-webhooks/src/pages/ListPage.tsx b/packages/app-webhooks/src/pages/ListPage.tsx index 0f3ceed..0e3003b 100755 --- a/packages/app-webhooks/src/pages/ListPage.tsx +++ b/packages/app-webhooks/src/pages/ListPage.tsx @@ -32,7 +32,6 @@ function ListPage(): JSX.Element { const [_location, setLocation] = useLocation() if (sdkClient == null) { - console.warn('Waiting for SDK client') return } diff --git a/packages/app-webhooks/src/pages/NewWebhookPage.tsx b/packages/app-webhooks/src/pages/NewWebhookPage.tsx index b67ea09..6b42608 100644 --- a/packages/app-webhooks/src/pages/NewWebhookPage.tsx +++ b/packages/app-webhooks/src/pages/NewWebhookPage.tsx @@ -17,7 +17,6 @@ const NewWebhookPage = (): JSX.Element | null => { const [_location, setLocation] = useLocation() if (sdkClient == null) { - console.warn('Waiting for SDK client') return }