Month 12/step 1

[c1ty-cat]

No description provided.

[kyzinatra]

Можно лучше: название я оценил :D, но все же лушче дать более конкретное и понятное имя вроде delay

[kyzinatra]

Можно лучше: функции swapNums и swapChars практически идентичны. Стоит обьеденить их в 1

[kyzinatra]

Можно лучше: магические число 19 лучше вынести в отдельную константу

[kyzinatra]

Можно этот кусок кода записать проще:

const rSize = Math.random() * (17 - 3) + 3;
Array.from({length: rSize}, () => ({num: utils.getHeight(), state: ElementStates.Default}))

[kyzinatra]

Надо исправить: Сами функции (как и во всех остальных компонентах), которые отвечают за сам алгоритм нужно вынести в utils.tsx в папке этого компонента

[kyzinatra]

Надо исправить: В этом случае можно создать класс Stack где реализовать эти методы и сюда уже их импротить

[kyzinatra]

Можно лучше: не стоит использовать in-line стили, лучше вынести их в класс

[kyzinatra]

Выглядит очень круто! Видно, что проделана большая работа.

Что важно исправить:

• В файле readme не нашел описание проекта
• функции, которые реализуют работу алгоритма должны быть вынесены в отдельный utils.tsx в папке соответствующего компонента. В utils.tsx стоит считать шаги алгоритма (если сам результат уже не описывает шаги, как в случае последовательности фибоначи) и далее рендерить их в react
• Стоит создать класс Queue для реализации очереди и класс LinkedListNode и ласс LinkedList с методами prepend, append, addByIndex, deleteByIndex, deleteHead, deleteTailи toArray

Можно лучше:

• файл .editorconfig стоит добавить в .gitignore так как он локальный для вас и не используется другими
• Для удобства можно установить "noImplicitAny": true в ts config

Что понравилось:

• Отличное комментирование кода

Обратите внимание, что работа принимается только после исправления всех «Надо исправить».

[kyzinatra]

Вы отлично потрудились, но пункт чеклиста состоит немного не в этом. Видно, что вы старались вынося это в отдельные файлы, и если честно работа меня впечатлила, но вы верно сделали в 1 раз, что организовывали рендеринг в самом компоненте. Это правильно, но вы таже в самом компоненте организовали и вычисление самого алгоритма. Давайте я покажу на примере как это может выглядеть:
К примеру fibonacci-page

В самом файле utils.ts я реализую только алгоритм.

export function getFibonacciNumbers(count: number) {
  const fibonacciNumbers = [1, 1];
  for (let i = 2; i <= count; i++) {
    const a = fibonacciNumbers[i - 1];
    const b = fibonacciNumbers[i - 2];
    fibonacciNumbers.push(a + b);
  }
  return fibonacciNumbers;
}

Как видно очень простая функция

А теперь в самом компоненте я провожу рендер этих данных:
(Привожу в качестве примера, вы можете использовать это по своему разумению)

// fibonacci-page.tsx

const [numberCount, setNumberCount] = useState(0);
  const fibonacciNumbers = useRef<number[]>([]);
  const intervalId = useRef<NodeJS.Timeout>();


 const startAlgorithm = () => {
    fibonacciNumbers.current = getFibonacciNumbers(numberCount);
    setCurrentAlgorithmStep(0);

    intervalId.current = setInterval(() => {
      if (numberCount > 0) {
        setCurrentAlgorithmStep((currentStep) => {
          const nextStep = currentStep + 1;

          if (nextStep > numberCount && intervalId.current) {
            clearInterval(intervalId.current);
          }

          return nextStep;
        });
      }
    }, SHORT_DELAY_IN_MS);
  };

...

return (
... 
 fibonacciNumbers.current
              .slice(0, currentAlgorithmStep)
              .map((fibonacciNumber, index) => { ... } ) 
...
)

Или к примеру list-page:

В linked-list.ts, utils.ts по чеклисту стоит вынести только лишь реализацию списка, а рендер, конечно, производится в компоненте
(Рендер-часть можно удобнее организовать с помощью пользовательских хуков, но это уже более сложная тема и спринт этого не требует)

// utils.ts  пример реализации одной функции

export function addTail<T>(value: T, list: LinkedList<T>): Step<T>[] {
  const steps: Step<T>[] = [];
  const sourceListValues = list.toArray();

  steps.push({
    index: sourceListValues.length - 1,
    value,
    listValues: sourceListValues,
  });

  list.append(value);

  steps.push({
    index: sourceListValues.length,
    listValues: list.toArray(),
  });

  steps.push({
    listValues: list.toArray(),
  });

  return steps;
}

// linked-list.ts
export class LinkedListNode<T> {
  ...
}

export class LinkedList<T> {
...
}

Посмотрите внимательно чеклист по соответствующим категориям:

По аналогии по каждой категории для которой это актуально

[kyzinatra]

Отличная работа! Желаю успехов в дальнейшем развитии и обучении