feat: add error-boundary & error-indicator components (#16)

js-machine · Aug 2, 2019 · fd410d2 · fd410d2
1 parent 03cf22b
commit fd410d2
Show file tree

Hide file tree

Showing 20 changed files with 323 additions and 57 deletions.
diff --git a/js_machine_front/package-lock.json b/js_machine_front/package-lock.json
diff --git a/js_machine_front/package.json b/js_machine_front/package.json
@@ -3,8 +3,10 @@
   "version": "0.2.2",
   "private": true,
   "dependencies": {
+    "@types/react-intl": "^2.3.18",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-intl": "^2.9.0",
     "react-router-dom": "^5.0.1"
   },
   "scripts": {

diff --git a/js_machine_front/src/App.tsx b/js_machine_front/src/App.tsx
@@ -6,23 +6,41 @@ import { Events } from 'routes/Events';
 import { News } from 'routes/News';
 import { About } from 'routes/About';
 import { Main } from 'routes/Main';
+import { ErrorBoundary } from 'components/error-boundary';
 import { Auth } from 'routes/Authorization';
 import { Route, Redirect, Switch } from 'react-router';
 
+// Internationalization
+import { messages } from 'i18n/messages';
+import en from 'react-intl/locale-data/en';
+import ru from 'react-intl/locale-data/ru';
+import { addLocaleData, IntlProvider } from 'react-intl';
+
+addLocaleData([...en, ...ru]);
+
+const locale =
+  (navigator.languages && navigator.languages[0]) ||
+  navigator.language ||
+  'en-US';
+
 const App: React.FC = () => {
   return (
-    <div className="app">
-      <NavBar/>
-      <Switch>
-        <Route exact={true} path="/" component={Main} />
-        <Route exact={true} path="/about" component={About} />
-        <Route exact={true} path="/news" component={News} />
-        <Route exact={true} path="/events" component={Events} />
-        <Route exact={true} path="/partners" component={Partners} />
-        <Route exact={true} path="/authorization" component={Auth} />
-        <Redirect to={'/'} />
-      </Switch>
-    </div>
+    <IntlProvider locale={locale} messages={messages[locale]}>
+      <div className="app">
+        <NavBar />
+        <ErrorBoundary>
+          <Switch>
+            <Route exact={true} path="/" component={Main} />
+            <Route exact={true} path="/about" component={About} />
+            <Route exact={true} path="/news" component={News} />
+            <Route exact={true} path="/events" component={Events} />
+            <Route exact={true} path="/partners" component={Partners} />
+            <Route exact={true} path="/authorization" component={Auth} />
+            <Redirect to={'/'} />
+          </Switch>
+        </ErrorBoundary>
+      </div>
+    </IntlProvider>
   );
 };
 

diff --git a/js_machine_front/src/components/NavBar.tsx b/js_machine_front/src/components/NavBar.tsx
@@ -2,6 +2,7 @@ import React, { memo } from 'react';
 import LogoSrc from 'images/logo.png';
 import 'styles/route.css';
 import { NavLink } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
 
 export const NavBar: React.FC = memo(() => {
   return (
@@ -14,19 +15,19 @@ export const NavBar: React.FC = memo(() => {
 
       <div className="menu">
         <NavLink exact={true} className="menu__nav-link"  activeClassName="active-link" to="/about">
-          О НАС
+        <FormattedMessage id="page.about" />
         </NavLink>
         <NavLink exact={true} className="menu__nav-link"  activeClassName="active-link" to="/news">
-          НОВОСТИ
+        <FormattedMessage id="page.news" />
         </NavLink>
         <NavLink exact={true} className="menu__nav-link"  activeClassName="active-link" to="/events">
-          СОБЫТИЯ
+        <FormattedMessage id="page.events" />
         </NavLink>
         <NavLink exact={true} className="menu__nav-link"  activeClassName="active-link" to="/partners">
-          ПАРТНЕРЫ
+        <FormattedMessage id="page.partners" />
         </NavLink>
         <NavLink exact={true} className="menu__nav-link" activeClassName="active-link" to="/authorization">
-          ВХОД
+        <FormattedMessage id="page.signIn" />
         </NavLink>
       </div>
     </div>

diff --git a/js_machine_front/src/components/authorization/AuthorizationHOC.tsx b/js_machine_front/src/components/authorization/AuthorizationHOC.tsx
@@ -30,30 +30,30 @@ export const AuthorizationHOC = (AuthComponent: React.FC<AuthorizationHOCProps>)
                 signUpStyle: 'reset_width',
                 barStyle: 'authorization-bar__wrapper_sign-in',
                 barTitle: '',
-                barBtn: ''
+                barBtn: '',
             };
         }
 
         changeLoginOptions = () => {
             if (this.state.isAuthorizitationVisible) {
                 this.setState(() => {
-                    let signUpMocks = getStateForSignUp();
-                    let signUpStyles = {
+                    const signUpMocks = getStateForSignUp();
+                    const signUpStyles = {
                         isAuthorizitationVisible: false,
                         signInStyle: 'reset_width',
                         signUpStyle: 'sign-up__wrapper',
-                        barStyle: 'authorization-bar__wrapper_sign-up'
+                        barStyle: 'authorization-bar__wrapper_sign-up',
                     };
                     return {...signUpStyles, ...signUpMocks};
                 });
             } else {
                 this.setState(() => {
-                    let signInMocks = getStateForSignIn();
-                    let signInStyles = {
+                    const signInMocks = getStateForSignIn();
+                    const signInStyles = {
                         isAuthorizitationVisible: true,
                         signInStyle: 'sign-in__wrapper',
                         signUpStyle: 'reset_width',
-                        barStyle: 'authorization-bar__wrapper_sign-in'
+                        barStyle: 'authorization-bar__wrapper_sign-in',
                     };
                     return {...signInStyles, ...signInMocks};
                 });

diff --git a/js_machine_front/src/components/authorization/AuthorizationSignIn.tsx b/js_machine_front/src/components/authorization/AuthorizationSignIn.tsx
@@ -1,21 +1,26 @@
 import React, { memo } from 'react';
 import { SignInFrom } from 'components/authorization/SignInFrom';
 import { SocialAuth } from 'components/authorization/SocialAuth';
+import { FormattedMessage } from 'react-intl';
 
 import 'styles/authorizationSignIn.css';
 
 interface SignInProps {
-    signInStyle: string;
+  signInStyle: string;
 }
 
-export const AuthorizationSignIn: React.FC<SignInProps> = memo((props: SignInProps) => {
+export const AuthorizationSignIn: React.FC<SignInProps> = memo(
+  (props: SignInProps) => {
     return (
-        <div className="sign-in">
-            <div className={`sign-in__wrapper ${props.signInStyle}`}>
-                <div className="sign-in__title">Вход</div>
-                <SocialAuth />
-                <SignInFrom />
-            </div>
+      <div className="sign-in">
+        <div className={`sign-in__wrapper ${props.signInStyle}`}>
+          <div className="sign-in__title">
+            <FormattedMessage id="authorization.signIn" />
+          </div>
+          <SocialAuth />
+          <SignInFrom />
         </div>
+      </div>
     );
-});
+  },
+);
diff --git a/js_machine_front/src/components/authorization/AuthorizationSignUp.tsx b/js_machine_front/src/components/authorization/AuthorizationSignUp.tsx
@@ -1,21 +1,26 @@
 import React, { memo } from 'react';
 import { SignUpForm } from 'components/authorization/SignUpForm';
 import { SocialAuth } from 'components/authorization/SocialAuth';
+import { FormattedMessage } from 'react-intl';
 
 import 'styles/authorizationSignUp.css';
 
 interface SignUpProps {
-    signUpStyle: string;
+  signUpStyle: string;
 }
 
-export const AuthorizationSignUp: React.FC<SignUpProps> = memo((props: SignUpProps) => {
+export const AuthorizationSignUp: React.FC<SignUpProps> = memo(
+  (props: SignUpProps) => {
     return (
-        <div className="sign-up">
-            <div className={`sign-up__wrapper ${props.signUpStyle}`}>
-                <div className="sign-up__title">Создать аккаунт</div>
-                <SocialAuth />
-                <SignUpForm />
-            </div>
+      <div className="sign-up">
+        <div className={`sign-up__wrapper ${props.signUpStyle}`}>
+          <div className="sign-up__title">
+            <FormattedMessage id="authorization.signUp" />
+          </div>
+          <SocialAuth />
+          <SignUpForm />
         </div>
+      </div>
     );
-});
+  },
+);
diff --git a/js_machine_front/src/components/authorization/SignInFrom.tsx b/js_machine_front/src/components/authorization/SignInFrom.tsx
@@ -1,13 +1,23 @@
 import React, { memo } from 'react';
+import { FormattedMessage } from 'react-intl';
+
 import 'styles/authForm.css';
 
 export const SignInFrom: React.FC = memo(() => {
     return (
         <form className="auth-from">
-            <div className="auth-form__title">или используйте E-mail для регистрации:</div>
-            <input className="auth-form__input" type="text" placeholder="E-mail" />
-            <input className="auth-form__input" type="password" placeholder="Пароль" />
-            <button className="auth-form__btn" type="submit">ВОЙТИ</button>
-        </form>
+            <div className="auth-form__title">
+                <FormattedMessage id="authorization.signInFormTitle" />
+            </div>
+            <FormattedMessage id="authorization.signInFormEmail" >
+                { placeholder => <input className="auth-form__input" type="email" placeholder={placeholder as string}/>}
+            </FormattedMessage>
+            <FormattedMessage id="authorization.signInFormPassword" >
+                {placeholder => <input className="auth-form__input" type="password" placeholder={placeholder as string}/>}
+            </FormattedMessage>
+            <button className="auth-form__btn" type="submit">
+                <FormattedMessage id="authorization.signInFormSubmit" />
+            </button>
+        </form >
     );
 });
diff --git a/js_machine_front/src/components/authorization/SignUpForm.tsx b/js_machine_front/src/components/authorization/SignUpForm.tsx
@@ -1,15 +1,27 @@
 import React, { memo } from 'react';
+import { FormattedMessage } from 'react-intl';
+
 import 'styles/authForm.css';
 
 export const SignUpForm: React.FC = memo(() => {
     return (
         <form className="auth-from">
-            <div className="auth-form__title">или используйте E-mail для регистрации:</div>
-            <input className="auth-form__input" type="text" placeholder="Фамилия" />
-            <input className="auth-form__input" type="text" placeholder="E-mail" />
-            <input className="auth-form__input" type="text" placeholder="Имя" />
-            <input className="auth-form__input" type="password" placeholder="Пароль" />
-            <button className="auth-form__btn" type="submit">ЗАРЕГИСТРИРОВАТЬСЯ</button>
+            <div className="auth-form__title"><FormattedMessage id="authorization.signUpFormTitle" /></div>
+            <FormattedMessage id="authorization.signUpFormLastName" >
+                { placeholder => <input className="auth-form__input" type="text" placeholder={placeholder as string}/>}
+            </FormattedMessage>
+            <FormattedMessage id="authorization.signUpFormEmail" >
+                { placeholder => <input className="auth-form__input" type="email" placeholder={placeholder as string}/>}
+            </FormattedMessage>
+            <FormattedMessage id="authorization.signUpFormFirstName" >
+                { placeholder => <input className="auth-form__input" type="text" placeholder={placeholder as string}/>}
+            </FormattedMessage>
+            <FormattedMessage id="authorization.signUpFormPassword" >
+                { placeholder => <input className="auth-form__input" type="text" placeholder={placeholder as string}/>}
+            </FormattedMessage>
+            <button className="auth-form__btn" type="submit">
+                <FormattedMessage id="authorization.signUpFormSubmit" />
+            </button>
         </form>
     );
 });
diff --git a/js_machine_front/src/components/error-boundary/error-boundary.css b/js_machine_front/src/components/error-boundary/error-boundary.css
diff --git a/js_machine_front/src/components/error-boundary/error-boundary.tsx b/js_machine_front/src/components/error-boundary/error-boundary.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { ErrorIndicator } from '../error-indicator';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+export class ErrorBoundary extends React.Component<{}, ErrorBoundaryState> {
+  state: ErrorBoundaryState = {
+    hasError: false,
+  };
+
+  componentDidCatch(): void {
+    this.setState({
+      hasError: true,
+    });
+  }
+
+  render(): React.ReactNode | React.FC {
+    if (this.state.hasError) {
+      return <ErrorIndicator />;
+    }
+    return this.props.children;
+  }
+}
diff --git a/js_machine_front/src/components/error-boundary/index.ts b/js_machine_front/src/components/error-boundary/index.ts
@@ -0,0 +1 @@
+export * from './error-boundary';