Redux -> simple fixes

package-lock.json

@@ -1664,6 +1664,17 @@
         "react-lifecycles-compat": "^3.0.4"
       }
     },
+    "@reduxjs/toolkit": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.5.0.tgz",
+      "integrity": "sha512-E/FUraRx+8guw9Hlg/Ja8jI/hwCrmIKed8Annt9YsZw3BQp+F24t5I5b2OWR6pkEHY4hn1BgP08FrTZFRKsdaQ==",
+      "requires": {
+        "immer": "^8.0.0",
+        "redux": "^4.0.0",
+        "redux-thunk": "^2.3.0",
+        "reselect": "^4.0.0"
+      }
+    },
     "@sideway/address": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.1.tgz",
@@ -8111,6 +8122,11 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
       "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw=="
     },
+    "immer": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",
+      "integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA=="
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -12050,6 +12066,18 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-redux": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.2.tgz",
+      "integrity": "sha512-8+CQ1EvIVFkYL/vu6Olo7JFLWop1qRUeb46sGtIMDCSpgwPQq8fPLpirIB0iTqFe9XYEFPHssdX8/UwN6pAkEA==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "hoist-non-react-statics": "^3.3.2",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.13.1"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -12496,6 +12524,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "reselect": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz",
+      "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA=="
+    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",

package.json

@@ -15,10 +15,13 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.5.0",
     "gatsby": "^2.32.3",
     "gatsby-plugin-sass": "^3.2.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-redux": "^7.2.2",
+    "redux": "^4.0.5",
     "sass": "^1.32.7"
   }
 }

src/redux/asyncThunks/abstractAddress.js

@@ -0,0 +1 @@
+export const GeneralAddress = 'localhost:9090'

src/redux/asyncThunks/abstractService.js

@@ -0,0 +1,111 @@
+import axios from 'axios'
+import { GeneralAddress } from './abstractAddress'
+
+const APIAddress = 'http://' + GeneralAddress
+
+let defaultBody = {}
+
+const _getList = async (endpoint, token) => {
+  return await responseAbstract(
+    endpoint,
+    'GET',
+    token,
+    defaultBody
+  )
+}
+
+const _getOne = async (endpoint, objectId, token) => {
+  return await responseAbstract(
+    endpoint + objectId + '/',
+    'GET',
+    token,
+    defaultBody
+  )
+}
+
+const _post = async (endpoint, body, token) => {
+  return await responseAbstract(
+    endpoint,
+    'POST',
+    token,
+    body
+  )
+}
+
+const _patch = async (endpoint, objectId, body, token) => {
+  return await responseAbstract(
+    endpoint + objectId + '/',
+    'PATCH',
+    token,
+    body
+  )
+}
+
+const _put = async (endpoint, objectId, body, token) => {
+  return await responseAbstract(
+    endpoint + objectId + '/',
+    'PUT',
+    token,
+    body
+  )
+}
+
+const _delete = async (endpoint, objectId, token) => {
+  return await responseAbstract(
+    endpoint + objectId + '/',
+    'DELETE',
+    token,
+    defaultBody
+  )
+}
+
+
+const responseAbstract = async (endpoint, method, token, body) => {
+  let response = await axios(
+    headerBuilder(
+      APIAddress + endpoint,
+      method,
+      token,
+      body,
+    )
+  )
+  return response
+}
+
+const headerBuilder = (url, method, token, body) => {
+    headers = {
+        'Authorization': token,
+        'accept': 'application/json',
+        'Content-Type': 'application/json',
+    }
+    if ('file' in body) {
+        headers = {
+            'Authorization': token,
+            'accept': 'multipart/form-data',
+            'Content-Type': 'multipart/form-data',
+        }
+    }
+    let headers = {
+        url: url,
+        method: method,
+        headers: headers
+    }
+    if (method === 'PUT' || method === 'POST' || method === 'PATCH') {
+        headers = Object.assign({}, headers, {
+            data: JSON.stringify(body),
+            withCredentials: true,
+        })
+    }
+    return headers
+}
+
+
+export default {
+  APIAddress,
+  _getList,
+  _getOne,
+  _post,
+  _put,
+  _patch,
+  _delete
+}

src/redux/asyncThunks/modelCrudAsyncThunk.js

@@ -0,0 +1,63 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import abstractService from './abstractService'
+
+let endpoint = '/model/'
+
+
+const fetchGetAllModels = createAsyncThunk(
+    'model/fetchGetAllModels',
+    async (
+        token,
+        thunkAPI
+    ) => {
+        return await abstractService._getList(endpoint, token)
+    }
+)
+
+/**
+ * @param body:
+ *      param token: base64 token,
+ *      param id: model id
+ */
+const fetchGetOneModelAndDownload = createAsyncThunk(
+    'model/fetchGetOneModelAndDownload',
+    async (
+        body,
+        thunkAPI
+    ) => {
+        return await abstractService._getOne(
+            trueEndpoint, 
+            body.id, 
+            body.token
+        )
+    }
+)
+
+/**
+ * @param body:
+ *      param token: base64 token,
+ *      param file: document.querySelector('#file').files[0]
+ *      param user_id: user id
+ */
+const fetchUploadModel = createAsyncThunk(
+    'model/fetchUploadModel',
+    async (
+        body,
+        thunkAPI
+    ) => {
+        let formData = FormData()
+        formData.append("blend", body.file)
+        body.file = formData
+        return await abstractService._post(
+            trueEndpoint, 
+            body,
+            body.token
+        )
+    }
+)
+
+export default {
+    fetchGetAllModels,
+    fetchGetOneModelAndDownload,
+    fetchUploadModel
+}

src/redux/asyncThunks/renderCrudAsyncThunk.js

@@ -0,0 +1,39 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import abstractService from './abstractService'
+
+let endpoint = '/render/'
+
+
+const fetchGetAllRenders = createAsyncThunk(
+    'render/fetchGetAllRenders',
+    async (
+        token,
+        thunkAPI
+    ) => {
+        return await abstractService._getList(endpoint, token)
+    }
+)
+
+/**
+ * @param body:
+ *      param token: base64 token,
+ *      param id: render id
+ */
+const fetchGetOneRenderAndDownload = createAsyncThunk(
+    'render/fetchGetOneRenderAndDownload',
+    async (
+        body,
+        thunkAPI
+    ) => {
+        return await abstractService._getOne(
+            trueEndpoint, 
+            body.id, 
+            body.token
+        )
+    }
+)
+
+export default {
+    fetchGetAllRenders,
+    fetchGetOneRenderAndDownload
+}

src/redux/asyncThunks/renderWebsocketAsyncThunk.js

@@ -0,0 +1,113 @@
+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
+}
+
+/**
+ *  @param body:
+ *      param token: token
+ *      param 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 fetchConnect = createAsyncThunk(
+    'render/async/fetchConnect',
+    async (
+        body,
+        thunkAPI
+    ) => {
+        let uuid = __uuidv4()
+        let address = __make_address(body.endpoint)
+        return {
+            web_socket: new WebSocket(address + uuid),
+            address: address,
+            room_uuid: uuid
+        }
+    }
+)
+
+/**
+ *  @param body:
+ *      param token: token
+ *      param message: message string
+ */
+const fetchSaveMessage = createAsyncThunk(
+    'render/async/fetchSaveMessage',
+    async (
+        body,
+        thunkAPI
+    ) => {
+        return {
+            message: body.message
+        }
+    }
+)
+
+/**
+ *  @param body:
+ *      param token: token
+ */
+const fetchDisconnect = createAsyncThunk(
+    'render/async/fetchDisconnect',
+    async (
+        token,
+        thunkAPI
+    ) => {
+        return {
+            web_socket: null,
+        }
+    }
+)
+
+export default {
+    fetchConnect,
+    fetchSaveMessage,
+    fetchDisconnect,
+}

src/redux/asyncThunks/userAuthAsyncThunk.js

@@ -0,0 +1,46 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import abstractService from './abstractService'
+
+let endpoint = '/user/auth'
+
+/**
+ * @param body:
+ *      param username: username string
+ *      param password: password string
+ */
+const fetchLogin = createAsyncThunk(
+    'user/auth/fetchLogin',
+    async (
+        body,
+        thunkAPI
+    ) => {
+        return await abstractService._post(
+            endpoint, 
+            body,
+            ''
+        )
+    }
+)
+
+/**
+ * @param body:
+ *      param token: user token
+ */
+const fetchLogout = createAsyncThunk(
+    'user/auth/fetchLogout',
+    async (
+        token,
+        thunkAPI
+    ) => {
+        return await abstractService._delete(
+            endpoint, 
+            '',
+            token
+        )
+    }
+)
+
+export default {
+    fetchLogin,
+    fetchLogout
+}

src/redux/asyncThunks/userCrudAsyncThunk.js

@@ -0,0 +1,108 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import abstractService from './abstractService'
+
+let endpoint = '/user/'
+
+
+const fetchGetAllUsers = createAsyncThunk(
+    'user/fetchGetAllUsers',
+    async (
+        token,
+        thunkAPI
+    ) => {
+        return await abstractService._getList(
+            endpoint, 
+            token
+        )
+    }
+)
+
+/**
+ * @param body:
+ *      param token: token
+ *      param user_id: user_id
+ */
+const fetchGetOneUser = createAsyncThunk(
+    'user/fetchGetAllUsers',
+    async (
+        body,
+        thunkAPI
+    ) => {
+        return await abstractService._getOne(
+            endpoint,
+            body.user_id, 
+            body.token
+        )
+    }
+)
+
+/**
+ * @param body:
+ *      param username: username string
+ *      param password: password string
+ *      param email: email string
+ */
+const fetchRegister = createAsyncThunk(
+    'user/fetchRegister',
+    async (
+        body,
+        thunkAPI
+    ) => {
+        return await abstractService._post(
+            endpoint, 
+            body,
+            ''
+        )
+    }
+)
+
+/**
+ * @param body:
+ *      param token: token
+ *      param user_id: user_id
+ *      param user:
+ *          param username: username
+ *          param password: password
+ *          param email: email
+ */
+const fetchUpdateUser = createAsyncThunk(
+    'user/fetchRegister',
+    async (
+        body,
+        thunkAPI
+    ) => {
+        return await abstractService._patch(
+            endpoint, 
+            body.user_id,
+            body.user,
+            body.token
+        )
+    }
+)
+
+/**
+ * @param body:
+ *      param user_id: user_id
+ *      param token: user token
+ */
+const fetchDeleteUser = createAsyncThunk(
+    'user/fetchRegister',
+    async (
+        body,
+        thunkAPI
+    ) => {
+        return await abstractService._delete(
+            endpoint, 
+            body.user_id,
+            body.token
+        )
+    }
+)
+
+export default {
+    fetchGetAllUsers,
+    fetchGetOneUser,
+    fetchRegister,
+    fetchUpdateUser,
+    fetchDeleteUser
+}

src/redux/slices/modelCrudSlice.js

@@ -0,0 +1,30 @@
+import { createSlice } from '@reduxjs/toolkit'
+import modelCrudAsyncThunk from '../asyncThunks/modelCrudAsyncThunk'
+
+const modelCrudSlice = createSlice(
+    {
+        name: 'model',
+        initialState: {
+            models_list: [],
+            download_blend_file: '',
+            upload_blend_file_status: ''
+
+        },
+        reducers: {},
+        extraReducers: {
+            [modelCrudAsyncThunk.fetchGetAllModels.fulfilled.type]: (state, action) => {
+                state.models_list = action.payload.data
+            },
+            [modelCrudAsyncThunk.fetchGetOneModelAndDownload.fulfilled.type]: (state, action) => {
+                state.download_blend_file = action.payload.data
+            },
+            [modelCrudAsyncThunk.fetchUploadModel.fulfilled.type]: (state, action) => {
+                state.upload_blend_file_status = action.payload.data
+            }
+        }
+    }
+)
+
+export const modelCrudReducer = modelCrudSlice.reducer
+
+export const modelCrudSelector = state => state.modelCrudReducer

src/redux/slices/renderCrudSlice.js

@@ -0,0 +1,25 @@
+import { createSlice } from '@reduxjs/toolkit'
+import renderCrudAsyncThunk from '../asyncThunks/renderCrudAsyncThunk'
+
+const renderCrudSlice = createSlice(
+    {
+        name: 'render',
+        initialState: {
+            render_list: [],
+            download_zip_file: ''
+        },
+        reducers: {},
+        extraReducers: {
+            [renderCrudAsyncThunk.fetchGetAllRenders.fulfilled.type]: (state, action) => {
+                state.render_list = action.payload.data.render_list
+            },
+            [renderCrudAsyncThunk.fetchGetOneRenderAndDownload.fulfilled.type]: (state, action) => {
+                state.download_zip_file = action.payload.data
+            }
+        }
+    }
+)
+
+export const renderCrudReducer = renderCrudSlice.reducer
+
+export const renderCrudSelector = state => state.renderCrudReducer

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 renderWebsocketReducer = renderWebsocketSlice.reducer
+
+export const renderWebsocketSelector = state => state.renderWebsocketReducer

src/redux/slices/userAuthSlice.js

@@ -0,0 +1,37 @@
+import { createSlice } from '@reduxjs/toolkit'
+import userAuthAsyncThunk from '../asyncThunks/userAuthAsyncThunk'
+
+const userAuthSlice = createSlice(
+    {
+        name: 'user/auth',
+        initialState: {
+            token: '',
+            user: {
+                id: 0,
+                username: '',
+                email: ''
+            }
+        },
+        reducers: {},
+        extraReducers: {
+            [userAuthAsyncThunk.fetchLogin.fulfilled.type]: (state, action) => {
+                state.token = action.payload.data.Authorization
+                state.user.id = action.payload.data.user.id
+                state.user.username = action.payload.data.user.username
+                state.user.email = action.payload.data.user.email
+                state.info = 'login success'
+            },
+            [userAuthAsyncThunk.fetchLogout.fulfilled.type]: (state, action) => {
+                state.token = ''
+                state.user.id = 0
+                state.user.username = ''
+                state.user.email = ''
+                state.info = action.payload.data.info
+            }
+        }
+    }
+)
+
+export const userAuthReducer = userAuthSlice.reducer
+
+export const userAuthSelector = state => state.userAuthReducer

src/redux/slices/userCrudSlice.js

@@ -0,0 +1,41 @@
+import { createSlice } from '@reduxjs/toolkit'
+import userCrudAsyncThunk from '../asyncThunks/userCrudAsyncThunk'
+
+const userCrudSlice = createSlice(
+    {
+        name: 'user',
+        initialState: {
+            users_list: [],
+            user_get: {},
+            user_register: {},
+            user_update: {},
+            user_delete: ''
+        },
+        reducers: {},
+        extraReducers: {
+            [userCrudAsyncThunk.fetchGetAllUsers.fulfilled.type]: (state, action) => {
+                state.users_list = action.payload.data
+            },
+            [userCrudAsyncThunk.fetchGetOneUser.fulfilled.type]: (state, action) => {
+                state.user_get = action.payload.data
+            },
+            [userCrudAsyncThunk.fetchRegister.fulfilled.type]: (state, action) => {
+                state.user_register = action.payload.data
+            },
+            [userCrudAsyncThunk.fetchUpdateUser.fulfilled.type]: (state, action) => {
+                state.user_update = action.payload.data
+            },
+            [userCrudAsyncThunk.fetchDeleteUser.fulfilled.type]: (state, action) => {
+                state.users_list = []
+                state.user_get = {}
+                state.user_register = {}
+                state.user_update = {}
+                state.user_delete = 'true'
+            }
+        }
+    }
+)
+
+export const userCrudReducer = userCrudSlice.reducer
+
+export const userCrudSelector = state => state.userCrudReducer