Перенести страницы и настроить роутинг 2

Выполняется
Планируемый запуск: 17.02.2021Дата начала: 17.02.2021Планируемое завершение: 21.02.2021Дата завершения:

Описание задачи

Перенести оставшиеся страницы на NextJs:

1. Перенести стили из css в styled-components
2. Пофикстить Typescript ошибки
3. Пофиксить подключение к firebase

ПроектЗадачаСтатусДата постановкиНачалоКонецКто создал
Учебный проект на next-js. Покемоны.Перенести страницы и настроить роутинг 2Выполняется17.02.2021 18:04:2512.02.2023 15:48:41
Учебный проект на next-js. Покемоны.Перенести страницы и настроить роутинг 2Выполняется17.02.2021 18:04:2512.02.2023 15:48:3712.02.2023 15:48:38
Учебный проект на next-js. Покемоны.Перенести страницы и настроить роутинг 2Выполняется17.02.2021 18:04:2529.09.2022 04:20:3929.09.2022 04:20:40
Учебный проект на next-js. Покемоны.Перенести страницы и настроить роутинг 2Выполняется17.02.2021 18:04:2529.09.2022 04:20:3529.09.2022 04:20:37
Учебный проект на next-js. Покемоны.Перенести страницы и настроить роутинг 2Выполняется17.02.2021 18:04:2528.05.2022 06:05:3028.05.2022 06:05:35
Учебный проект на next-js. Покемоны.Перенести страницы и настроить роутинг 2Выполняется17.02.2021 18:04:2515.05.2022 18:54:4615.05.2022 18:54:51
Учебный проект на next-js. Покемоны.Перенести страницы и настроить роутинг 2Выполняется17.02.2021 18:04:2519.04.2022 15:05:0019.04.2022 15:05:04
Учебный проект на next-js. Покемоны.Перенести страницы и настроить роутинг 2Выполняется17.02.2021 18:04:2523.02.2022 11:55:5323.02.2022 12:00:24
Учебный проект на next-js. Покемоны.Перенести страницы и настроить роутинг 2Выполняется17.02.2021 18:04:2512.11.2021 10:13:5112.11.2021 10:14:12
Учебный проект на next-js. Покемоны.Перенести страницы и настроить роутинг 2Выполняется17.02.2021 18:04:2507.08.2021 15:26:0007.08.2021 14:26:59
Учебный проект на next-js. Покемоны.Перенести страницы и настроить роутинг 2Выполняется17.02.2021 18:04:2523.02.2021 05:02:3423.02.2021 05:02:34
Учебный проект на next-js. Покемоны.Перенести страницы и настроить роутинг 2Выполняется17.02.2021 18:04:2523.02.2021 05:02:2923.02.2021 05:02:32
Учебный проект на next-js. Покемоны.Перенести страницы и настроить роутинг 2Выполняется17.02.2021 18:04:2517.02.2021 22:23:5718.02.2021 03:51:28
Учебный проект на next-js. Покемоны.Перенести страницы и настроить роутинг 2Выполняется17.02.2021 18:04:2517.02.2021 18:04:3518.02.2021 15:12:58
Решил вообщем по старому сценарию самостоятельно переписывать за тобой, так как просто смотреть не очень получается тогда уловить суть всех изменений в этот раз сложней повторять, потому-что ты часто возвращаешься и переписываешь свой код, но так вроде все равно более понятно становится.

Первый комит:

А очень часто приходится переписывать код, особенно когда не до конца понимаешь что делать. Я всегда говорил: "Главное - понять, что делать.".

Но ты не просто коммиты выкатывай, ты и спрашивай что не ясно. Наверняка же что-то не ясно.
Слушай, когда просто смотришь кажется, что многое не понимаешь, но когда начинаешь тоже писать уже становится более понятно, что делаешь. Но вопросы будут не переживай)
Про этот дженерик говорил:

& Omit<Pokemon, 'abilities' | 'stats' | 'base_experience' | 'height'>

Объясни пожалуйста, как он работает и вообще в каких случаях мы должны использовать дженерики.

Возможно в прошлом видео ты объеснял, но все не получается запомнить по видео, через текст проще, всегда можно вернуться посмотреть.
Еще объясни этот фрагмент, не совсем понял зачем вынесли пропсы в отдельную константу в одном месте мне кажется было удобней.


<< & Omit<Pokemon, 'abilities' | 'stats' | 'base_experience' | 'height'>
<< Объясни пожалуйста, как он работает

Вообще, в подобных случаях лучше сначала гуглить. Простой же запрос "Typescript дженерики". Как правило есть на хабре что-нить. Вот отличная статья: https://habr.com/ru/post/455473/
Там даже с гифками.

А в данном случае происходит следующее?

1. Omit<Pokemon, 'abilities' | 'stats' | 'base_experience' | 'height'>
Omit - это функция, исключающая из типы перечисленные свойства. Официальная документация https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys

То есть есть тип Pokemon, в котором перечислена куча свойств. Мне надо в другом компоненте перечислить свойства типа Pokemon, но вот только не все, а за исключением этих перечисленных.

2. Символ & - это сложение типов, то есть я к своему типу прибавляю еще и типы из покемона, за исключением перечисленных.

<< и вообще в каких случаях мы должны использовать дженерики.
Везде, где это уместно и полезно. И если здесь не использовать Omit, то пришлось бы перечислять все типы из покемона повторно. А если мы их используем в нескольких местах? А если потом в покемоне поменяются или добавятся/удалятся какие-то типы? БЕгать потом по проекту и актуализировать?

Omit - это тоже дженерик. Вообще, в TS, все, что имеет дополнительные параметры - это дженерики.

А вот бывают и гораздо более сложные дженерики. К примеру, вот здесь: src/hooks/useProcessorMutation/index.tsx

Здесь происходит целая магия. Это общий хук для всех запросов-процессоров (таких моих специализированных запросов, содержащих в ответах ошибки, если есть). Все ответы имеют общую структуру (success, message, errors, data), но все же отличаются, потому что data у каждых своя (User, Project, Task и т.п.), и разные входящие параметры. И вот задача был написать одну функцию, в которую можно передавать разные параметры, получать свои ответы и было понятно где что требуется и что будет возвращено. Вот какой результат в итоге:

Он понимает, какие параметры может и должен принимать:

И понимает что на выходе имеется:

Такие дела...
<< Еще объясни этот фрагмент, не совсем понял зачем вынесли пропсы в отдельную константу в одном месте мне кажется было удобней.

Я уже писал ранее: надо стараться придерживаться принципа "Одна сущность - один файл". Хотя бы по отношению к основным компонентам. Не удобно заходить в компонент и искать где же начинается его код (пропуская прочие сущности). Ты эти константы раз напишешь и забудешь, а вот код компонента может меняться часто.

<< Поправил две страницы PokemonCard+Home

Отлично!

Добавить комментарий