feat: add error-boundary & error-indicator components

js_machine_front/src/App.tsx

@@ -6,20 +6,23 @@ import { Events } from 'routes/Events';
 import { News } from 'routes/News';
 import { About } from 'routes/About';
 import { Main } from 'routes/Main';
+import { ErrorBoundry } from 'components/error-boundry';
 import { Route, Redirect, Switch } from 'react-router';
 
 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} />
-        <Redirect to={'/'} />
-      </Switch>
+      <NavBar />
+      <ErrorBoundry>
+        <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} />
+          <Redirect to={'/'} />
+        </Switch>
+      </ErrorBoundry>
     </div>
   );
 };

js_machine_front/src/components/PartnersLogo.tsx

@@ -3,10 +3,10 @@ import 'styles/partnersLogo.css';
 
 export const PartnersLogo: React.FC = memo(() => {
     return (
-        <div className="partners-logo">            
-            <div className="partners-logo__img partners-logo__img_epam"></div>
-            <div className="partners-logo__img partners-logo__img_dev-by"></div>
-            <div className="partners-logo__img partners-logo__img_streamline"></div>
+        <div className="partners-logo">
+            <div className="partners-logo__img partners-logo__img_epam"/>
+            <div className="partners-logo__img partners-logo__img_dev-by"/>
+            <div className="partners-logo__img partners-logo__img_streamline"/>
         </div>
     );
 });

js_machine_front/src/components/TileElement.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import 'styles/tileElement.css'
+import 'styles/tileElement.css';
 
 interface Props {
   title: string;

js_machine_front/src/components/error-boundry/error-boundry.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import ErrorIndicator from '../error-indicator/error-indicator';
+
+interface ErrorBoundryState {
+  hasError: boolean;
+}
+
+export default class ErrorBoundry extends React.Component<{}, ErrorBoundryState> {
+
+  state: ErrorBoundryState = {
+    hasError: false,
+  };
+
+  componentDidCatch(): void {
+    this.setState({
+      hasError: true,
+    });
+  }
+
+  render(): React.ReactNode | React.FC {
+    if (this.state.hasError) {
+      return <ErrorIndicator />;
+    }
+    return this.props.children;
+  }
+}

js_machine_front/src/components/error-boundry/index.ts

@@ -0,0 +1,3 @@
+import ErrorBoundry from './error-boundry';
+
+export {ErrorBoundry};

js_machine_front/src/components/error-indicator/error-indicator.css

@@ -0,0 +1,45 @@
+.error-indicator {
+  background-color: rgba(0,0,0,0.6);
+  display: flex;
+  flex-direction: row;
+  user-select: none;
+  width: 100%;
+}
+
+.error-indicator__text{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: absolute;
+  left: 10%;
+  top: 20%;
+  width: 50%;
+  color: #1b2664;
+
+}
+
+.error-indicator__title {
+  color: #F2E14C;
+  font-family: 'Exo', sans-serif;   
+  font-size:6rem;
+  font-weight: bold;
+  letter-spacing: 2px;
+  margin-bottom: 1rem;
+}
+
+.error-indicator__subtitle {
+  color: white;
+  font-family: 'Exo', sans-serif;   
+  font-size: 1.2rem;
+  text-align: left;
+  letter-spacing: 2px;
+  margin-bottom: 1rem;
+}
+@media only screen and (max-width: 600px) {
+  .error-indicator__text{
+    left: 5%;
+    top: 20%;
+    width: 50%;
+    color: #1b2664;
+  }
+}

js_machine_front/src/components/error-indicator/error-indicator.tsx

@@ -0,0 +1,26 @@
+import React, { memo } from 'react';
+
+import './error-indicator.css';
+import icon from './error-indicator.svg';
+
+const sectionStyle = {
+  height: '100%',
+  backgroundImage: `url(${icon})`,
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+};
+
+const ErrorIndicator: React.FC = memo(() => {
+  return (
+  <div className="error-indicator"  style={sectionStyle}>
+    <div className="error-indicator__text">
+      <span className="error-indicator__title">УПС!</span>
+      <span className="error-indicator__subtitle">что-то пошло не так</span>
+      <span className="error-indicator__subtitle">(но мы уже отправили парня из поддержки починить это)</span>
+    </div>
+  </div>
+  );
+});
+
+export default ErrorIndicator;

js_machine_front/src/components/error-indicator/index.ts

@@ -0,0 +1,3 @@
+import ErrorIndicator from './error-indicator';
+
+export {ErrorIndicator};

js_machine_front/src/index.tsx

@@ -7,7 +7,7 @@ import App from './App';
 
 ReactDOM.render(
   <Router>
-     <App/>
+    <App/>
   </Router>,
   document.getElementById('root'),
 );