React -> complete NavigateBar
parent
a75dcf97a9
commit
c0c164638b
|
|
@ -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
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
import React, { useState } from 'react'
|
||||||
import { useSelector } from 'react-redux'
|
import { useSelector } from 'react-redux'
|
||||||
|
|
||||||
import { userAuthSelector } from '../../redux/slices/userAuthSlice'
|
import { userAuthSelector } from '../../redux/slices/userAuthSlice'
|
||||||
|
|
||||||
import UserAuthIndex from './user_auth/userAuthIndex'
|
import UserAuthIndex from './user_auth/userAuthIndex'
|
||||||
|
|
@ -8,18 +9,57 @@ import ModelCrudIndex from './model_crud/modelCrudIndex'
|
||||||
import RenderCrudIndex from './render_crud/renderCrudIndex'
|
import RenderCrudIndex from './render_crud/renderCrudIndex'
|
||||||
import RenderWebsocketIndex from './render_websocket/renderWebsocketIndex'
|
import RenderWebsocketIndex from './render_websocket/renderWebsocketIndex'
|
||||||
|
|
||||||
|
import NavigationBar from './navigationBar'
|
||||||
|
|
||||||
|
|
||||||
const GeneralView = () => {
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<UserAuthIndex />
|
<NavigationBar
|
||||||
|
movements={ movements }
|
||||||
|
/>
|
||||||
<UserCrudIndex />
|
<UserCrudIndex />
|
||||||
<ModelCrudIndex />
|
<ModelCrudIndex />
|
||||||
<RenderCrudIndex />
|
<RenderCrudIndex />
|
||||||
|
|
@ -30,8 +70,8 @@ const GeneralView = () => {
|
||||||
|
|
||||||
const __verifyUserSession = (token, user) => {
|
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
|
else
|
||||||
return true
|
return true
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ import Root from './func_group/root';
|
||||||
// if you have problem with watchers - use it:
|
// if you have problem with watchers - use it:
|
||||||
// echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
|
// echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
|
||||||
|
|
||||||
const Index = () => {
|
const IndexPage = () => {
|
||||||
return (
|
return (
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
<Root />
|
<Root />
|
||||||
|
|
@ -17,4 +17,4 @@ const Index = () => {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Index
|
export default IndexPage
|
||||||
|
|
@ -1,11 +1,8 @@
|
||||||
export const loadState = () => {
|
export const loadState = () => {
|
||||||
try {
|
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 {}
|
return {}
|
||||||
} else {
|
} else {
|
||||||
return JSON.parse(serializedState)
|
return JSON.parse(serializedState)
|
||||||
|
|
@ -21,15 +18,12 @@ export const loadState = () => {
|
||||||
export const saveState = (state) => {
|
export const saveState = (state) => {
|
||||||
try {
|
try {
|
||||||
|
|
||||||
const stateName = localStorage.getItem('user_key')
|
|
||||||
const serializedState = JSON.stringify(state)
|
const serializedState = JSON.stringify(state)
|
||||||
|
|
||||||
if (stateName === null) {
|
if (serializedState === null) {
|
||||||
return undefined
|
|
||||||
} else if (serializedState === null) {
|
|
||||||
return undefined
|
return undefined
|
||||||
} else {
|
} else {
|
||||||
localStorage.setItem(stateName, serializedState)
|
localStorage.setItem('state', serializedState)
|
||||||
|
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue