create indexConsole and command interpreter

src/pages/index/indexConsole/commands.js

@@ -0,0 +1,58 @@
+import React from 'react'
+
+const help = () => {
+    return "register            - register user by form \n"
+            + "login               - login user by form \n"
+            + "logout              - logout user \n"
+            + "start               - start command \n"
+            + "    -a --app        - app flag - start music service app \n"
+}
+
+const register = () => {
+    return (
+        <div>
+        
+        </div>
+    )
+}
+
+const login = () => {
+    return (
+        <div>
+        
+        </div>
+    )
+}
+
+const logout = () => {
+    return (
+        <div>
+        
+        </div>
+    )
+}
+
+const startApp = () => {
+    return (
+        <div>
+        
+        </div>
+    )
+}
+
+const undefined = (command) => {
+    return (
+        <div>
+            command '{command}' is undefined
+        </div>
+    )
+}
+
+export default {
+    help,
+    register,
+    login,
+    logout,
+    startApp,
+    undefined
+}

src/pages/index/indexConsole/consoleLoad.js

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect } from 'react'
 
-import '../styles/general.scss'
+import '../../../styles/general.scss'
 
-const IndexConsole = () => {
+const ConsoleLoad = () => {
 
     useEffect( () => { loadingDivs() } )
 
@@ -186,4 +186,4 @@ const IndexConsole = () => {
 
 }
 
-export default IndexConsole
+export default ConsoleLoad

src/pages/index/indexConsole/indexConsole.js

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react'
+
+import commands from './commands'
+
+import '../../../styles/general.scss'
+
+const IndexConsole = () => {
+
+    useEffect( () => resizeConsoleDiv(), [])
+
+    const resizeConsoleDiv = () => {
+        let consoleDiv = document.getElementById('consoleDiv')
+        consoleDiv.style.height = window.innerHeight - 100 + 'px'
+    }
+
+    const activateInput = () => {
+        let input = document.getElementById('consoleInput')
+        input.focus()
+    }
+
+    const [consoleHistory, setConsoleHistory] = useState('')
+
+    const consoleInput = React.createRef()
+
+    const detectCommand = (event) => {
+        event.preventDefault()
+        setConsoleHistory( '# ' + consoleInput.current.value + '\n')
+        if (consoleInput.current.value === 'help')
+            setConsoleHistory( commands.help() )
+            console.log(consoleHistory)
+        activateInput()
+    }
+
+    return (
+        <div id='consoleDiv' onClick={ activateInput }>
+            <div>
+                tbs093a@00x097 system, welcome <br />
+                type 'help' to get commands
+            </div>
+            <pre id='consoleHistory'>
+                    { consoleHistory }
+            </pre>
+            <form onSubmit={ detectCommand }>
+                # 
+                <input 
+                    id='consoleInput'
+                    ref={consoleInput}
+                    autoComplete='off'
+                    autoFocus
+                />
+            </form>
+        </div>
+    )
+}
+
+export default IndexConsole

src/stores/user/duck/operations.ts

@@ -1,11 +1,11 @@
-import actions from './actions'
 import { useDispatch } from 'react-redux'
-
-import User from './class'
 import AppService from '../../AppService'
 
+import actions from './actions'
+import User from './class'
 
-export default class UserService{
+
+export default class UserService {
 
     constructor(
         private service: AppService,

src/styles/general.scss

@@ -22,7 +22,7 @@ body {
 // index console
 
 #consoleDiv {
-    margin: 50px;
+    padding: 50px;
 
     .ASCIIview {
         width: 100%;
@@ -57,4 +57,22 @@ body {
             transform: rotate(-14deg);
         }
     }
+
+    input {
+        background-color: rgba(0,0,0,0);
+        color: rgb(172, 36, 36);
+        font-family: Ubuntu;
+        font-size: 16px;
+        border: 0px;
+        margin-left: 5px;
+    }
+    input:focus{
+        outline: none;
+    }
+
+    pre {
+        margin: 0px;
+        font-family: Ubuntu;
+        font-size: 16px;
+    }
 }