Merge pull request #994 from ita-social-projects/fix-for-fans-modal-c…

…ategories-loading Fixed loading of fans modal categories
ita-social-projects · Nov 18, 2023 · 0c2712a · 0c2712a
2 parents bcfc66b + 3438068
commit 0c2712a
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 34 deletions.
diff --git a/...es/AdminPage/NewStreetcode/ForFansBlock/ForFansAdminModal/ForFansAdminModal.component.tsx b/...es/AdminPage/NewStreetcode/ForFansBlock/ForFansAdminModal/ForFansAdminModal.component.tsx
@@ -27,10 +27,11 @@ interface Props {
     setOpen: React.Dispatch<React.SetStateAction<boolean>>,
     allCategories: SourceCategoryName[],
     onChange: (field: string, value: any) => void,
+    allPersistedSourcesAreSet: boolean,
 }
 
 const ForFansModal = ({
-    character_limit, open, setOpen, allCategories, onChange,
+    character_limit, open, setOpen, allCategories, onChange, allPersistedSourcesAreSet,
 }: Props) => {
     const { sourceCreateUpdateStreetcode, sourcesAdminStore } = useMobx();
     const editorRef = useRef<Editor | null>(null);
@@ -82,7 +83,6 @@ const ForFansModal = ({
 
     useEffect(() => {
         categoryUpdate.current = sourceCreateUpdateStreetcode.ElementToUpdate;
-        setCategories(allCategories);
         if (categoryUpdate.current && open) {
             setEditorContent(categoryUpdate.current.text ?? '');
             form.setFieldValue('category', categoryUpdate.current.sourceLinkCategoryId);
@@ -91,9 +91,24 @@ const ForFansModal = ({
             setEditorContent('');
             form.setFieldValue('category', '');
         }
-        fetchData();
+
+        if (allPersistedSourcesAreSet) {
+            fetchData();
+        }
     }, [open, sourceCreateUpdateStreetcode]);
 
+    useEffect(() => {
+        if (allCategories.length) {
+            setCategories([...allCategories].sort((a, b) => a.title.localeCompare(b.title)));
+        }
+    }, [allCategories]);
+
+    useEffect(() => {
+        if (allPersistedSourcesAreSet) {
+            fetchData();
+        }
+    }, [allPersistedSourcesAreSet]);
+
     const onSave = (values: any) => {
         const elementToUpdate = sourceCreateUpdateStreetcode.ElementToUpdate;
         if (elementToUpdate) {
@@ -134,22 +149,10 @@ const ForFansModal = ({
             message.error("Будь ласка, заповніть всі обов'язкові поля та перевірте валідність ваших даних");
         }
     };
-    const onDropDownChange = async () => {
-        if (isAddModalVisible === false) {
-            const categories = await SourcesApi.getAllCategories();
-            sourcesAdminStore.setInternalSourceCategories(categories);
-
-            const sourceMas: SourceCategoryName[] = categories.map((x) => ({
-                id: x.id ?? 0,
-                title: x.title,
-            }));
-
-            sourceMas.sort((a, b) => a.title.localeCompare(b.title));
-            setCategories(sourceMas);
-        }
-    };
     const onUpdateStates = async (isNewCatAdded: boolean) => {
         if (isNewCatAdded === true) {
+            const categories = await SourcesApi.getAllNames();
+            setCategories(categories.sort((a, b) => a.title.localeCompare(b.title)));
             const AvailableCats = await getAvailableCategories(true);
             setAvailableCategories(AvailableCats);
             alert('Категорію успішно додано до списку!');
@@ -199,7 +202,6 @@ const ForFansModal = ({
                         key="selectForFansCategory"
                         className="category-select-input"
                         onChange={handleAdd}
-                        onDropdownVisibleChange={onDropDownChange}
                     >
                         <Select.Option key="addCategory" value="addCategory">
                             Додати нову категорію...

diff --git a/src/features/AdminPage/NewStreetcode/ForFansBlock/ForFansBlock.component.tsx b/src/features/AdminPage/NewStreetcode/ForFansBlock/ForFansBlock.component.tsx
@@ -10,10 +10,11 @@ import ForFansAdminItem from './ForFansAdminItem/ForFansAdminItem.component';
 import ForFansAdminModal from './ForFansAdminModal/ForFansAdminModal.component';
 
 interface Props {
-    onChange: (field: string, value: any) => void;
+    onChange: (field: string, value: any) => void,
+    allPersistedSourcesAreSet: boolean,
 }
 
-const ForFansBlock: React.FC<Props> = ({ onChange }) => {
+const ForFansBlock: React.FC<Props> = ({ onChange, allPersistedSourcesAreSet }) => {
     const { sourceCreateUpdateStreetcode } = useMobx();
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [categoriesSelect, setCategoriesSelect] = useState<SourceCategoryName[]>([]);
@@ -59,6 +60,7 @@ const ForFansBlock: React.FC<Props> = ({ onChange }) => {
                 open={isModalOpen}
                 setOpen={setIsModalOpen}
                 onChange={onChange}
+                allPersistedSourcesAreSet={allPersistedSourcesAreSet}
             />
         </div>
     );

diff --git a/src/features/AdminPage/NewStreetcode/MainNewStreetcode.component.tsx b/src/features/AdminPage/NewStreetcode/MainNewStreetcode.component.tsx
@@ -95,6 +95,7 @@ const NewStreetcode = () => {
     const navigationString = 'Покинути сторінку? Внесені зміни, можливо, не буде збережено.';
     const [fieldChanges, setFieldChanges] = useState({});
     const streetcodeType = useRef<StreetcodeType>(StreetcodeType.Person);
+    const [allPersistedSourcesAreSet, setAllPersistedSourcesAreSet] = useState(false);
 
     const handleFieldChange = (fieldName: any, value: any) => {
         setFieldChanges((prevChanges) => ({
@@ -223,14 +224,15 @@ const NewStreetcode = () => {
                     .catch((error) => { });
                 SourcesApi.getCategoriesByStreetcodeId(parseId).then((result) => {
                     const id = result.map((x) => x.id);
-                    id.map((x) => {
-                        SourcesApi.getCategoryContentByStreetcodeId(parseId, x).then((x) => {
-                            const newSource: StreetcodeCategoryContent = {
-                                sourceLinkCategoryId: x.sourceLinkCategoryId,
-                                streetcodeId: x.streetcodeId,
-                                id: x.id,
-                                text: x.text,
-                            };
+                    const getAllStreetcodeCategoriesContentRequest = result.map((x) => SourcesApi.getCategoryContentByStreetcodeId(parseId, x.id));
+                    Promise.all(getAllStreetcodeCategoriesContentRequest).then((x) => {
+                        const newSources: StreetcodeCategoryContent[] = x.map((e) => ({
+                            sourceLinkCategoryId: e.sourceLinkCategoryId,
+                            streetcodeId: e.streetcodeId,
+                            id: e.id,
+                            text: e.text,
+                        }));
+                        newSources.map((newSource) => {
                             const existingSource = sourceCreateUpdateStreetcode
                                 .streetcodeCategoryContents.find((s) => s
                                     .sourceLinkCategoryId === newSource.sourceLinkCategoryId);
@@ -245,6 +247,8 @@ const NewStreetcode = () => {
                                 sourceCreateUpdateStreetcode.setItem(persistedItem);
                             }
                         });
+                    }).then(() => {
+                        setAllPersistedSourcesAreSet(true);
                     });
                 });
                 TransactionLinksApi.getByStreetcodeId(parseId)
@@ -343,10 +347,10 @@ const NewStreetcode = () => {
                 status: tempStatus,
                 toponyms: newStreetcodeInfoStore.selectedToponyms,
                 streetcodeCategoryContents:
-                        JSON.parse(JSON.stringify(sourceCreateUpdateStreetcode.streetcodeCategoryContents))
-                            .map((streetcodeCategoryContent: StreetcodeCategoryContent) => (
-                                { ...streetcodeCategoryContent, id: 0 }
-                            )),
+                    JSON.parse(JSON.stringify(sourceCreateUpdateStreetcode.streetcodeCategoryContents))
+                        .map((streetcodeCategoryContent: StreetcodeCategoryContent) => (
+                            { ...streetcodeCategoryContent, id: 0 }
+                        )),
                 statisticRecords: JSON.parse(JSON.stringify(statisticRecordStore.getStatisticRecordArray))
                     .map((statisticRecord: StatisticRecord) => (
                         {
@@ -424,7 +428,7 @@ const NewStreetcode = () => {
                     streetcodeCategoryContents: sourceCreateUpdateStreetcode.getCategoryContentsArrayToUpdate
                         .map((content) => ({ ...content, streetcodeId: parseId })),
                     streetcodeArts: [...arts.map((streetcodeArt) => ({ ...streetcodeArt, streetcodeId: parseId })),
-                        ...streetcodeArtStore.getStreetcodeArtsToDelete].map((streetcodeArt) => ({
+                    ...streetcodeArtStore.getStreetcodeArtsToDelete].map((streetcodeArt) => ({
                         ...streetcodeArt,
                         art: {
                             ...streetcodeArt.art,
@@ -514,7 +518,7 @@ const NewStreetcode = () => {
                             <TimelineBlockAdmin onChange={handleFieldChange} />
                             <ArtGalleryBlock arts={arts} setArts={setArts} onChange={handleFieldChange} />
                             <RelatedFiguresBlock currentStreetcodeId={parseId} figures={figures} setFigures={setFigures} onChange={handleFieldChange} />
-                            <ForFansBlock onChange={handleFieldChange} />
+                            <ForFansBlock onChange={handleFieldChange} allPersistedSourcesAreSet={allPersistedSourcesAreSet} />
                             <PartnerBlockAdmin partners={partners} setPartners={setPartners} onChange={handleFieldChange} />
                             <SubtitleBlock subTitle={subTitle} setSubTitle={setSubTitle} onChange={handleFieldChange} />
                             <ARBlock onChange={handleFieldChange} />