React -> add other forms && complete general tasks

src/components/forms/model_crud/modelShowModelsAndDownload.js

@@ -53,7 +53,7 @@ const ModelShowAndDownloadForm = () => {
     return (
         <div 
             className="float_form_model"
-            style={ { marginTop: '10%' } }
+            style={ { marginTop: '10%' , overflowY: 'scroll', height: '500px' } }
         >
             <FormGenerator 
                 inputList={ inputList }

src/components/forms/user_crud/userDelete.js

@@ -0,0 +1,77 @@
+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 { deleteUser } from '../../../redux/slices/userAuthSlice'
+
+import userCrudAsyncThunk from '../../../redux/asyncThunks/userCrudAsyncThunk'
+
+import FormGenerator from '../formGenerator'
+
+
+const UserDeleteForm = () => {
+
+    const usernameInput = React.createRef()
+
+    const { user, token } = useSelector( userAuthSelector )
+
+    const dispatch = useDispatch()
+    const { info } = useSelector( userCrudSelector )
+
+    let refList = [
+        usernameInput,
+    ]
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Create',
+            endpint: 'user/crud/delete',
+            button_value: 'Delete'
+        },
+        {
+            type: 'text',
+            name: 'Username',
+            ref: usernameInput
+        }
+    ]
+
+    const handleDelete = async ( refs ) => {
+        if ( refs[0].current.value === user.username ) {
+            let pass = {
+                token: token,
+                user_id: user.id
+            }
+            dispatch(
+                deleteUser()
+            )
+            dispatch(
+                userCrudAsyncThunk.fetchDeleteUser(
+                    pass
+                )
+            )
+        }
+    }
+
+    return (
+        <div 
+            className="float_form_model"
+            style={ { marginTop: '17%'} }
+        >
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ refList }
+                action={ handleDelete }
+            />
+            <div className='form_info'>
+                { info }
+            </div>
+        </div>
+    )
+
+}
+
+export default UserDeleteForm

src/components/forms/user_crud/userUpdate.js

@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from 'react'
+
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userCrudSelector } from '../../../redux/slices/userCrudSlice'
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import userCrudAsyncThunk from '../../../redux/asyncThunks/userCrudAsyncThunk'
+
+import FormGenerator from '../formGenerator'
+
+
+const UserUpdateForm = () => {
+
+    const usernameInput = React.createRef()
+    const passwordInput = React.createRef()
+    const emailInput = React.createRef()
+
+    const dispatch = useDispatch()
+    const { info } = useSelector( userCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let refList = [
+        usernameInput,
+        passwordInput,
+        emailInput
+    ]
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Create',
+            endpint: 'user/crud/update',
+            button_value: 'Update User'
+        },
+        {
+            type: 'text',
+            name: 'Username',
+            ref: usernameInput
+        },
+        {
+            type: 'password',
+            name: 'Password',
+            ref: passwordInput
+        },
+        {
+            type: 'text',
+            name: 'Email',
+            ref: emailInput
+        }
+    ]
+
+    const update = async ( refs ) => {
+        let pass = {
+            user_id: user.id,
+            token: token,
+            user: {
+                username: refs[0].current.value,
+                password: refs[1].current.value,
+                email: refs[2].current.value,
+            }
+        }
+        dispatch(
+            userCrudAsyncThunk.fetchUpdateUser(
+                pass
+            )
+        )
+    }
+
+    return (
+        <div 
+            className="float_form_model"
+            style={ { marginTop: '10%'} }
+        >
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ refList }
+                action={ update }
+            />
+            <div className='form_info'>
+                { info }
+            </div>
+        </div>
+    )
+
+}
+
+export default UserUpdateForm

src/pages/func_group/rootUtils.js

@@ -54,7 +54,7 @@ const GeneralView = () => {
     }
 
     return (
-        <>
+        <div>
             <NavigationBar 
                 movements={ movements }
             />
@@ -67,34 +67,23 @@ const GeneralView = () => {
             <RenderIndex 
                 movement={ movements.render_view.renderView }
             />
-            {/* <RenderWebsocketIndex 
-                movement={ movements.render_view.renderView }
-            /> */}
-        </>
+        </div>
     )
 }
 
-const __verifyUserSession = (token, user)  => {
-
-    if ( user.id !== 0 && user.username !== '' && user.email !== '' && token !== '' )
-        return true
-    else
-        return false
-    
-}
 
 const VerifyUserSession = () => {
     
     const { token, user } = useSelector(userAuthSelector)
 
     return (
-        <>
+        <div>
             {
-                __verifyUserSession(token, user) 
+                user.id !== 0 && token !== ''
                 ? <GeneralView />  
                 : <UserAuthIndex /> 
             }
-        </>
+        </div>
     )
 }
 

src/pages/func_group/user_crud/userCrudIndex.js

@@ -1,9 +1,41 @@
 import React, { useState, useEffect } from 'react'
 
-const UserCrudIndex = () => {
+import UserUpdateForm from '../../../components/forms/user_crud/userUpdate'
+import UserDeleteForm from '../../../components/forms/user_crud/userDelete'
+
+
+const __handleSwap = (name, movement) => {
+
+    let display = {
+        display: 'block'
+    }
+
+    let hide = {
+        display: 'none'
+    }
+
+    if ( Object.keys(movement['movement']).includes(name) ) {
+        if (movement['movement'][name])
+            return display
+        else
+            return hide
+    } else {
+        return hide
+    }
+
+}
+
+const UserCrudIndex = ( movement ) => {
+
 
     return (
         <div>
+            <div style={ __handleSwap( 'update_user', movement ) }>
+                <UserUpdateForm />
+            </div>
+            <div style={ __handleSwap( 'delete_user', movement ) }>
+                <UserDeleteForm />
+            </div>
         </div>
     )
 }

src/redux/slices/userAuthSlice.js

@@ -13,7 +13,15 @@ const userAuthSlice = createSlice(
             },
             info: ''
         },
-        reducers: {},
+        reducers: {
+            deleteUser(state) {
+                state.token = ''
+                state.user.id = 0
+                state.user.username = ''
+                state.user.email = ''
+                state.info = 'user has been deleted'
+            }
+        },
         extraReducers: {
             [userAuthAsyncThunk.fetchLogin.fulfilled.type]: (state, action) => {
                 try {
@@ -39,4 +47,6 @@ const userAuthSlice = createSlice(
 
 export const userAuthReducer = userAuthSlice.reducer
 
+export const { deleteUser } = userAuthSlice.actions
+
 export const userAuthSelector = state => state.userAuthReducer

src/redux/slices/userCrudSlice.js

@@ -25,19 +25,13 @@ const userCrudSlice = createSlice(
                 state.user_get = action.payload.data
             },
             [userCrudAsyncThunk.fetchRegister.fulfilled.type]: (state, action) => {
-                try {
-                    state.user_register.id = action.payload.data.id
-                    state.user_register.username = action.payload.data.username
-                    state.user_register.email = action.payload.data.email
+                state.user_register = action.payload.data
                 state.info = 'register success'
-                } catch {
-                    state.info = 'register failed'
-                }
             },
             [userCrudAsyncThunk.fetchUpdateUser.fulfilled.type]: (state, action) => {
                 state.user_update = action.payload.data
             },
-            [userCrudAsyncThunk.fetchDeleteUser.fulfilled.type]: (state, action) => {
+            [userCrudAsyncThunk.fetchDeleteUser.fulfilled.type]: (state) => {
                 state.users_list = []
                 state.user_get = {}
                 state.user_register = {}