create user/duck -> Redux & TypeScript stores

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",

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"

src/stores/APIAddress.ts

@@ -1,4 +1,4 @@
-const address = 'localhost:9090'
+const address = 'localhost:9090/'
 
 export {
     address

src/stores/AppService.ts

@@ -1,6 +1,8 @@
 import { address } from './APIAddress'
 
-export class AbstractService<T> {
+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<T> {
         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<JSON> {
+    public async getList(endpoint: string) : Promise<any> {
         return await this.responseGD(address + endpoint, 'GET')
     }
 
-    public async getOne(endpoint: string) : Promise<JSON> {
+    public async getOne(endpoint: string) : Promise<any> {
         return await this.responseGD(address + endpoint, 'GET')
     }
 
-    public async post(endpoint: string, body: T) : Promise<JSON> {
-        return await this.responseCRU(address + endpoint, 'POST', body)
+    public async post(endpoint: string, body: any, token: string) : Promise<any> {
+        return await this.responseCRU(address + endpoint, 'POST', body, token)
     }
 
-    public async put(endpoint: string, body: T) : Promise<JSON> {
-        return await this.responseCRU(address + endpoint, 'PUT', body)
+    public async put(endpoint: string, body: any, token: string) : Promise<any> {
+        return await this.responseCRU(address + endpoint, 'PUT', body, token)
     }
 
-    public async patch(endpoint: string, body: T) : Promise<JSON> {
-        return await this.responseCRU(address + endpoint, 'PATCH', body)
+    public async patch(endpoint: string, body: any, token: string) : Promise<any> {
+        return await this.responseCRU(address + endpoint, 'PATCH', body, token)
     }
 
-    public async delete(endpoint: string) : Promise<JSON> {
+    public async delete(endpoint: string, token: string) : Promise<any> {
         return await this.responseGD(address + endpoint, 'DELETE')
     }
 }

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
+}

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
+}

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
+        )
+    }
+}

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

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
+}