@griddo/ax 11.13.2 → 11.13.3-rc.1

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { connect } from "react-redux";
 
 import { FieldsBehavior, Modal, Tag } from "@ax/components";
@@ -11,7 +11,7 @@ import type {
 	IRootState,
 	ISite,
 	IStructuredData,
-	ITemplate,
+	ILanguage,
 } from "@ax/types";
 
 import TemplateConfig from "./TemplateConfig";
@@ -19,7 +19,7 @@ import TemplateConfig from "./TemplateConfig";
 import * as S from "./style";
 
 const Form = (props: IProps): JSX.Element => {
-	const { currentSite, selected, updateFormValue, configFormData, allStructuredData } = props;
+	const { currentSite, selected, updateFormValue, configFormData, allStructuredData, currentSiteLanguages } = props;
 
 	if (!currentSite) {
 		throw new Error(`ERROR: User reached Data Pack form with null site info`);
@@ -31,7 +31,9 @@ const Form = (props: IProps): JSX.Element => {
 
 	const { templates, categories, structuredData } = selected;
 
-	const getSubscribedData = (importValue: IDataPackConfigImport[]) => {
+	const defaultLanguage = currentSiteLanguages?.find((lang) => lang.isDefault);
+
+	const getSubscribedData = (importValue: IDataPackConfigImport[] | undefined) => {
 		const value: Record<string, ICategoryValue[]> = {};
 		if (!importValue) return value;
 		importValue.forEach((item: IDataPackConfigImport) => {
@@ -47,14 +49,6 @@ const Form = (props: IProps): JSX.Element => {
 	const [selectedCategories, setSelectedCategories] = useState(initialValues);
 	const { isOpen, toggleModal } = useModal();
 
-	const selectOptions: { value: string; label: string }[] = [];
-	templates.forEach((template: ITemplate) => {
-		selectOptions.push({
-			value: template.id,
-			label: template.title,
-		});
-	});
-
 	const indexDefaultOptions = [
 		{
 			value: true,
@@ -94,15 +88,23 @@ const Form = (props: IProps): JSX.Element => {
 
 	const secondaryAction = { title: "Cancel", onClick: toggleModal };
 
-	const getCategoryText = (id: string): string => {
-		const data = [...categories, ...allStructuredData.global, ...allStructuredData.site].find((elem) => elem.id === id);
-		return data ? data.title : id;
-	};
+	const getCategoryText = useCallback(
+		(id: string): string => {
+			const data = [...categories, ...allStructuredData.global, ...allStructuredData.site].find(
+				(elem) => elem.id === id,
+			);
+			return data ? data.title : id;
+		},
+		[categories, allStructuredData],
+	);
 
-	const getIsGlobal = (id: string): boolean => {
-		const data = allStructuredData?.site.find((elem) => elem.id === id);
-		return !data?.local;
-	};
+	const getIsGlobal = useCallback(
+		(id: string): boolean => {
+			const data = allStructuredData?.site.find((elem) => elem.id === id);
+			return !data?.local;
+		},
+		[allStructuredData],
+	);
 
 	const globalPageData = structuredData.find((data) => data.fromPage && !data.local);
 
@@ -110,14 +112,18 @@ const Form = (props: IProps): JSX.Element => {
 		return { source: cat, key: cat, placeholder: getCategoryText(cat), isGlobal: getIsGlobal(cat) };
 	});
 
-	const deleteTag = (catID: number) => {
-		const newCategories = configFormData.import.map((type: IDataPackConfigImport) => {
-			const filteredCats = type.categories.filter((el: IDataPackConfigImportCategory) => el.id !== catID);
-			return { ...type, categories: filteredCats };
-		});
-		const filteredNewCategories = newCategories.filter((cat: IDataPackConfigImport) => cat.categories.length);
-		updateFormValue({ import: filteredNewCategories });
-	};
+	const deleteTag = useCallback(
+		(catID: number) => {
+			if (!configFormData.import) return;
+			const newCategories = configFormData.import.map((type: IDataPackConfigImport) => {
+				const filteredCats = type.categories.filter((el: IDataPackConfigImportCategory) => el.id !== catID);
+				return { ...type, categories: filteredCats };
+			});
+			const filteredNewCategories = newCategories.filter((cat: IDataPackConfigImport) => cat.categories.length);
+			updateFormValue({ import: filteredNewCategories });
+		},
+		[configFormData.import, updateFormValue],
+	);
 
 	const getCategoryLabels = () => (
 		<S.CategoriesWrapper isEmpty={!Object.keys(selectedCategories).length}>
@@ -168,10 +174,11 @@ const Form = (props: IProps): JSX.Element => {
 						value={configFormData?.defaultParent}
 						onChange={setDefaultParent}
 						options={{ excludeDetailPages: true }}
+						forceLanguage={defaultLanguage?.id}
 					/>
 					<FieldsBehavior
 						title="Modifiable in page"
-						name="defaultParent"
+						name="modifiableOnPage"
 						fieldType="ToggleField"
 						value={configFormData?.modifiableOnPage || false}
 						onChange={setModifiableOnPage}
@@ -195,19 +202,19 @@ const Form = (props: IProps): JSX.Element => {
 				mainAction={mainAction}
 				secondaryAction={secondaryAction}
 			>
-				{isOpen ? (
-					<S.ModalContent>
-						<FieldsBehavior
-							fieldType="MultiCheckSelectGroup"
-							title="Select Categories"
-							filled={true}
-							elements={elements}
-							site={currentSite}
-							value={selectedCategories}
-							onChange={setSelectedCategories}
-						/>
-					</S.ModalContent>
-				) : null}
+				<S.ModalContent>
+					<FieldsBehavior
+						fieldType="MultiCheckSelectGroup"
+						title="Select Categories"
+						filled={true}
+						elements={elements}
+						site={currentSite}
+						value={selectedCategories}
+						onChange={setSelectedCategories}
+						contentLanguages={defaultLanguage?.locale ? [defaultLanguage.locale] : []}
+						languages={currentSiteLanguages}
+					/>
+				</S.ModalContent>
 			</Modal>
 		</>
 	);
@@ -219,12 +226,20 @@ interface ICategoryValue {
 	structuredData: string;
 }
 
+interface IDataPackConfig {
+	defaultParent?: number;
+	modifiableOnPage?: boolean;
+	indexDefault?: boolean;
+	import?: IDataPackConfigImport[];
+}
+
 interface IProps {
 	selected: IDataPack | null;
 	currentSite: ISite | null;
-	updateFormValue: (config?: any) => void;
-	configFormData: any;
+	updateFormValue: (config: Partial<IDataPackConfig>) => void;
+	configFormData: IDataPackConfig;
 	allStructuredData: { global: IStructuredData[]; site: IStructuredData[] };
+	currentSiteLanguages: ILanguage[];
 }
 
 const mapDispatchToProps = {
@@ -236,6 +251,7 @@ const mapStateToProps = (state: IRootState) => ({
 	currentSite: state.sites.currentSiteInfo,
 	configFormData: state.dataPacks.configFormData,
 	allStructuredData: state.structuredData.structuredData,
+	currentSiteLanguages: state.sites.currentSiteLanguages,
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Form);

package/src/modules/Settings/ContentTypes/DataPacks/Config/index.tsx

@@ -1,8 +1,7 @@
-import React from "react";
 import { connect } from "react-redux";
 
-import { IRootState, ISite, ITemplate } from "@ax/types";
 import { getSchemaThumbnails, getTemplateThumbnails } from "@ax/helpers";
+import type { IRootState, ISite, ITemplate } from "@ax/types";
 
 import Card from "./Card";
 import Form from "./Form";
@@ -26,43 +25,39 @@ const ConfigPack = (props: IProps): JSX.Element => {
 				<S.Description>{description}</S.Description>
 				<S.Items>
 					<S.CardList>
-						{structuredData &&
-							structuredData.map(
-								(data: any, key: number) =>
-									data.fromPage === false && (
-										<Card key={`${key}${data.title}`} title={"Content Type"} subtitle={data.title} />
-									),
-							)}
-						{categories &&
-							categories.map((categorie: any, key: number) => (
-								<Card key={`${key}${categorie.title}`} title={"Categories"} subtitle={categorie.title} />
-							))}
+						{structuredData?.map(
+							(data: any, key: number) =>
+								data.fromPage === false && (
+									<Card key={`${key}${data.title}`} title={"Content Type"} subtitle={data.title} />
+								),
+						)}
+						{categories?.map((categorie: any, key: number) => (
+							<Card key={`${key}${categorie.title}`} title={"Categories"} subtitle={categorie.title} />
+						))}
 					</S.CardList>
 					<S.CardList>
-						{modules &&
-							modules.map((module: any, key: number) => {
-								const thumbnails = getSchemaThumbnails(module.id, currentSiteInfo.theme);
-								return (
-									<Card
-										key={`${key}${module.title}`}
-										title={"Module"}
-										subtitle={module.title}
-										thumbnail={thumbnails && thumbnails["2x"]}
-									/>
-								);
-							})}
-						{templates &&
-							templates.map((template: ITemplate, key: number) => {
-								const thumbnails = getTemplateThumbnails(template.id, currentSiteInfo.theme);
-								return (
-									<Card
-										key={`${key}${template.title}`}
-										title={"Template"}
-										subtitle={template.title}
-										thumbnail={thumbnails && thumbnails["2x"]}
-									/>
-								);
-							})}
+						{modules?.map((module: any, key: number) => {
+							const thumbnails = getSchemaThumbnails(module.id, currentSiteInfo.theme);
+							return (
+								<Card
+									key={`${key}${module.title}`}
+									title={"Module"}
+									subtitle={module.title}
+									thumbnail={thumbnails?.["2x"]}
+								/>
+							);
+						})}
+						{templates?.map((template: ITemplate, key: number) => {
+							const thumbnails = getTemplateThumbnails(template.id, currentSiteInfo.theme);
+							return (
+								<Card
+									key={`${key}${template.title}`}
+									title={"Template"}
+									subtitle={template.title}
+									thumbnail={thumbnails?.["2x"]}
+								/>
+							);
+						})}
 					</S.CardList>
 				</S.Items>
 			</S.Pack>

package/src/modules/Sites/index.tsx

@@ -33,9 +33,9 @@ const Sites = (props: ISitesProps): JSX.Element => {
 			setCurrentSiteInfo(null);
 			updateCurrentSearch("");
 			resetCurrentData();
-			await getRoles({ siteId: "global" }, token, false);
+			await getRoles({ siteId: "global" }, token);
 			await getUserCurrentPermissions();
-			await getStructuredData(token, null, false);
+			await getStructuredData(token, null);
 			await getAllDataPacks();
 
 			const defaultLanguage = globalLangs.find((language) => language.isDefault);
@@ -72,7 +72,7 @@ interface IDispatchProps {
 	getStructuredData(token: string, siteId?: number | null, hasLoading?: boolean): Promise<void>;
 	setLanguage(lang: { locale: string; id: number | null }): void;
 	getAllDataPacks: () => Promise<void>;
-	getRoles: (params: IGetRoles, token?: string, hasLoading?: boolean) => Promise<void>;
+	getRoles: (params: IGetRoles, token?: string) => Promise<void>;
 	updateCurrentSearch(query: string): Promise<void>;
 	resetCurrentData(): Promise<void>;
 	setIsLoading(isLoading: boolean): void;

package/src/modules/Users/UserList/index.tsx

@@ -99,7 +99,7 @@ const UserList = (props: IUserListProps): JSX.Element => {
 	useEffect(() => {
 		const handleRolesSites = async () => {
 			const siteId = isSiteView ? currentSiteInfo.id : "global";
-			await getRoles({ siteId }, undefined, false);
+			await getRoles({ siteId });
 			await getSites({ pagination: false, recentSitesNumber: 0 });
 		};
 		handleRolesSites();