React -> complete NavigateBar

src/pages/func_group/navigationBar.js

@@ -0,0 +1,236 @@
+import React, { useState, useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userAuthSelector } from '../../redux/slices/userAuthSlice'
+import { userCrudSelector } from '../../redux/slices/userCrudSlice'
+
+import userCrudAsyncThunk from '../../redux/asyncThunks/userCrudAsyncThunk'
+
+
+const __styleChanger = ( bool ) => {
+    
+    let display = {
+        display: 'block'
+    }
+
+    let hide = {
+        display: 'none'
+    }
+    
+    return bool ? display : hide
+}
+
+const NavigationBar = ({ movements }) => {
+
+    const { user_get } = useSelector(userCrudSelector)
+    const { token, user } = useSelector(userAuthSelector)
+
+    const dispatch = useDispatch()
+
+    useEffect( () => {
+        if ( user_get !== {} && token !== '' && user.id > 0)
+            dispatch(
+                userCrudAsyncThunk.fetchGetOneUser(
+                    {
+                        user_id: user.id,
+                        token: token
+                    }
+                )
+            )
+    })
+
+    const [showAccount, setShowAccount] = useState(false)
+    const [showModels, setShowModels] = useState(false)
+    const [showRender, setShowRender] = useState(false)
+    const [showRenderFunc, setShowRenderFunc] = useState(false)    
+
+    return(
+        <>
+            <div>
+                Menu
+                <div>
+                    <div onClick={ () => setShowAccount( !showAccount ) }>
+                    ├── Account Settings
+                    </div>
+                    <div style={ __styleChanger( showAccount) }>
+                        <div>
+                            │   ├── User info
+                            <div>
+                                <div>
+                                    │   │   ├── { user_get.username } 
+                                </div>
+                                <div>
+                                    │   │   └── { user_get.email }
+                                </div>
+                            </div>
+                        </div>
+                        <div onClick={ () => movements.user_view.setUserCrudView( 
+                                {
+                                    update_user: true,
+                                    delete_user: false
+                                }
+                            )
+                        }>
+                            │   ├── Update User
+                        </div>
+                        <div onClick={ () => movements.user_view.setUserCrudView( 
+                                {
+                                    update_user: false,
+                                    delete_user: true
+                                }
+                            )
+                        }>
+                            │   └── Delete User
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div onClick={ () => setShowModels( !showModels ) }>
+                    ├── Models
+                    </div>
+                    <div style={ __styleChanger( showModels ) }>
+                        <div onClick={ () => movements.model_view.setModelCrudView( 
+                                {
+                                    get_all_models: true,
+                                    get_one_model_and_download: false,
+                                    upload_model: false
+                                }
+                            )
+                        }>
+                            │   ├── Get All Models
+                        </div>
+                        <div onClick={ () => movements.model_view.setModelCrudView( 
+                                {
+                                    get_all_models: false,
+                                    get_one_model_and_download: true,
+                                    upload_model: false
+                                }
+                            )
+                        }>
+                            │   ├── Get One Model & Download
+                        </div>
+                        <div onClick={ () => movements.model_view.setModelCrudView( 
+                                {
+                                    get_all_models: false,
+                                    get_one_model_and_download: false,
+                                    upload_model: true
+                                }
+                            )
+                        }>
+                            │   └── Upload Model
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div onClick={ () => setShowRender( !showRender ) }>
+                    ├── Render
+                    </div>
+                    <div style={ __styleChanger( showRender ) }>
+                        <div onClick={ () => movements.model_view.setModelCrudView( 
+                                {
+                                    show_ready_renders_and_download: true,
+                                    render_functionality: {
+                                        render_single_image: false,
+                                        render_single_set: false,
+                                        render_all: false,
+                                        render_image_by_vector: false,
+                                        render_set_by_vector: false
+                                    }
+                                }
+                            )
+                        }>
+                            │   ├── Show Ready Renders & Download
+                        </div>
+                        <div>
+                            <div onClick={ () => setShowRenderFunc( !showRenderFunc ) }>
+                            │   ├── Render Functionality
+                            </div>
+                            <div style={ __styleChanger( showRenderFunc ) }>
+                                <div onClick={ () => movements.model_view.setModelCrudView( 
+                                        {
+                                            show_ready_renders_and_download: false,
+                                            render_functionality: {
+                                                render_single_image: true,
+                                                render_single_set: false,
+                                                render_all: false,
+                                                render_image_by_vector: false,
+                                                render_set_by_vector: false
+                                            }
+                                        }
+                                    )
+                                }>
+                                    │   │   ├── Render Single Image
+                                </div>
+                                <div onClick={ () => movements.model_view.setModelCrudView( 
+                                        {
+                                            show_ready_renders_and_download: false,
+                                            render_functionality: {
+                                                render_single_image: false,
+                                                render_single_set: true,
+                                                render_all: false,
+                                                render_image_by_vector: false,
+                                                render_set_by_vector: false
+                                            }
+                                        }
+                                    )
+                                }>
+                                    │   │   ├── Render Single Set
+                                </div>
+                                <div onClick={ () => movements.model_view.setModelCrudView( 
+                                        {
+                                            show_ready_renders_and_download: false,
+                                            render_functionality: {
+                                                render_single_image: false,
+                                                render_single_set: false,
+                                                render_all: true,
+                                                render_image_by_vector: false,
+                                                render_set_by_vector: false
+                                            }
+                                        }
+                                    )
+                                }>
+                                    │   │   ├── Render All Sets
+                                </div>
+                                <div onClick={ () => movements.model_view.setModelCrudView( 
+                                        {
+                                            show_ready_renders_and_download: false,
+                                            render_functionality: {
+                                                render_single_image: false,
+                                                render_single_set: false,
+                                                render_all: false,
+                                                render_image_by_vector: true,
+                                                render_set_by_vector: false
+                                            }
+                                        }
+                                    )
+                                }>
+                                    │   │   ├── Render Image By Vector
+                                </div>
+                                <div onClick={ () => movements.model_view.setModelCrudView( 
+                                        {
+                                            show_ready_renders_and_download: false,
+                                            render_functionality: {
+                                                render_single_image: false,
+                                                render_single_set: false,
+                                                render_all: false,
+                                                render_image_by_vector: false,
+                                                render_set_by_vector: true
+                                            }
+                                        }
+                                    )
+                                }>
+                                    │   │   └── Render Set By Vector
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    └── Logout
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default NavigationBar

src/pages/func_group/rootUtils.js

@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
+
 import { userAuthSelector } from '../../redux/slices/userAuthSlice'
 
 import UserAuthIndex from './user_auth/userAuthIndex'
@@ -8,18 +9,57 @@ import ModelCrudIndex from './model_crud/modelCrudIndex'
 import RenderCrudIndex from './render_crud/renderCrudIndex'
 import RenderWebsocketIndex from './render_websocket/renderWebsocketIndex'
 
+import NavigationBar from './navigationBar'
+
 
 const GeneralView = () => {
 
-    const [userAuthView, setUserAuthView] = useState(true)
+    const [userCrudView, setUserCrudView] = useState(
-    const [userCrudView, setUserCrudView] = useState(false)
+        {
-    const [modelCrudView, setModelCrudView] = useState(false)
+            update_user: false,
-    const [renderCrudView, setRenderCrudView] = useState(false)
+            delete_user: false
-    const [renderWebsocketView, setRenderWebsocketView] = useState(false)
+        }
+    )
+    const [modelCrudView, setModelCrudView] = useState(
+        {
+            get_all_models: false,
+            get_one_model_and_download: false,
+            upload_model: false
+        }
+    )
+    const [renderCrudView, setRenderCrudView] = useState(
+        {
+            show_ready_renders_and_download: false,
+            render_functionality: {
+                render_single_image: false,
+                render_single_set: false,
+                render_all: false,
+                render_image_by_vector: false,
+                render_set_by_vector: false
+            }
+        }
+    )
+
+    let movements = {
+        user_view: {
+            userCrudView: userCrudView,
+            setUserCrudView: setUserCrudView
+        },
+        model_view: {
+            modelCrudView: modelCrudView,
+            setModelCrudView: setModelCrudView
+        },
+        render_view: {
+            renderView: renderCrudView, 
+            setRenderView: setRenderCrudView
+        }
+    }
 
     return (
         <>
-            <UserAuthIndex />
+            <NavigationBar 
+                movements={ movements }
+            />
             <UserCrudIndex />
             <ModelCrudIndex />
             <RenderCrudIndex />
@@ -29,9 +69,9 @@ const GeneralView = () => {
 }
 
 const __verifyUserSession = (token, user)  => {
-    
+
-    if ( user.id > 0 && user.username !== '' && user.email !== '' && token !== '')
+    if ( user.id !== 0 && user.username !== '' && user.email !== '' && token !== '' )
-        return false
+        return true
     else
         return true
     
@@ -45,8 +85,8 @@ const VerifyUserSession = () => {
         <>
             {
                 __verifyUserSession(token, user) 
-                ? <GeneralView />
+                ? <GeneralView />  
-                : <UserAuthIndex />  
+                : <UserAuthIndex /> 
             }
         </>
     )

src/pages/index.js

@@ -9,7 +9,7 @@ import Root from './func_group/root';
 // if you have problem with watchers - use it:
 // echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
 
-const Index = () => {
+const IndexPage = () => {
   return (
     <Provider store={store}>
       <Root />
@@ -17,4 +17,4 @@ const Index = () => {
   )
 }
 
-export default Index
+export default IndexPage

src/redux/stateLoader.js

@@ -1,11 +1,8 @@
 export const loadState = () => {
     try {
-        const stateName = localStorage.getItem('user_key')
+        const serializedState = localStorage.getItem('state')
-        const serializedState = localStorage.getItem(stateName)
 
-        if (stateName === null) {
+        if (serializedState === undefined || serializedState === null) {
-            return {}
-        } else if (serializedState === null) {
             return {}
         } else {
             return JSON.parse(serializedState)
@@ -21,15 +18,12 @@ export const loadState = () => {
 export const saveState = (state) => {
     try {
 
-        const stateName = localStorage.getItem('user_key')
         const serializedState = JSON.stringify(state)
 
-        if (stateName === null) {
+        if (serializedState === null) {
-            return undefined
-        } else if (serializedState === null) {
             return undefined
         } else {
-            localStorage.setItem(stateName, serializedState)
+            localStorage.setItem('state', serializedState)
 
         }
     } catch (err) {