React -> upgrade forms / add register & login & logout operations

src/components/forms/user_auth/userLogin.js

@@ -14,6 +14,7 @@ const UserLoginForm = () => {
     const passwordInput = React.createRef()
 
     const dispatch = useDispatch()
+    const { info } = useSelector( userAuthSelector )
 
     let refList = [
         usernameInput,
@@ -58,6 +59,7 @@ const UserLoginForm = () => {
                 refList={ refList }
                 action={ login }
             />
+            { info }
         </>
     )
 

src/components/forms/user_auth/userRegister.js

@@ -15,6 +15,7 @@ const UserRegisterForm = () => {
     const emailInput = React.createRef()
 
     const dispatch = useDispatch()
+    const { info } = useSelector( userCrudSelector )
 
     let refList = [
         usernameInput,
@@ -27,7 +28,7 @@ const UserRegisterForm = () => {
             type: 'info',
             action: 'Create',
             endpint: 'user/auth/login',
-            button_value: 'Sign In'
+            button_value: 'Sign Up'
         },
         {
             type: 'text',
@@ -66,6 +67,7 @@ const UserRegisterForm = () => {
                 refList={ refList }
                 action={ register }
             />
+            { info }
         </>
     )
 

src/pages/func_group/navigationBar.js

@@ -5,6 +5,7 @@ import { userAuthSelector } from '../../redux/slices/userAuthSlice'
 import { userCrudSelector } from '../../redux/slices/userCrudSlice'
 
 import userCrudAsyncThunk from '../../redux/asyncThunks/userCrudAsyncThunk'
+import userAuthAsyncThunk from '../../redux/asyncThunks/userAuthAsyncThunk'
 
 
 const __setShowGeneral = ( view, key, movements ) => {
@@ -43,7 +44,7 @@ const __setShowGeneral = ( view, key, movements ) => {
             new_move
         )
     } else if (view === 'model_view') {
-        let new_move = movements.user_view.modelCrudView
+        let new_move = movements.model_view.modelCrudView
         new_move[key] = true
         movements.model_view.setModelCrudView( 
             new_move
@@ -86,7 +87,7 @@ const NavigationBar = ({ movements }) => {
     const dispatch = useDispatch()
 
     useEffect( () => {
-        if ( user_get !== {} && token !== '' && user.id > 0)
+        if ( user_get === {} && token !== '' && user.id > 0)
             dispatch(
                 userCrudAsyncThunk.fetchGetOneUser(
                     {
@@ -100,7 +101,15 @@ const NavigationBar = ({ movements }) => {
     const [showAccount, setShowAccount] = useState(false)
     const [showModels, setShowModels] = useState(false)
     const [showRender, setShowRender] = useState(false)
-    const [showRenderFunc, setShowRenderFunc] = useState(false)    
+    const [showRenderFunc, setShowRenderFunc] = useState(false)
+    
+    const logout = async () => {
+        dispatch(
+            userAuthAsyncThunk.fetchLogout(
+                token
+            )
+        )
+    }
 
     return(
         <>
@@ -175,8 +184,8 @@ const NavigationBar = ({ movements }) => {
                         </div>
                     </div>
                 </div>
-                <div>
-                    └── Logout
+                <div onClick={ () => logout() }>
+                    └── Sign Out
                 </div>
             </div>
         </>

src/pages/func_group/user_auth/userAuthIndex.js

@@ -1,13 +1,33 @@
 import React, { useState, useEffect } from 'react'
 
 import UserLoginForm from '../../../components/forms/user_auth/userLogin'
+import UserRegisterForm from '../../../components/forms/user_auth/userRegister'
 
 
 const UserAuthIndex = () => {
 
+    const [swapForm, setSwapForm] = useState(true)
+
+    const handleSwap = (event) => {
+        event.preventDefault()
+        setSwapForm(
+            !swapForm
+        )
+    }
+
     return (
         <div>
-            <UserLoginForm />
+            {   swapForm
+                ? <UserLoginForm />
+                : <UserRegisterForm />
+            }
+            <button onClick={ (event) => handleSwap(event) }>
+                {
+                    swapForm
+                    ? 'Sign Up'
+                    : 'Sign In'
+                }
+            </button>
         </div>
     )
 }

src/redux/asyncThunks/abstracts/abstractService.js

@@ -51,8 +51,11 @@ const _put = async (endpoint, objectId, body, token) => {
 }
 
 const _delete = async (endpoint, objectId, token) => {
+  let slash = '/'
+  if ( objectId === '' )
+    slash = ''
   return await responseAbstract(
-    endpoint + objectId + '/',
+    endpoint + objectId + slash,
     'DELETE',
     token,
     defaultBody
@@ -98,7 +101,6 @@ const headerBuilder = (url, method, token, body) => {
             data: JSON.stringify(body),
         })
     }
-    console.log(headers)
     return headers
 }
 

src/redux/slices/userAuthSlice.js

@@ -10,7 +10,8 @@ const userAuthSlice = createSlice(
                 id: 0,
                 username: '',
                 email: ''
-            }
+            },
+            info: ''
         },
         reducers: {},
         extraReducers: {

src/redux/slices/userCrudSlice.js

@@ -9,7 +9,8 @@ const userCrudSlice = createSlice(
             user_get: {},
             user_register: {},
             user_update: {},
-            user_delete: ''
+            user_delete: '',
+            info: ''
         },
         reducers: {},
         extraReducers: {
@@ -20,7 +21,16 @@ const userCrudSlice = createSlice(
                 state.user_get = action.payload.data
             },
             [userCrudAsyncThunk.fetchRegister.fulfilled.type]: (state, action) => {
-                state.user_register = action.payload.data
+                try {
+                    state.user_register = {
+                        id: action.payload.data.id,
+                        username: action.payload.data.username,
+                        email: action.payload.data.email
+                    }
+                    state.info = 'register success'
+                } catch {
+                    state.info = 'register failed'
+                }
             },
             [userCrudAsyncThunk.fetchUpdateUser.fulfilled.type]: (state, action) => {
                 state.user_update = action.payload.data