<< Первый вопрос есть ли какой-нибудь алгоритм, как приступать к выполнению задачи
Есть: Пришел, увидел, победил. Все как обычно...
<< Как я должен был бы начать эту задачу вижу файлы, но плохо понимаю, как они между собой связаны.
Олег, а как ты делал учебный проект с покемонами? Ведь ты же закладывал там как-то несколько файлов, связанных друг с другом. Или ты кому-то заплатил и за тебя сделали?
На самом деле тебя разброс файлов вообще особо не должен волновать. Какая разница один это файл или много? Главное - с чего начать. А я говорил с чего - с папки /pages. С нее все начинается, там весь роутинг. А далее юзай активно F12 (для быстрого перехода к сущности). Встал курсором, нажал F12, Перешел к сущности. Оттуда практически наверняка будет куда-нибудь в src/pages, где конечный код страниц находится. Там будет первичное получение нужных данных, которые будут передаваться в какую-нибудь вьюху (View). Вложенность может быть какая угодно, но суть все равно будет одна и та же: это будут реакт-компоненты, которые выводят другие реакт-компоненты, передавая в них пропсы (props) и оперируя своими стейтами (state). Все. Там другого практически ничего нет. Все остальное локально внутри компонента. Вот еще раз: я уже выше говорил, что Сама страница здесь: https://github.com/freecode-academy/freecode.academy/blob/e8dc066e7a539e87d1a87e72ada36f059a32d291/src/pages/Office/Timers/View/index.tsx
{timers.map((timer) => {
return <OfficeTimersTimer key={timer.id} timer={timer} />
})}
Это же всего три строчки. Что тут не ясно? Ты не понимаешь метода Array.map? Так зайди в уроки по JS и перепройди массивы.
Это основа. Практически все языки программирования держатся на трех китах: циклы, условия и еще что-то там. Если ты не понимаешь и не умеешь в if/else, то куда ты вообще можешь пойти? Если не понимаешь циклы (while, for и т.п.), то опять-таки, куда ты можешь пойти? Ты месяц делал покемонов, а в итоге простейшие операции с массивами не понимаешь? А знаешь почему? Помнишь этот мем?: "Отправили на экскурсию по заводу BMW, а потом заставляют наладить производство таких же машин". Вот ты посмотрел как кто-то там делает какой-то проект, от начала и до конца, так вот, даже если ты год потратишь и научиться по тому курсу делать этот проект с покемонами, то в лучшем случае ты научишься делать именно такие проекты с покемонами. А каков шанс на то, что к тебе придет заказчик и попросит вот ровно такой проект с покемонами? Даже если вот прям сильно такой же будет и ты сможешь его сделать на 90%, но не сможешь доделать оставшиеся 10%, то проект не сдан. Никто не примет проект со словами "Ну там осталось немного, найдите кого-нибудь, пусть доделает".
Я же на главной странице даже сделал ссылку для новеньких: https://freecode.academy/start/developers и главное там вот это:
Если вы решили изучить веб-программирование, мы попытаемся вам в этом помочь. Для этого разрабатывается и внедряется сразу несколько инструментов.
Данный раздел подходит для самостоятельного последовательного изучения основам веб-разработки. Рекомендуется следующая последовательность в изучении:
Для начала освоить
При чем лучше не последовательно полностью по курсу, а в первый день HTML и CSS, во второй JavaScript, в третий React, и далее по кругу. Реакт будет на первых парах сложен в восприятии, поэтому его можно в начале поменьше. Чувствуете, что ничего не понимаете - переключайтесь опять на HTML/CSS/JS. Все потому что Реакт, по сути, это JS+HTML - Переменные, свойства которых являются HTML-разметкой (очень условно, но близко к сути).
В каждом уроке есть вкладка Обсудить. Если вы зашли в нее и там нет еще ни одного сообщения, не стесняйтесь, смело пишите туда любые вопросы. Смысл данных уроков не в том, чтобы протестировать что вы умеете, а что нет (хотя и это тоже), а в том, чтобы вы научились чему-то новому, так что если что-то не ясно, обязательно спрашивайте. Все обсуждения попадают в общий блог Уроки.
Вот именно в такой последовательности. Ты должен знать основы JS обязательно. Прям каждый день по часу-два на эти уроки тратить, можно и по кругу, пока не почувствуешь уверенность в знаниях. А ты что сейчас делаешь? Не понял три строчки и пытаешься отъехать в то, что проект большой и запутанный? Нее, так дело не пойдет. Проблема явно не в проекте, а в знаниях и подходах.
Так вот, возвращаясь к задаче, ты мог бы для начала хотя бы сделать это:
// Обернуть цикл в мемо, чтобы при изменении массива посчитать актуальное время и сформировать актуальный список
// Результатом выполнения функции будет объект с двумя свойствами
const {
totalTime,
timersContent,
} = useMemo(() => {
// Счетчик общего времени
let totalTime = 0;
// Набить таймеры в шаблоны
const timersContent = timers.map((timer) => {
// Здесь посчитать затраченное время по таймеру и добавить в общий счетчик
totalTime += ...
return <OfficeTimersTimer key={timer.id} timer={timer} />
})
// Возвращаем объект с обеими переменными
return {
totalTime,
timersContent,
}
}, []);
// В шаблоне вывести
<div>
{totalTime}
{timersContent}
</div>
Вот если бы ты это сделал, вот просто локально, и спросил "Колян, я вот сумел посчитать общее затраченное время, как мне....", а я вот даже не знаю что там еще спросить остается...
Вот тогда бы я понял, что локально ты в чем-то продвинулся... А вот потом уже будешь смотреть и в связи в файлах и т.п.