itmo2019 · DaminovN · May 14, 2019 · May 23, 2019 · May 23, 2019 · evgenymarkov
diff --git a/public/index.html b/public/index.html
@@ -2,16 +2,15 @@
 <html lang="ru">
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/ya-mail-favicon.png" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#000000" />
-    <title>React App</title>
+    <title>Яндекс.Почта</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
 </html>
diff --git a/public/ya-mail-favicon.png b/public/ya-mail-favicon.png
diff --git a/src/app/app.css b/src/app/app.css
@@ -1,27 +1,98 @@
-.app {
-  text-align: center;
+@font-face {
+  font-family: YandexSansBold;
+  font-weight: 700;
+  src: url("../fonts/YandexSansDisplay-Bold.ttf");
 }
 
-.app-header {
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background-color: #282c34;
-  color: #fff;
-  font-size: calc(10px + 2vmin);
+@font-face {
+  font-family: YandexSansThin;
+  src: url("../fonts/YandexSansDisplay-Thin.ttf");
 }
 
-.app-link {
-  color: #61dafb;
+@font-face {
+  font-family: HelveticaNeueLight;
+  src: url("../fonts/HelveticaNeueCyr-Light.otf");
 }
 
-@keyframes app-logo-spin {
-  from {
-    transform: rotate(0deg);
+@font-face {
+  font-family: HelveticaNeue;
+  src: url("../fonts/HelveticaNeueCyr-Medium.otf");
+}
+
+.page {
+  position: relative;
+  min-width: 800px;
+  padding-right: 20px;
+  min-height: 100%;
+}
+
+ul{
+  list-style-type: none;
+}
+
+a, a:active, a:visited, a:hover {
+  color: unset;
+  text-decoration: none;
+  position: unset !important;
+}
+
+.page_inline{
+  display: inline;
+  text-decoration-color: red;
+}
+
+.page_text-overflow_hide{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.page_visibility_hide{
+  visibility: hidden;
+}
+
+.page_checkbox{
+  width: 16px;
+  height: 16px;
+}
+
+.create_animation{
+  animation: add 1s forwards;
+}
+
+.delete_animation{
+  animation: remove 1s forwards;
+}
+
+@keyframes add{
+  0%{
+      height: 0;
+      opacity: 0;
+  }
+
+  50%{
+      height: 500px;
+      opacity: 0.5;
   }
-  to {
-    transform: rotate(360deg);
+
+  100%{
+      opacity: 1;
+  }
+}
+
+@keyframes remove{
+  0%{
+      height: 22px;
+      opacity: 1;
+  }
+
+  50%{
+      height: 500px;
+      opacity: 0.5;
+  }
+
+  100%{
+      height: 0px;
+      opacity: 0;
   }
 }
diff --git a/src/app/app.jsx b/src/app/app.jsx
@@ -2,23 +2,158 @@ import React, { Component } from 'react';
 
 import './app.css';
 
+import { Header } from './header/header';
+import { YaSideBar } from './ya-sidebar/ya-sidebar';
+import { YaMail } from './ya-mail/ya-mail';
+
 export class App extends Component {
+  constructor(props) {
+    super(props);
+    this.createMessage = this.createMessage.bind(this);
+    this.buildMessage = this.buildMessage.bind(this);
+    this.deleteSelected = this.deleteSelected.bind(this);
+    this.selectCheckBox = this.selectCheckBox.bind(this);
+    this.selectAll = this.selectAll.bind(this);
+    this.newMailTime = this.newMailTime.bind(this);
+    this.setNextRand = this.setNextRand.bind(this);
+
+    this.authors = ['Антон', 'Саша', 'Алексей'];
+    this.subject = ['Путешествие', 'Стажировка', 'Виза'];
+    this.text = [
+      'Когда планируема дата вашего приезда ?',
+      'Где вы собираетесь оставаться ?',
+      'Ты опоздал с дедлайном'
+    ];
+    this.dates = ['1 янв', '2 фев', '3 март', '4 апр', '5 авг'];
+
+    this.minTime = 10;
+    this.maxTime = 1000 * 60 * 10 - this.minTime;
+
+    this.state = {
+      messageList: [],
+      allSelected: false
+    };
+  }
+
+  componentDidMount() {
+    this.newMailTime();
+  }
+
+  newMailTime() {
+    this.createMessage();
+    this.setNextRand();
+  }
+
+  setNextRand() {
+    setTimeout(this.newMailTime, Math.random() * this.maxTime + this.minTime);
+  }
+
+  buildMessage() {
+    const id = new Date().getTime();
+    const messageText = this.text[Math.floor(Math.random() * this.text.length)];
+    const messageAuthor = this.authors[Math.floor(Math.random() * this.authors.length)];
+    const messageSubject = this.subject[Math.floor(Math.random() * this.subject.length)];
+    const messageDate = this.dates[Math.floor(Math.random() * this.dates.length)];
+    return {
+      id,
+      messageAuthor,
+      messageSubject,
+      messageDate,
+      messageText,
+      selected: false,
+      addAnimation: true,
+      deleteAnimation: false
+    };
+  }
+
+  createMessage() {
+    this.setState(prevState => {
+      const newMessageList = prevState.messageList;
+      if (prevState.messageList.length >= 30) {
+        return {
+          messageList: newMessageList
+        };
+      }
+      const newMessage = this.buildMessage();
+      const curId = newMessage.id;
+      setTimeout(() => {
+        this.setState(prevSt => {
+          return prevSt.messageList.map(message => {
+            if (message.id === curId) {
+              const updMessage = message;
+              updMessage.addAnimation = false;
+              return updMessage;
+            }
+            return message;
+          });
+        });
+      }, 1500);
+      newMessageList.unshift(newMessage);
+      return {
+        messageList: newMessageList
+      };
+    });
+  }
+
+  deleteSelected() {
+    this.setState(prevState => {
+      return {
+        messageList: prevState.messageList.map(message => {
+          if (message.selected) {
+            const updMessage = message;
+            updMessage.deleteAnimation = true;
+            return updMessage;
+          }
+          return message;
+        }),
+        allSelected: false
+      };
+    });
+    setTimeout(() => {
+      this.setState(prevState => {
+        return {
+          messageList: prevState.messageList.filter(message => !message.selected)
+        };
+      });
+    }, 1500);
+  }
+
+  selectAll() {
+    this.setState(prevState => {
+      const newMessageList = prevState.messageList;
+      for (let i = 0; i < newMessageList.length; i++) {
+        newMessageList[i].selected = !newMessageList[i].selected;
+      }
+
+      return {
+        messageList: newMessageList,
+        allSelected: !prevState.allSelected
+      };
+    });
+  }
+
+  selectCheckBox(messageIndex) {
+    this.setState(prevState => {
+      const newMessageList = prevState.messageList;
+      newMessageList[messageIndex].selected = !newMessageList[messageIndex].selected;
+      return {
+        messagesList: newMessageList
+      };
+    });
+  }
+
   render() {
     return (
-      <div className="app">
-        <header className="app-header">
-          <p>
-            Edit <code>src/app/app.jsx</code> and save to reload.
-          </p>
-          <a
-            className="app-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
+      <div className="page">
+        <Header createMessage={this.createMessage} />
+        <YaSideBar />
+        <YaMail
+          messageList={this.state.messageList}
+          deleteSelected={this.deleteSelected}
+          selectCheckBox={this.selectCheckBox}
+          selectAll={this.selectAll}
+          allSelected={this.state.allSelected}
+        />
       </div>
     );
   }

diff --git a/src/app/header/header.css b/src/app/header/header.css
@@ -0,0 +1,8 @@
+.page__header {
+  display: inline-block;
+  width: 100%;
+  height: 31px;
+  position: relative;
+  margin-top: 13px;
+  margin-bottom: 13px;
+}
diff --git a/src/app/header/header.jsx b/src/app/header/header.jsx
@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+import './header.css';
+
+import Menu from './menu/menu';
+import YaMailLogo from './ya-mail-logo/ya-mail-logo';
+import SearchBar from './search-bar/search-bar';
+import MessageCreator from './message-creator/message-creator';
+
+export class Header extends Component {
+  render() {
+    return (
+      <header className="page__header">
+        <Menu />
+        <YaMailLogo />
+        <SearchBar />
+        <MessageCreator createMessage={this.props.createMessage} />
+      </header>
+    );
+  }
+}
diff --git a/src/app/header/menu/menu.css b/src/app/header/menu/menu.css
@@ -0,0 +1,9 @@
+.page__ya-menu-logo{
+  margin-left: 22px;
+}
+
+.page__sidebar-menu{
+  position: relative;
+  vertical-align: bottom;
+  bottom: 3px;
+}
diff --git a/src/app/header/menu/menu.jsx b/src/app/header/menu/menu.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import './menu.css';
+
+import SidebarMenu from '../../../images/sidebar-menu.png';
+
+function Menu() {
+  return (
+    <div className="page_inline page__ya-menu-logo">
+      <a href="/">
+        <img className="page__sidebar-menu" src={SidebarMenu} alt="menu" width="25" height="29" />
+      </a>
+    </div>
+  );
+}
+
+export default Menu;
diff --git a/src/app/header/message-creator/message-creator.css b/src/app/header/message-creator/message-creator.css
@@ -0,0 +1,7 @@
+.page__message-creator {
+  display: inline-block;
+  position: relative;
+  left: 18%;
+  opacity: 0.5;
+  cursor: pointer;
+}
diff --git a/src/app/header/message-creator/message-creator.jsx b/src/app/header/message-creator/message-creator.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import './message-creator.css';
+
+class MessageCreator extends React.Component {
+  render() {
+    return (
+      <button className="page__message-creator" type="button" onClick={this.props.createMessage}>
+        New Mail
+      </button>
+    );
+  }
+}
+
+export default MessageCreator;