itmo2019 · AntiFrizz1 · May 4, 2019 · May 17, 2019 · May 23, 2019 · May 23, 2019
diff --git a/package.json b/package.json
@@ -9,8 +9,13 @@
     "not op_mini all"
   ],
   "dependencies": {
+    "@types/jest": "24.0.12",
+    "@types/node": "11.13.8",
+    "@types/react": "16.8.15",
+    "@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
@@ -8,7 +8,7 @@
       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>

diff --git a/src/app/app.css b/src/app/app.css
diff --git a/src/app/app.jsx b/src/app/app.jsx
diff --git a/src/app/app.test.jsx b/src/app/app.test.jsx
diff --git a/src/app/app.tsx b/src/app/app.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import { Page } from './page/page';
+
+export class App extends React.Component {
+  public render() {
+    return <Page />;
+  }
+}
diff --git a/src/app/content/content.module.css b/src/app/content/content.module.css
@@ -0,0 +1,37 @@
+.content {
+  display: inline-block;
+  width: calc(100% - 226px);
+  min-width: 574px;
+  min-height: 492px;
+  margin-right: 20px;
+  background-color: #ffffff;
+  border-radius: 3px;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.34);
+  font-family: HelveticaNeue, serif;
+}
+
+.contentDark {
+  background-color: #555555;
+  border-radius: 3px;
+  box-shadow: 0 0 3px 3px #777777;
+  composes: content;
+}
+
+.myCheckbox {
+  width: 16px;
+  height: 16px;
+  margin-top: 11px;
+  margin-left: 20px;
+  border: solid 1px rgba(0, 0, 0, 0.15);
+  background-color: #ffffff;
+  border-radius: 3px;
+  composes: myInput from '../page/page.module.css';
+}
+
+.myCheckbox:checked {
+  background-clip: content-box;
+  background-color: white;
+  background-image: url('../../images/check.png');
+  background-size: 14px;
+  background-repeat: no-repeat;
+}
diff --git a/src/app/content/content.module.css.d.ts b/src/app/content/content.module.css.d.ts
@@ -0,0 +1,3 @@
+export const content: string;
+export const contentDark: string;
+export const myCheckbox: string;
diff --git a/src/app/content/content.tsx b/src/app/content/content.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+
+import * as styles from './content.module.css';
+import * as pageStyles from '../page/page.module.css';
+
+import { MessageMenu } from '../messageMenu/messageMenu';
+import { Letters } from '../letters/letters';
+import { Letter } from '../letter/letter';
+import { Footer } from '../footer/footer';
+import { ILetterType } from '../types/types';
+
+interface IContentProps {
+  deleteMails: () => void;
+  letters: ILetterType[];
+  selectAll: () => void;
+  isSelectAll: boolean;
+  checkboxChange: (id: string) => void;
+  checked: { [id: string]: boolean };
+  text: string[];
+  setText: (text: string[]) => void;
+  setRead: (id: string) => void;
+  removeAddAnimation: (id: string) => void;
+  removeDeleteAnimation: (id: string) => void;
+  theme: boolean;
+  searchText: string;
+}
+
+interface IContentState {
+  letterIsVisible: boolean;
+}
+
+export class Content extends React.Component<IContentProps, IContentState> {
+  public constructor(props: IContentProps) {
+    super(props);
+
+    this.state = {
+      letterIsVisible: false,
+    };
+
+    this.showLetter = this.showLetter.bind(this);
+    this.closeLetter = this.closeLetter.bind(this);
+    this.getContentClass = this.getContentClass.bind(this);
+    this.getLineClass = this.getLineClass.bind(this);
+  }
+
+  private showLetter() {
+    this.setState({
+      letterIsVisible: true
+    });
+  }
+
+  private closeLetter() {
+    this.setState({
+      letterIsVisible: false
+    });
+  }
+
+  private getContentClass() {
+    return !this.props.theme ? styles.content : styles.contentDark;
+  }
+
+  private getLineClass() {
+    return !this.props.theme ? pageStyles.line : pageStyles.lineDark;
+  }
+
+  public render() {
+    return (
+      <main id="main-content" className={this.getContentClass()}>
+        <label htmlFor="menu-checkbox">
+          <input
+            id="menu-checkbox"
+            className={styles.myCheckbox}
+            type="checkbox"
+            checked={this.props.isSelectAll}
+            onChange={this.props.selectAll}
+          />
+        </label>
+        <MessageMenu deleteMessages={this.props.deleteMails} />
+        <div className={this.getLineClass()} />
+
+        <Letters
+          letters={this.props.letters}
+          checkboxChange={this.props.checkboxChange}
+          checked={this.props.checked}
+          setText={this.props.setText}
+          setRead={this.props.setRead}
+          removeAddAnimation={this.props.removeAddAnimation}
+          removeDeleteAnimation={this.props.removeDeleteAnimation}
+          display={!this.state.letterIsVisible}
+          showLetter={this.showLetter}
+          theme={this.props.theme}
+          searchText={this.props.searchText}
+        />
+        <Letter
+          text={this.props.text}
+          display={this.state.letterIsVisible}
+          closeLetter={this.closeLetter}
+          theme={this.props.theme}
+        />
+        <Footer theme={this.props.theme} />
+      </main>
+    );
+  }
+}
diff --git a/src/app/footer/footer.module.css b/src/app/footer/footer.module.css
@@ -0,0 +1,39 @@
+.footer {
+  width: 100%;
+  min-width: 574px;
+
+  border-top: solid 2px #e2e2e2;
+  font-family: HelveticaNeue, serif;
+}
+
+.footerDark {
+  border-top: solid 2px #222222;
+  composes: footer;
+}
+
+.menuText {
+  font-size: 11px;
+  font-weight: normal;
+}
+
+.menuLink {
+  composes: menuText;
+  display: inline-block;
+  margin-right: 20px;
+}
+
+.menu {
+  padding: 0;
+  margin: 0;
+  float: right;
+  list-style-type: none;
+}
+
+.link {
+  color: #bbbbbb;
+  composes: myLink from '../page/page.module.css';
+}
+
+.myCopy {
+  color: #bbbbbb;
+}
diff --git a/src/app/footer/footer.module.css.d.ts b/src/app/footer/footer.module.css.d.ts
@@ -0,0 +1,7 @@
+export const footer: string;
+export const menuLink: string;
+export const menuText: string;
+export const menu: string;
+export const link: string;
+export const myCopy: string;
+export const footerDark: string;
diff --git a/src/app/footer/footer.tsx b/src/app/footer/footer.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+import * as styles from './footer.module.css';
+
+interface IFooterProps {
+  theme: boolean;
+}
+
+export class Footer extends React.Component<IFooterProps> {
+  public constructor(props: IFooterProps) {
+    super(props);
+
+    this.getFooterClass = this.getFooterClass.bind(this);
+  }
+
+  private getFooterClass() {
+    return !this.props.theme ? styles.footer : styles.footerDark;
+  }
+
+  public render() {
+    return (
+      <footer className={this.getFooterClass()}>
+        <ul className={styles.menu}>
+          <li className={styles.menuLink}>
+            <a href="." className={styles.link}>
+              <p>Помощь и обратная связь</p>
+            </a>
+          </li>
+
+          <li className={styles.menuLink}>
+            <a href="." className={styles.link}>
+              <p>Реклама</p>
+            </a>
+          </li>
+
+          <li className={styles.menuLink}>
+            <p className={styles.myCopy}>&copy; 2001-2018, Яндекс</p>
+          </li>
+        </ul>
+      </footer>
+    );
+  }
+}