Попыркина Мария, М3337 by mashajuventus · Pull Request #19 · itmo2019/task6

mashajuventus · 2019-06-24T17:07:27Z

Реализованы поиск по письмам и темная тема.

vercel · 2019-06-24T17:07:34Z

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://task-5-git-fork-mashajuventus-maria-popyrkina-task-6.itmo-yandex.now.sh

evgenymarkov · 2019-06-25T07:28:35Z

    "not op_mini all"
  ],
  "dependencies": {
+    "@types/classnames": "2.2.8",


npm install --save-dev @types/*

evgenymarkov · 2019-06-25T07:30:26Z

+  height: 600px;
+  background-color: #e5eaf0;
+  margin: 0;
+  /*background-color: black;*/


Не оставляй мёртвый код

evgenymarkov · 2019-06-25T07:34:51Z

+  margin-right: 20px;
+}
+
+.inp {


Надо бы добавить немного творчества при именовании переменных)

evgenymarkov · 2019-06-25T07:38:03Z

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';


Импорты можно делить на группы:

Встроенные модули в браузер (таких пока нет) / батарейки Node.js

Сторонние библиотеки

JS импорты внутри проекта

Импорт ресурсов (css, font, images)

evgenymarkov · 2019-06-25T07:44:40Z

+import { Header } from '../header/Header';
+import { Menu } from '../menu/Menu';
+import { LettersList } from '../lettersList/LettersList';
+import { ILetter } from '../letter/ILetter';


Можно рядом держать файлик types.ts

evgenymarkov · 2019-06-25T07:47:02Z

+  template: string;
+}
+
+export class Main extends Component<{}, IState> {


Можно так:

public readonly state: IState = { isDark: false, letters: [], openId: -1, template: '' }

evgenymarkov · 2019-06-25T07:51:16Z

+    this.searchLetters = this.searchLetters.bind(this);
+    this.setLetters = this.setLetters.bind(this);
+    this.changeColor = this.changeColor.bind(this);
+    this.curMin = 10;


Можно вынести из конструктора в поле класса.
И назвать чуть понятнее :)

public static CUR_MIN = 10;

evgenymarkov · 2019-06-25T08:02:09Z

+      openId: -1,
+      template: ''
+    };
+    this.letterAdded = this.letterAdded.bind(this);


Можно удалить т.к ты используешь стрелочные функции сохранённые в поля класса

evgenymarkov · 2019-06-25T08:03:43Z

+      isDark: false,
+      letters: [],
+      openId: -1,
+      template: ''


Убирай мёртвый код

evgenymarkov · 2019-06-25T08:12:10Z

+            openId={this.state.openId}
+            openLetters={this.openLetters}
+            markNotNew={this.markNotNew}
+            isDark={this.state.isDark}


Для того чтобы в дерево компонентов глубоко прокидывать пропсы можно использовать контексты

evgenymarkov · 2019-06-25T08:14:13Z

+          <Menu />
+          <LettersList
+            letterAdded={this.letterAdded}
+            letterChose={this.letterChose}


onLetterChose

evgenymarkov · 2019-06-25T08:15:35Z

+      lettersS[i].isVisible =
+        lettersS[i].letterText.includes(template) || lettersS[i].sender.includes(template);
+    }
+    this.setState({ template: template, letters: lettersS });


template: template -> template

lettersS -> letters

this.setState(oldState => { // Your code });

evgenymarkov · 2019-06-25T08:21:07Z

+    const lettersS = this.state.letters;
+    for (let i = 0; i < lettersS.length; i++) {
+      if (lettersS[i].id === id) {
+        lettersS[i].classS = "notNew";


Держи в голове, что изменение чего-то внутри стейта может привести к сложновоспроизводимым багам

evgenymarkov · 2019-06-25T08:21:32Z

+      delay += genDelay;
+    }
+    this.diff = delay;
+    console.log(delay);


Ата-та

evgenymarkov · 2019-06-25T08:27:18Z

+
+import styles from './Menu.module.css';
+
+export class Menu extends Component {


Попробуй функциональные компоненты, для начала в местах где есть только вёрстка без логики

evgenymarkov · 2019-06-25T08:27:58Z

+  openId: number;
+  letters: ILetter[];
+  openLetters: () => void;
+  markNotNew: (a: number) => void;


id or index

evgenymarkov · 2019-06-25T08:30:41Z

+          allLettersChose={this.props.allLettersChose}
+          changeColor={this.props.changeColor}
+        />
+        <ul className={styles.lettersList}>{code}</ul>


Внутри ul не может быть других детей кроме li

evgenymarkov · 2019-06-25T08:32:24Z

+    return (
+      <section className={darkClass}>
+        <LetterHeader
+          letterAdded={this.props.letterAdded}


const { lettersDeleted, allLettersChose } = this.props;

evgenymarkov · 2019-06-25T08:34:52Z

+}
+
+export class LetterHeader extends Component<IProps> {
+  public constructor(props: IProps) {


private markerRef = React.createRef();

evgenymarkov · 2019-06-25T08:35:33Z

+  private markerRef: RefObject<HTMLInputElement>;
+
+  public render() {
+    const sqBut = cn(styles.squareForButton, stylesHead.headerPart);


evgenymarkov · 2019-06-25T08:35:52Z

+            <input
+              ref={this.markerRef}
+              type="checkbox"
+              name="CCC"


evgenymarkov · 2019-06-25T08:37:11Z

+              type="checkbox"
+              name="CCC"
+              className={styles.inputButton}
+              onClick={() => {


Можно вынести в отдельный обработчик в классе, никаких доп. аргументов ты в обработчики не передаёшь

evgenymarkov · 2019-06-25T08:37:30Z

+            name="resendButton"
+            value="Переслать"
+            className={stylesHead.headerButtons}
+            onClick={() => this.props.letterAdded(0)}


Тоже можно вынести

evgenymarkov · 2019-06-25T08:37:56Z

+          />
+        </li>
+        <li className={stylesHead.headerPart}>
+          <input


button type="button"

evgenymarkov · 2019-06-25T08:38:47Z

+  outline: none;
+  background-color: inherit;
+  font-weight: 500;
+  color: #cccccc;


Можно сокращать до #ccc

evgenymarkov · 2019-06-25T08:41:05Z

+              }, // .bind(this)
+              1000);
+          } else if (this.props.classS === 'delete') {
+              this.markerRef.current.className = styles.letter_delete;


Юзай classList

evgenymarkov · 2019-06-25T08:41:25Z

+import styles from './Letter.module.css';
+
+interface IProps {
+  classS: string;


cls, modifier

evgenymarkov · 2019-06-25T08:43:40Z

+                <input
+                  type="checkbox"
+                  className={styles.inputButton}
+                  onChange={() => this.props.letterChose(this.props.id)}


Постарайся сокращать использование lambda функций в render, это плохо влияет на производительность

evgenymarkov · 2019-06-25T08:45:13Z

+  /*background-color: black;*/
+}
+
+.selectButton:after {


Отделяй псевдоэлементы от псевдоклассов
::

evgenymarkov · 2019-06-25T08:47:02Z

+  border-right: 2px solid;
+  border-bottom: 2px solid;
+  color: #000000;
+  -webkit-transform: scale(0.85) rotate(47deg) skewX(12deg);


Есть тулза, которая сама проставляет префиксы: Autoprefixer

evgenymarkov · 2019-06-25T08:48:08Z

+.letterDate {
+  float: right;
+  margin-right: 20px;
+  font-family: HelveticaNeueCyr-Medium;


Надо писать fallback

evgenymarkov · 2019-06-25T08:50:30Z

+}
+
+.letterDate {
+  float: right;


Вот это древности)) Используй float только для обтекания

evgenymarkov · 2019-06-25T08:51:04Z

+  src: url('./sourse/fonts/HelveticaNeueCyr-Medium.eot?#iefix') format('embedded-opentype'),
+  url('././sourse/fonts/HelveticaNeueCyr-Medium.svg#HelveticaNeueCyr-Medium') format('svg'),
+  url('././sourse/fonts/HelveticaNeueCyr-Medium.ttf') format('truetype'),
+  url('././sourse/fonts/HelveticaNeueCyr-Medium.woff') format('woff'),


Актуальны только woff2, woff

evgenymarkov · 2019-06-25T08:53:12Z

+            <img
+              className={styles.yandexMail_picture}
+              alt="yandexMailPicture"
+              src={actualLogo}


Можно было прост isDark ? darkLogo : logo

evgenymarkov · 2019-06-25T08:54:28Z

@@ -0,0 +1,52 @@
+const senders = ['Mom', 'Dad', 'Cat', 'Dog', 'Apple', 'Teacher', 'Homie', 'Mole',


tsx -> ts

mashajuventus added 3 commits June 23, 2019 17:40

task 2 and 3 done

afcf306

added typescript and css.modules

9c27a03

functions.jsx to tsx

991e9c9

vercel Bot deployed to staging June 24, 2019 17:07 View deployment

bug fixes

3aa71ee

vercel Bot deployed to staging June 25, 2019 06:07 View deployment

evgenymarkov reviewed Jun 25, 2019

View reviewed changes

Comment thread src/main/Main.tsx

isDark: false,

letters: [],

openId: -1,

template: ''

Copy link
Copy Markdown

evgenymarkov Jun 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Убирай мёртвый код

evgenymarkov reviewed Jun 25, 2019

View reviewed changes

Comment thread src/main/Main.tsx

delay += genDelay;

}

this.diff = delay;

console.log(delay);

Copy link
Copy Markdown

evgenymarkov Jun 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ата-та

evgenymarkov reviewed Jun 25, 2019

View reviewed changes

Comment thread src/letterHeader/LetterHeader.tsx

<input

ref={this.markerRef}

type="checkbox"

name="CCC"

Copy link
Copy Markdown

evgenymarkov Jun 25, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

???

evgenymarkov reviewed Jun 25, 2019

View reviewed changes

evgenymarkov approved these changes Jun 25, 2019

View reviewed changes


		import styles from './Menu.module.css';

		export class Menu extends Component {

		@@ -0,0 +1,52 @@
		const senders = ['Mom', 'Dad', 'Cat', 'Dog', 'Apple', 'Teacher', 'Homie', 'Mole',

Conversation

mashajuventus commented Jun 24, 2019

Uh oh!

vercel Bot commented Jun 24, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

evgenymarkov Jun 25, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

evgenymarkov Jun 25, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

evgenymarkov Jun 25, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

evgenymarkov Jun 25, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vercel Bot commented Jun 24, 2019 •

edited

Loading

evgenymarkov Jun 25, 2019 •

edited

Loading

evgenymarkov Jun 25, 2019 •

edited

Loading

evgenymarkov Jun 25, 2019 •

edited

Loading

evgenymarkov Jun 25, 2019 •

edited

Loading