ksaveljev / evo-ts-bootcamp Goto Github PK

1. NodeJS.Timer is incorrect. Try window.setInterval explicitely. here

2. You can write just it instead:

state = this.resetState();

// constructor(props: AppProps) {
//     super(props);
//     this.state = this.resetState();
// }

3. Do not bind it here, because you create new functions every render.

// resetSortingFn={this.resetSorting.bind(this)}
// startSortingFn={this.startSorting.bind(this)}
// pauseSortingFn={this.pauseSorting.bind(this)}

Bind in constructor once:

    constructor(props: AppProps) {
        super(props);

        this.resetSortingFn = this.resetSorting.bind(this);
    }

Or use arrow functions for methods (don't need binding anywhere):

    private resetSorting = (): void => {
        this.pauseSorting();
        this.setState(this.resetState());
    }

4. Button, ControlPanel, Visualization, and so on (where you don't use lifecycle methods and state) components can be Function (Stateless) Component.

5. event: MouseEvent<HTMLButtonElement> -> event: React.MouseEvent<HTMLButtonElement>
   or better React.MouseEventHandler<HTMLButtonElement> for the function

6. I would say it's really unreadable. If it's a swap, there is a way to do it much clearer...

            numbers[i] ^= numbers[i+1];
            numbers[i+1] ^= numbers[i];
            numbers[i] ^= numbers[i+1];

Продублирую фидбэк, что писал тебе в личку

Привет, классная галлерея получилась.
Вот тебе пару советов :)

• При загрузке картинок есть видимая задержка. Предлагаю тебе добавить анимацию загрузки (например спиннер).
• В момент появления картинок они у тебя начинают хаотично появляться на странице и потом только встают на свои места. Я бы тебе предложил попробовать показывать картинки только в тот момент, когда их размер уже известен. Кстати сам момент появления картинки тоже можно анимировать :)
• У тебя расчет ширины и высоты картинки происходит внутри styled-components. Из-за того что у каждой картинки свои уникальные ширина и высота, styled-components будет генерировать новый класс и css для каждой картинки. - Такие расчеты лучше тогда перенести в inline styles.
• Можно было бы сделать инфинит скролл или другого рода пагинацию, чтобы можно было продолжать смотреть картинки.
• Я заметил, что ты захардкодил API key, и он теперь в публичном доступе. Так лучше не стоит делать, потому что у тебя могут украсть ключ и наделать плохих дел https://stackoverflow.com/questions/48699820/how-do-i-hide-api-key-in-create-react-app
• Можно было бы уже и не тащить весь semantic ui для формы поиска :) Переверстай с использованием styled-components для практики