Merge branch 'release/1.1.0' into feature/issue-1807

ita-social-projects · Nov 1, 2024 · 0c37593 · 0c37593
2 parents c41e8e5 + d7888ce
commit 0c37593
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 29 deletions.
diff --git a/src/app/common/components/Editor/QEditor.component.tsx b/src/app/common/components/Editor/QEditor.component.tsx
@@ -21,31 +21,30 @@ interface EditorProps {
 }
 
 const Editor: React.FC<EditorProps> = ({
-    qRef, value, onChange, maxChars, initialVal, selectionChange, onCharacterCountChange = () => {}, readOnly = false
+    qRef, value, onChange, maxChars, initialVal, selectionChange, onCharacterCountChange = () => { }, readOnly = false
 }) => {
     const [isReadOnly, setIsReadOnly] = useState(readOnly);
     const indentedValue = refactorIndentsHtml(value || '');
     const [val, setVal] = useState(indentedValue);
-    const [rawText, setRawText] = useState(removeHtmlTags(value) ?? '');
-    const [characterCount, setCharacterCount] = useState(rawText.length ?? 0);
+    const [rawText, setRawText] = useState('');
+    const [characterCount, setCharacterCount] = useState(0);
     const [validateDescription, setValidateDescription] = useState<boolean>(false);
     const quillRef = useRef<ReactQuill | null>(null);
     const availableButtons = new Set(['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight',
         'ArrowUp', 'ArrowDown', 'Home', 'End']);
 
     const countCharacters = (content: string) => {
         const textWithoutTags = removeHtmlTags(content);
+        setRawText(textWithoutTags);
         const count = textWithoutTags.length;
         setCharacterCount(count);
     };
 
     useEffect(() => {
-        if (value?.includes('\n')) {
-            const preservedIndents = refactorIndentsHtml(value || '');
-            setVal(preservedIndents);
-        }
         const valueWithoutHtml = removeHtmlTags(value);
         setRawText(valueWithoutHtml);
+        const count = valueWithoutHtml.length;
+        setCharacterCount(count);
     }, [value]);
 
     useEffect(() => {
@@ -55,19 +54,24 @@ const Editor: React.FC<EditorProps> = ({
             setValidateDescription(false);
         }
     }, [characterCount, maxChars]);
+
     useEffect(() => {
-        setIsReadOnly(readOnly); 
+        setIsReadOnly(readOnly);
     }, [readOnly]);
+
     useEffect(() => {
         onCharacterCountChange(characterCount);
     }, [characterCount, onCharacterCountChange]);
+
     const handleOnChange = (html: string) => {
-        if (!isReadOnly) { 
+        if (!isReadOnly) {
             onChange(html);
             setVal(html);
-            countCharacters(html);
+            const valueWithoutHtml = removeHtmlTags(html);
+            setCharacterCount(valueWithoutHtml.length);
         }
     };
+
     const handleSelectionChange = (range: ReactQuill.Range | null, source: Sources, editor: UnprivilegedEditor) => {
         if (range && range.index != null && range.length != null) {
             const selectedText = editor.getText(range.index, range.length);

diff --git a/src/features/AdminPage/NewStreetcode/MainNewStreetcode.component.tsx b/src/features/AdminPage/NewStreetcode/MainNewStreetcode.component.tsx
@@ -677,6 +677,7 @@ const NewStreetcode = () => {
                             <TextBlock
                                 parseId={parseId}
                                 inputInfo={inputInfo}
+                                form={form}
                                 setInputInfo={setInputInfo}
                                 video={video}
                                 setVideo={setVideo}

diff --git a/src/features/AdminPage/NewStreetcode/MainNewStreetcode.styles.scss b/src/features/AdminPage/NewStreetcode/MainNewStreetcode.styles.scss
@@ -31,6 +31,10 @@ $articlesImg: "@assets/images/sources/Articles.webp";
 
         h4{
             font-weight: 300;
+        }
+
+        .adminContainer-red-h4{
+            font-weight: 300;
             color: c.$accented-red-color;
         }
 

diff --git a/src/features/AdminPage/NewStreetcode/StreetcodeArtsBlock/StreetcodeArtsBlock.component.tsx b/src/features/AdminPage/NewStreetcode/StreetcodeArtsBlock/StreetcodeArtsBlock.component.tsx
@@ -7,7 +7,7 @@ const StreetcodeArtsBlock = React.memo(() => (
         <h2>Арт-галерея</h2>
         <h3>Завантажити арти</h3>
         <DownloadBlock />
-        <h4>* Зауважте, не використані арти видаляються</h4>
+        <h4 className='adminContainer-red-h4'>* Зауважте, не використані арти видаляються</h4>
     </div>
 ));
 export default StreetcodeArtsBlock;
diff --git a/src/features/AdminPage/NewStreetcode/TextBlock/TextBlock.component.tsx b/src/features/AdminPage/NewStreetcode/TextBlock/TextBlock.component.tsx
@@ -1,15 +1,18 @@
 /* eslint-disable no-restricted-imports */
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import TextsApi from '@api/streetcode/text-content/texts.api';
 import { useAsync } from '@hooks/stateful/useAsync.hook';
 
+import { FormInstance } from 'antd';
+
 import Video from '@/models/media/video.model';
 import { Text } from '@/models/streetcode/text-contents.model';
 
 import TextForm from './TextForm/TextForm.component';
 
 interface Props {
     inputInfo: Partial<Text> | undefined;
+    form: FormInstance<unknown>,
     setInputInfo: React.Dispatch<React.SetStateAction<Partial<Text> | undefined>>;
     video: Video | undefined;
     setVideo: React.Dispatch<Video | undefined>;
@@ -18,7 +21,7 @@ interface Props {
 }
 
 const TextBlock = React.memo(({
-    inputInfo, setInputInfo, video, setVideo, onChange, parseId,
+    inputInfo, form, setInputInfo, video, setVideo, onChange, parseId,
 }: Props) => {
     const [inputInfoAsync, setInputInfoAsync] = useState<Partial<Text>| undefined>();
     const [canLoad, setCanLoad] = useState<boolean>(parseId === null);
@@ -34,6 +37,7 @@ const TextBlock = React.memo(({
     return (
         canLoad ? (
             <TextForm
+                form={form}
                 inputInfo={inputInfo}
                 setInputInfo={setInputInfo}
                 video={video}

diff --git a/src/features/AdminPage/NewStreetcode/TextBlock/TextForm/Editors/LinkEditor.component.tsx b/src/features/AdminPage/NewStreetcode/TextBlock/TextForm/Editors/LinkEditor.component.tsx
@@ -106,7 +106,7 @@ const LinkEditor = ({
                 </Button>
                 {inputInfo?.link && showPreview && (
                     <div>
-                        <h4>Попередній перегляд</h4>
+                        <h4 className='adminContainer-red-h4'>Попередній перегляд</h4>
                         <Youtube opts={opts} videoId={youtubeId} />
                     </div>
                 )}

diff --git a/src/features/AdminPage/NewStreetcode/TextBlock/TextForm/TextForm.component.tsx b/src/features/AdminPage/NewStreetcode/TextBlock/TextForm/TextForm.component.tsx
@@ -1,6 +1,8 @@
 import './TextForm.styles.scss';
 
-import { Form, Input } from 'antd';
+import { useEffect } from 'react';
+
+import { Form, FormInstance, Input } from 'antd';
 
 import QUILL_TEXTS_LENGTH from
     '@/features/AdminPage/NewStreetcode/TextBlock/TextLengthConstants/textMaxLength.constant';
@@ -14,17 +16,18 @@ import TextPreview from './TextPreview/TextPreview.component';
 
 const isQuillEmpty = (text: string | undefined) => {
     return !text || text.replace(/<(.|\n)*?>/g, '').trim().length === 0;
-}
+};
 
 interface Props {
+    form: FormInstance<unknown>,
     inputInfo: Partial<Text> | undefined;
     setInputInfo: React.Dispatch<React.SetStateAction<Partial<Text> | undefined>>;
     video: Video | undefined;
     setVideo: React.Dispatch<Video | undefined>;
     onChange: (fieldName: string, value: any) => void;
 }
 const TextForm = ({
-    inputInfo, setInputInfo, video, setVideo, onChange,
+    form, inputInfo, setInputInfo, video, setVideo, onChange,
 }: Props) => {
     const maxTitleLength = 50;
     const handleChangeTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -35,6 +38,13 @@ const TextForm = ({
         }));
         onChange('title', value);
     };
+
+    useEffect(() => {
+        form.setFieldsValue({
+            title: inputInfo?.title,
+        });
+    }, [inputInfo, form]);
+
     return (
         <Form.Item className="textForm">
             <Form.Item
@@ -50,7 +60,6 @@ const TextForm = ({
                     },
                 },
                 ]}
-                initialValue={inputInfo?.title}
             >
                 <Input
                     showCount

diff --git a/src/features/AdminPage/TeamPositionsPage/TeamPositionsMainPage.component.tsx b/src/features/AdminPage/TeamPositionsPage/TeamPositionsMainPage.component.tsx
@@ -45,9 +45,6 @@ const TeamPositionsMainPage: React.FC = observer(() => {
                     </div>
                 );
             },
-            sorter: (a, b) => a.position.localeCompare(b.position),
-            sortDirections: ['ascend', 'descend', 'ascend'],
-            defaultSortOrder: 'ascend',
         },
         {
             title: 'Дії',

diff --git a/src/features/StreetcodePage/TimelineBlock/TimelineBlock.styles.scss b/src/features/StreetcodePage/TimelineBlock/TimelineBlock.styles.scss
@@ -33,7 +33,7 @@ $timelineSquareImg: "@assets/images/timeline/Square.webp";
     }
 
     .slick-list {
-      margin:f.pxToRem(0) !important;
+      margin: f.pxToRem(0) !important;
     }
 
   .slick-track {
@@ -53,13 +53,13 @@ $timelineSquareImg: "@assets/images/timeline/Square.webp";
 
     .slick-slide {
       border-radius: 40px;
-      border-width:f.pxToRem(15px) f.pxToRem(15px);
+      border-width: f.pxToRem(15px) f.pxToRem(15px);
       border-style: solid ;
       border-color: c.$timeline-reel-color;
       @include mut.bg-image($timelineSquareImg);
 
 
-      background-size:f.pxToRem(605px) f.pxToRem(365px);
+      background-size: f.pxToRem(605px) f.pxToRem(365px);
       background-position: center;   
 
       &:nth-child(2n + 1) {
@@ -72,7 +72,7 @@ $timelineSquareImg: "@assets/images/timeline/Square.webp";
 
     .slick-current {
       border-radius: 40px;
-      box-shadow: inset  0px 0px 0px 6px c.$pure-white-color;
+      box-shadow: inset  0 0 0 6px c.$pure-white-color;
     }
   }
 }
@@ -107,12 +107,12 @@ $timelineSquareImg: "@assets/images/timeline/Square.webp";
         }
         .slick-slide {
           border-radius: 20px;
-          border-width:f.pxToRem(7px) f.pxToRem(7px);
-          background-size:f.pxToRem(295px) f.pxToRem(185px);
+          border-width: f.pxToRem(7px) f.pxToRem(7px);
+          background-size: f.pxToRem(295px) f.pxToRem(211px);
           background-position: center;  
         }
         .slick-current {
-          box-shadow: inset  0px 0px 0px 3px c.$pure-white-color;
+          box-shadow: inset  0 0 0 3px c.$pure-white-color;
         }
       }
     }

diff --git a/src/features/StreetcodePage/TimelineBlock/TimelineItem/TimelineItem.styles.scss b/src/features/StreetcodePage/TimelineBlock/TimelineItem/TimelineItem.styles.scss
@@ -62,7 +62,7 @@
 
 @media screen and (max-width: 1024px) {
   .timelineItem{
-    @include mut.sized(299px, 190px);
+    @include mut.sized(299px, 208px);
     border-radius: 15px;
     .timelineItemContent{
       padding: f.pxToRem(13px);