+
this.props.onCheckboxChange(this.props.letterStates.id)}
+ checked={this.props.isChecked}
+ />
+
this.props.openLetter(this.props.letterStates.text)}>
+
+
+
+
{this.props.letterStates.author}
+
+ {this.props.letterStates.topic}
+
+
+
+
+ );
+ }
+}
diff --git a/src/app/structure/main-content/letters/letters-list/letterList.tsx b/src/app/structure/main-content/letters/letters-list/letterList.tsx
new file mode 100644
index 0000000..26be550
--- /dev/null
+++ b/src/app/structure/main-content/letters/letters-list/letterList.tsx
@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+
+import styles from './lettersList.module.css';
+import { Letter } from './letter/letter';
+import { LetterType } from '../../../../app';
+
+interface IProps {
+ letters : LetterType[];
+ openLetter : (text : string[]) => void;
+ onCheckboxChange : (id : string) => void;
+ checkedLetters: { [id: string]: boolean };
+}
+export class LetterList extends Component
{
+ constructor(props : IProps){
+ super(props);
+ this.props = props;
+ }
+
+ public readonly props: IProps;
+
+ render() {
+ return (
+
+ {this.props.letters.map(letter => {
+ if (letter.isVisible)
+ return (
+
+ );
+ })}
+
+ );
+ }
+}
diff --git a/src/app/structure/main-content/letters/letters-list/lettersList.module.css b/src/app/structure/main-content/letters/letters-list/lettersList.module.css
new file mode 100644
index 0000000..72af51c
--- /dev/null
+++ b/src/app/structure/main-content/letters/letters-list/lettersList.module.css
@@ -0,0 +1,10 @@
+.mainBlock__allLetters {
+ overflow: scroll;
+ height: calc(100vh - 14px);
+ padding: 0;
+ margin: 0;
+}
+
+.allLetterDown {
+ animation: down 0.6s linear;
+}
diff --git a/src/app/structure/main-content/letters/letters.tsx b/src/app/structure/main-content/letters/letters.tsx
new file mode 100644
index 0000000..4ad08d0
--- /dev/null
+++ b/src/app/structure/main-content/letters/letters.tsx
@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+
+import { LetterPage } from './letter-page/letterPage';
+import { LetterList } from './letters-list/letterList';
+import { LetterType } from '../../../app';
+
+interface IProps {
+ isLetterOpened : boolean;
+ openedLetterText : string[];
+ closeLetter : () => void;
+ openLetter : (text : string[]) => void;
+ onCheckboxChange : (id : string) => void;
+ letters : LetterType[];
+ checkedLetters: { [id: string]: boolean };
+}
+
+export class Letters extends Component {
+ constructor(props : IProps){
+ super(props);
+ this.props = props;
+ }
+
+ public readonly props: IProps;
+
+ render() {
+ return this.props.isLetterOpened ? (
+
+ ) : (
+
+ );
+ }
+}
diff --git a/src/app/structure/main-content/mainContent.module.css b/src/app/structure/main-content/mainContent.module.css
new file mode 100644
index 0000000..6672331
--- /dev/null
+++ b/src/app/structure/main-content/mainContent.module.css
@@ -0,0 +1,14 @@
+.mainBlock {
+ position: relative;
+
+ width: calc(100% - 230px);
+ min-width: 515px;
+ min-height: 300px;
+ padding: 0;
+ margin: 0 20px 14px 22px;
+
+ background-color: #ffffff;
+ border-radius: 3px;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.34);
+ float: right;
+}
diff --git a/src/app/structure/main-content/mainContent.tsx b/src/app/structure/main-content/mainContent.tsx
new file mode 100644
index 0000000..29de842
--- /dev/null
+++ b/src/app/structure/main-content/mainContent.tsx
@@ -0,0 +1,146 @@
+import React, { Component } from 'react';
+
+import styles from './mainContent.module.css';
+import { Letters } from './letters/letters';
+import { AllFunctions } from './all-functions/allFunctions';
+import { generateNewLetter, randomInt } from './scripts/generator';
+import { Footer } from './footer/footer';
+import { LetterType } from '../../app';
+
+const LETTERS_ON_PAGE = 30;
+
+interface IState {
+ isLetterOpened: false;
+ openedLetterText: string[];
+ letters: LetterType[];
+ isAllChecked: boolean;
+ checkedLetters: { [id: string]: boolean };
+}
+
+export class MainContent extends Component {
+ public constructor(props : any) {
+ super(props);
+
+ this.state = {
+ isLetterOpened: false,
+ openedLetterText: [],
+ letters: [],
+ isAllChecked: false,
+ checkedLetters: {}
+ };
+
+ this.onCheckboxChange.bind(this);
+ this.selectAll.bind(this);
+ this.newMail.bind(this);
+ this.deleteLetter.bind(this);
+ this.getRandomLetter.bind(this);
+ this.openLetter.bind(this);
+ this.closeLetter.bind(this);
+
+ setTimeout(this.getRandomLetter, 100);
+ }
+
+ public readonly state: IState;
+
+ public onCheckboxChange = (id: string) => {
+ this.setState((prevState : IState)=> {
+ const newCheckedLetters : { [id: string]: boolean } = prevState.checkedLetters;
+ newCheckedLetters[id] = !newCheckedLetters[id];
+ return {
+ isAllChecked: false,
+ checkedLetters: newCheckedLetters
+ };
+ });
+ };
+
+ public newMail = () => {
+ const newLetter : LetterType = generateNewLetter();
+ this.setState((prevState : IState)=> {
+ const newCheckedLetters = prevState.checkedLetters;
+ const newLetters = prevState.letters;
+ newCheckedLetters[newLetter.id] = false;
+ for (let i = newLetters.length - 1; i >= LETTERS_ON_PAGE - 1; i--) {
+ newLetters[i].isVisible = false;
+ newLetters[i].isChecked = false;
+ newCheckedLetters[newLetters[i].key] = false;
+ }
+ return {
+ letters: [newLetter, ...newLetters],
+ checkedLetters: newCheckedLetters,
+ isAllChecked: false
+ };
+ });
+ };
+
+ private getRandomLetter = () => {
+ const t = randomInt(10, 300000) + 300000;
+ this.newMail();
+ setTimeout(this.getRandomLetter, t);
+ };
+
+ public selectAll = () => {
+ this.setState((prevState : IState) => {
+ const newCheckedLetters = prevState.checkedLetters;
+ prevState.letters.forEach(letter => {
+ if (letter.isVisible) {
+ newCheckedLetters[letter.key] = !prevState.isAllChecked;
+ }
+ });
+ return {
+ isAllChecked: !prevState.isAllChecked,
+ checkedLetters: newCheckedLetters
+ };
+ });
+ };
+
+ public deleteLetter = () => {
+ this.setState((prevState : IState) => {
+ const newLetters = prevState.letters.filter(letter => !prevState.checkedLetters[letter.key]);
+ for (let i = 0; i < Math.min(newLetters.length, LETTERS_ON_PAGE); i++) {
+ newLetters[i].isVisible = true;
+ }
+ return {
+ letters: newLetters,
+ isAllChecked: false
+ };
+ });
+ };
+
+ public openLetter = (text : string[]) => {
+ this.setState({
+ isLetterOpened: true,
+ openedLetterText: text
+ });
+ };
+
+ public closeLetter = () => {
+ this.setState({
+ isLetterOpened: false,
+ openedLetterText: null
+ });
+ };
+
+ render() {
+ return (
+
+ );
+ }
+}
diff --git a/src/app/structure/main-content/scripts/generator.ts b/src/app/structure/main-content/scripts/generator.ts
new file mode 100644
index 0000000..fc79de9
--- /dev/null
+++ b/src/app/structure/main-content/scripts/generator.ts
@@ -0,0 +1,119 @@
+const companies = ['ebay', 'facebook', 'live', 'yandex', 'live', 'reddit', 'twitter', 'youtube'];
+const topics = [
+ 'Внимание!',
+ 'Добро пожаловать!',
+ 'Обновление',
+ 'Получите приз!',
+ 'Восстановление аккаунта',
+ 'Ищем сотрудников',
+ 'Спасибо за отзыв'
+];
+const hello = ['Здравствуйте!', 'Добрый день!', 'Привет!', 'Приветствую!', 'Салют!'];
+const word1 = ['Я', 'Меня зовут', 'Это'];
+const firstName = ['Виталий', 'Андрей', 'Владимир', 'Алексей', 'Артём', 'Антон'];
+const secondName = [
+ 'Соболев',
+ 'Чиркин',
+ 'Борисов',
+ 'Орехов',
+ 'Гаврилов',
+ 'Иванов',
+ 'Сергеев',
+ 'Онегин'
+];
+const phrase1 = [
+ 'Так вышло, что',
+ 'Нам стало известно, что',
+ 'Сообщаем вам, что',
+ 'Как вы могли заметить,',
+ 'С сегоднящнего дня'
+];
+const nouns1 = ['эксперт', 'редактор', 'программист', 'рабочий'];
+const verbs = [
+ 'взломал',
+ 'проверил',
+ 'удалил',
+ 'исправил',
+ 'закрыл',
+ 'заметил',
+ 'пометил',
+ 'пересмотрел',
+ 'передал'
+];
+const nouns2 = ['счет', 'аккаунт', 'пароль', 'кабинет'];
+const adjectives = [
+ 'идеальный',
+ 'прямой',
+ 'обратный',
+ 'наш',
+ 'постоянный',
+ 'великолепный',
+ 'исключительный',
+ 'личный',
+ 'ваш'
+];
+
+let counter = 0;
+
+export function randomInt(min: number, max : number) {
+ return Math.floor((max - min) * Math.random() + min);
+}
+
+function randFromList(list : any) {
+ return list[randomInt(0, list.length)];
+}
+
+const randomDate = () => {
+ const m = randomInt(1, 12);
+ let day = randomInt(1, 30);
+ if (m === 2) day = Math.min(28, day);
+ const month = [
+ 'янв',
+ 'фев',
+ 'мар',
+ 'апр',
+ 'май',
+ 'июн',
+ 'июл',
+ 'авг',
+ 'сен',
+ 'окт',
+ 'ноя',
+ 'дек'
+ ];
+ return `${String(day)} ${String(month[m - 1])}`;
+};
+
+function generateText(sender:string) {
+ const textContent = [
+ `${randFromList(hello)} ${randFromList(word1)} ${randFromList(firstName)} ${randFromList(
+ secondName
+ )}, глава компании ${sender.toUpperCase()}.`
+ ];
+ textContent.push(
+ `${randFromList(phrase1)} ${randFromList(adjectives)} ${randFromList(nouns1)} ${randFromList(
+ verbs
+ )} ${randFromList(adjectives)} ${randFromList(nouns2)}.`
+ );
+ return textContent;
+}
+
+export const generateNewLetter = () => {
+ counter++;
+ const id = counter;
+ const author = randFromList(companies);
+ const text = generateText(author);
+ const topic = randFromList(topics);
+ const date = randomDate();
+
+ return {
+ key: `id${id}`,
+ id: `id${id}`,
+ text: text,
+ author : author,
+ topic : topic,
+ date : date,
+ isChecked: false,
+ isVisible: true
+ };
+};
diff --git a/src/app/structure/menu/menu.module.css b/src/app/structure/menu/menu.module.css
new file mode 100644
index 0000000..a826262
--- /dev/null
+++ b/src/app/structure/menu/menu.module.css
@@ -0,0 +1,53 @@
+.menu {
+ width: 147px;
+ max-width: 170px;
+ margin-left: 22px;
+ float: left;
+}
+
+.menu__toWrite {
+ width: 147px;
+ height: 32px;
+
+ border: none;
+ background-color: #6287bd;
+ border-radius: 3px;
+ color: #ffffff;
+ font-family: "'HelveticaNeue'", sans-serif;
+ font-size: 12px;
+}
+
+.menu__toWrite:hover {
+ box-shadow: 2px 2px rgba(0, 0, 0, 0.6);
+}
+
+.menu__bar {
+ padding: 0;
+}
+
+.menu__action {
+ width: 147px;
+ height: 22px;
+ margin-top: 2px;
+ border-radius: 3px;
+ list-style: none;
+}
+
+.menu__textRef {
+ display: block;
+ padding-left: 10px;
+ color: #555555;
+ font-family: "'HelveticaNeue'", sans-serif;
+ font-size: 11px;
+ font-weight: 500;
+ line-height: 22px;
+ text-decoration: none;
+}
+
+.menu__action:hover {
+ background-color: #cdd6e4;
+}
+
+.menu__textRef:hover {
+ font-weight: 700;
+}
diff --git a/src/app/structure/menu/menu.tsx b/src/app/structure/menu/menu.tsx
new file mode 100644
index 0000000..d16a1ce
--- /dev/null
+++ b/src/app/structure/menu/menu.tsx
@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+
+import styles from './menu.module.css';
+
+const actions = [
+ { title: 'Входящие', fragment: 'inbox' },
+ { title: 'Отправленные', fragment: 'sent' },
+ { title: 'Удалённые', fragment: 'deleted' },
+ { title: 'Спам', fragment: 'spam' },
+ { title: 'Черновики', fragment: 'drafts' },
+ { title: 'Создать папку', fragment: 'createdir' }
+];
+
+export class Menu extends Component {
+ render() {
+ return (
+
+ );
+ }
+}
+