illdoodle/notes-project

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

notes-project's Issues

Добавить валидацию поля notes-enter

• не должен быть пустым
• если поле пустое ошибка должна выводится в модальном окне

Улучшить дизайн

• использовать библиотеку компонентов (напр. https://react-bootstrap.github.io/docs/getting-started/introduction или https://mui.com/ (более тяжелая))

Добавить redux в проект

Перенести ответственность за хранение и обработку всех заметок в хранилища redux.
Redux необходим для разделения данных и отображения.

Вот что думает о пользе разделения Chat GPT, я с ним согласен:
Чистый код: Отделение данных от их отображения позволяет создавать более чистый и легко читаемый код. Когда данные и их представление разделены, каждая часть программы отвечает только за свою функциональность, что упрощает понимание и поддержку кода.

Повторное использование кода: Поскольку отображение не зависит от специфики данных и наоборот, это облегчает повторное использование кода. Вы можете использовать одни и те же данные с разными методами отображения или наоборот, что экономит время разработки.

Улучшенная поддержка: Изменение структуры данных или способа их представления не должно сильно влиять на другую часть программы. Это упрощает внесение изменений и обновление программного обеспечения.

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

Расширяемость: Если вам нужно добавить новые типы данных или методы их отображения, разделение позволит это сделать без изменения существующего кода. Это обеспечивает более гибкую архитектуру программы.

Туториал по созданию простого хранилища: https://react-redux.js.org/tutorials/quick-start

Хранилище должно включать в себя:

• initialState в виде пустого массива заметок или же заполненного массива в случае если в localStorage были значения
• reducers: addNote, removeNote

Компонент Notes должны использовать это хранилище для вывода списка

Правки в компоненте Notes

• не использовать id в чистом виде, если компонент будет использован дважды на странице это приведёт к ошибке
• для статичных атрибутов чистого html не использовать {} т.к такая запись означает что атрибут будет проставлен reacto'м с помощью JS (maxLength={50} -> maxLength="50")
• в TSX (непосредственно return div...div) не использовать логику:
  onKeyDown={(e) => {e.code == 'Enter' ? addNote(document.querySelector('#notes-enter')) : true}}
  вынести в отдельную функцию
• избегать длинных однострочных записей, обеспечивать быструю читаемость кода
  setNotes([{id: 1, text: element.value.trim() ? element.value : newNotes.length + 1, completed: false}, ...newNotes]);

setNotes([
  {
    id: 1,
    text: element.value.trim() ? element.value : newNotes.length + 1,
    completed: false
  },
  ...newNotes
]);

• для получения доступа к элемент #notes-enter использовать useRef (https://react.dev/learn/manipulating-the-dom-with-refs)
• если переназначение переменной не планируется использовать const, а не let
• избегать прямых манипуляций с DOM
  element.value = '';, для контроля состояния DOM использовать useState

const [inputValue, setInutValue]= useState(null);
...
setInputValue('');
...
<input value={inputValue} ... />

• типизировать все структуры данных по аналогии:
  
  Необходимо для того что бы не собирать структуру по назначениям свойств в функциях, в этом прямое назначение TypeScript

Улучшить структуру проекта

• хранить компонент в папке с тем же именем если у него есть *.module.css
• хранить *.module.css в той же папке что и компонент к которому он относится
• именовать *.module.css в точности с названием компонента (NoteItem -> NotesItem.module.css)

Улучшить читаемость компонентов

• передаваемые пропсы разделять строками
  

Создание основного функционала

Создать интерфейс ориентируясь на дизайн-картинку.

Основной функционал приложения:

• вывод списка заметок
• добавление заметок
• удаление заметок
• маркировка заметок выполнено/не выполнено

Дополнительные требования к приложению:

• при добавлении заметка должна плавно появляться слева, двигая весь список вниз
• при удалении заметка должна плавно уходить вправо, двигая весь список вверх
• на одной странице должно быть не более 10-ти заметок, при превышении использовать пагинацию
• заметки должны сохраняться при перезагрузке страницы

типизировать структуры в коде

добавить поиск заметок

Добавить компонент модального окна

• должна быть возможность закрыть окно по нажатию на крестик справа вверху
• компонент должен иметь возможность отрисовывать любые переданные в него компоненты
• должен выводиться поверх всего UI

добавить фильтрацию заметок

Установить и использовать шрифты Roboto

Ссылка на источник с шрифтом: https://fonts.google.com/specimen/Roboto

Добавить адаптивность под узкие дисплеи

Вынести type за пределы компонента

Любую информацию которая может быть константной или не нуждается в переопределении не вносить в неоднократно вызываемые функции. Для типов используемых в компоненте так же можно использовать отдельный файл в папке с компонентом, например types.ts или Notes.types.ts, это позволит не только очистить код компонента, но и переиспользовать типы в других местах приложения.

Убрать все :any из проекта

:any - это костыль TypeScript, не основной инструмент