From c492240baf892b200df16f7a48c189e9f5e7f1e2 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Wed, 22 Jul 2020 21:47:49 +0200 Subject: [PATCH] rename typescript store to *.ts && rename small components to *.tsx && upgrade components --- gatsby-config.js | 8 ++++ package-lock.json | 45 +++-------------- .../index/indexConsole/commands}/commands.js | 22 ++------- .../commands/fetchCommands/Login.tsx | 48 +++++++++++++++++++ .../commands/fetchCommands/Logout.js | 21 ++++++++ .../index/indexConsole/consoleLoad.js | 0 .../index/indexConsole/indexConsole.js | 23 +++++++-- .../index/indexInterface.js | 0 .../index/indexPanel/indexPanel.js | 0 .../index/indexPanel/panels/albumPanel.js | 0 .../index/indexPanel/panels/songPanel.js | 0 .../index/playerInterface/audioPlayer.js | 2 +- src/pages/app.js | 15 ------ src/pages/index.js | 12 +++++ src/stores/loadStore.ts | 23 +++++++++ src/stores/reducers.ts | 9 ++++ src/stores/store.ts | 24 ++++++++++ src/stores/user/duck/index.ts | 5 ++ src/stores/user/duck/operations.ts | 24 +++++----- 19 files changed, 191 insertions(+), 90 deletions(-) rename src/{pages/index/indexConsole => components/index/indexConsole/commands}/commands.js (83%) create mode 100644 src/components/index/indexConsole/commands/fetchCommands/Login.tsx create mode 100644 src/components/index/indexConsole/commands/fetchCommands/Logout.js rename src/{pages => components}/index/indexConsole/consoleLoad.js (100%) rename src/{pages => components}/index/indexConsole/indexConsole.js (68%) rename src/{pages => components}/index/indexInterface.js (100%) rename src/{pages => components}/index/indexPanel/indexPanel.js (100%) rename src/{pages => components}/index/indexPanel/panels/albumPanel.js (100%) rename src/{pages => components}/index/indexPanel/panels/songPanel.js (100%) rename src/{pages => components}/index/playerInterface/audioPlayer.js (98%) delete mode 100644 src/pages/app.js create mode 100644 src/pages/index.js create mode 100644 src/stores/loadStore.ts create mode 100644 src/stores/reducers.ts create mode 100644 src/stores/store.ts diff --git a/gatsby-config.js b/gatsby-config.js index 3fb0800..11086ff 100755 --- a/gatsby-config.js +++ b/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`, diff --git a/package-lock.json b/package-lock.json index 1fc864c..49a97c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/src/pages/index/indexConsole/commands.js b/src/components/index/indexConsole/commands/commands.js similarity index 83% rename from src/pages/index/indexConsole/commands.js rename to src/components/index/indexConsole/commands/commands.js index 49810cf..33fb9ae 100644 --- a/src/pages/index/indexConsole/commands.js +++ b/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 ( -
- -
- ) -} - -const logout = () => { - return ( -
- -
- ) -} - const startApp = () => { return (
- +
) } @@ -49,8 +35,6 @@ const undefined = (command) => { export default { help, register, - login, - logout, startApp, undefined } \ No newline at end of file diff --git a/src/components/index/indexConsole/commands/fetchCommands/Login.tsx b/src/components/index/indexConsole/commands/fetchCommands/Login.tsx new file mode 100644 index 0000000..b692f60 --- /dev/null +++ b/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 ( +
+
+ login: + +
+ password: + +
+ ) +} + +const mapStateToProps = state => ({ + user: state.user +}) + +// const mapDispatchToProps = dispatch => ({ +// postAuth: user => dispatch( UserService.postAuth(user.name, user.pass) ) +// }) + +export default connect(mapStateToProps) (Login) \ No newline at end of file diff --git a/src/components/index/indexConsole/commands/fetchCommands/Logout.js b/src/components/index/indexConsole/commands/fetchCommands/Logout.js new file mode 100644 index 0000000..21cc10a --- /dev/null +++ b/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 ( +
+ +
+ ) +} + +const mapStateToProps = state => ({ + user: state.user +}) + +const mapDispatchToProps = dispatch => ({ + UserService: user => dispatch( UserService(user) ) +}) + +export default connect(mapStateToProps, mapDispatchToProps) (Logout) \ No newline at end of file diff --git a/src/pages/index/indexConsole/consoleLoad.js b/src/components/index/indexConsole/consoleLoad.js similarity index 100% rename from src/pages/index/indexConsole/consoleLoad.js rename to src/components/index/indexConsole/consoleLoad.js diff --git a/src/pages/index/indexConsole/indexConsole.js b/src/components/index/indexConsole/indexConsole.js similarity index 68% rename from src/pages/index/indexConsole/indexConsole.js rename to src/components/index/indexConsole/indexConsole.js index 543cd8b..7233755 100644 --- a/src/pages/index/indexConsole/indexConsole.js +++ b/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 }
- guest@00x097 * > + { consoleUser } { autoFocus />
+
+
+ +
+
+ +
+
) } diff --git a/src/pages/index/indexInterface.js b/src/components/index/indexInterface.js similarity index 100% rename from src/pages/index/indexInterface.js rename to src/components/index/indexInterface.js diff --git a/src/pages/index/indexPanel/indexPanel.js b/src/components/index/indexPanel/indexPanel.js similarity index 100% rename from src/pages/index/indexPanel/indexPanel.js rename to src/components/index/indexPanel/indexPanel.js diff --git a/src/pages/index/indexPanel/panels/albumPanel.js b/src/components/index/indexPanel/panels/albumPanel.js similarity index 100% rename from src/pages/index/indexPanel/panels/albumPanel.js rename to src/components/index/indexPanel/panels/albumPanel.js diff --git a/src/pages/index/indexPanel/panels/songPanel.js b/src/components/index/indexPanel/panels/songPanel.js similarity index 100% rename from src/pages/index/indexPanel/panels/songPanel.js rename to src/components/index/indexPanel/panels/songPanel.js diff --git a/src/pages/index/playerInterface/audioPlayer.js b/src/components/index/playerInterface/audioPlayer.js similarity index 98% rename from src/pages/index/playerInterface/audioPlayer.js rename to src/components/index/playerInterface/audioPlayer.js index e27963a..b86e2b7 100755 --- a/src/pages/index/playerInterface/audioPlayer.js +++ b/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' diff --git a/src/pages/app.js b/src/pages/app.js deleted file mode 100644 index 46b7e32..0000000 --- a/src/pages/app.js +++ /dev/null @@ -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() { -//
-// } -// } - diff --git a/src/pages/index.js b/src/pages/index.js new file mode 100644 index 0000000..41b096c --- /dev/null +++ b/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 = () => ( + + + +) + +export default IndexPage diff --git a/src/stores/loadStore.ts b/src/stores/loadStore.ts new file mode 100644 index 0000000..220e3b2 --- /dev/null +++ b/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'); + } + }; \ No newline at end of file diff --git a/src/stores/reducers.ts b/src/stores/reducers.ts new file mode 100644 index 0000000..49307d6 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/stores/store.ts b/src/stores/store.ts new file mode 100644 index 0000000..aa15843 --- /dev/null +++ b/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) +} \ No newline at end of file diff --git a/src/stores/user/duck/index.ts b/src/stores/user/duck/index.ts index e69de29..8833653 100644 --- a/src/stores/user/duck/index.ts +++ b/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 \ No newline at end of file diff --git a/src/stores/user/duck/operations.ts b/src/stores/user/duck/operations.ts index c9694b0..780b79c 100644 --- a/src/stores/user/duck/operations.ts +++ b/src/stores/user/duck/operations.ts @@ -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,11 +74,11 @@ 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 ) this.deleteAuth(token) } -} \ No newline at end of file +}