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 { 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(false)
|
||||
const [modelCrudView, setModelCrudView] = useState(false)
|
||||
const [renderCrudView, setRenderCrudView] = useState(false)
|
||||
const [renderWebsocketView, setRenderWebsocketView] = useState(false)
|
||||
const [userCrudView, setUserCrudView] = useState(
|
||||
{
|
||||
update_user: false,
|
||||
delete_user: 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 />
|
||||
|
|
@ -30,8 +70,8 @@ const GeneralView = () => {
|
|||
|
||||
const __verifyUserSession = (token, user) => {
|
||||
|
||||
if ( user.id > 0 && user.username !== '' && user.email !== '' && token !== '')
|
||||
return false
|
||||
if ( user.id !== 0 && user.username !== '' && user.email !== '' && token !== '' )
|
||||
return true
|
||||
else
|
||||
return true
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -1,11 +1,8 @@
|
|||
export const loadState = () => {
|
||||
try {
|
||||
const stateName = localStorage.getItem('user_key')
|
||||
const serializedState = localStorage.getItem(stateName)
|
||||
const serializedState = localStorage.getItem('state')
|
||||
|
||||
if (stateName === null) {
|
||||
return {}
|
||||
} else if (serializedState === null) {
|
||||
if (serializedState === undefined || 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) {
|
||||
return undefined
|
||||
} else if (serializedState === null) {
|
||||
if (serializedState === null) {
|
||||
return undefined
|
||||
} else {
|
||||
localStorage.setItem(stateName, serializedState)
|
||||
localStorage.setItem('state', serializedState)
|
||||
|
||||
}
|
||||
} catch (err) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue