{article.description}
-
Страна производитель:
+
{t('article.country')}:
{article.madeIn?.title} ({article.madeIn?.code})
-
Категория:
+
{t('article.category')}:
{article.category?.title}
-
Год выпуска:
+
{t('article.year')}:
{article.edition}
-
Цена:
+
{t('article.price')}:
{numberFormat(article.price)} ₽
diff --git a/src/components/comment-field/index.js b/src/components/comment-field/index.js
new file mode 100644
index 000000000..9fd281583
--- /dev/null
+++ b/src/components/comment-field/index.js
@@ -0,0 +1,103 @@
+import React, {useEffect, useRef, useState} from 'react';
+import PropTypes from "prop-types";
+import {cn as bem} from "@bem-react/classname";
+import { useLocation, useNavigate } from "react-router-dom";
+import './style.css';
+
+const CommentField = (
+ {
+ isOpen = false,
+ placeholder = 'Текст',
+ addComment,
+ id,
+ isAuth = false,
+ username = '',
+ className = '',
+ onClose = () => {},
+ t = text => text
+ }
+) => {
+
+ const cn = bem('CommentField');
+ const [data, setData] = useState('');
+ const navigate = useNavigate();
+ const location = useLocation()
+ const textareaRef = useRef(null)
+ const notAuthRef = useRef(null)
+
+ const onSendHandler = () => {
+ const sendData = data.trim()
+ if (sendData) {
+ addComment(id, data, username ? 'comment' : 'article')
+ if (!username) {
+ setData('');
+ }
+ } else {
+ textareaRef.current.focus()
+ }
+ }
+
+ const onLoginHandler = () => {
+ navigate('/login', { state: { back: location, commentId: id, username } })
+ }
+
+ useEffect(() => {
+ if (username && isOpen && textareaRef.current) {
+ textareaRef.current.setSelectionRange(data.length, data.length)
+ textareaRef.current.scrollIntoView({ behavior: "smooth", block: "center" })
+ }
+
+ return () => setData('')
+ }, [username, isOpen, id]);
+
+ useEffect(() => {
+ if (notAuthRef.current && isOpen && username) {
+ notAuthRef.current.scrollIntoView({ behavior: "smooth", block: "center" })
+ }
+ }, [isOpen, id, username]);
+
+ if (!isOpen) return null;
+
+ return (
+
+ {
+ isAuth ? (
+ <>
+
{username ? t('comments.newReply') : t('comments.newComment')}
+