React -> upgrade websocket & fix redux (delete websocket from redux because its crashed as shit)

src/components/forms/render_websocket/renderSingleImage.js

@@ -1,10 +1,10 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 
 import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
 import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice'
-import { renderWebsocketSelector } from '../../../redux/slices/renderWebsocketSlice'
 
+import { renderWebsocketSelector } from '../../../redux/slices/renderWebsocketSlice'
 import { connect, saveMessage, disconnect } from '../../../redux/slices/renderWebsocketSlice'
 
 import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk'
@@ -14,7 +14,10 @@ import FormGenerator from '../formGenerator'
 
 const RenderSingleImageForm = () => {
 
+    let web_socket = null
+
     const dispatch = useDispatch()
+    const stableDispatch = useCallback(dispatch, [])
 
     const choiceListing = React.createRef()
     const setIdRange = React.createRef()
@@ -24,7 +27,7 @@ const RenderSingleImageForm = () => {
     const resolutionYRange = React.createRef()
     
     const { 
-        web_socket,
+        web_socket_address,
         address,
         room_uuid,
         messages,
@@ -104,13 +107,34 @@ const RenderSingleImageForm = () => {
         },
     ]
 
+    const handleConnect = ( event ) => {
+
+        event.preventDefault()
+
+        if ( web_socket === null && address === '' && room_uuid === '') {
+            stableDispatch(
+                connect( 
+                    {
+                        address: '/single/image/'
+                    } 
+                )
+            )
+            if (web_socket_address !== '') {
+                web_socket = new WebSocket( web_socket_address )
+            }
+        }
+
+        console.log('connect')
+
+    }
+
     const handleSendMessage = ( refs ) => {
 
         let rotate_conv = refs[2].current.value / 62  // on backend 0.1 - 6.2 value
 
         let body = {
             // fileName: refs[0].current.value,
-            fileName: 'testHand.blend',
+            fileName: 'testHand',
             setID: refs[1].current.value,
             rotate: rotate_conv,
             nameSeries: 0,  // index render picture in set (useless on the front & disable)
@@ -119,11 +143,51 @@ const RenderSingleImageForm = () => {
             resolutionY: refs[5].current.value
         }
         console.log( body )
-        web_socket.send(
+        try {
-            JSON.stringify(
+            web_socket.send(
-                body
+                JSON.stringify(
+                    body
+                )
             )
-        )
+        } catch (error) {
+            web_socket.close()
+            stableDispatch(
+                disconnect()
+            )
+            console.log(error)
+        }
+    }
+
+    const handleDisconnect = ( event ) => {
+
+        event.preventDefault()
+
+        if ( address !== '' && room_uuid !== '') {
+            try {
+                web_socket.close()
+                stableDispatch(
+                    disconnect()
+                )
+            } catch (error) {
+                console.log(error)
+            }
+        }
+
+        console.log('disconnect')
+
+    }
+
+    if ( connected === true && address !== '' && web_socket !== null ) {
+        web_socket.onmessage = (event) => {
+            console.log( event.data )
+            // stableDispatch(
+            //     saveMessage(
+            //         {
+            //             message: JSON.parse( event.data )
+            //         }
+            //     )
+            // )
+        }
     }
 
     let blocker = false
@@ -138,24 +202,6 @@ const RenderSingleImageForm = () => {
                 }
             }
         
-            if ( web_socket === null && address === '' && room_uuid === '') {
-                connect( 
-                    {
-                        address: '/single/image/'
-                    } 
-                )
-            }
-
-            if ( address !== '' && web_socket !== null ) {
-                web_socket.onmessage = (event) => { 
-                    saveMessage( 
-                        {
-                            message: JSON.parse( event.data ) 
-                        }
-                    ) 
-                }
-            }
-        
         }
     )
 
@@ -166,6 +212,17 @@ const RenderSingleImageForm = () => {
                 refList={ refList }
                 action={ handleSendMessage }
             />
+            {
+                connected
+                ? 
+                    <button onClick={ (event) => handleDisconnect(event) }>
+                        Disconnect
+                    </button>
+                :
+                    <button onClick={ (event) => handleConnect(event) }>
+                        Connect
+                    </button>
+            }
             {
                 messages.map( (item) => {
                         return (

src/redux/asyncThunks/abstracts/abstractAddress.js

@@ -1,3 +1,3 @@
-const API = 'localhost:9090'
+let API = 'localhost:9090'
 export const GeneralAddress = 'http://' + API
-export const GeneralAddressWS = 'ws://' + API
+export const GeneralAddressWS = 'ws://' + API + '/render'

src/redux/slices/renderWebsocketSlice.js

@@ -1,7 +1,8 @@
 import { createSlice } from '@reduxjs/toolkit'
 import renderWebsocketAsyncThunk from '../asyncThunks/renderWebsocketAsyncThunk'
 
-import GeneralAddressWS from '../asyncThunks/abstracts/abstractAddress'
+import { GeneralAddressWS } from '../asyncThunks/abstracts/abstractAddress'
+
 
 const __uuidv4 = () => {
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
@@ -13,22 +14,23 @@ const __uuidv4 = () => {
     )
 }
 
+const initialState = {
+    web_socket_address: '',
+    address: '',
+    room_uuid: '',
+    messages: [],
+    connected: false
+}
 
 const renderWebsocketSlice = createSlice(
     {
         name: 'render/async',
-        initialState: {
+        initialState,
-            web_socket: null,
-            address: '',
-            room_uuid: '',
-            messages: [],
-            connected: false
-        },
         reducers: {
             connect(state, action) {
                 state.room_uuid = __uuidv4()
                 state.address = GeneralAddressWS + action.payload.address 
-                state.web_socket = new WebSocket( state.address + state.room_uuid )
+                state.web_socket_address = state.address + state.room_uuid
                 state.messages = []
                 state.connected = true
             },
@@ -39,7 +41,7 @@ const renderWebsocketSlice = createSlice(
                 ]
             },
             disconnect(state) {
-                state.web_socket = null
+                state.web_socket_address = ''
                 state.address = ''
                 state.room_uuid = ''
                 state.messages = []