diff --git a/src/fireedge/src/client/constants/index.js b/src/fireedge/src/client/constants/index.js index bb92de7fd4..d7eddf8340 100644 --- a/src/fireedge/src/client/constants/index.js +++ b/src/fireedge/src/client/constants/index.js @@ -73,8 +73,10 @@ export const DEBUG_LEVEL = { } export const SOCKETS = { - hooks: 'hooks', - provision: 'provision' + CONNECT: 'connect', + DISCONNECT: 'disconnect', + HOOKS: 'hooks', + PROVISION: 'provision' } export * as T from 'client/constants/translates' diff --git a/src/fireedge/src/client/features/One/actions.js b/src/fireedge/src/client/features/One/actions.js new file mode 100644 index 0000000000..14036d7107 --- /dev/null +++ b/src/fireedge/src/client/features/One/actions.js @@ -0,0 +1,8 @@ +import { createAction } from '@reduxjs/toolkit' + +export const updateResourceFromFetch = createAction( + 'update-resource-from-fetch', + ({ data, resource }) => { + return { payload: { type: resource, data } } + } +) diff --git a/src/fireedge/src/client/features/One/index.js b/src/fireedge/src/client/features/One/index.js index ba0efe5508..426f4927dc 100644 --- a/src/fireedge/src/client/features/One/index.js +++ b/src/fireedge/src/client/features/One/index.js @@ -1,2 +1,3 @@ export * from 'client/features/One/slice' export * from 'client/features/One/hooks' +export * from 'client/features/One/actions' diff --git a/src/fireedge/src/client/features/One/slice.js b/src/fireedge/src/client/features/One/slice.js index ab61478e3f..e911c9adb2 100644 --- a/src/fireedge/src/client/features/One/slice.js +++ b/src/fireedge/src/client/features/One/slice.js @@ -3,6 +3,7 @@ import { createSlice, isPending, isFulfilled } from '@reduxjs/toolkit' import { logout } from 'client/features/Auth/actions' import { updateResourceList } from 'client/features/One/utils' import { eventUpdateResourceState } from 'client/features/One/socket/actions' +import { updateResourceFromFetch } from 'client/features/One/actions' const getNameListFromType = type => RESOURCES[type.split('/')[0]] @@ -73,8 +74,11 @@ const { actions, reducer } = createSlice({ .addMatcher(({ type }) => type === logout.type, () => initial) .addMatcher( ({ type }) => - type.endsWith('/fulfilled') && - (type.includes(eventUpdateResourceState.typePrefix) || type.includes('/detail')), + type === updateResourceFromFetch.type || + ( + type.endsWith('/fulfilled') && + (type.includes(eventUpdateResourceState.typePrefix) || type.includes('/detail')) + ), (state, { payload, type }) => { // TYPE and DATA can be force by payload const name = getNameListFromType(payload?.type ?? type) diff --git a/src/fireedge/src/client/features/One/socket/actions.js b/src/fireedge/src/client/features/One/socket/actions.js index cdfb9bdbcf..935f86c4df 100644 --- a/src/fireedge/src/client/features/One/socket/actions.js +++ b/src/fireedge/src/client/features/One/socket/actions.js @@ -48,7 +48,7 @@ export const getResourceFromEventApi = (eventApi = {}) => { export const socketEventApi = createAsyncThunk( 'socket/event-api', ({ data }) => { - const { action, name, value, success, output } = getResourceFromEventApi(data) + const { action, name, value, success } = getResourceFromEventApi(data) // console.log({ action, name, value, success, output }) diff --git a/src/fireedge/src/client/features/One/utils.js b/src/fireedge/src/client/features/One/utils.js index 346d144928..fe179a099c 100644 --- a/src/fireedge/src/client/features/One/utils.js +++ b/src/fireedge/src/client/features/One/utils.js @@ -1,4 +1,4 @@ -import { createAsyncThunk, isPending } from '@reduxjs/toolkit' +import { createAsyncThunk } from '@reduxjs/toolkit' import { logout } from 'client/features/Auth/actions' import { ATTRIBUTES_EDITABLE } from 'client/features/One/slice' diff --git a/src/fireedge/src/client/hooks/useFetch.js b/src/fireedge/src/client/hooks/useFetch.js index ca124a1b80..ad4a0de8e8 100644 --- a/src/fireedge/src/client/hooks/useFetch.js +++ b/src/fireedge/src/client/hooks/useFetch.js @@ -54,9 +54,10 @@ const useFetch = (request, socket) => { const isFetched = state.data !== undefined && state.status === STATUS.FETCHED useEffect(() => { - isFetched && socket?.connect( - socketData => dispatch({ type: ACTIONS.SUCCESS, payload: socketData }) - ) + isFetched && socket?.connect({ + dataFromFetch: state.data, + callback: socketData => dispatch({ type: ACTIONS.SUCCESS, payload: socketData }) + }) return () => { socket?.disconnect() diff --git a/src/fireedge/src/client/hooks/useSocket.js b/src/fireedge/src/client/hooks/useSocket.js index 38a4457ba8..15b6442f63 100644 --- a/src/fireedge/src/client/hooks/useSocket.js +++ b/src/fireedge/src/client/hooks/useSocket.js @@ -7,6 +7,7 @@ import { WEBSOCKET_URL, SOCKETS } from 'client/constants' import { useAuth } from 'client/features/Auth' import { useGeneral } from 'client/features/General' import { eventUpdateResourceState, getResourceFromEventState } from 'client/features/One/socket/actions' +import { updateResourceFromFetch } from 'client/features/One/actions' const createWebsocket = (path, query) => socketIO({ path: `${WEBSOCKET_URL}/${path}`, @@ -21,12 +22,20 @@ export default function useSocket () { const { jwt } = useAuth() const { zone } = useGeneral() - const getHooksSocket = useCallback(query => { - const socket = createWebsocket(SOCKETS.hooks, { token: jwt, zone, ...query }) + const getHooksSocket = useCallback(({ resource, id }) => { + const socket = createWebsocket( + SOCKETS.HOOKS, + { token: jwt, zone, resource, id } + ) return { - connect: callback => { - socket.on(SOCKETS.hooks, data => { + connect: ({ dataFromFetch, callback }) => { + dataFromFetch && socket.on(SOCKETS.CONNECT, () => { + // update from data fetched + dispatch(updateResourceFromFetch({ data: dataFromFetch, resource })) + }) + + socket.on(SOCKETS.HOOKS, data => { // update the list on redux state dispatch(eventUpdateResourceState(data)) // return data from event @@ -40,9 +49,9 @@ export default function useSocket () { }, [jwt, zone]) const getProvisionSocket = useCallback(func => { - const socket = createWebsocket(SOCKETS.provision, { token: jwt, zone }) + const socket = createWebsocket(SOCKETS.PROVISION, { token: jwt, zone }) - socket.on(SOCKETS.provision, func) + socket.on(SOCKETS.PROVISION, func) return { on: () => socket.connect(), diff --git a/src/fireedge/src/client/providers/socketProvider.js b/src/fireedge/src/client/providers/socketProvider.js index b629c59430..b85ecb0d0e 100644 --- a/src/fireedge/src/client/providers/socketProvider.js +++ b/src/fireedge/src/client/providers/socketProvider.js @@ -8,7 +8,7 @@ import { WEBSOCKET_URL, SOCKETS } from 'client/constants' import * as sockets from 'client/features/One/socket/actions' const createProvisionWebsocket = query => socketIO({ - path: `${WEBSOCKET_URL}/${SOCKETS.provision}`, + path: `${WEBSOCKET_URL}/${SOCKETS.PROVISION}`, query }) @@ -29,7 +29,7 @@ const SocketProvider = ({ children }) => { const client = createProvisionWebsocket({ token: jwt, zone }) setSocket(client) - client.on(SOCKETS.provision, data => { + client.on(SOCKETS.PROVISION, data => { dispatch(sockets.socketCreateProvision(data)) })