From 01584e640c3d2a3134b203e527c76b1f2fd7edea Mon Sep 17 00:00:00 2001 From: TBS093A Date: Tue, 21 Jul 2020 16:35:53 +0200 Subject: [PATCH] create user/duck -> Redux & TypeScript stores --- package-lock.json | 12 +++++ package.json | 3 +- src/stores/APIAddress.ts | 2 +- src/stores/AppService.ts | 29 +++++++----- src/stores/user/duck/actions.ts | 14 ++++++ src/stores/user/duck/class.ts | 9 ++++ src/stores/user/duck/index.ts | 0 src/stores/user/duck/operations.ts | 76 ++++++++++++++++++++++++++++++ src/stores/user/duck/reducers.ts | 43 +++++++++++++++++ src/stores/user/duck/types.ts | 7 +++ 10 files changed, 181 insertions(+), 14 deletions(-) create mode 100644 src/stores/user/duck/actions.ts create mode 100644 src/stores/user/duck/class.ts create mode 100644 src/stores/user/duck/index.ts create mode 100644 src/stores/user/duck/operations.ts create mode 100644 src/stores/user/duck/reducers.ts create mode 100644 src/stores/user/duck/types.ts diff --git a/package-lock.json b/package-lock.json index 04829b1..1fc864c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14445,6 +14445,18 @@ } } }, + "react-redux": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.0.tgz", + "integrity": "sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA==", + "requires": { + "@babel/runtime": "^7.5.5", + "hoist-non-react-statics": "^3.3.0", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-is": "^16.9.0" + } + }, "react-refresh": { "version": "0.7.2", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.7.2.tgz", diff --git a/package.json b/package.json index c7f0c67..5391d92 100755 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ "react": "^16.12.0", "react-dom": "^16.12.0", "react-helmet": "^6.0.0", - "react-mobx": "0.0.4" + "react-redux": "^7.2.0", + "redux": "^4.0.5" }, "devDependencies": { "prettier": "2.0.5" diff --git a/src/stores/APIAddress.ts b/src/stores/APIAddress.ts index 4aaf33b..c3d8b66 100644 --- a/src/stores/APIAddress.ts +++ b/src/stores/APIAddress.ts @@ -1,4 +1,4 @@ -const address = 'localhost:9090' +const address = 'localhost:9090/' export { address diff --git a/src/stores/AppService.ts b/src/stores/AppService.ts index a067742..f2b0143 100644 --- a/src/stores/AppService.ts +++ b/src/stores/AppService.ts @@ -1,6 +1,8 @@ import { address } from './APIAddress' -export class AbstractService { +export default class AbstractService { + + public defaultToken: string = 'empty' private async responseGD(address: string, method: string) { const response = await fetch( address, { @@ -10,36 +12,39 @@ export class AbstractService { return response.json() } - private async responseCRU(address: string, method: string, body: T) { + private async responseCRU(address: string, method: string, body: any, token: string) { const response = await fetch( address, { method: method, credentials: 'same-origin', - body: JSON.stringify(body) + body: JSON.stringify(body), + headers: { + "Authorization": token + } }) return response.json() } - public async getList(endpoint: string) : Promise { + public async getList(endpoint: string) : Promise { return await this.responseGD(address + endpoint, 'GET') } - public async getOne(endpoint: string) : Promise { + public async getOne(endpoint: string) : Promise { return await this.responseGD(address + endpoint, 'GET') } - public async post(endpoint: string, body: T) : Promise { - return await this.responseCRU(address + endpoint, 'POST', body) + public async post(endpoint: string, body: any, token: string) : Promise { + return await this.responseCRU(address + endpoint, 'POST', body, token) } - public async put(endpoint: string, body: T) : Promise { - return await this.responseCRU(address + endpoint, 'PUT', body) + public async put(endpoint: string, body: any, token: string) : Promise { + return await this.responseCRU(address + endpoint, 'PUT', body, token) } - public async patch(endpoint: string, body: T) : Promise { - return await this.responseCRU(address + endpoint, 'PATCH', body) + public async patch(endpoint: string, body: any, token: string) : Promise { + return await this.responseCRU(address + endpoint, 'PATCH', body, token) } - public async delete(endpoint: string) : Promise { + public async delete(endpoint: string, token: string) : Promise { return await this.responseGD(address + endpoint, 'DELETE') } } \ No newline at end of file diff --git a/src/stores/user/duck/actions.ts b/src/stores/user/duck/actions.ts new file mode 100644 index 0000000..f15a65c --- /dev/null +++ b/src/stores/user/duck/actions.ts @@ -0,0 +1,14 @@ +import types from './types' + +const login = item => ({ + type: types.LOGOUT_USER, item +}) + +const logout = () => ({ + type: types.LOGOUT_USER +}) + +export default { + login, + logout +} \ No newline at end of file diff --git a/src/stores/user/duck/class.ts b/src/stores/user/duck/class.ts new file mode 100644 index 0000000..e37df15 --- /dev/null +++ b/src/stores/user/duck/class.ts @@ -0,0 +1,9 @@ +export default class User { + public id: number + public username: string + public email: string + public ip: string + public city: string + public country: string + public token: string +} \ No newline at end of file diff --git a/src/stores/user/duck/index.ts b/src/stores/user/duck/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/stores/user/duck/operations.ts b/src/stores/user/duck/operations.ts new file mode 100644 index 0000000..602d155 --- /dev/null +++ b/src/stores/user/duck/operations.ts @@ -0,0 +1,76 @@ +import actions from './actions' +import { useDispatch } from 'react-redux' + +import User from './class' +import AppService from '../../AppService' + + +export default class UserService{ + + constructor( + private service: AppService + ){} + + private endpoint: string = 'user/' + private dispatch = useDispatch() + private response: any + + private serviceUser: User + + // Authorization + + public async postAuth(username: string, password: string) { + const body = { + username: username, + password: password + } + this.response = await this.service.post( + this.endpoint + '/auth', + body, + this.service.defaultToken + ) + this.serviceUser = { + id: this.response.payload.user.id, + username: this.response.payload.user.username, + email: this.response.payload.user.email, + ip: this.response.payload.user.ip, + city: this.response.payload.user.city, + country: this.response.payload.user.country, + token: this.response.payload.Authorization + } + this.dispatch(actions.login(this.serviceUser)) + } + + public async deleteAuth(token: string) { + this.response = await this.service.delete( + this.endpoint + 'auth', + token + ) + this.dispatch(actions.logout()) + } + + // User CRUD + + public async registerUser(user: any) { + this.response = await this.service.post( + this.endpoint, + user, + this.service.defaultToken + ) + } + + public async updateUser(user: any, id: number, token: string) { + this.response = await this.service.patch( + this.endpoint + '/' + id, + user, + token + ) + } + + public async deleteUser(id: number, token: string) { + this.response = await this.service.delete( + this.endpoint + '/' + id, + token + ) + } +} \ No newline at end of file diff --git a/src/stores/user/duck/reducers.ts b/src/stores/user/duck/reducers.ts new file mode 100644 index 0000000..54ade70 --- /dev/null +++ b/src/stores/user/duck/reducers.ts @@ -0,0 +1,43 @@ +import types from './types' +import User from './class' + +const INITIAL_STATE: User = { + id: -1, + username: '', + email: '', + ip: '', + city: '', + country: '', + token: '' +} + +const userReducer = (state=INITIAL_STATE, action) => { + switch(action.type) { + case types.LOGIN_USER: + return { + ...state, + id: action.item.id, + username: action.item.username, + email: action.item.email, + ip: action.item.ip, + city: action.item.city, + country: action.item.country, + token: action.item.token + } + case types.LOGOUT_USER: + return { + ...state, + id: -1, + username: '', + email: '', + ip: '', + city: '', + country: '', + token: '' + } + default: + return state + } +} + +export default userReducer \ No newline at end of file diff --git a/src/stores/user/duck/types.ts b/src/stores/user/duck/types.ts new file mode 100644 index 0000000..3548ae3 --- /dev/null +++ b/src/stores/user/duck/types.ts @@ -0,0 +1,7 @@ +const LOGIN_USER: string = 'LOGIN_USER' +const LOGOUT_USER: string = 'LOGOUT_USER' + +export default { + LOGIN_USER, + LOGOUT_USER +} \ No newline at end of file