From 42667b9297fe8583e9352a4d798bd65690942af1 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Wed, 17 Feb 2021 13:35:20 +0100 Subject: [PATCH] Redux -> add async thunk & slicer for websocket usage --- .../asyncThunks/renderWebsocketAsyncThunk.js | 91 +++++++++++++++++++ src/redux/slices/renderWebsocketSlice.js | 42 +++++++++ 2 files changed, 133 insertions(+) diff --git a/src/redux/asyncThunks/renderWebsocketAsyncThunk.js b/src/redux/asyncThunks/renderWebsocketAsyncThunk.js index e69de29..5452050 100644 --- a/src/redux/asyncThunks/renderWebsocketAsyncThunk.js +++ b/src/redux/asyncThunks/renderWebsocketAsyncThunk.js @@ -0,0 +1,91 @@ +import { createAsyncThunk } from '@reduxjs/toolkit' +import GeneralAddress from './abstractAddress' + +let endpoint_single_image = '/render/single/image/' +let endpoint_single_set = '/render/single/set/' +let endpoint_all = '/render/all/' + +let endpoint_vector_single_image = '/render/vector/single/image/' +let endpoint_vector_single_set = '/render/vector/single/set/' + + +const __uuidv4 = () => { + return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace( + /[xy]/g, + (c) => { + var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); + return v.toString(16); + } + ) +} + +/** + * + * @param {string} endpoint: + * examples: + * 'image' - connect to single image ws renderer + * 'set' - connect to single set ws renderer + * 'all' - connect to all ws renderer + * + * 'vector/image' - connect to vector single image ws renderer + * 'vector/set' - connerct to vector single set ws renderer + */ +const __make_address = async (endpoint) => { + if (endpoint === 'image') + endpoint = endpoint_single_image + else if (endpoint === 'set') + endpoint = endpoint_single_set + else if (endpoint === 'all') + endpoint = endpoint_all + else if (endpoint === 'vector/image') + endpoint = endpoint_vector_single_image + else if (endpoint === 'vector/set') + endpoint = endpoint_vector_single_set + + return GeneralAddress + endpoint +} + +const fetchConnect = createAsyncThunk( + 'render/async/fetchConnect', + async ( + endpoint, + thunkAPI + ) => { + let uuid = __uuidv4() + let address = __make_address(endpoint) + return { + web_socket: new WebSocket(address + uuid), + address: address, + room_uuid: uuid + } + } +) + +const fetchSaveMessage = createAsyncThunk( + 'render/async/fetchSaveMessage', + async ( + message, + thunkAPI + ) => { + return { + message: message + } + } +) + +const fetchDisconnect = createAsyncThunk( + 'render/async/fetchDisconnect', + async ( + thunkAPI + ) => { + return { + web_socket: null, + } + } +) + +export default { + fetchConnect, + fetchSaveMessage, + fetchDisconnect, +} \ No newline at end of file diff --git a/src/redux/slices/renderWebsocketSlice.js b/src/redux/slices/renderWebsocketSlice.js index e69de29..e962a9a 100644 --- a/src/redux/slices/renderWebsocketSlice.js +++ b/src/redux/slices/renderWebsocketSlice.js @@ -0,0 +1,42 @@ +import { createSlice } from '@reduxjs/toolkit' +import renderWebsocketAsyncThunk from '../asyncThunks/renderWebsocketAsyncThunk' + +const renderWebsocketSlice = createSlice( + { + name: 'render/async', + initialState: { + web_socket: null, + address: '', + room_uuid: '', + messages: [], + connected: false + }, + reducers: {}, + extraReducers: { + [renderWebsocketAsyncThunk.fetchConnect.fulfilled.type]: (state, action) => { + state.web_socket = action.web_socket + state.address = action.address + state.room_uuid = action.room_uuid + state.messages = [] + state.connected = true + }, + [renderWebsocketAsyncThunk.fetchSaveMessage.fulfilled.type]: (state, action) => { + state.messages = [ + ...state.messages, + action.message + ] + }, + [renderWebsocketAsyncThunk.fetchDisconnect.fulfilled.type]: (state, action) => { + state.web_socket = action.web_socket, + state.address = '', + state.room_uuid = '', + state.messages = [], + state.connected = false + } + } + } +) + +export const userAuthReducer = userAuthSlice.reducer + +export const userAuthSelector = state => state.userAuthReducer \ No newline at end of file