rename typescript store to *.ts && rename small components to *.tsx && upgrade components

gatsby-config.js

@@ -28,6 +28,14 @@ module.exports = {
         //icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
       },
     },
+    // {
+    //   resolve: 'gatsby-plugin-typescript',
+    //   options: {
+    //     isTSX: true,
+    //     jsxPragma: `jsx`,
+    //     allExtensions: true,
+    //   },
+    // },
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,

package-lock.json

@@ -2077,9 +2077,9 @@
       }
     },
     "@types/node": {
-      "version": "14.0.14",
+      "version": "14.0.24",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.14.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.24.tgz",
-      "integrity": "sha512-syUgf67ZQpaJj01/tRTknkMNoBBLWJOBODF0Zm4NrXmiSuxjymFrxnTu1QVYRubhVkRcZLYZG8STTwJRdVm/WQ=="
+      "integrity": "sha512-btt/oNOiDWcSuI721MdL8VQGnjsKjlTMdrKyTcLCKeQp/n4AAMFJ961wMbp+09y8WuGPClDEv07RIItdXKIXAA=="
     },
     "@types/parse-json": {
       "version": "4.0.0",
@@ -2106,9 +2106,9 @@
       }
     },
     "@types/react": {
-      "version": "16.9.41",
+      "version": "16.9.43",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.41.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.43.tgz",
-      "integrity": "sha512-6cFei7F7L4wwuM+IND/Q2cV1koQUvJ8iSV+Gwn0c3kvABZ691g7sp3hfEQHOUBJtccl1gPi+EyNjMIl9nGA0ug==",
+      "integrity": "sha512-PxshAFcnJqIWYpJbLPriClH53Z2WlJcVZE+NP2etUtWQs2s7yIMj3/LDKZT/5CHJ/F62iyjVCDu2H3jHEXIxSg==",
       "requires": {
         "@types/prop-types": "*",
         "csstype": "^2.2.0"
@@ -11795,21 +11795,6 @@
       "resolved": "https://registry.npmjs.org/mobx/-/mobx-5.15.4.tgz",
       "integrity": "sha512-xRFJxSU2Im3nrGCdjSuOTFmxVDGeqOHL+TyADCGbT0k4HHqGmx5u2yaHNryvoORpI4DfbzjJ5jPmuv+d7sioFw=="
     },
-    "mobx-react": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-4.4.3.tgz",
-      "integrity": "sha1-uqnsQRZe41rnud8ZvKEBkPNvEX4=",
-      "requires": {
-        "hoist-non-react-statics": "^2.3.1"
-      },
-      "dependencies": {
-        "hoist-non-react-statics": {
-          "version": "2.5.5",
-          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
-          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
-        }
-      }
-    },
     "moment": {
       "version": "2.27.0",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
@@ -14405,24 +14390,6 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
-    "react-mobx": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/react-mobx/-/react-mobx-0.0.4.tgz",
-      "integrity": "sha512-dFvnbL3JryzmNkVPfb5klhGXFsEPD+X1yNHIOiLNTGFLXNHB7kLMghPHjenilKBMqg6ZIJ2mmo/9u6HBvBBUQg==",
-      "requires": {
-        "mobx": "^3.5.1",
-        "mobx-react": "^4.4.2",
-        "react": "^16.2.0",
-        "react-dom": "^16.2.0"
-      },
-      "dependencies": {
-        "mobx": {
-          "version": "3.6.2",
-          "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.2.tgz",
-          "integrity": "sha512-Dq3boJFLpZEvuh5a/MbHLUIyN9XobKWIb0dBfkNOJffNkE3vtuY0C9kSDVpfH8BB0BPkVw8g22qCv7d05LEhKg=="
-        }
-      }
-    },
     "react-reconciler": {
       "version": "0.25.1",
       "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.25.1.tgz",

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

@@ -1,5 +1,7 @@
 import React from 'react'
 
+import ConsoleLoad from '../consoleLoad'
+
 const help = () => {
     return    "register                                            - register user by form \n"
             + "login                                               - login user by form \n"
@@ -17,26 +19,10 @@ const register = () => {
     )
 }
 
-const login = () => {
-    return (
-        <div>
-        
-        </div>
-    )
-}
-
-const logout = () => {
-    return (
-        <div>
-        
-        </div>
-    )
-}
-
 const startApp = () => {
     return (
         <div>
-        
+            <ConsoleLoad />
         </div>
     )
 }
@@ -49,8 +35,6 @@ const undefined = (command) => {
 export default {
     help,
     register,
-    login,
-    logout,
     startApp,
     undefined
 }

src/components/index/indexConsole/commands/fetchCommands/Login.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+import UserService from '../../../../../stores/user/duck/operations'
+
+const loginInput: any = React.createRef()
+const passwInput: any = React.createRef()
+
+const Login = ( user) => {
+    
+
+    const login = (event) => {
+        event.preventDefault()
+        UserService.postAuth(
+            loginInput.current.value,
+            passwInput.current.value
+        )
+    }
+    
+    return (
+        <div>
+            <form onSubmit={ login }>
+                login:
+                <input 
+                    ref={ loginInput }
+                    autoFocus
+                />
+                <br />
+                password:
+                <input 
+                    ref={ passwInput }
+                    autoFocus
+                />
+                <button type='submit' />
+            </form>
+        </div>
+    )
+}
+
+const mapStateToProps = state => ({
+    user: state.user
+})
+
+// const mapDispatchToProps = dispatch => ({
+//     postAuth: user => dispatch( UserService.postAuth(user.name, user.pass) )
+// })
+
+export default connect(mapStateToProps) (Login)

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

@@ -0,0 +1,21 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { UserService } from '../../../../../stores/user/duck/operations'
+
+const Logout = () => {
+    return (
+        <div>
+        
+        </div>
+    )
+}
+
+const mapStateToProps = state => ({
+    user: state.user
+})
+
+const mapDispatchToProps = dispatch => ({
+    UserService: user => dispatch( UserService(user) )
+})
+
+export default connect(mapStateToProps, mapDispatchToProps) (Logout)

src/components/index/indexConsole/indexConsole.js

@@ -1,10 +1,13 @@
 import React, { useEffect, useState } from 'react'
 
-import commands from './commands'
+import commands from './commands/commands'
+import Login from './commands/fetchCommands/Login.tsx' 
+// import Logout from './commands/fetchCommands/Logout'
 
 import '../../../styles/general.scss'
 
-const IndexConsole = () => {
+
+const IndexConsole = ( user ) => {
 
     useEffect( () => resizeConsoleDiv(), [])
 
@@ -20,6 +23,9 @@ const IndexConsole = () => {
 
     const [consoleHistory, setConsoleHistory] = useState('')
 
+    const [loginCommand, setVisibleLoginForm] = useState(false)
+    const [logoutCommand, setVisibleLogoutForm] = useState(false)
+
     const consoleInput = React.createRef()
 
     let consoleUser = 'guest@00x097 * >  '
@@ -30,6 +36,9 @@ const IndexConsole = () => {
         consoleUser += inputValue + '\n'
         if ( inputValue === 'help' )
             setConsoleHistory( consoleHistory + consoleUser + commands.help() )
+        if ( inputValue === 'login' ) {
+            setVisibleLoginForm( !loginCommand )
+        }
         else if ( inputValue === 'clean' )
             setConsoleHistory( '' )
         else
@@ -50,7 +59,7 @@ const IndexConsole = () => {
                     { consoleHistory }
             </pre>
             <form onSubmit={ detectCommand }>
-                guest@00x097 * >
+                { consoleUser }
                 <input 
                     id='consoleInput'
                     ref={consoleInput}
@@ -58,6 +67,14 @@ const IndexConsole = () => {
                     autoFocus
                 />
             </form>
+            <div id='inputForms'>
+                <div style={ loginCommand === true ? {display: 'block'} : {display: 'none'} } >
+                    <Login />
+                </div>
+                <div style={ logoutCommand === true ? {display: 'block'} : {display: 'none'} } >
+                    
+                </div>
+            </div>
         </div>
     )
 }

src/components/index/playerInterface/audioPlayer.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 
 import '../../../styles/audioVisualizer.scss'
-import { alphabeth } from '../../../components/alphabeth'
+import { alphabeth } from '../../alphabeth'
 import audioTest from '../../../images/audioTest0.wav'
 
 

src/pages/app.js

@@ -1,15 +0,0 @@
-// import React from 'react'
-// import 
-// import { observer } from 'react-mobx'
-// import { render } from 'node-sass'
-
-// import Guest from './../stores/guest'
-
-// @observer
-// class App {
-
-//     render() {
-//         <div></div>
-//     }
-// }
-

src/pages/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import IndexConsole from '../components/index/indexConsole/indexConsole'
+import { store } from '../stores/store.ts'
+import { Provider } from 'react-redux'
+
+const IndexPage = () => (
+    <Provider store={ store }>
+        <IndexConsole />
+    </Provider>
+)
+
+export default IndexPage

src/stores/loadStore.ts

@@ -0,0 +1,23 @@
+export const loadState = () => {
+    try {
+      const serializedState = localStorage.getItem('state');
+  
+      if (serializedState === null) {
+        return undefined;
+      }
+  
+      return JSON.parse(serializedState);
+  
+    } catch (err) {
+      return undefined;
+    }
+  };
+  
+  export const saveState = (state) => {
+    try {
+      const serializedState = JSON.stringify(state);
+      localStorage.setItem('state', serializedState);
+    } catch (err) {
+      console.log('save in local storage error');
+    }
+  };

src/stores/reducers.ts

@@ -0,0 +1,9 @@
+import { combineReducers } from 'redux'
+
+import userReducer from './user/duck'
+
+const rootReducer = combineReducers({
+    user: userReducer
+})
+
+export default rootReducer

src/stores/store.ts

@@ -0,0 +1,24 @@
+import { createStore } from 'redux'
+import { saveState, loadState } from './loadStore'
+import rootReducer from './reducers'
+import loadash from 'lodash'
+
+const persistedState = loadState()
+
+export const store = createStore(rootReducer, persistedState)
+
+store.subscribe( () => {
+    saveState({
+        user: store.getState().user
+    })
+})
+
+store.subscribe( loadash.throttle( () => {
+    saveState({
+        user: store.getState().user
+    })
+}, 1000))
+
+export default preloadedState => {
+    return createStore(rootReducer, preloadedState)
+}

src/stores/user/duck/index.ts

@@ -0,0 +1,5 @@
+import userReducer from './reducers'
+export { default as userTypes } from './types'
+export { default as userActions } from './actions'
+
+export default userReducer

src/stores/user/duck/operations.ts

@@ -7,18 +7,16 @@ import User from './class'
 
 export default class UserService {
 
-    constructor(
+    private static service: AppService
-        private service: AppService,
+    private static serviceUser: User
-        private serviceUser: User,
+    private static response: any
-        private response: any
-    ){}
 
-    private endpoint: string = 'user/'
+    private static endpoint: string = 'user/'
-    private dispatch: any = useDispatch()
+    private static dispatch: any = useDispatch()
 
     // Authorization
 
-    public async postAuth(username: string, password: string) {
+    public static async postAuth(username: string, password: string) {
         const body = { 
             username: username, 
             password: password
@@ -40,7 +38,7 @@ export default class UserService {
         this.dispatch(actions.login(this.serviceUser))
     }
 
-    public async deleteAuth(token: string) {
+    public static async deleteAuth(token: string) {
         this.response = await this.service.delete(
             this.endpoint + 'auth',
             token
@@ -50,7 +48,7 @@ export default class UserService {
 
     // User CRUD
 
-    public async registerUser(user: any) {
+    public static async registerUser(user: any) {
         this.response = await this.service.post(
             this.endpoint,
             user,
@@ -58,7 +56,7 @@ export default class UserService {
         )
     }
 
-    public async updateUser(user: any, id: number, token: string) {
+    public static async updateUser(user: any, id: number, token: string) {
         this.response = await this.service.patch(
             this.endpoint + id,
             user,
@@ -76,7 +74,7 @@ export default class UserService {
         this.dispatch(actions.login(this.serviceUser))
     }
 
-    public async deleteUser(id: number, token: string) {
+    public static async deleteUser(id: number, token: string) {
         this.response = await this.service.delete(
             this.endpoint + id,
             token