React App

├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── README.md ├── information ├── Clean Architecture React.drawio └── Clean Architecture React.png ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── settings.json ├── src ├── App.css ├── App.tsx ├── data │ └── auth │ │ └── AuthFakeApi.tsx ├── domain │ ├── entity │ │ └── auth │ │ │ ├── models │ │ │ ├── AuthHolder.tsx │ │ │ └── AuthListener.tsx │ │ │ └── stuctures │ │ │ ├── AuthorizationResult.tsx │ │ │ └── ValidationResult.tsx │ ├── interactors │ │ └── auth │ │ │ └── LoginUseCase.tsx │ └── repository │ │ └── auth │ │ └── AuthRepository.tsx ├── index.tsx ├── presentation │ ├── util │ │ └── FormValidator.tsx │ ├── view-model │ │ ├── BaseViewModel.tsx │ │ └── auth │ │ │ ├── AuthViewModel.tsx │ │ │ └── AuthViewModelImpl.tsx │ └── view │ │ ├── BaseView.tsx │ │ └── auth │ │ ├── AuthComponent.tsx │ │ └── auth-component.css ├── react-app-env.d.ts └── serviceWorker.ts ├── tsconfig.json └── yarn.lock /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es6: true, 5 | }, 6 | extends: [ 7 | 'plugin:react/recommended', 8 | 'plugin:@typescript-eslint/recommended', 9 | 'airbnb', 10 | ], 11 | globals: { 12 | Atomics: 'readonly', 13 | SharedArrayBuffer: 'readonly', 14 | }, 15 | parser: '@typescript-eslint/parser', 16 | parserOptions: { 17 | ecmaFeatures: { 18 | jsx: true, 19 | }, 20 | ecmaVersion: 2018, 21 | sourceType: 'module', 22 | }, 23 | plugins: ['react'], 24 | rules: { 25 | // Do not use this functions 26 | '@typescript-eslint/no-inferrable-types': 'off', 27 | 'lines-between-class-members': 'off', 28 | // Cause problems with Prettier 29 | 'operator-linebreak': 'off', 30 | 'eslint-disable-next-line padded-blocks': 'off', 31 | // Disallowed by AirBnB style Guide 32 | 'space-before-function-paren': 'off', 33 | semi: 'off', 34 | // Allows empty lines in comments 35 | 'no-trailing-spaces': [2, { ignoreComments: true }], 36 | // Allows 'console.log(...)' 37 | 'no-console': 'off', 38 | // Allows 'alert(...)' 39 | 'no-alert': 'off', 40 | // Allows to use for and without 41 | // being nested in each other. With Bootstrap it helps to 42 | // align elements by one side (line) - if elements are nested 43 | // it is hard to achieve the same result. 44 | 'jsx-a11y/label-has-associated-control': 'off', 45 | // Allows use class methods without 'this'. It is required 46 | // because in some cases method should be attached to 47 | // specific class 48 | 'class-methods-use-this': 'off', 49 | // We can use setState() in componentDidUpdate() if we are 50 | // checking that props are reaaly unequal 51 | 'react/no-did-update-set-state': 'off', 52 | // This application shouldn't have support for people 53 | // with disabilities 54 | 'jsx-a11y/click-events-have-key-events': 'off', 55 | 'jsx-a11y/no-static-element-interactions': 'off', 56 | // Sometimes we need to use links as buttons 57 | 'jsx-a11y/anchor-is-valid': 'off', 58 | // Allows one line destructuring in params 59 | 'object-curly-newline': 'off', 60 | // Unneccessary, when we use two buttons in group 61 | 'jsx-a11y/control-has-associated-label': 'off', 62 | // Sometimes it breakes readability 63 | 'no-lonely-if': 'off', 64 | // This method detects the order by start of method's 65 | // names and it creates unneccessary warnings. For 66 | // example, method 'clearSmth' will be underlined even 67 | // if doesn't clear React's component data 68 | 'react/sort-comp': 'off', 69 | // There are situations, where you must use index 70 | // key. For example, if an array contains equal 71 | // elements 72 | 'react/no-array-index-key': 'off', 73 | // These rules cause problems with TypeScript files, 74 | // however TS compiler detects them 75 | 'import/extensions': 'off', 76 | 'import/no-unresolved': 'off', 77 | // Causes problems with TypeScript declaring 78 | 'spaced-comment': 'off', 79 | // Causes problems when editing JSON files 80 | // in TypeScript files 81 | '@typescript-eslint/camelcase': 'off', 82 | // Causes problems with Prettier 83 | 'react/jsx-one-expression-per-line': 'off', 84 | // Cause problems in TypeScript files 85 | 'react/jsx-filename-extension': 'off', 86 | 'react/static-property-placement': 'off', 87 | // Required in TypeScript JSON models 88 | camelcase: 'off', 89 | // Not always reasonable 90 | 'arrow-body-style': 'off', 91 | // We use Prettier formating and it is sometimes 92 | // not similar to ESLint 93 | indent: 'off', 94 | }, 95 | }; 96 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: true, 3 | trailingComma: 'all', 4 | singleQuote: true, 5 | printWidth: 100, 6 | tabWidth: 2, 7 | proseWrap: false, 8 | arrowParens: 'always', 9 | }; 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![alt text](https://hsto.org/webt/q7/ls/cw/q7lscw7mpm4ex_ivtew-qlanrkw.jpeg) 2 | 3 | ### The article is outdated!!! 4 | ### Use https://feature-sliced.design/ instead. 5 | 6 | 7 | The Clear Architecture usign React and Typescript 8 | --- 9 | 10 | Here you can find source code for the article "The Clear Architecture usign React and Typescript". 11 | 12 | Links to read the article: 13 | 14 | - EN - [article on Medium](https://medium.com/@rostislavdugin/the-clean-architecture-using-react-and-typescript-a832662af803) 15 | - RU - [article on Habr](https://habr.com/ru/post/499078/) 16 | -------------------------------------------------------------------------------- /information/Clean Architecture React.drawio: -------------------------------------------------------------------------------- 1 | 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 -------------------------------------------------------------------------------- /information/Clean Architecture React.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RostislavDugin/clean-architecture-react-typescript/65dc16170d60aca263bc958ed5d58b72afdb682d/information/Clean Architecture React.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "clean-architecture-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@types/react": "^16.9.0", 7 | "@types/react-dom": "^16.9.0", 8 | "bootstrap": "^4.4.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1", 12 | "typescript": "~3.7.2" 13 | }, 14 | "devDependencies": { 15 | "eslint": "^6.8.0", 16 | "eslint-config-airbnb": "^18.1.0", 17 | "eslint-plugin-import": "^2.20.2", 18 | "eslint-plugin-jsx-a11y": "^6.2.3", 19 | "eslint-plugin-react": "^7.19.0", 20 | "eslint-plugin-react-hooks": "^2.5.1", 21 | "prettier": "^1.19.1" 22 | }, 23 | "scripts": { 24 | "start": "react-scripts start", 25 | "build": "react-scripts build", 26 | "test": "react-scripts test", 27 | "eject": "react-scripts eject" 28 | }, 29 | "eslintConfig": { 30 | "extends": "react-app" 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RostislavDugin/clean-architecture-react-typescript/65dc16170d60aca263bc958ed5d58b72afdb682d/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |

32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RostislavDugin/clean-architecture-react-typescript/65dc16170d60aca263bc958ed5d58b72afdb682d/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RostislavDugin/clean-architecture-react-typescript/65dc16170d60aca263bc958ed5d58b72afdb682d/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.validate": [ 3 | "javascript", 4 | "javascriptreact", 5 | { "language": "typescript", "autoFix": true }, 6 | { "language": "typescriptreact", "autoFix": true } 7 | ], 8 | "editor.formatOnSave": true, 9 | "[javascript]": { 10 | "editor.formatOnSave": false 11 | }, 12 | "[javascriptreact]": { 13 | "editor.formatOnSave": false 14 | }, 15 | "[typescript]": { 16 | "editor.formatOnSave": false 17 | }, 18 | "[typescriptreact]": { 19 | "editor.formatOnSave": false 20 | }, 21 | "files.eol": "\n", 22 | "editor.tabSize": 2 23 | } 24 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .app-container { 2 | height: 100vh; 3 | } 4 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import AuthComponent from './presentation/view/auth/AuthComponent'; 4 | import AuthViewModelImpl from './presentation/view-model/auth/AuthViewModelImpl'; 5 | import AuthFakeApi from './data/auth/AuthFakeApi'; 6 | import LoginUseCase from './domain/interactors/auth/LoginUseCase'; 7 | import AuthHolder from './domain/entity/auth/models/AuthHolder'; 8 | 9 | function App(): JSX.Element { 10 | // data layer 11 | const authRepository = new AuthFakeApi(); 12 | // domain layer 13 | const authHolder = new AuthHolder(); 14 | const loginUseCase = new LoginUseCase(authRepository, authHolder); 15 | // view layer 16 | const authViewModel = new AuthViewModelImpl(loginUseCase, authHolder); 17 | 18 | return ( 19 |

20 | 21 |

22 | ); 23 | } 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /src/data/auth/AuthFakeApi.tsx: -------------------------------------------------------------------------------- 1 | import AuthRepository from '../../domain/repository/auth/AuthRepository'; 2 | import ValidationResult from '../../domain/entity/auth/stuctures/ValidationResult'; 3 | import AuthorizationResult from '../../domain/entity/auth/stuctures/AuthorizationResult'; 4 | 5 | export default class AuthFakeApi implements AuthRepository { 6 | /** 7 | * @throws {Error} if validation has not passed 8 | */ 9 | validateCredentials(email: string, password: string): Promise { 10 | return new Promise((resolve, reject) => { 11 | if (password.length < 5) { 12 | reject(new Error('Password length should be more than 5 characters')); 13 | return; 14 | } 15 | 16 | resolve({ 17 | validationKey: 'A34dZ7', 18 | }); 19 | }); 20 | } 21 | 22 | /** 23 | * @throws {Error} if credentials have not passed 24 | */ 25 | login(email: string, password: string, validationKey: string): Promise { 26 | return new Promise((resolve, reject) => { 27 | if (validationKey === 'A34dZ7') { 28 | if (email === 'user@email.com' && password === 'password') { 29 | resolve({ 30 | authorizationToken: 'Bearer ASKJdsfjdijosd93wiesf93isef', 31 | }); 32 | } 33 | } else { 34 | reject(new Error('Validation key is not correct. Please try later')); 35 | return; 36 | } 37 | 38 | reject(new Error('Email or password is not correct')); 39 | }); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/domain/entity/auth/models/AuthHolder.tsx: -------------------------------------------------------------------------------- 1 | import AuthListener from './AuthListener'; 2 | 3 | export default class AuthHolder { 4 | private authListeners: AuthListener[]; 5 | private isAuthorized: boolean; 6 | private authToken: string; 7 | 8 | public constructor() { 9 | this.isAuthorized = false; 10 | this.authListeners = []; 11 | this.authToken = ''; 12 | } 13 | 14 | public onSignedIn(authToken: string): void { 15 | this.isAuthorized = true; 16 | this.authToken = authToken; 17 | this.notifyListeners(); 18 | } 19 | 20 | public onSignedOut(): void { 21 | this.isAuthorized = false; 22 | this.authToken = ''; 23 | this.notifyListeners(); 24 | } 25 | 26 | public isUserAuthorized(): boolean { 27 | return this.isAuthorized; 28 | } 29 | 30 | /** 31 | * @throws {Error} if user is not authorized 32 | */ 33 | public getAuthToken(): string { 34 | if (!this.isAuthorized) { 35 | throw new Error('User is not authorized'); 36 | } 37 | 38 | return this.authToken; 39 | } 40 | 41 | public addAuthListener(authListener: AuthListener): void { 42 | this.authListeners.push(authListener); 43 | } 44 | 45 | public removeAuthListener(authListener: AuthListener): void { 46 | this.authListeners.splice(this.authListeners.indexOf(authListener), 1); 47 | } 48 | 49 | private notifyListeners(): void { 50 | this.authListeners.forEach((listener) => listener.onAuthChanged()); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/domain/entity/auth/models/AuthListener.tsx: -------------------------------------------------------------------------------- 1 | export default interface AuthListener { 2 | onAuthChanged(): void; 3 | } 4 | -------------------------------------------------------------------------------- /src/domain/entity/auth/stuctures/AuthorizationResult.tsx: -------------------------------------------------------------------------------- 1 | export default interface AuthorizationResult { 2 | authorizationToken: string; 3 | } 4 | -------------------------------------------------------------------------------- /src/domain/entity/auth/stuctures/ValidationResult.tsx: -------------------------------------------------------------------------------- 1 | export default interface ValidationResult { 2 | validationKey: string; 3 | } 4 | -------------------------------------------------------------------------------- /src/domain/interactors/auth/LoginUseCase.tsx: -------------------------------------------------------------------------------- 1 | import AuthRepository from '../../repository/auth/AuthRepository'; 2 | import AuthHolder from '../../entity/auth/models/AuthHolder'; 3 | 4 | export default class LoginUseCase { 5 | private authRepository: AuthRepository; 6 | private authHolder: AuthHolder; 7 | 8 | public constructor(authRepository: AuthRepository, authHolder: AuthHolder) { 9 | this.authRepository = authRepository; 10 | this.authHolder = authHolder; 11 | } 12 | 13 | /** 14 | * @throws {Error} if credentials are not valid or have not passed 15 | */ 16 | public async loginUser(email: string, password: string): Promise { 17 | const validationResult = await this.authRepository.validateCredentials(email, password); 18 | const authResult = await this.authRepository.login( 19 | email, 20 | password, 21 | validationResult.validationKey, 22 | ); 23 | 24 | this.authHolder.onSignedIn(authResult.authorizationToken); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/domain/repository/auth/AuthRepository.tsx: -------------------------------------------------------------------------------- 1 | import ValidationResult from '../../entity/auth/stuctures/ValidationResult'; 2 | import AuthorizationResult from '../../entity/auth/stuctures/AuthorizationResult'; 3 | 4 | export default interface AuthRepository { 5 | /** 6 | * @throws {Error} if validation has not passed 7 | */ 8 | validateCredentials(email: string, password: string): Promise; 9 | 10 | /** 11 | * @throws {Error} if credentials have not passed 12 | */ 13 | login(email: string, password: string, validationKey: string): Promise; 14 | } 15 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import 'bootstrap/dist/css/bootstrap.css'; 4 | 5 | import App from './App'; 6 | import * as serviceWorker from './serviceWorker'; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.getElementById('root'), 13 | ); 14 | 15 | // If you want your app to work offline and load faster, you can change 16 | // unregister() to register() below. Note this comes with some pitfalls. 17 | // Learn more about service workers: https://bit.ly/CRA-PWA 18 | serviceWorker.unregister(); 19 | -------------------------------------------------------------------------------- /src/presentation/util/FormValidator.tsx: -------------------------------------------------------------------------------- 1 | export default class FormValidator { 2 | static isValidEmail(email: string): boolean { 3 | const emailRegex = /^\S+@\S+\.\S+$/; 4 | return emailRegex.test(email); 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/presentation/view-model/BaseViewModel.tsx: -------------------------------------------------------------------------------- 1 | import BaseView from '../view/BaseView'; 2 | 3 | export default interface BaseViewModel { 4 | attachView(baseView: BaseView): void; 5 | detachView(): void; 6 | } 7 | -------------------------------------------------------------------------------- /src/presentation/view-model/auth/AuthViewModel.tsx: -------------------------------------------------------------------------------- 1 | import BaseViewModel from '../BaseViewModel'; 2 | 3 | export default interface AuthViewModel extends BaseViewModel { 4 | emailQuery: string; 5 | passwordQuery: string; 6 | isSignInButtonVisible: boolean; 7 | isSignOutButtonVisible: boolean; 8 | 9 | isShowError: boolean; 10 | errorMessage: string; 11 | 12 | authStatus: string; 13 | isAuthStatusPositive: boolean; 14 | 15 | onEmailQueryChanged(loginQuery: string): void; 16 | onPasswordQueryChanged(passwordQuery: string): void; 17 | onClickSignIn(): void; 18 | onClickSignOut(): void; 19 | } 20 | -------------------------------------------------------------------------------- /src/presentation/view-model/auth/AuthViewModelImpl.tsx: -------------------------------------------------------------------------------- 1 | import AuthViewModel from './AuthViewModel'; 2 | import BaseView from '../../view/BaseView'; 3 | import LoginUseCase from '../../../domain/interactors/auth/LoginUseCase'; 4 | import AuthHolder from '../../../domain/entity/auth/models/AuthHolder'; 5 | import AuthListener from '../../../domain/entity/auth/models/AuthListener'; 6 | import FormValidator from '../../util/FormValidator'; 7 | 8 | export default class AuthViewModelImpl implements AuthViewModel, AuthListener { 9 | public emailQuery: string; 10 | public passwordQuery: string; 11 | public isSignInButtonVisible: boolean; 12 | public isSignOutButtonVisible: boolean; 13 | 14 | public isShowError: boolean; 15 | public errorMessage: string; 16 | 17 | public authStatus: string; 18 | public isAuthStatusPositive: boolean; 19 | 20 | private baseView?: BaseView; 21 | private loginUseCase: LoginUseCase; 22 | private authHolder: AuthHolder; 23 | 24 | public constructor(loginUseCase: LoginUseCase, authHolder: AuthHolder) { 25 | this.emailQuery = ''; 26 | this.passwordQuery = ''; 27 | this.isSignInButtonVisible = true; 28 | this.isSignOutButtonVisible = false; 29 | 30 | this.isShowError = false; 31 | this.errorMessage = ''; 32 | 33 | this.authStatus = 'is not authorized'; 34 | this.isAuthStatusPositive = false; 35 | 36 | this.loginUseCase = loginUseCase; 37 | this.authHolder = authHolder; 38 | 39 | this.authHolder.addAuthListener(this); 40 | } 41 | 42 | public attachView = (baseView: BaseView): void => { 43 | this.baseView = baseView; 44 | }; 45 | 46 | public detachView = (): void => { 47 | this.baseView = undefined; 48 | }; 49 | 50 | public onAuthChanged = (): void => { 51 | if (this.authHolder.isUserAuthorized()) { 52 | this.isSignInButtonVisible = false; 53 | this.isSignOutButtonVisible = true; 54 | this.authStatus = 'authorized'; 55 | this.isAuthStatusPositive = true; 56 | } else { 57 | this.isSignInButtonVisible = true; 58 | this.isSignOutButtonVisible = false; 59 | this.authStatus = 'is not autorized'; 60 | this.isAuthStatusPositive = false; 61 | } 62 | 63 | this.notifyViewAboutChanges(); 64 | }; 65 | 66 | public onEmailQueryChanged = (loginQuery: string): void => { 67 | this.emailQuery = loginQuery; 68 | this.notifyViewAboutChanges(); 69 | }; 70 | 71 | public onPasswordQueryChanged = (passwordQuery: string): void => { 72 | this.passwordQuery = passwordQuery; 73 | this.notifyViewAboutChanges(); 74 | }; 75 | 76 | public onClickSignIn = async (): Promise => { 77 | if (!this.validateLoginForm()) { 78 | this.notifyViewAboutChanges(); 79 | return; 80 | } 81 | 82 | try { 83 | await this.loginUseCase.loginUser(this.emailQuery, this.passwordQuery); 84 | this.isShowError = false; 85 | this.errorMessage = ''; 86 | } catch (e) { 87 | this.errorMessage = e.message; 88 | this.isShowError = true; 89 | } 90 | 91 | this.notifyViewAboutChanges(); 92 | }; 93 | 94 | public onClickSignOut = (): void => { 95 | this.authHolder.onSignedOut(); 96 | }; 97 | 98 | private validateLoginForm = (): boolean => { 99 | if (!this.emailQuery) { 100 | this.isShowError = true; 101 | this.errorMessage = 'Email cannot be empty'; 102 | return false; 103 | } 104 | if (this.errorMessage === 'Email cannot be empty') { 105 | this.isShowError = false; 106 | this.errorMessage = ''; 107 | } 108 | 109 | if (!FormValidator.isValidEmail(this.emailQuery)) { 110 | this.isShowError = true; 111 | this.errorMessage = 'Email format is not valid'; 112 | return false; 113 | } 114 | if (this.errorMessage === 'Email format is not valid') { 115 | this.isShowError = false; 116 | this.errorMessage = ''; 117 | } 118 | 119 | if (!this.passwordQuery) { 120 | this.isShowError = true; 121 | this.errorMessage = 'Password cannot be empty'; 122 | return false; 123 | } 124 | if (this.errorMessage === 'Password cannot be empty') { 125 | this.isShowError = false; 126 | this.errorMessage = ''; 127 | } 128 | 129 | return true; 130 | } 131 | 132 | private notifyViewAboutChanges = (): void => { 133 | if (this.baseView) { 134 | this.baseView.onViewModelChanged(); 135 | } 136 | }; 137 | } 138 | -------------------------------------------------------------------------------- /src/presentation/view/BaseView.tsx: -------------------------------------------------------------------------------- 1 | export default interface BaseView { 2 | onViewModelChanged(): void; 3 | } 4 | -------------------------------------------------------------------------------- /src/presentation/view/auth/AuthComponent.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './auth-component.css'; 3 | import BaseView from '../BaseView'; 4 | import AuthViewModel from '../../view-model/auth/AuthViewModel'; 5 | 6 | export interface AuthComponentProps { 7 | authViewModel: AuthViewModel; 8 | } 9 | 10 | export interface AuthComponentState { 11 | emailQuery: string; 12 | passwordQuery: string; 13 | isSignInButtonVisible: boolean; 14 | isSignOutButtonVisible: boolean; 15 | 16 | isShowError: boolean; 17 | errorMessage: string; 18 | 19 | authStatus: string; 20 | isAuthStatusPositive: boolean; 21 | } 22 | 23 | export default class AuthComponent extends React.Component 24 | implements BaseView { 25 | private authViewModel: AuthViewModel; 26 | 27 | public constructor(props: AuthComponentProps) { 28 | super(props); 29 | 30 | const { authViewModel } = this.props; 31 | this.authViewModel = authViewModel; 32 | 33 | this.state = { 34 | emailQuery: authViewModel.emailQuery, 35 | passwordQuery: authViewModel.passwordQuery, 36 | isSignInButtonVisible: authViewModel.isSignInButtonVisible, 37 | isSignOutButtonVisible: authViewModel.isSignOutButtonVisible, 38 | 39 | isShowError: authViewModel.isShowError, 40 | errorMessage: authViewModel.errorMessage, 41 | 42 | authStatus: authViewModel.authStatus, 43 | isAuthStatusPositive: authViewModel.isAuthStatusPositive, 44 | }; 45 | } 46 | 47 | public componentDidMount(): void { 48 | this.authViewModel.attachView(this); 49 | } 50 | 51 | public componentWillUnmount(): void { 52 | this.authViewModel.detachView(); 53 | } 54 | 55 | public onViewModelChanged(): void { 56 | this.setState({ 57 | emailQuery: this.authViewModel.emailQuery, 58 | passwordQuery: this.authViewModel.passwordQuery, 59 | isSignInButtonVisible: this.authViewModel.isSignInButtonVisible, 60 | isSignOutButtonVisible: this.authViewModel.isSignOutButtonVisible, 61 | 62 | isShowError: this.authViewModel.isShowError, 63 | errorMessage: this.authViewModel.errorMessage, 64 | 65 | authStatus: this.authViewModel.authStatus, 66 | isAuthStatusPositive: this.authViewModel.isAuthStatusPositive, 67 | }); 68 | } 69 | 70 | public render(): JSX.Element { 71 | const { 72 | emailQuery, 73 | passwordQuery, 74 | isSignInButtonVisible, 75 | isSignOutButtonVisible, 76 | 77 | isShowError, 78 | errorMessage, 79 | 80 | authStatus, 81 | isAuthStatusPositive, 82 | } = this.state; 83 | 84 | return ( 85 |

86 |

87 |

88 | Status: 89 | 90 | {authStatus} 91 | 92 |

93 | 94 |

95 | ): void => { 99 | this.authViewModel.onEmailQueryChanged(e.currentTarget.value); 100 | }} 101 | value={emailQuery} 102 | className="form-control" 103 | /> 104 |

105 |

106 | ): void => { 110 | this.authViewModel.onPasswordQueryChanged(e.currentTarget.value); 111 | }} 112 | value={passwordQuery} 113 | className="form-control" 114 | /> 115 |

116 | 117 | {isShowError && ( 118 |

{errorMessage}

119 | )} 120 | 121 | {isSignInButtonVisible && ( 122 |

123 | 130 |

131 | )} 132 | 133 | {isSignOutButtonVisible && ( 134 |

135 | 142 |

143 | )} 144 |

145 |

146 | ); 147 | } 148 | } 149 | -------------------------------------------------------------------------------- /src/presentation/view/auth/auth-component.css: -------------------------------------------------------------------------------- 1 | .auth-container { 2 | max-width: 400px; 3 | } 4 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/serviceWorker.ts: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | type Config = { 24 | onSuccess?: (registration: ServiceWorkerRegistration) => void; 25 | onUpdate?: (registration: ServiceWorkerRegistration) => void; 26 | }; 27 | 28 | export function register(config?: Config) { 29 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 30 | // The URL constructor is available in all browsers that support SW. 31 | const publicUrl = new URL( 32 | process.env.PUBLIC_URL, 33 | window.location.href 34 | ); 35 | if (publicUrl.origin !== window.location.origin) { 36 | // Our service worker won't work if PUBLIC_URL is on a different origin 37 | // from what our page is served on. This might happen if a CDN is used to 38 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 39 | return; 40 | } 41 | 42 | window.addEventListener('load', () => { 43 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 44 | 45 | if (isLocalhost) { 46 | // This is running on localhost. Let's check if a service worker still exists or not. 47 | checkValidServiceWorker(swUrl, config); 48 | 49 | // Add some additional logging to localhost, pointing developers to the 50 | // service worker/PWA documentation. 51 | navigator.serviceWorker.ready.then(() => { 52 | console.log( 53 | 'This web app is being served cache-first by a service ' + 54 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 55 | ); 56 | }); 57 | } else { 58 | // Is not localhost. Just register service worker 59 | registerValidSW(swUrl, config); 60 | } 61 | }); 62 | } 63 | } 64 | 65 | function registerValidSW(swUrl: string, config?: Config) { 66 | navigator.serviceWorker 67 | .register(swUrl) 68 | .then(registration => { 69 | registration.onupdatefound = () => { 70 | const installingWorker = registration.installing; 71 | if (installingWorker == null) { 72 | return; 73 | } 74 | installingWorker.onstatechange = () => { 75 | if (installingWorker.state === 'installed') { 76 | if (navigator.serviceWorker.controller) { 77 | // At this point, the updated precached content has been fetched, 78 | // but the previous service worker will still serve the older 79 | // content until all client tabs are closed. 80 | console.log( 81 | 'New content is available and will be used when all ' + 82 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 83 | ); 84 | 85 | // Execute callback 86 | if (config && config.onUpdate) { 87 | config.onUpdate(registration); 88 | } 89 | } else { 90 | // At this point, everything has been precached. 91 | // It's the perfect time to display a 92 | // "Content is cached for offline use." message. 93 | console.log('Content is cached for offline use.'); 94 | 95 | // Execute callback 96 | if (config && config.onSuccess) { 97 | config.onSuccess(registration); 98 | } 99 | } 100 | } 101 | }; 102 | }; 103 | }) 104 | .catch(error => { 105 | console.error('Error during service worker registration:', error); 106 | }); 107 | } 108 | 109 | function checkValidServiceWorker(swUrl: string, config?: Config) { 110 | // Check if the service worker can be found. If it can't reload the page. 111 | fetch(swUrl, { 112 | headers: { 'Service-Worker': 'script' } 113 | }) 114 | .then(response => { 115 | // Ensure service worker exists, and that we really are getting a JS file. 116 | const contentType = response.headers.get('content-type'); 117 | if ( 118 | response.status === 404 || 119 | (contentType != null && contentType.indexOf('javascript') === -1) 120 | ) { 121 | // No service worker found. Probably a different app. Reload the page. 122 | navigator.serviceWorker.ready.then(registration => { 123 | registration.unregister().then(() => { 124 | window.location.reload(); 125 | }); 126 | }); 127 | } else { 128 | // Service worker found. Proceed as normal. 129 | registerValidSW(swUrl, config); 130 | } 131 | }) 132 | .catch(() => { 133 | console.log( 134 | 'No internet connection found. App is running in offline mode.' 135 | ); 136 | }); 137 | } 138 | 139 | export function unregister() { 140 | if ('serviceWorker' in navigator) { 141 | navigator.serviceWorker.ready 142 | .then(registration => { 143 | registration.unregister(); 144 | }) 145 | .catch(error => { 146 | console.error(error.message); 147 | }); 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "noEmit": true, 20 | "jsx": "react" 21 | }, 22 | "include": [ 23 | "src" 24 | ] 25 | } 26 | --------------------------------------------------------------------------------