Merge pull request #787 from ita-social-projects/fix-null-tox-in-daug…

…hter-component fix tox in streetcode edit window
ita-social-projects · Sep 18, 2023 · de88d61 · de88d61
2 parents 914b6c2 + f81b0e9
commit de88d61
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 5 deletions.
diff --git a/src/features/AdminPage/NewStreetcode/MainNewStreetcode.component.tsx b/src/features/AdminPage/NewStreetcode/MainNewStreetcode.component.tsx
@@ -490,6 +490,7 @@ const NewStreetcode = () => {
                                 onChange={handleFieldChange}
                             />
                             <TextBlock
+                                parseId={parseId}
                                 inputInfo={inputInfo}
                                 setInputInfo={setInputInfo}
                                 video={video}

diff --git a/src/features/AdminPage/NewStreetcode/TextBlock/TextBlock.component.tsx b/src/features/AdminPage/NewStreetcode/TextBlock/TextBlock.component.tsx
@@ -1,21 +1,51 @@
 /* eslint-disable no-restricted-imports */
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 
 import Video from '@/models/media/video.model';
 import { Text } from '@/models/streetcode/text-contents.model';
 
 import TextForm from './TextForm/TextForm.component';
+import {useAsync} from "@hooks/stateful/useAsync.hook";
+import TextsApi from "@api/streetcode/text-content/texts.api";
 
 interface Props {
     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;
+    parseId: number
 }
 
-const TextBlock = React.memo(({ inputInfo, setInputInfo, video, setVideo, onChange }: Props) => (
-    <TextForm inputInfo={inputInfo} setInputInfo={setInputInfo} video={video} setVideo={setVideo} onChange={onChange} />
-));
+const TextBlock = React.memo(({
+    inputInfo, setInputInfo, video, setVideo, onChange, parseId,
+}: Props) => {
+    const [inputInfoAsync, setInputInfoAsync] = useState<Partial<Text>>();
+    useAsync(() => {
+        if(parseId != null) {
+            TextsApi.getByStreetcodeId(parseId).then((result) => {
+                setInputInfoAsync(result);
+            });
+        }
+    }, [parseId]);
+
+    useEffect(() => {
+        setInputInfo(inputInfoAsync);
+    }, [inputInfoAsync]);
+
+    return (
+        inputInfoAsync !== null
+            ? (
+                <TextForm
+                    inputInfo={inputInfoAsync}
+                    setInputInfo={setInputInfoAsync}
+                    video={video}
+                    setVideo={setVideo}
+                    onChange={onChange}
+                />
+            )
+            : <></>
+    );
+});
 
 export default TextBlock;
diff --git a/src/features/AdminPage/NewStreetcode/TextBlock/TextForm/Editors/TextEditor.component.tsx b/src/features/AdminPage/NewStreetcode/TextBlock/TextForm/Editors/TextEditor.component.tsx
@@ -22,7 +22,9 @@ interface Props {
 
 const toolTipColor = '#8D1F16';
 
-const TextEditor = ({ character_limit, inputInfo, setInputInfo, onChange, text }: Props) => {
+const TextEditor = ({
+    character_limit, inputInfo, setInputInfo, onChange, text,
+}: Props) => {
     const { relatedTermStore, termsStore } = useMobx();
     const { modalStore: { setModal } } = useModalContext();
     const { fetchTerms, getTermArray } = termsStore;
@@ -88,6 +90,10 @@ const TextEditor = ({ character_limit, inputInfo, setInputInfo, onChange, text }
     useAsync(fetchTerms, []);
     const maxLength = character_limit || 15000;
 
+    useEffect(() => {
+        console.log(inputInfo);
+    }, [inputInfo]);
+
     return (
         <FormItem
             label="Основний текст"