@griddo/ax 11.13.2 → 11.13.3-rc.1

package/src/containers/Settings/DataPacks/actions.tsx

@@ -1,4 +1,4 @@
-import { Dispatch } from "redux";
+import type { Dispatch } from "redux";
 
 import { filterThemeDatapacks, handleRequest, sortBy } from "@ax/helpers";
 import { dataPack } from "@ax/api";
@@ -16,7 +16,7 @@ import {
 	ERROR_CODE,
 } from "./constants";
 
-import {
+import type {
 	ISetActivated,
 	ISetSelected,
 	ISetConfigFormData,
@@ -25,7 +25,7 @@ import {
 	ISetModules,
 	ISetTemplates,
 } from "./interfaces";
-import { IDataPack, IDataPackCategory, IRootState } from "@ax/types";
+import type { IDataPack, IDataPackCategory, IRootState } from "@ax/types";
 import { dataPacksInitialState } from "./reducer";
 
 function setActivated(activated: any): ISetActivated {
@@ -78,13 +78,13 @@ function getAllDataPacks(queryParams?: string): (dispatch: Dispatch) => Promise<
 	};
 }
 
-function getSiteDataPacks(queryParams?: string): (dispatch: Dispatch, getState: any) => Promise<void> {
+function getSiteDataPacks(queryParams?: string): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
 	return async (dispatch, getState) => {
 		try {
 			const {
 				sites: { currentSiteInfo },
 			} = getState();
-			const currentSiteID = currentSiteInfo && currentSiteInfo.id;
+			const currentSiteID = currentSiteInfo!.id;
 
 			const getDataPacks = (data: any) => {
 				const orderedData = data.sort(sortBy("title", false));
@@ -107,17 +107,17 @@ function getSiteDataPacks(queryParams?: string): (dispatch: Dispatch, getState:
 	};
 }
 
-function getSiteDataPack(packID: string): (dispatch: Dispatch, getState: any) => Promise<void> {
+function getSiteDataPack(packID: string): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
 	return async (dispatch, getState) => {
 		try {
 			const {
 				sites: { currentSiteInfo },
 			} = getState();
-			const currentSiteID = currentSiteInfo && currentSiteInfo.id;
+			const currentSiteID = currentSiteInfo!.id;
 
 			const setDataPack = (pack: IDataPack) => {
 				dispatch(setSelected(pack));
-				const config = pack && pack.config;
+				const config = pack?.config;
 				const isEmptyConfig = !config || Object.keys(config).length === 0;
 
 				if (isEmptyConfig) {
@@ -141,16 +141,18 @@ function getSiteDataPack(packID: string): (dispatch: Dispatch, getState: any) =>
 	};
 }
 
-function getActivatedDataPack(packID: string | null): (dispatch: Dispatch, getState: any) => Promise<void> {
+function getActivatedDataPack(
+	packID: string | null,
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
 	return async (dispatch, getState) => {
 		try {
 			const {
 				dataPacks: { activated },
 			} = getState();
-			const selectedDataPack = packID ? activated && activated.find((pack: any) => pack.id === packID) : null;
+			const selectedDataPack = packID ? activated?.find((pack: any) => pack.id === packID) : null;
 
 			dispatch(setSelected(selectedDataPack));
-			const config = selectedDataPack && selectedDataPack.config;
+			const config = selectedDataPack?.config;
 			const isEmptyConfig = !config || Object.keys(config).length === 0;
 
 			if (isEmptyConfig) {
@@ -168,13 +170,13 @@ function deleteSiteDataPack(
 	dataPackID: string,
 	errorAction: any,
 	force?: boolean,
-): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
 	return async (dispatch, getState) => {
 		try {
 			const {
 				sites: { currentSiteInfo },
 			} = getState();
-			const currentSiteID = currentSiteInfo && currentSiteInfo.id;
+			const currentSiteID = currentSiteInfo!.id;
 			const getActivatedQuery = "?status=activated";
 
 			const handleSuccess = () => {
@@ -203,17 +205,17 @@ function deleteSiteDataPack(
 	};
 }
 
-function updateDataPack(dataPackID: string): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+function updateDataPack(dataPackID: string): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
 	return async (dispatch, getState) => {
 		try {
 			const {
 				sites: { currentSiteInfo },
 				dataPacks: { configFormData },
 			} = getState();
-			const currentSiteID = currentSiteInfo && currentSiteInfo.id;
+			const currentSiteID = currentSiteInfo!.id;
 
 			const setUpdatedPack = (selectedPack: any) => {
-				const config = selectedPack && selectedPack.config;
+				const config = selectedPack?.config;
 				const getActivatedQuery = "?status=activated";
 
 				dispatch(setSelected(selectedPack));
@@ -239,7 +241,7 @@ function updateDataPack(dataPackID: string): (dispatch: Dispatch, getState: any)
 	};
 }
 
-function updateFormValue(valueObj: any): (dispatch: Dispatch, getState: any) => void {
+function updateFormValue(valueObj: any): (dispatch: Dispatch, getState: () => IRootState) => void {
 	return (dispatch, getState) => {
 		const {
 			dataPacks: { configFormData },
@@ -259,7 +261,7 @@ function resetForm(): (dispatch: Dispatch) => void {
 function getAvailableSiteDataPacks(
 	queryParams: string | null,
 	loading = true,
-): (dispatch: Dispatch, getState: any) => Promise<void> {
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
 	return async (dispatch, getState) => {
 		try {
 			const {
@@ -293,13 +295,13 @@ function getAvailableSiteDataPacks(
 function addSiteDataPack(
 	dataPackID: string,
 	fromConfig?: boolean,
-): (dispatch: Dispatch, getState: any) => Promise<void> {
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
 	return async (dispatch, getState) => {
 		try {
 			const {
 				sites: { currentSiteInfo },
 			} = getState();
-			const currentSiteID = currentSiteInfo && currentSiteInfo.id;
+			const currentSiteID = currentSiteInfo!.id;
 			const getActivatedQuery = "?status=activated";
 
 			const getPacks = () => {
@@ -339,17 +341,19 @@ function getDataPacksCategories(): (dispatch: Dispatch) => Promise<void> {
 	};
 }
 
-function getSiteModules(): (dispatch: Dispatch, getState: any) => Promise<void> {
+function getSiteModules(): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
 	return async (dispatch, getState) => {
 		try {
 			const {
 				sites: { currentSiteInfo },
 			} = getState();
-			const currentSiteID = currentSiteInfo && currentSiteInfo.id;
+			const currentSiteID = currentSiteInfo!.id;
 
 			const modulesIds: string[] = [];
 			const setModulesID = (data: any) => {
-				data.forEach((module: any) => modulesIds.push(module.id));
+				data.forEach((module: any) => {
+					modulesIds.push(module.id);
+				});
 				dispatch(setModules(modulesIds));
 			};
 			const responseActions = {
@@ -366,13 +370,13 @@ function getSiteModules(): (dispatch: Dispatch, getState: any) => Promise<void>
 	};
 }
 
-function getSiteTemplates(): (dispatch: Dispatch, getState: any) => Promise<void> {
+function getSiteTemplates(): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
 	return async (dispatch, getState) => {
 		try {
 			const {
 				sites: { currentSiteInfo },
 			} = getState();
-			const currentSiteID = currentSiteInfo && currentSiteInfo.id;
+			const currentSiteID = currentSiteInfo!.id;
 
 			const responseActions = {
 				handleSuccess: (data: any) => {
@@ -390,13 +394,15 @@ function getSiteTemplates(): (dispatch: Dispatch, getState: any) => Promise<void
 	};
 }
 
-function getSiteDataPackbyTemplate(templateType: string): (dispatch: Dispatch, getState: any) => Promise<void> {
+function getSiteDataPackbyTemplate(
+	templateType: string,
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
 	return async (dispatch, getState) => {
 		try {
 			const {
 				sites: { currentSiteInfo },
 			} = getState();
-			const currentSiteID = currentSiteInfo && currentSiteInfo.id;
+			const currentSiteID = currentSiteInfo!.id;
 			const getQuery = "?status=deactivated";
 
 			const setDataPack = (data: IDataPack[]) => {
@@ -422,13 +428,13 @@ function getSiteDataPackbyTemplate(templateType: string): (dispatch: Dispatch, g
 	};
 }
 
-function getSiteDataPackbyModule(module: string): (dispatch: Dispatch, getState: any) => Promise<void> {
+function getSiteDataPackbyModule(module: string): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
 	return async (dispatch, getState) => {
 		try {
 			const {
 				sites: { currentSiteInfo },
 			} = getState();
-			const currentSiteID = currentSiteInfo && currentSiteInfo.id;
+			const currentSiteID = currentSiteInfo!.id;
 			const getQuery = "?status=deactivated";
 
 			const setDataPack = (data: IDataPack[]) => {

package/src/containers/Sites/actions.tsx

@@ -9,7 +9,7 @@ import { socialActions } from "@ax/containers/Settings/Social";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { usersActions } from "@ax/containers/Users";
 import { getDefaultTheme, getThemeElements, handleRequest, isReqOk, sortBy } from "@ax/helpers";
-import {
+import type {
 	IGetGlobalPagesParams,
 	IGetSitePagesParams,
 	IGetSitesParams,
@@ -22,7 +22,7 @@ import {
 	IThemeElements,
 } from "@ax/types";
 
-import { Dispatch } from "redux";
+import type { Dispatch } from "redux";
 
 import {
 	DEFAULT_PARAMS,
@@ -44,7 +44,7 @@ import {
 	SET_THEME_ELEMENTS,
 	SET_TOTAL_ITEMS,
 } from "./constants";
-import {
+import type {
 	ISetAllSitePagesAction,
 	ISetConfig,
 	ISetContentFilters,
@@ -270,7 +270,8 @@ function setSiteInfo(currentSiteInfo: ISite): (dispatch: Dispatch, getState: ()
 			resetSiteValues(currentSiteInfo.id)(dispatch);
 			structuredDataActions.resetStructuredData()(dispatch);
 			dispatch(setCurrentSiteInfo(currentSiteInfo));
-			await getRoles({ siteId: currentSiteInfo.id }, undefined, false)(dispatch);
+
+			await getRoles({ siteId: currentSiteInfo.id })(dispatch);
 
 			const themeElements = getThemeElements(currentSiteInfo.theme) || null;
 			dispatch(setThemeElements(themeElements));
@@ -341,6 +342,8 @@ function setSiteInfo(currentSiteInfo: ISite): (dispatch: Dispatch, getState: ()
 			getUserCurrentPermissions()(dispatch, getState);
 
 			await sites.setSiteActivity(currentSiteInfo.id);
+
+			dispatch(appActions.setIsLoading(false));
 		} catch (e) {
 			console.log(e);
 		}
@@ -388,19 +391,21 @@ function getSitePages(
 ): (dispatch: Dispatch) => Promise<void> {
 	return async (dispatch) => {
 		try {
-			dispatch(appActions.setIsLoading(true));
-			const response: any = structuredData
-				? await sites.getStructuredSitePages(params, structuredData, filterQuery)
-				: await sites.getSitePages(params, filterQuery);
+			const responseActions = {
+				handleSuccess: (response: any) => {
+					const { items, totalItems } = response;
+					dispatch(setCurrentSitePages(items));
+					dispatch(setTotalItems(totalItems));
+				},
+				handleError: (response: any) => appActions.handleError(response)(dispatch),
+			};
 
-			if (isReqOk(response.status)) {
-				const { items, totalItems } = response.data;
-				dispatch(setCurrentSitePages(items));
-				dispatch(setTotalItems(totalItems));
-			} else {
-				console.log("Error en getSitePages"); // FIXME: capturar errores mejor
-			}
-			dispatch(appActions.setIsLoading(false));
+			const callback = async () =>
+				structuredData
+					? await sites.getStructuredSitePages(params, structuredData, filterQuery)
+					: await sites.getSitePages(params, filterQuery);
+
+			await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
 		} catch (e) {
 			console.log(e);
 		}
@@ -430,26 +435,28 @@ function getAllSitePages(params: IGetSitePagesParams): (dispatch: Dispatch) => P
 function getSiteLanguages(siteID: number): (dispatch: Dispatch) => Promise<void> {
 	return async (dispatch) => {
 		try {
-			dispatch(appActions.setIsLoading(true));
-			const response: any = await languages.getSiteLanguages(siteID);
-			dispatch(appActions.setIsLoading(false));
-			if (isReqOk(response.status)) {
-				const siteLanguages = response.data.items;
+			const responseActions = {
+				handleSuccess: (response: any) => {
+					const siteLanguages = response.items;
 
-				const defaultLanguage = siteLanguages.find((language: any) => language.isDefault);
-				const { locale, id } = defaultLanguage;
-				const lang = {
-					locale,
-					id,
-				};
+					const defaultLanguage = siteLanguages.find((language: any) => language.isDefault);
+					const { locale, id } = defaultLanguage;
+					const lang = {
+						locale,
+						id,
+					};
 
-				dispatch(setLanguage(lang));
-				dispatch(setCurrentSiteLanguages(siteLanguages));
-			} else {
-				console.log("Error en getSiteLanguages"); // FIXME: capturar errores mejor
-			}
+					dispatch(setLanguage(lang));
+					dispatch(setCurrentSiteLanguages(siteLanguages));
+				},
+				handleError: (response: any) => appActions.handleError(response)(dispatch),
+			};
+
+			const callback = async () => await languages.getSiteLanguages(siteID);
+
+			await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
 		} catch (e) {
-			console.log(e); // FIXME: capturar errores mejor
+			console.log(e);
 		}
 	};
 }

package/src/containers/StructuredData/actions.tsx

@@ -401,8 +401,6 @@ function deleteStructuredDataContent(
 ): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
 	return async (dispatch, getState) => {
 		try {
-			dispatch(setIsLoading(true));
-
 			const {
 				structuredData: { currentFilter, currentStructuredData },
 				sites: { currentSiteInfo, currentFilter: currentSiteFilter },
@@ -431,7 +429,7 @@ function deleteStructuredDataContent(
 			const callback = async () =>
 				Array.isArray(id) ? structuredData.deleteDataContentBulk(id) : structuredData.deleteDataContent(id);
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [setIsLoading])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -444,8 +442,6 @@ function restoreStructuredDataContent(
 ): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
 	return async (dispatch, getState) => {
 		try {
-			dispatch(setIsLoading(true));
-
 			const {
 				structuredData: { currentFilter },
 				sites: { currentSiteInfo, currentFilter: currentSiteFilter },
@@ -472,7 +468,7 @@ function restoreStructuredDataContent(
 					? structuredData.restoreDataContentBulk(dataID)
 					: structuredData.restoreDataContent(dataID);
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [setIsLoading])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -711,8 +707,6 @@ function deleteCategoryGroup(
 
 			if (!currentStructuredData) return false;
 
-			dispatch(setIsLoading(true));
-
 			const params = { ...DEFAULT_PARAMS, dataID: currentFilter, groupingCategories: true };
 
 			const siteID = currentSiteInfo ? currentSiteInfo.id : "global";
@@ -734,7 +728,7 @@ function deleteCategoryGroup(
 					? structuredData.deleteGroupBulk(currentStructuredData.id, siteID, id, deleteChildren)
 					: structuredData.deleteGroup(currentStructuredData.id, siteID, id, deleteChildren);
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [setIsLoading])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;

package/src/modules/ActivityLog/LogFilters/DateFilter/index.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import DatePicker, { registerLocale } from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
-import en from "date-fns/locale/en-GB";
 
-import { IQueryValue } from "@ax/types";
 import { Button, FloatingMenu, Icon } from "@ax/components";
 import { dateToString, stringToDate } from "@ax/helpers";
+import type { IQueryValue } from "@ax/types";
+
+import en from "date-fns/locale/en-GB";
 
 import * as S from "./style";
 
@@ -74,7 +75,7 @@ const ContentFilter = (props: IContentFilterProps): JSX.Element => {
 			</S.DatePickerWrapper>
 			{!!startDate && (
 				<S.ButtonWrapper>
-					<Button type="button" onClick={handleClick} buttonStyle="minimal">
+					<Button type="button" onClick={handleClick} buttonStyle="minimal" data-close-menu>
 						Apply
 					</Button>
 				</S.ButtonWrapper>

package/src/modules/Content/NewContentModal/PageImporter/index.tsx

@@ -49,11 +49,10 @@ const PageImporter = (props: IPageImporterProps) => {
 				} = response;
 				setPages(items);
 				if (!allPages) setAllPages(items);
-				setIsLoading(false);
 			}
+			setIsLoading(false);
 		} catch (error) {
 			console.log(error);
-			setIsLoading(false);
 		}
 	};
 

package/src/modules/Content/index.tsx

@@ -6,6 +6,7 @@ import {
 	EmptyState,
 	ErrorToast,
 	FilterTagsBar,
+	Loading,
 	MainWrapper,
 	Notification,
 	SearchTagsBar,
@@ -941,12 +942,16 @@ const Content = (props: IProps): JSX.Element => {
 								labels={filterLabels}
 							/>
 						</S.SearchTags>
-						{!isEmpty ? (
-							<>{content}</>
-						) : (
+						{isLoading ? (
+							<S.LoadingWrapper>
+								<Loading />
+							</S.LoadingWrapper>
+						) : isEmpty ? (
 							<S.EmptyWrapper>
 								<EmptyState {...emptyStateProps} />
 							</S.EmptyWrapper>
+						) : (
+							<>{content}</>
 						)}
 					</TableList>
 				</S.TableWrapper>

package/src/modules/Content/style.tsx

@@ -55,11 +55,18 @@ const SearchTags = styled.div`
   }
 `;
 
+const LoadingWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+`;
+
 export {
 	ContentListWrapper,
 	TableWrapper,
 	PaginationWrapper,
 	EmptyWrapper,
+	LoadingWrapper,
 	ModalContent,
 	SelectWrapper,
 	NotificationWrapper,