Компоненты MyNotes

Структура компонентов

AppProvider.tsx

Назначение: Context провайдер для глобального состояния приложения

Состояние:

currentTopic: number - ID текущей активной темы (0 = "All")
setCurrentTopic: (topicId: number) => void - функция установки текущей темы
allTabs: Topic[] - массив всех закрепленных вкладок
setAllTabs: (tabs: Topic[]) => void - функция обновления вкладок

Использование: Оборачивает корневой компонент приложения

Особенности:

При монтировании автоматически загружает все вкладки из БД

AppContent.js

Назначение: Главный компонент контента приложения

Функциональность:

Отображение горизонтального списка вкладок (ScrollView)
Отображение списка тем и заметок текущей темы
Создание новых тем через модальное окно
Создание новых заметок (кнопка "+" справа внизу)
Свайпы для переключения вкладок:
- Свайп влево - следующая вкладка
- Свайп вправо - предыдущая вкладка
Обработка клавиатуры (автоматический padding снизу при открытии)
Обновление данных при возврате на экран через useFocusEffect

Специальная вкладка "All":

Вкладка с id: 0 всегда присутствует в списке
Показывает все корневые темы (без родителя)
Нельзя удалить или открепить

UI элементы:

Кнопка создания темы (FilePlus иконка) - слева внизу
Кнопка создания задачи ("✓") - по центру внизу (только если currentTopic !== 0)
Кнопка создания заметки ("+") - справа внизу (только если currentTopic !== 0)

Topic.tsx

Назначение: Рекурсивный компонент для отображения темы и её подтем

Пропсы:

topic: Topic - объект темы
deleteTopic: (id: number) => void - функция удаления темы
depth?: number - глубина вложенности (для цветовой схемы, по умолчанию 0)
setAsTab?: null | ((topic: Topic) => void) - функция закрепления как вкладки

Функциональность:

Отображение названия темы
Раскрытие/сворачивание подтем (chevron иконки)
Модальное окно настроек (долгое нажатие):
- Удаление темы
- Закрепление/открепление как вкладки (в зависимости от текущего состояния)
- Добавление заметки
- Создание подтемы
Рекурсивное отображение дочерних тем через локальный TopicContentComponent
Автоматическое обновление подтем и заметок при разворачивании темы

Внутренние компоненты:

TopicContentComponent - локальный компонент для отображения содержимого темы (избегает require cycle)

Стили: Использует Topic.styles.ts и colorSchemes.js для цветов по глубине

Особенности:

Использует useMemo для оптимизации проверки isTab
Обновляет данные при каждом разворачивании темы через useEffect

TopicContentComponent (локальный в Topic.tsx)

Назначение: Отображает содержимое темы (подтемы и заметки)

Пропсы:

topic: Topic - текущая тема
subtopics: Topic[] - массив подтем
deleteSubtopic: (id: number) => void - функция удаления подтемы
depth: number - текущая глубина
isExpanded: boolean - флаг развернутости темы

Функциональность:

Рендерит список подтем (рекурсивно через Topic)
Разделяет заметки на:
- Невыполненные задачи (отображаются через Task)
- Обычные заметки (отображаются через Note)
- Выполненные задачи (отображаются в виртуальной теме CompletedTasksGroup)
Автоматически обновляет заметки при разворачивании темы

Порядок отображения:

Подтемы
Невыполненные задачи
Обычные заметки
Виртуальная тема "Выполненные задачи" (если есть выполненные)

Note.tsx

Назначение: Компонент для отображения заметки

Пропсы:

note: Note - объект заметки
deleteNote: (id: number) => void - функция удаления заметки
topicId: number - ID темы, к которой принадлежит заметка

Функциональность:

Отображение заметки в списке
Отображение даты создания (форматированная через formatDate)
Переход к редактору заметки при нажатии (через Expo Router)
Модальное окно настроек (нажатие на MoreVertical):
- Удаление заметки

Особенности:

Заметка является ссылкой на редактор (/noteEditor с параметрами topicId и noteId)
Отображает заголовок (если есть) и содержимое

Task.tsx

Назначение: Компонент для отображения задачи

Пропсы:

task: Note - объект задачи (Note с is_task = true)
deleteTask: (id: number) => void - функция удаления задачи
topicId: number - ID темы, к которой принадлежит задача
toggleTaskDone: (taskId: number, done: boolean) => void - функция переключения статуса выполнения

Функциональность:

Отображение checkbox слева для переключения статуса выполнения
Текст задачи справа (заголовок или содержимое)
Зачеркнутый текст для выполненных задач (done = true)
Переход к редактору задачи при нажатии на текст (через Expo Router)
Модальное окно настроек (нажатие на MoreVertical):
- Удаление задачи

Особенности:

При клике на checkbox переключает done через toggleTaskDone()
Задача является ссылкой на редактор (/noteEditor с параметрами topicId и noteId)
Отображает дату создания (форматированную через formatDate)

Tab.tsx

Назначение: Компонент вкладки для быстрого доступа к теме

Пропсы:

tab: Topic - объект темы-вкладки
deleteTopic: (id: number) => void - функция удаления темы

Функциональность:

Отображение названия вкладки
Переключение на тему при нажатии
Визуальное выделение активной вкладки (жирный шрифт)
Модальное окно настроек (долгое нажатие):
- Удаление темы
- Открепление вкладки
- Добавление заметки
- Создание подтемы

Особенности:

Специальная вкладка "All" (id: 0) не показывает модальное окно
Использует AppContext для отслеживания текущей активной темы

Modal.tsx

Назначение: Переиспользуемый компонент модального окна

Пропсы:

modalVisible: boolean - видимость модального окна
setModalVisible: (visible: boolean) => void - функция управления видимостью
onClose?: () => void - callback при закрытии
children: ReactNode - содержимое модального окна

TextInput.tsx

Назначение: Переиспользуемый компонент текстового поля

Расположение: src/shared/TextInput.tsx

Пропсы:

value: string - значение поля
setValue: (text: string) => void - функция обновления значения
styles?: StyleProp<TextStyle> - кастомные стили
defaultValue?: string - значение по умолчанию
placeholder?: string - плейсхолдер

Особенности:

По умолчанию multiline={true}
Поддерживает кастомные стили через проп styles

Навигация (Expo Router)

app/index.tsx

Главный экран приложения, отображает AppContent

app/noteEditor.tsx

Экран редактора заметок

Параметры роутера:

topicId: number - ID темы (обязателен для создания новой заметки/задачи)
noteId?: number - ID заметки/задачи (опционален, для редактирования существующей)
isTask?: string | boolean - флаг создания задачи (если true, создается задача)

Функциональность:

Автоматическое создание: При первом вводе текста автоматически создается заметка или задача
Автоматическое обновление: При каждом изменении заметка/задача обновляется в БД
Автоматическое удаление: Если заметка/задача была создана, но поля стали пустыми - она удаляется
Поддержка заголовка и содержимого
Редактирование существующих заметок и задач
Переключатель "Это задача" для новых заметок (позволяет выбрать тип при создании)

Особенности:

Использует useRef для отслеживания режима создания
Автоматически загружает данные заметки/задачи при открытии с noteId
При редактировании существующей задачи показывает индикатор "Задача" (readonly)

Иконки

Все иконки находятся в src/components/Icons/:

AddCircle.js - иконка добавления
ChevronDown.js - стрелка вниз (свернуто)
ChevronUp.js - стрелка вверх (развернуто)
FilePlus.js - добавление файла/заметки
MoreVertical.js - меню действий
Trash.js - удаление
WriteANote.js - написание заметки

Формат: SVG компоненты через react-native-svg

Хуки

useNotes.ts

useTopics

useTopics(parentTopicId: number = 0, init: Topic[] = []): {
  topics: Topic[],
  setTopics: (topics: Topic[]) => void,
  createTopic: (parentId: number | null, topicName: string, orderIndex?: number) => Promise<number>,
  deleteTopic: (topicId: number) => void,
  renameTopic: (topicId: number, newName: string) => void
}

Назначение: Хук для работы с темами
Функции:

createTopic - создает тему и автоматически обновляет список
deleteTopic - удаляет тему и обновляет локальный список
renameTopic - переименовывает тему в локальном состоянии

useNotes

useNotes(topicId: number = 0): {
  notes: Note[],
  setNotes: (notes: Note[]) => void,
  createNote: (topicId: number, text: string) => Promise<number>,
  updateNote: (noteId: number, content?: string, title?: string) => void,
  deleteNote: (noteId: number) => void
}

Назначение: Хук для работы с заметками
Функции:

createNote - создает заметку и автоматически обновляет список
updateNote - обновляет заметку в БД и локальном состоянии
deleteNote - удаляет заметку и обновляет локальный список

useModal.ts

Назначение: Хук для управления модальными окнами

Утилиты

sharedUtils.js

Функции:

formatDate(str: string | number): string - форматирует Unix timestamp в читаемую дату
- Формат: DD.MM.YYYY HH:MM

Паттерны использования

Рекурсивный рендеринг: Topic компонент рекурсивно рендерит себя через TopicContentComponent
Context для глобального состояния: Текущая тема и вкладки хранятся в AppContext
Custom hooks: Логика работы с данными вынесена в хуки (useNotes, useModal)
Service layer: Все операции с БД через databaseService.ts
Автоматическое обновление: Компоненты автоматически обновляют данные при разворачивании/монтировании
Свайпы: Поддержка жестов для переключения между вкладками

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Компоненты MyNotes

Структура компонентов

AppProvider.tsx

AppContent.js

Topic.tsx

TopicContentComponent (локальный в Topic.tsx)

Note.tsx

Task.tsx

Tab.tsx

Modal.tsx

TextInput.tsx

Навигация (Expo Router)

app/index.tsx

app/noteEditor.tsx

Иконки

Хуки

useNotes.ts

useTopics

useNotes

useModal.ts

Утилиты

sharedUtils.js

Паттерны использования

FilesExpand file tree

components.md

Latest commit

History

components.md

File metadata and controls

Компоненты MyNotes

Структура компонентов

AppProvider.tsx

AppContent.js

Topic.tsx

TopicContentComponent (локальный в Topic.tsx)

Note.tsx

Task.tsx

Tab.tsx

Modal.tsx

TextInput.tsx

Навигация (Expo Router)

app/index.tsx

app/noteEditor.tsx

Иконки

Хуки

useNotes.ts

useTopics

useNotes

useModal.ts

Утилиты

sharedUtils.js

Паттерны использования