F OpenNebula/one#5422: Update resource from detail fetch

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'

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 } }
+  }
+)

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'

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)

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 })
 

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'

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()

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(),

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))
     })