rename typescript store to *.ts && rename small components to *.tsx && upgrade components
parent
db4782acf0
commit
c492240baf
|
|
@ -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`,
|
||||
|
|
|
|||
|
|
@ -2077,9 +2077,9 @@
|
|||
}
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "14.0.14",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.14.tgz",
|
||||
"integrity": "sha512-syUgf67ZQpaJj01/tRTknkMNoBBLWJOBODF0Zm4NrXmiSuxjymFrxnTu1QVYRubhVkRcZLYZG8STTwJRdVm/WQ=="
|
||||
"version": "14.0.24",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.24.tgz",
|
||||
"integrity": "sha512-btt/oNOiDWcSuI721MdL8VQGnjsKjlTMdrKyTcLCKeQp/n4AAMFJ961wMbp+09y8WuGPClDEv07RIItdXKIXAA=="
|
||||
},
|
||||
"@types/parse-json": {
|
||||
"version": "4.0.0",
|
||||
|
|
@ -2106,9 +2106,9 @@
|
|||
}
|
||||
},
|
||||
"@types/react": {
|
||||
"version": "16.9.41",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.41.tgz",
|
||||
"integrity": "sha512-6cFei7F7L4wwuM+IND/Q2cV1koQUvJ8iSV+Gwn0c3kvABZ691g7sp3hfEQHOUBJtccl1gPi+EyNjMIl9nGA0ug==",
|
||||
"version": "16.9.43",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.43.tgz",
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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)
|
||||
|
|
@ -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)
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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'
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
// }
|
||||
// }
|
||||
|
||||
|
|
@ -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
|
||||
|
|
@ -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');
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { combineReducers } from 'redux'
|
||||
|
||||
import userReducer from './user/duck'
|
||||
|
||||
const rootReducer = combineReducers({
|
||||
user: userReducer
|
||||
})
|
||||
|
||||
export default rootReducer
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import userReducer from './reducers'
|
||||
export { default as userTypes } from './types'
|
||||
export { default as userActions } from './actions'
|
||||
|
||||
export default userReducer
|
||||
|
|
@ -7,18 +7,16 @@ import User from './class'
|
|||
|
||||
export default class UserService {
|
||||
|
||||
constructor(
|
||||
private service: AppService,
|
||||
private serviceUser: User,
|
||||
private response: any
|
||||
){}
|
||||
private static service: AppService
|
||||
private static serviceUser: User
|
||||
private static response: any
|
||||
|
||||
private endpoint: string = 'user/'
|
||||
private dispatch: any = useDispatch()
|
||||
private static endpoint: string = 'user/'
|
||||
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
|
||||
|
|
|
|||
Loading…
Reference in New Issue