Ограничил максимальное количество тегов и длину тега (#319)

* Ограничил максимальное количество тегов и длину тега

* Вернул правило для проверки console.log в конфиг преттера

* Рефактор кода. Удалил лишний участок кода

* Рефактор кода. Изменил имена констант

Author: SaydAliUsmanov

src/app/constants.js

@@ -14,3 +14,7 @@ export const QUESTIONS_PER_PAGE = 5;
 export const AVAILABLE_THEME_COLORS = Object.keys(theme.colors);
 export const DEFAULT_COLOR = theme.defaultColor;
 export const SCROLL_TO_TOP_SHOW = 500;
+
+export const TAG_MAX_LENGTH = 15;
+
+export const MAX_NUMBER_OF_TAGS = 5;

src/features/questions/create-question/CreateQuestionPage.jsx

@@ -10,6 +10,7 @@ import { Paper } from 'components/layout/Paper';
 import { addQuestion } from 'features/questions/questionsSlice';
 import { selectProfile } from 'features/profile/profileSlice';
 import { useAuth } from 'common/context/Auth/useAuth';
+import { MAX_NUMBER_OF_TAGS, TAG_MAX_LENGTH } from 'app/constants';
 
 const StyledQuestionWrapper = styled.div`
   & .new-tag {
@@ -130,6 +131,11 @@ const CreateQuestion = () => {
     setFullDescription(instance.getMarkdown());
   };
 
+  const handleChangeTag = (e) => {
+    const limitedValue = e.target.value.substring(0, TAG_MAX_LENGTH);
+    setTagValue(limitedValue);
+  };
+
   useEffect(() => {
     if (/\?[^?]+\?/.test(question)) {
       setTooManyQuestions(true);
@@ -218,22 +224,21 @@ const CreateQuestion = () => {
                     </StyledTagBlock>
                   ))}
 
-                  {!tagEditMode && (
+                  {!tagEditMode && tags.length < MAX_NUMBER_OF_TAGS && (
                     <StyledTagBlock>
                       <Tag className="site-tag-plus" onClick={() => setTagEditMode(true)}>
                         <PlusOutlined /> New Tag
                       </Tag>
                     </StyledTagBlock>
                   )}
-
                   {tagEditMode && (
                     <StyledInputBlock>
                       <Input
                         ref={callbackRef}
                         type="text"
                         size="small"
                         value={tagValue}
-                        onChange={(e) => setTagValue(e.target.value)}
+                        onChange={handleChangeTag}
                         onKeyPress={handleKeyPress}
                         onBlur={() => setTagEditMode(false)}
                       />