@@ -135,6 +161,7 @@ function ModalCardEdit({ card = new Card(), index }) {
)
}
+// Валидация
ModalCardEdit.propTypes = {
card: PropTypeCard,
index: PropTypes.number,
diff --git a/client/src/Cards/cardType/Card.js b/client/src/Cards/cardType/Card.js
index 33e87c0..891aa9f 100644
--- a/client/src/Cards/cardType/Card.js
+++ b/client/src/Cards/cardType/Card.js
@@ -1,12 +1,14 @@
import PropTypes from 'prop-types'
+/**валидация пропсов заметки*/
export const PropTypeCard = PropTypes.shape({
- id: PropTypes.string,
+ id: PropTypes.string,
name: PropTypes.string,
color: PropTypes.string,
text: PropTypes.string,
})
+/**валидация заметки */
export function checkCard(card) {
return (
(typeof card.id === "string") &&
@@ -16,6 +18,7 @@ export function checkCard(card) {
)
}
+/**валидация массива заметок */
export function checkCardsArr(cardsArr) {
if (!Array.isArray(cardsArr)) return false
else if (cardsArr.length === 0) return true
@@ -29,6 +32,7 @@ export function checkCardsArr(cardsArr) {
}
}
+/**класс заметки */
export class Card {
constructor({ id, name, color, text }) {
this.id = String(id)
diff --git a/client/src/Cards/palette/palette.js b/client/src/Cards/palette/palette.js
index 5373f70..7ce7d60 100644
--- a/client/src/Cards/palette/palette.js
+++ b/client/src/Cards/palette/palette.js
@@ -2,6 +2,7 @@ import React from "react";
import PropTypes from 'prop-types'
import "./palette.css"
+/**набор цветов */
export const colors = [
"#f8f9fa",
"#F38181",
@@ -14,7 +15,11 @@ export const colors = [
"#6EF3D6"
];
-
+/**
+ * компонент палитры
+ * @param {*} param0
+ * @returns
+ */
function Palette({ setColor, style, className, disabled }) {
return (
@@ -59,6 +64,7 @@ function Palette({ setColor, style, className, disabled }) {
);
}
+// Валидация
Palette.propTypes = {
setColor: PropTypes.func,
style: PropTypes.object,
diff --git a/client/src/Context/AuthContext.js b/client/src/Context/AuthContext.js
index b302288..2260055 100644
--- a/client/src/Context/AuthContext.js
+++ b/client/src/Context/AuthContext.js
@@ -2,6 +2,7 @@ import {createContext} from 'react'
function noop() {}
+/**контекст авторизации */
export const AuthContext = createContext({
token: null,
userId: null,
diff --git a/client/src/Context/CardsContext.js b/client/src/Context/CardsContext.js
index 084eb5e..488ee50 100644
--- a/client/src/Context/CardsContext.js
+++ b/client/src/Context/CardsContext.js
@@ -1,5 +1,6 @@
import {createContext} from 'react'
+/**контекст заметок */
const CardsContext = createContext()
export default CardsContext
\ No newline at end of file
diff --git a/client/src/Context/PageContext.js b/client/src/Context/PageContext.js
index 0410d50..25112b4 100644
--- a/client/src/Context/PageContext.js
+++ b/client/src/Context/PageContext.js
@@ -2,4 +2,5 @@ import { createContext } from 'react'
function noop() { }
+/**контекст данных страницы */
export const PageContext = createContext({ setNav: noop })
diff --git a/client/src/Hooks/auth.hook.js b/client/src/Hooks/auth.hook.js
index 588548f..fddc1ff 100644
--- a/client/src/Hooks/auth.hook.js
+++ b/client/src/Hooks/auth.hook.js
@@ -1,36 +1,41 @@
-import {useState, useCallback, useEffect} from 'react'
+import { useState, useCallback, useEffect } from 'react'
const storageName = 'userData'
+/**
+ * Хук авторизации
+ * @returns
+ */
export const useAuth = () => {
const [token, setToken] = useState(null)
const [ready, setReady] = useState(false)
const [userId, setUserId] = useState(null)
const [email, setEmail] = useState(null)
+ /**обновление данных авторизации */
const login = useCallback((jwtToken, id, email) => {
setToken(jwtToken)
setUserId(id)
setEmail(email)
-
+ /**запись данных в кэш */
localStorage.setItem(storageName, JSON.stringify({
userId: id, token: jwtToken, email: email
}))
-
}, [])
-
+ /**очистка данных авторизации */
const logout = useCallback(() => {
-
setToken(null)
setUserId(null)
setEmail(null)
+ /**удаление данных из кэша */
localStorage.removeItem(storageName)
}, [])
+ /**считывание данных из кэша */
useEffect(() => {
+ /**данные из кэша */
const data = JSON.parse(localStorage.getItem(storageName))
-
if (data && data.token) {
login(data.token, data.userId, data.email)
}
diff --git a/client/src/Hooks/http.hook.js b/client/src/Hooks/http.hook.js
index 4c8fec0..950f0ca 100644
--- a/client/src/Hooks/http.hook.js
+++ b/client/src/Hooks/http.hook.js
@@ -1,5 +1,10 @@
-import {useState, useCallback} from 'react'
+import { useState, useCallback } from 'react'
+/**
+ * Хук обработки Http запросов
+ * Позволяет выводить результаты, ошибки и статус запроса, удобно совершать параметрические запросы
+ * @returns
+ */
export const useHttp = () => {
const [loading, setLoading] = useState(false)
const [error, setError] = useState(null)
@@ -7,20 +12,19 @@ export const useHttp = () => {
const request = useCallback(async (url, method = 'GET', body = null, headers = {}) => {
setLoading(true)
try {
+ /**составление запроса */
if (body) {
body = JSON.stringify(body)
headers['Content-Type'] = 'application/json'
}
-
- const response = await fetch(url, {method, body, headers})
+ /**отправка запроса */
+ const response = await fetch(url, { method, body, headers })
+ /**получение ответа */
const data = await response.json()
-
if (!response.ok) {
throw new Error(data.message || 'Что-то пошло не так')
}
-
setLoading(false)
-
return data
} catch (e) {
setLoading(false)
diff --git a/client/src/Hooks/useDebouncedEffect.hook.js b/client/src/Hooks/useDebouncedEffect.hook.js
index 4217d32..04ea5a6 100644
--- a/client/src/Hooks/useDebouncedEffect.hook.js
+++ b/client/src/Hooks/useDebouncedEffect.hook.js
@@ -1,28 +1,33 @@
import { useState, useEffect } from 'react';
+/**
+ * Хук debounce
+ * @param {*} value
+ * @param {*} delay
+ * @returns
+ */
function useDebounce(value, delay) {
-
const [debouncedValue, setDebouncedValue] = useState(value);
-
useEffect(
() => {
-
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
-
-
return () => {
clearTimeout(handler);
};
},
-
[delay, value]
);
-
return debouncedValue;
}
+/**
+ * Хук debounced effect
+ * @param {*} func
+ * @param {*} deps
+ * @param {*} delay
+ */
export default function useDebouncedEffect(func, deps, delay) {
const debounced = useDebounce(deps, delay || 0)
const debDepsList = Array.isArray(debounced) ? debounced : debounced ? [debounced] : undefined
diff --git a/client/src/Hooks/useInputValue.hook.js b/client/src/Hooks/useInputValue.hook.js
index 45093e5..eb592a0 100644
--- a/client/src/Hooks/useInputValue.hook.js
+++ b/client/src/Hooks/useInputValue.hook.js
@@ -1,5 +1,10 @@
import { useState } from 'react'
+/**
+ * Хук для обработки форм
+ * @param {*} defaultValue
+ * @returns
+ */
export default function useInputValue(defaultValue) {
const [value, setValue] = useState(defaultValue)
return {
diff --git a/client/src/Pages/AuthPage.js b/client/src/Pages/AuthPage.js
index f1a1180..8990e81 100644
--- a/client/src/Pages/AuthPage.js
+++ b/client/src/Pages/AuthPage.js
@@ -1,32 +1,49 @@
import React, { useContext, useEffect, useState } from 'react'
import { useHttp } from '../Hooks/http.hook'
-
import { AuthContext } from '../Context/AuthContext'
import { PageContext } from '../Context/PageContext'
-
import { NavLink, useHistory } from 'react-router-dom'
import './AuthPage.css'
+/**
+ * Страница авторизации
+ * @returns
+ */
function AuthPage() {
+ /**подключение контекстов */
const auth = useContext(AuthContext)
const page = useContext(PageContext)
+
const history = useHistory()
+ /**подключение хука http запросов */
const { loading, request, error, clearError } = useHttp()
+
+ /**состояние формы */
const [form, setForm] = useState({
email: '', password: ''
})
+
+ /**хук сообщений от сервера */
const [message, setMessage] = useState(null)
+ /** очистка оштбок хука запросов и запись ошибки в сообщение*/
useEffect(() => {
if (error) setMessage([error, false])
clearError()
}, [error, clearError])
+ /**
+ * обработчик ввода данных в форму
+ * @param {*} event
+ */
const changeHandler = event => {
setForm({ ...form, [event.target.name]: event.target.value })
}
+ /**
+ * обработчик регистрации
+ */
const registerHandler = async () => {
try {
const data = await request('/api/auth/register', 'POST', { ...form })
@@ -34,6 +51,9 @@ function AuthPage() {
} catch (e) { }
}
+ /**
+ * Обработчик входа в систему
+ */
const loginHandler = async () => {
try {
const data = await request('/api/auth/login', 'POST', { ...form })
@@ -42,11 +62,17 @@ function AuthPage() {
} catch (e) { }
}
+ /**
+ * Обработчик выхода
+ */
const logoutHandler = event => {
event.preventDefault()
auth.logout()
}
+ /**
+ * Обновление навбара при переходе на эту страницу и изменениях
+ */
React.useEffect(() => {
page.setNav(auth.isAuthenticated &&
@@ -56,10 +82,11 @@ function AuthPage() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [auth.isAuthenticated, auth.token])
+ /**рендер */
return (
+ /**Здесь отрисовываются меню регистрации и авторизации */
-
@@ -76,14 +103,12 @@ function AuthPage() {
- {
- message &&
+ {message &&
{message[1] ? "Инфо" : "Ошибка"}
{String(message[0])}
}
-
e.key === 'Enter' && loginHandler()}
/>
-
{!auth.isAuthenticated ? (
-
-
-
) : (
-
-
)}
-
)
diff --git a/client/src/Pages/CardsPage.js b/client/src/Pages/CardsPage.js
index 53aa4a8..abefc9c 100644
--- a/client/src/Pages/CardsPage.js
+++ b/client/src/Pages/CardsPage.js
@@ -1,54 +1,67 @@
import React from 'react';
-
import './CardsPage.css';
import CardList from '../Cards/CardList'
import AddCard from '../Cards/AddCard'
import CardsContext from '../Context/CardsContext'
import Loader from '../Shared/Loader'
import ModalCardEdit from '../Cards/ModalCardEdit'
-
import Card, { checkCardsArr } from '../Cards/cardType/Card'
-
-
import { NavLink } from 'react-router-dom'
import { AuthContext } from '../Context/AuthContext'
import { PageContext } from '../Context/PageContext'
-
import { useHttp } from '../Hooks/http.hook'
+/**
+ * Хук использования массива заметок
+ * @param {*} defaultValue
+ * @returns
+ */
function useCardsArr(defaultValue) {
const [value, setValue] = React.useState(defaultValue)
-
function trySetValue(cardsArr) {
if (checkCardsArr(cardsArr) || cardsArr === null) setValue(cardsArr)
else console.error('Массив cardsArr не прошел проверку \n', cardsArr)
}
-
return [value, trySetValue]
}
+/**
+ * Хук-таймер для обновления данных с очисткой счетчика при ререндере
+ * @returns
+ */
function useUpdater() {
const [updaterVal, setUpdaterVal] = React.useState(null)
const timer = React.useRef()
React.useEffect(() => {
- if (timer.current) clearTimeout(timer.current)
+ if (timer.current) clearTimeout(timer.current) // сброс при переопределении таймера
timer.current = setTimeout(() => {
console.log("Timed update")
setUpdaterVal(Date.now())
}, 60 * 1000) // обновяем через минуту
- return () => clearTimeout(timer.current)
+ return () => clearTimeout(timer.current) // сброс при ререндере
}, []) // eslint-disable-line react-hooks/exhaustive-deps
return [updaterVal]
}
+/**
+ * Страница с заметками
+ * @returns
+ */
function CardsPage() {
-
+ /**подключение контекстов */
const auth = React.useContext(AuthContext)
const page = React.useContext(PageContext)
+ /**подключение хука http запросов */
const { loading, request, error, clearError } = useHttp()
+
+ /**хук сообщений от сервера */
+ const [message, setMessage] = React.useState(null)
+
+ /**Хук-функция для работы с базой данных заметок */
const fetchNotes = React.useCallback(async (url = "", method = "GET", body = null, resCallback = () => { }) => {
try {
+ /**запрос к серверу с определенными параметрами*/
const fetched = await request(`/api/notes${url ? ("/" + url) : ""}`, method, body, { Authorization: `Bearer ${auth.token}` })
resCallback(tryParce(fetched))
} catch (e) { }
@@ -61,42 +74,52 @@ function CardsPage() {
}
}, [auth.token, request])
- const [message, setMessage] = React.useState(null)
-
+ /** очистка оштбок хука запросов и запись ошибки в сообщение*/
React.useEffect(() => {
if (error) setMessage([error, false])
clearError()
}, [error, clearError])
-
-
+ /**Массив заметок */
const [cardsArr, setCardsArr] = useCardsArr(null)
+
+ /**Id редактируемой заметки */
const [editCardId, setEditCardId] = React.useState(null)
const [updaterVal] = useUpdater()
-
const updatingEnable = React.useRef(true)
+ /**
+ * хук обновления данных с сервера
+ * флаг updatingEnable позволяет избежать взаимодействия с устаревшей unmount версией компонента
+ */
React.useEffect(() => {
updatingEnable.current = true
loadDataFromServer()
return () => updatingEnable.current = false
}, [auth.isAuthenticated, auth.email, updaterVal]) // eslint-disable-line react-hooks/exhaustive-deps
- React.useEffect(clearOldData, [auth.isAuthenticated]) // eslint-disable-line react-hooks/exhaustive-deps
-
///////////
+ //очистка старых данных
+ React.useEffect(clearOldData, [auth.isAuthenticated]) // eslint-disable-line react-hooks/exhaustive-deps
function clearOldData() {
- //console.log("clearOldData, auth.isAuthenticated:", auth.isAuthenticated)
if (!auth.isAuthenticated) setCardsArr(null)
}
///////////
///////////
+
+ /**
+ * получение данных с сервера
+ */
function loadDataFromServer() {
fetchNotes("", "GET", null, setLoadedCards)
}
+ /**
+ * Внесение в полученных данных в массив
+ * @param {*} cards
+ */
function setLoadedCards(cards) {
if (updatingEnable.current) setCardsArr([...cards])
}
@@ -104,16 +127,29 @@ function CardsPage() {
///////////
+ /**
+ * Загрузка данных на сервер
+ * @param {*} card
+ * @param {*} target
+ */
function loadDataToServer(card = new Card(), target = 'set') {
fetchNotes(target, "POST", { card })
}
+ /**
+ * удаление карточки
+ * @param {*} index
+ */
function removeCard(index) {
const toDelete = cardsArr.splice(index, 1)[0]
setCardsArr([...cardsArr])
loadDataToServer(toDelete, "delete")
}
+ /**
+ * добавление карточки
+ * @param {*} cardData
+ */
function addCard(cardData = {}) {
const newId = String(auth.email) + String(Date.now()) + String(Math.random())
const newCard = new Card({ id: newId, name: cardData.name, color: cardData.color, text: cardData.text })
@@ -125,12 +161,23 @@ function CardsPage() {
}
+ /**
+ * Изменение цвета карточки
+ * @param {*} index
+ * @param {*} color
+ */
function changeCardColor(index, color) {
cardsArr[index].color = color
setCardsArr([...cardsArr])
loadDataToServer(cardsArr[index], "set")
}
+ /**
+ * Изменение текстового содержания карточки
+ * @param {*} index
+ * @param {*} name
+ * @param {*} text
+ */
function editCardContent(index, name, text) {
if (cardsArr[index]) {
let card = new Card(cardsArr[index])
@@ -144,17 +191,23 @@ function CardsPage() {
///////////
///////////
- function getCardByIndex(index) {
- return index !== null ? cardsArr[index] : null
- }
+ /**функция назначения редактируемой заметки для модального окна */
function setEditCard(index) {
setEditCardId(index)
}
+ /**функция сброса редактируемой заметки для модального окна */
function unsetEditCard() {
setEditCardId(null)
}
+ /**функция получения карточки по id */
+ function getCardByIndex(index) {
+ return index !== null ? cardsArr[index] : null
+ }
///////////
+ /**
+ * Обновление навбара при переходе на эту страницу и изменениях
+ */
React.useEffect(() => {
page.setNav(
@@ -162,7 +215,6 @@ function CardsPage() {
{loading ? : }
Update
-
{auth.email}
@@ -171,11 +223,13 @@ function CardsPage() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [auth.email, auth.token])
+ /**рендер */
return (
+ /**Здесь отрисовываются меню добавления и редактирования заметок и сам перечнь заметок в виде динамичной отзывчивой сетки */
-
+
@@ -197,6 +251,7 @@ function CardsPage() {