create logout component && create components folder with fetch commands

src/components/index/indexConsole/commands/fetchCommands/Logout.js

@@ -1,13 +1,46 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { connect } from 'react-redux'
-import { UserService } from '../../../../../stores/user/duck/operations'
 
-const Logout = () => {
+import { deleteAuth } from '../../../../../stores/user/duck/operations'
-    return (
-        <div>
 
-        </div>
+const Logout = ({
+    user,
+    deleteAuth,
+    consoleHistory, setConsoleHistory, 
+    componentVisible, setComponentVisible,
+    activateConsoleInput
+}) => {
+
+    const [message, setMessage] = useState('')
+    const [oneRequest, setOne] = useState(false)
+
+    useEffect( 
+        () => {
+            if ( componentVisible && oneRequest === false ) {
+                deleteAuth(user.token)
+                    .then( () => {
+                        setMessage( 'logout success' )
+                    }).catch( () => {
+                        setMessage( 'logout failed' )
+                    })
+                setOne( !oneRequest )
+            } else {
+                activateConsoleInput()
+            }
+            if ( message !== '' ) {
+                setConsoleHistory( consoleHistory + message )
+                setComponentVisible( false )
+                setOne( false )
+                setMessage('')
+                activateConsoleInput()
+            }
+        }
     ) 
+
+    return (
+        <div></div>
+    )
+
 }
 
 const mapStateToProps = state => ({
@@ -15,7 +48,7 @@ const mapStateToProps = state => ({
 })
 
 const mapDispatchToProps = dispatch => ({
-    UserService: user => dispatch( UserService(user) )
+    deleteAuth: (token) => dispatch( deleteAuth( token ) )
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Logout)

src/components/index/indexConsole/indexConsole.js

@@ -7,13 +7,18 @@ import Logout from './commands/fetchCommands/Logout'
 
 import '../../../styles/general.scss'
 
+import { deleteAuth } from '../../../stores/user/duck/operations'
 
-const IndexConsole = ({ user }) => {
+const IndexConsole = ({ 
+    user,
+    deleteAuth
+}) => {
 
     const [consoleHistory, setConsoleHistory] = useState('')
 
-    const [loginCommand, setVisibleLoginForm] = useState(false)
+    const [login, setLogin] = useState(false)
-    const [logoutCommand, setVisibleLogoutForm] = useState(false)
+    const [logout, setLogout] = useState(false)
+    const [register, setRegister] = useState(false)
 
     const consoleInput = React.createRef()
 
@@ -48,7 +53,7 @@ const IndexConsole = ({ user }) => {
                 setConsoleHistory( consoleHistory + consoleUser + commands.helpUser() )
             } else if ( inputValue === 'logout' ) {
                 setConsoleHistory( consoleHistory + consoleUser )
-                setVisibleLogoutForm( !logoutCommand )
+                setLogout( !logout )
             } else if ( inputValue === 'clean' ){
                 setConsoleHistory( '' )
             } else {
@@ -59,7 +64,9 @@ const IndexConsole = ({ user }) => {
                 setConsoleHistory( consoleHistory + consoleUser + commands.help() )
             } else if ( inputValue === 'login' ) {
                 setConsoleHistory( consoleHistory + consoleUser )
-                setVisibleLoginForm( !loginCommand )
+                setLogin( !login )
+            } else if ( inputValue === 'register' ) {
+
             } else if ( inputValue === 'clean' ){
                 setConsoleHistory( '' )
             } else {
@@ -92,26 +99,29 @@ const IndexConsole = ({ user }) => {
                     { consoleHistory }
             </pre>
             <div id='inputForms'>
-                <div style={ checkVisible( loginCommand ) } >
+                <div style={ checkVisible( login ) } >
                     <Login 
                         consoleHistory={ consoleHistory }
                         setConsoleHistory={ setConsoleHistory }
-                        componentVisible={ loginCommand }
+                        componentVisible={ login }
-                        setComponentVisible={ setVisibleLoginForm }
+                        setComponentVisible={ setLogin }
                         activateConsoleInput={ activateInput }
                     />
                 </div>
-                <div style={ checkVisible( logoutCommand ) } >
+                <div style={ checkVisible( logout ) }> 
                     <Logout
                         consoleHistory={ consoleHistory }
                         setConsoleHistory={ setConsoleHistory }
-                        componentVisible={ logoutCommand }
+                        componentVisible={ logout }
-                        setComponentVisible={ setVisibleLogoutForm }
+                        setComponentVisible={ setLogout }
                         activateConsoleInput={ activateInput }
                     />
                 </div>
+                <div style={ checkVisible( register ) } >
+
                 </div>
-            <form onSubmit={ detectCommand } style={ checkVisible( !(loginCommand || logoutCommand) ) }>
+            </div>
+            <form onSubmit={ detectCommand } style={ checkVisible( !(register || login || logout) ) }>
                 { consoleUser }
                 <input 
                     id='consoleInput'
@@ -128,4 +138,8 @@ const mapStateToProps = state => ({
     user: state.user
 })
 
-export default connect(mapStateToProps, )(IndexConsole)
+const mapDispatchToProps = dispatch => ({
+    deleteAuth: (token) => dispatch( deleteAuth(token) )
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(IndexConsole)

src/stores/user/duck/operations.js

@@ -43,11 +43,17 @@ export const postAuth = (username, password) => async (dispatch) => {
 }
 
 export const deleteAuth = (token)  => async (dispatch) => {
+    try {
         response = await AppService._delete(
             endpoint + 'auth',
             token
-    )
+        ).then( () => {
             dispatch(actions.logout())
+            return { error: 'logout success'}
+        })
+    } catch {
+        return { error: 'connection failed' }
+    }
 }
 
 // User CRUD