Merge pull request #1057 from AletheiaFact/stage

Production Hotfix: backwards compatibility for claim task old schemas
AletheiaFact · Oct 17, 2023 · 81fe2d2 · 81fe2d2
2 parents 87e45ee + 22118a4
commit 81fe2d2
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 31 deletions.
diff --git a/lib/editor-parser.ts b/lib/editor-parser.ts
@@ -31,7 +31,6 @@ export class EditorParser {
     }
 
     getSourceByProperty(sources, property) {
-        //FIXME: Create migration
         return sources.filter(
             (source) => (source?.props?.field || source?.field) === property
         );
@@ -48,14 +47,13 @@ export class EditorParser {
     }
 
     extractHtmlContentFromRange({ props, content }, type = "text") {
-        const { textRange, targetText, sup } = props;
-        const fragmentText = content.slice(...textRange);
+        const fragmentText = content.slice(...props?.textRange);
         if (type === "text") {
             return fragmentText;
         }
 
-        if (type === "source" && fragmentText === targetText) {
-            return `<a href='#${fragmentText}' rel='noopener noreferrer nofollow'>${fragmentText}<sup>${sup}</sup></a>`;
+        if (type === "source" && fragmentText === props?.targetText) {
+            return `<a href='#${fragmentText}' rel='noopener noreferrer nofollow'>${fragmentText}<sup>${props?.sup}</sup></a>`;
         }
         return fragmentText;
     }
@@ -67,15 +65,19 @@ export class EditorParser {
             content
         );
 
-        const htmlContent = allRanges.map(({ props, type }) => {
-            return this.extractHtmlContentFromRange(
-                {
-                    content,
-                    props,
-                },
-                type
-            );
-        });
+        const htmlContent = allRanges.map(
+            ({ targetText, textRange, sup, props, type }) => {
+                return this.extractHtmlContentFromRange(
+                    {
+                        content,
+                        props: props
+                            ? { ...props }
+                            : { targetText, textRange, sup },
+                    },
+                    type
+                );
+            }
+        );
 
         if (key === "questions") {
             return htmlContent.join("");
@@ -283,7 +285,9 @@ export class EditorParser {
     }
 
     getRawSourcesAndSourcesRanges(sources) {
-        const rawSourcesRanges = sources.map(({ props }) => props.textRange);
+        const rawSourcesRanges = sources.map(
+            (s) => s?.props?.textRange || s?.textRange
+        );
 
         const sourcesRanges = sources.map((source) => {
             return {
@@ -302,8 +306,7 @@ export class EditorParser {
         { props, content, href = null },
         type = "text"
     ) {
-        const { textRange, targetText, id } = props;
-        const fragmentText = content.slice(...textRange);
+        const fragmentText = content.slice(...props?.textRange);
 
         switch (type) {
             case "text":
@@ -312,11 +315,11 @@ export class EditorParser {
                 }
                 break;
             case "source":
-                if (fragmentText === targetText) {
+                if (fragmentText === props?.targetText) {
                     return this.getContentObjectWithMarks(
                         fragmentText,
                         href,
-                        id
+                        props?.id
                     );
                 }
             // Fall through to the default case if type is "source" and the text doesn't match targetText
@@ -400,7 +403,9 @@ export class EditorParser {
         });
 
         return [...sourcesRanges, ...missingTextRanges].sort((a, b) => {
-            return a.props.textRange[0] - b.props.textRange[0];
+            const getRange = (item) =>
+                item?.textRange || item?.props?.textRange || [0];
+            return getRange(a)[0] - getRange(b)[0];
         });
     }
 
@@ -415,10 +420,12 @@ export class EditorParser {
         );
 
         const textFragments = allRanges
-            .map(({ props, type, href }) => {
+            .map(({ targetText, textRange, props, type, href, id = null }) => {
                 return this.extractContentFragmentFromRange(
                     {
-                        props,
+                        props: props
+                            ? { ...props }
+                            : { targetText, textRange, id },
                         content,
                         href,
                     },

diff --git a/src/components/Collaborative/CollaborativeEditorProvider.tsx b/src/components/Collaborative/CollaborativeEditorProvider.tsx
@@ -11,6 +11,7 @@ interface ContextType {
     editorSources?: object[];
     setEditorSources?: (data: any) => void;
     data_hash?: string;
+    isFetchingEditor?: boolean;
 }
 
 export const CollaborativeEditorContext = createContext<ContextType>({
@@ -31,15 +32,18 @@ export const CollaborativeEditorProvider = (
 
     const [editorContentObject, setEditorContentObject] = useState(null);
     const [editorSources, setEditorSources] = useState([]);
+    const [isFetchingEditor, setIsFetchingEditor] = useState(false);
     const { websocketUrl } = useAppSelector((state) => state);
 
     useEffect(() => {
         const fetchEditorContentObject = (data_hash) => {
+            setIsFetchingEditor(true);
             return ClaimReviewTaskApi.getEditorContentObject(data_hash);
         };
 
         fetchEditorContentObject(props.data_hash).then((content) => {
             setEditorContentObject(content);
+            setIsFetchingEditor(false);
         });
     }, [props.data_hash]);
 
@@ -59,6 +63,7 @@ export const CollaborativeEditorProvider = (
                 editorSources,
                 setEditorSources,
                 data_hash: props.data_hash,
+                isFetchingEditor,
             }}
         >
             {props.children}

diff --git a/src/components/Form/DynamicInput.tsx b/src/components/Form/DynamicInput.tsx
@@ -1,11 +1,12 @@
-import React, { Suspense, lazy } from "react";
+import React, { Suspense, lazy, useContext } from "react";
 
 import ClaimReviewSelect from "./ClaimReviewSelect";
 import InputTextList from "../InputTextList";
 import Loading from "../Loading";
 import TextArea from "../TextArea";
 import UserInput from "./UserInput";
 import { useTranslation } from "next-i18next";
+import { CollaborativeEditorContext } from "../Collaborative/CollaborativeEditorProvider";
 
 const CollaborativeEditor = lazy(
     () => import("../Collaborative/CollaborativeEditor")
@@ -24,6 +25,8 @@ interface DynamicInputProps {
 }
 
 const DynamicInput = (props: DynamicInputProps) => {
+    const { isFetchingEditor } = useContext(CollaborativeEditorContext);
+
     const { t } = useTranslation();
     switch (props.type) {
         case "textArea":
@@ -72,14 +75,18 @@ const DynamicInput = (props: DynamicInputProps) => {
                 />
             );
         case "collaborative":
-            return (
-                <Suspense fallback={<Loading />}>
-                    <CollaborativeEditor
-                        placeholder={t(props.placeholder)}
-                        onContentChange={({ doc }) => props.onChange(doc)}
-                    />
-                </Suspense>
-            );
+            if (isFetchingEditor) {
+                return <Loading />;
+            } else {
+                return (
+                    <Suspense fallback={<Loading />}>
+                        <CollaborativeEditor
+                            placeholder={t(props.placeholder)}
+                            onContentChange={({ doc }) => props.onChange(doc)}
+                        />
+                    </Suspense>
+                );
+            }
         default:
             return null;
     }