itmo2019 · tilacyn · Apr 1, 2019 · Apr 6, 2019 · Apr 7, 2019 · Apr 10, 2019
diff --git a/README.md b/README.md
@@ -107,4 +107,4 @@ WebStorm включает в себя всё необходимое для ра
 - [React](https://reactjs.org) 🇺🇸
 - [React](https://ru.reactjs.org) 🇷🇺
 - [Create React App](https://facebook.github.io/create-react-app/docs/getting-started) 🇺🇸
-- [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/basic-types.html) 🇺🇸
+- [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/basic-types.html) 🇺🇸
diff --git a/package.json b/package.json
@@ -9,8 +9,13 @@
     "not op_mini all"
   ],
   "dependencies": {
+    "@types/jest": "24.0.12",
+    "@types/node": "12.0.0",
+    "@types/react": "16.8.16",
+    "@types/react-dom": "16.8.4",
     "react": "16.8.6",
-    "react-dom": "16.8.6"
+    "react-dom": "16.8.6",
+    "typescript": "3.3.4000"
   },
   "devDependencies": {
     "@hellroot/eslint-config": "1.8.0",

diff --git a/public/index.html b/public/index.html
@@ -1,17 +1,13 @@
 <!DOCTYPE html>
-<html lang="ru">
+<html>
   <head>
+    <meta name="description" content="Yandex.Mail Sample" />
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <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>Yandex.Mail</title>
+    <!--link rel="stylesheet" type="text/css" href="index.css"-->
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <section id="root">
+    </section>
   </body>
 </html>
diff --git a/src/app/app.css b/src/app/app.css
@@ -1,27 +1,14 @@
-.app {
-  text-align: center;
-}
+.main {
+  position: static;
 
-.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);
+  width: 800px;
+  height: 600px;
 }
 
-.app-link {
-  color: #61dafb;
+.light {
+  background-color: #e5eaf0;
 }
 
-@keyframes app-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.dark {
+  background-color: #061f2f;
 }
diff --git a/src/app/app.jsx b/src/app/app.jsx
diff --git a/src/app/app.tsx b/src/app/app.tsx
@@ -0,0 +1,210 @@
+import React, { Component } from 'react';
+
+import './app.css';
+import Menu from '../menu/menu';
+import Writebox from '../writebox/writebox';
+import Search from '../search/search';
+import Letters from '../letters/letters';
+import Logo from '../logo/logo';
+import ThemeSwitch from '../theme-switch/theme-switch';
+import { ILetter } from '../letters/__letter/letters__letter';
+import { contents, getRandomInt, rndAuthor, rndTheme } from '../letters/content';
+
+interface IState {
+  letters: ILetter[];
+  theme: string;
+  filter: string;
+  filterProcessingDisplay: boolean;
+}
+
+export class App extends Component<{}, IState> {
+  public constructor(props: {}) {
+    super(props);
+    this.state = {
+      theme: 'light',
+      filter: '',
+      filterProcessingDisplay: false,
+      letters: [
+        {
+          author: 'Яндекс.Паспорт',
+          theme: 'Доступ к аккаунту восстановлен',
+          date: '6 авг',
+          authorImage: Letters.createYandexAuthorImage(),
+          read: false,
+          checked: false,
+          display: true
+        },
+        {
+          author: 'Команда Яндекс.Почты',
+          theme: 'Как читать почту с мобильного',
+          date: '6 июл',
+          authorImage: Letters.createYandexAuthorImage(),
+          read: false,
+          checked: false,
+          display: true
+        },
+        {
+          author: 'Команда Яндекс.Почты',
+          theme: 'Как читать почту с мобильного',
+          date: '6 июл',
+          authorImage: Letters.createYandexAuthorImage(),
+          read: true,
+          checked: false,
+          display: true
+        },
+        {
+          author: 'Яндекс',
+          theme: 'Соберите всю почту в этот ящик',
+          date: '6 июл',
+          authorImage: Letters.createYandexAuthorImage(),
+          read: true,
+          checked: false,
+          display: true
+        }
+      ]
+    };
+    this.changeTheme = this.changeTheme.bind(this);
+    this.handleFilterChange = this.handleFilterChange.bind(this);
+    this.setFilter = this.setFilter.bind(this);
+    this.setFilterProcessingDisplay = this.setFilterProcessingDisplay.bind(this);
+    this.newLetter = this.newLetter.bind(this);
+    this.deleteOnclick = this.deleteOnclick.bind(this);
+    this.handleCheckbox = this.handleCheckbox.bind(this);
+    this.selectAll = this.selectAll.bind(this);
+    this.processFilter = this.processFilter.bind(this);
+  }
+
+  public changeTheme(checkbox: React.ChangeEvent<HTMLInputElement>): void {
+    console.log(this.state.theme);
+    console.log(checkbox.currentTarget);
+    console.log(checkbox.currentTarget.checked);
+    const b = checkbox.target.checked;
+    this.setState(() => {
+      if (b) {
+        console.log('kek');
+        return {
+          theme: 'dark'
+        };
+      }
+      return {
+        theme: 'light'
+      };
+    });
+    console.log(this.state.theme);
+  }
+
+  private handleFilterChange(event: React.ChangeEvent<HTMLInputElement>) {
+    console.log(event.target.value);
+    this.processFilter(event.target.value);
+    this.setState({});
+  }
+
+  private setFilter(s: string) {
+    this.setState({ filter: s });
+  }
+
+  public setFilterProcessingDisplay(display: boolean) {
+    console.log('app setFilterProcessingDisplay');
+    //this.setState({ filterProcessingDisplay: display });
+  }
+
+  private removeSearchTextInput(event: React.MouseEvent<HTMLElement, MouseEvent>) {}
+
+  private processFilter(s: string) {
+    if (s === '') {
+      for (let i = 0; i < this.state.letters.length; i++) {
+        this.state.letters[i].display = true;
+      }
+      return;
+    }
+    for (let i = 0; i < this.state.letters.length; i++) {
+      this.state.letters[i].display = this.state.letters[i].theme
+        .toLowerCase()
+        .includes(s.toLowerCase());
+    }
+  }
+
+  public componentDidMount() {
+    let sum = 0;
+
+    for (let i = 1; i < 20; i++) {
+      sum += 10 * getRandomInt(1, 600);
+      setTimeout(this.newLetter, sum);
+    }
+  }
+
+  private handleCheckbox(checkbox: React.ChangeEvent<HTMLInputElement>, number: number) {
+    this.state.letters[number].checked = checkbox.target.checked;
+    this.setState(state => {
+      return state;
+    });
+  }
+
+  private selectAll(checkbox: React.ChangeEvent<HTMLInputElement>) {
+    for (let i = 0; i < this.state.letters.length; i++) {
+      this.state.letters[i].checked = checkbox.target.checked;
+    }
+    this.setState({});
+  }
+
+  private deleteOnclick() {
+    let kek = 0;
+    while (kek++ < 4) {
+      let hasAny = false;
+      for (let i = 0; i < this.state.letters.length; i++) {
+        if (this.state.letters[i].checked) {
+          this.state.letters.splice(i, 1);
+          hasAny = true;
+          break;
+        }
+      }
+      if (hasAny) {
+        continue;
+      }
+      break;
+    }
+    this.setState(state => {
+      return state;
+    });
+  }
+
+  private newLetter() {
+    const author = rndAuthor();
+    this.state.letters.unshift({
+      author,
+      theme: rndTheme(author),
+      date: '6 июл',
+      read: false,
+      checked: false,
+      authorImage: Letters.createYandexAuthorImage(),
+      display: true
+    });
+    this.setState({});
+  }
+
+  public render() {
+    return (
+      <div className={`main ${this.state.theme}`}>
+        <Logo theme={this.state.theme} />
+        <Menu theme={this.state.theme} />
+        <Writebox theme={this.state.theme} />
+        <Search
+          theme={this.state.theme}
+          handleFilterChange={this.handleFilterChange}
+          removeSearchTextInput={this.removeSearchTextInput}
+          display={this.state.filterProcessingDisplay}
+        />
+        <ThemeSwitch changeTheme={this.changeTheme} />
+        <Letters
+          theme={this.state.theme}
+          filter={this.state.filter}
+          setFilterProcessingDisplay={this.setFilterProcessingDisplay}
+          deleteOnclick={this.deleteOnclick}
+          handleCheckbox={this.handleCheckbox}
+          letters={this.state.letters}
+          selectAll={this.selectAll}
+        />
+      </div>
+    );
+  }
+}
diff --git a/src/fonts/HelveticaNeueCyr-Bold.otf b/src/fonts/HelveticaNeueCyr-Bold.otf
diff --git a/src/fonts/HelveticaNeueCyr-Light.otf b/src/fonts/HelveticaNeueCyr-Light.otf
diff --git a/src/fonts/HelveticaNeueCyr-Medium.otf b/src/fonts/HelveticaNeueCyr-Medium.otf
diff --git a/src/fonts/YandexSansText-Bold.ttf b/src/fonts/YandexSansText-Bold.ttf
diff --git a/src/fonts/YandexSansText-Light.ttf b/src/fonts/YandexSansText-Light.ttf
diff --git a/src/fonts/YandexSansText-Regular.ttf b/src/fonts/YandexSansText-Regular.ttf
diff --git a/src/images/Fill-154.png b/src/images/Fill-154.png
diff --git a/src/images/Oval-9.png b/src/images/Oval-9.png
diff --git a/src/images/Oval.png b/src/images/Oval.png
diff --git a/src/images/Shape.png b/src/images/Shape.png
diff --git a/src/images/cross.png b/src/images/cross.png
diff --git a/src/images/nut.webp b/src/images/nut.webp
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,37 @@
+@font-face {
+  font-family: 'Yandex Sans Light';
+  src: url(fonts/YandexSansText-Light.ttf);
+}
+
+@font-face {
+  font-family: 'Yandex Sans Bold';
+  src: url(fonts/YandexSansText-Bold.ttf);
+}
+
+@font-face {
+  font-family: 'Yandex Sans Regular';
+  src: url(fonts/YandexSansText-Regular.ttf);
+}
+
+@font-face {
+  font-family: 'Helvetica Neue Bold';
+  src: url(fonts/HelveticaNeueCyr-Bold.otf);
+}
+
+@font-face {
+  font-family: 'Helvetica Neue Medium';
+  src: url(fonts/HelveticaNeueCyr-Medium.otf);
+}
+
+@font-face {
+  font-family: 'Helvetica Neue Light';
+  src: url(fonts/HelveticaNeueCyr-Light.otf);
+}
+
+p {
+  overflow: hidden;
+}
+
 body {
   padding: 0;
   margin: 0;

diff --git a/src/index.jsx b/src/index.jsx
@@ -6,3 +6,5 @@ import { App } from './app';
 import './index.css';
 
 ReactDOM.render(<App />, document.getElementById('root'));
+
+// document.getElementById('root').newLetters();
diff --git a/src/letters/Letters.module.css b/src/letters/Letters.module.css
@@ -0,0 +1,23 @@
+.letters {
+  position: absolute;
+
+  width: 589px;
+  height: 530px;
+  margin-top: 56px;
+
+  margin-left: 191px;
+
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.34);
+}
+
+#letters__footer-line {
+  margin-top: 499px;
+}
+
+.light {
+  background-color: #fff;
+}
+
+.dark {
+  background-color: #1e3543;
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,3 +6,5 @@ import { App } from './app';
		import './index.css';

		ReactDOM.render(<App />, document.getElementById('root'));

		// document.getElementById('root').newLetters();