@griddo/ax 10.3.10 → 10.3.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.3.10",
+  "version": "10.3.11",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -230,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d85781f0058fa2abf2b547beb4bcf488d366a03d"
+  "gitHead": "919cce1a8832b6839f0360db701dfbb1e69148ce"
 }

package/src/__tests__/components/Gallery/GalleryPanel/GalleryDragAndDrop/GalleryDragAndDrop.test.tsx

@@ -246,7 +246,8 @@ describe("GalleryDragAndDrop component actions", () => {
         clearData: clearDataMock,
       },
     });
+
     expect(clearDataMock).toBeCalled();
-    await waitFor(() => expect(refreshImagesMock).toBeCalled());
+    await waitFor(() => expect(refreshImagesMock).toHaveBeenCalled(), { timeout: 3100 });
   });
 });

package/src/api/files.tsx

@@ -1,7 +1,7 @@
 import { IGetFolderParams } from "@ax/types";
 import { encodeData } from "@ax/helpers";
 import { template } from "./config";
-import { IServiceConfig, sendRequest } from "./utils";
+import { IServiceConfig, sendRequest, sendUploadRequest } from "./utils";
 
 const SERVICES: { [key: string]: IServiceConfig } = {
   UPLOAD_FILE: {
@@ -72,8 +72,8 @@ const SERVICES: { [key: string]: IServiceConfig } = {
   },
 };
 
-const uploadFile = async (data: FormData) => {
-  return sendRequest(SERVICES.UPLOAD_FILE, data as any);
+const uploadFile = async (data: FormData, setProgress?: (progress: number) => void) => {
+  return sendUploadRequest(SERVICES.UPLOAD_FILE, data, setProgress);
 };
 
 const getFolderContent = async (params: IGetFolderParams) => {
@@ -162,7 +162,12 @@ const moveFilesBulk = async (ids: number[], folderID: number) => {
   return sendRequest(SERVICES.MOVE_FILES_BULK, { ids });
 };
 
-const replaceFile = async (data: FormData, fileID: number, keepUrl: boolean) => {
+const replaceFile = async (
+  data: FormData,
+  fileID: number,
+  keepUrl: boolean,
+  setProgress?: (progress: number) => void
+) => {
   const {
     host,
     endpoint: [prefix, suffix],
@@ -172,7 +177,7 @@ const replaceFile = async (data: FormData, fileID: number, keepUrl: boolean) =>
 
   SERVICES.REPLACE_FILE.dynamicUrl = `${host}${prefix}${fileID}${suffix}${query}`;
 
-  return sendRequest(SERVICES.REPLACE_FILE, data as any);
+  return sendUploadRequest(SERVICES.REPLACE_FILE, data, setProgress);
 };
 
 const downloadFiles = async (fileID: number | number[], zip: boolean) => {

package/src/api/images.tsx

@@ -1,5 +1,5 @@
 import { template } from "./config";
-import { IServiceConfig, sendRequest } from "./utils";
+import { IServiceConfig, sendRequest, sendUploadRequest } from "./utils";
 
 const SERVICES: { [key: string]: IServiceConfig } = {
   CREATE_IMAGE: {
@@ -24,8 +24,8 @@ const SERVICES: { [key: string]: IServiceConfig } = {
   },
 };
 
-const createImage = async (data: any) => {
-  return sendRequest(SERVICES.CREATE_IMAGE, data);
+const createImage = async (data: any, setProgress?: (progress: number) => void) => {
+  return sendUploadRequest(SERVICES.CREATE_IMAGE, data, setProgress);
 };
 
 const getImageInfo = async (imageID: number) => {

package/src/api/utils.tsx

@@ -9,6 +9,7 @@ export interface IServiceConfig {
   hasToken: boolean;
   dynamicUrl?: string;
   responseType?: ResponseType;
+  onUploadProgress?: any;
 }
 
 const getToken = (): Record<string, unknown> | null => {
@@ -113,7 +114,7 @@ export const sendInitialRequest = async (
 
 export const sendRequest = async (
   serviceConfig: IServiceConfig,
-  data?: Record<string, unknown> | null,
+  data?: Record<string, unknown> | null | FormData,
   dataHeader?: Record<string, unknown>
 ): Promise<AxiosResponse> => {
   let config = wrapConfig(serviceConfig);
@@ -148,6 +149,34 @@ export const sendRequest = async (
   }
 };
 
+export const sendUploadRequest = async (
+  serviceConfig: IServiceConfig,
+  data: FormData,
+  setProgress?: (progress: number) => void
+): Promise<AxiosResponse> => {
+  try {
+    const config = wrapConfig(serviceConfig);
+    let requestConfig = {
+      ...config,
+      data,
+    };
+
+    if (setProgress) {
+      requestConfig = {
+        ...requestConfig,
+        onUploadProgress: (progressEvent: any) => {
+          const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+          setProgress(percentCompleted);
+        },
+      };
+    }
+
+    return await axios(requestConfig);
+  } catch (e) {
+    return e.response;
+  }
+};
+
 function defaultErrorHandler(errorType: number) {
   // FIXME create DEFAULT ERROR
   return { type: SET_ERROR, payload: { errorType, errorText: "This is a generic error" } };

package/src/components/DragAndDrop/index.tsx

@@ -4,6 +4,10 @@ import * as S from "./style";
 const DragAndDrop = (props: any) => {
   const { onDrop, onDragOver, onDragEnter, onDragLeave, children }: IDragAndDropProps = props;
 
+  const _handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {
+    e.dataTransfer.clearData();
+  };
+
   const _handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
@@ -35,6 +39,7 @@ const DragAndDrop = (props: any) => {
       onDragOver={_handleDragOver}
       onDragEnter={_handleDragEnter}
       onDragLeave={_handleDragLeave}
+      onDragStart={_handleDragStart}
     >
       {children}
     </S.DragDropWrapper>

package/src/components/Fields/UrlField/index.tsx

@@ -140,12 +140,20 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
     );
   }
 
+  const titleValue = value && value.title ? value.title : internalPageName ? internalPageName : "";
+  const noFollowValue =
+    value && value.noFollow !== undefined
+      ? value.noFollow
+      : pageData && pageData.follow !== undefined
+      ? !pageData.follow
+      : false;
+
   const advancedFields = [
     {
       type: "TextField" as Field,
       name: "title",
       title: "Title",
-      value: value && value.title ? value.title : internalPageName ? internalPageName : "",
+      value: titleValue,
       onChange: handleTitleChange,
     },
     {
@@ -159,7 +167,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
       type: "UniqueCheck" as Field,
       name: "noFollow",
       options: [{ title: "Add nofollow" }],
-      value: value ? value.noFollow || !pageData?.follow : false,
+      value: noFollowValue,
       onChange: handleNoFollowChange,
     },
   ];

package/src/components/Gallery/GalleryPanel/GalleryDragAndDrop/index.tsx

@@ -29,6 +29,7 @@ const GalleryDragAndDrop = (props: IProps) => {
   const [inDropZone, setInDropZone] = useState(false);
   const [dropDepth, setDropDepth] = useState(0);
   const [uploadingState, setUploadingState] = useState({ total: 0, ready: 0 });
+  const [progress, setProgress] = useState(0);
 
   const handleDragEnter = () => {
     setDropDepth((depth) => depth + 1);
@@ -54,7 +55,6 @@ const GalleryDragAndDrop = (props: IProps) => {
 
   const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
     const files = Array.from(e.dataTransfer.files);
-    e.dataTransfer.clearData();
     await uploadFiles(files);
     setDropDepth(0);
   };
@@ -72,17 +72,19 @@ const GalleryDragAndDrop = (props: IProps) => {
       }
 
       setUploadingState({ total: files.length, ready: 0 });
-      let lastImage;
+      let lastImage: IImage | undefined;
       while (files.length) {
         const file = files.shift();
-        lastImage = file && (await uploadImage(file, site));
+        lastImage = file && (await uploadImage(file, site, setProgress));
         setUploadingState((state) => ({ total: state.total, ready: state.ready + 1 }));
       }
 
       setInDropZone(false);
-      await refreshImages();
-      lastImage && selectImage(lastImage);
       setUploadingState({ total: 0, ready: 0 });
+      setTimeout(async () => {
+        await refreshImages();
+        lastImage && selectImage(lastImage);
+      }, 3000);
     } catch (error) {
       console.log(error);
     }
@@ -90,7 +92,6 @@ const GalleryDragAndDrop = (props: IProps) => {
 
   const uploading = isUploading || uploadingState.total > uploadingState.ready;
   const success = isSuccess && uploadingState.total === uploadingState.ready;
-  const uploadPercentage = (uploadingState.ready * 100) / uploadingState.total;
 
   const handleTryAgain = () => {
     uploadError(false);
@@ -124,7 +125,7 @@ const GalleryDragAndDrop = (props: IProps) => {
             Select files
           </S.FilesButton>
           <S.DragSubtitle>Valid formats: {validFormats.join(", ")}</S.DragSubtitle>
-          <S.DragSubtitle>Max. size: 10MB</S.DragSubtitle>
+          <S.DragSubtitle>Max. size: 50MB</S.DragSubtitle>
         </S.DragStatus>
         <S.DragOverStatus onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}>
           <S.DragIcon>
@@ -132,7 +133,7 @@ const GalleryDragAndDrop = (props: IProps) => {
           </S.DragIcon>
           <S.DragTitle>Drop your file</S.DragTitle>
           <S.DragSubtitle>Valid formats: {validFormats.join(", ")}</S.DragSubtitle>
-          <S.DragSubtitle>Max. size: 10MB</S.DragSubtitle>
+          <S.DragSubtitle>Max. size: 50MB</S.DragSubtitle>
         </S.DragOverStatus>
       </S.StatusWrapper>
     </DragAndDrop>
@@ -159,7 +160,7 @@ const GalleryDragAndDrop = (props: IProps) => {
               <Icon name="image" size="36" />
             </S.DragIcon>
             <S.ProgressBar>
-              <ProgressBar percentage={uploadPercentage} />
+              <ProgressBar percentage={progress} />
             </S.ProgressBar>
             <S.DragTitle>Uploading...</S.DragTitle>
           </S.UploadingStatus>
@@ -207,7 +208,11 @@ const mapStateToProps = (state: IRootState) => ({
 export interface IDispatchProps {
   selectImage(item: IImage | null): void;
   uploadError: (error: boolean, msg?: string) => Promise<void>;
-  uploadImage: (imageFiles: File | File[], site: number | string) => Promise<IImage>;
+  uploadImage: (
+    imageFiles: File | File[],
+    site: number | string,
+    setProgress?: (progress: number) => void
+  ) => Promise<IImage>;
 }
 
 const mapDispatchToProps = {

package/src/components/Gallery/GalleryPanel/GalleryDragAndDrop/style.tsx

@@ -46,16 +46,6 @@ export const DragIcon = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.s};
 `;
 
-export const DragOverStatus = styled.div`
-  transition: opacity 0.1s;
-  ${DragIcon} {
-    svg {
-      path {
-        fill: #ffffff;
-      }
-    }
-  }
-`;
 
 export const UploadingStatus = styled.div`
   transition: opacity 0.1s;
@@ -89,6 +79,17 @@ export const ErrorStatus = styled.div`
   }
 `;
 
+export const DragOverStatus = styled.div`
+  transition: opacity 0.1s;
+  ${DragIcon} {
+    svg {
+      path {
+        fill: #ffffff;
+      }
+    }
+  }
+`;
+
 export const DragAndDropWrapper = styled.div<{
   inDropZone: boolean;
   uploading: boolean;

package/src/containers/FileDrive/actions.tsx

@@ -198,7 +198,8 @@ function deleteFolder(folder: IFolder): (dispatch: Dispatch, getState: any) => P
 function uploadFile(
   docFiles: File | File[],
   folderID: number | null,
-  siteID: number | "global"
+  siteID: number | "global",
+  setProgress?: (progress: number) => void
 ): (dispatch: Dispatch) => Promise<IFile | null> {
   return async (dispatch) => {
     try {
@@ -210,7 +211,7 @@ function uploadFile(
         form.append("file", file);
         form.append("site", JSON.stringify(siteID));
         folderID && form.append("folder", JSON.stringify(folderID));
-        const uploadedFile = await files.uploadFile(form);
+        const uploadedFile = await files.uploadFile(form, setProgress);
         return { ...uploadedFile, file };
       });
       const results = await Promise.all(uploadPromises);
@@ -337,7 +338,8 @@ function replaceFile(
   docFile: File,
   fileID: number,
   keepUrl: boolean,
-  siteID: number | "global"
+  siteID: number | "global",
+  setProgress?: (progress: number) => void
 ): (dispatch: Dispatch, getState: any) => Promise<IFile | null> {
   return async (dispatch, getState) => {
     try {
@@ -350,7 +352,7 @@ function replaceFile(
       const form = new FormData();
       form.append("file", docFile);
 
-      const result = await files.replaceFile(form, fileID, keepUrl);
+      const result = await files.replaceFile(form, fileID, keepUrl, setProgress);
       if (isReqOk(result.status)) {
         dispatch(setIsUploading(false));
         dispatch(setUploadSuccess(true));
@@ -367,15 +369,19 @@ function replaceFile(
   };
 }
 
-function downloadFiles(fileID: number | number[], zip: boolean, fileName?: string): (dispatch: Dispatch) => Promise<void> {
+function downloadFiles(
+  fileID: number | number[],
+  zip: boolean,
+  fileName?: string
+): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
     try {
       const responseActions = {
         handleSuccess: (response: any) => {
           const url = window.URL.createObjectURL(new Blob([response]));
-          const a = document.createElement('a');
+          const a = document.createElement("a");
           a.href = url;
-          a.download = fileName ? fileName : "download.zip"
+          a.download = fileName ? fileName : "download.zip";
           document.body.appendChild(a);
           a.click();
           window.URL.revokeObjectURL(url);
@@ -392,6 +398,12 @@ function downloadFiles(fileID: number | number[], zip: boolean, fileName?: strin
   };
 }
 
+function resetError(): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    dispatch(setUploadError(false, ""));
+  };
+}
+
 export {
   getFolderContent,
   updateCurrentFolder,
@@ -409,4 +421,5 @@ export {
   updateTab,
   replaceFile,
   downloadFiles,
+  resetError,
 };

package/src/containers/Gallery/actions.tsx

@@ -79,7 +79,11 @@ function getSiteImages(props: IGetSiteImages): (dispatch: Dispatch, getState: ()
   };
 }
 
-function uploadImage(imageFiles: File | File[], site: number | string): (dispatch: Dispatch) => Promise<IImage> {
+function uploadImage(
+  imageFiles: File | File[],
+  site: number | string,
+  setProgress?: (progress: number) => void
+): (dispatch: Dispatch) => Promise<IImage> {
   return async (dispatch) => {
     try {
       dispatch(setIsUploading(true));
@@ -91,7 +95,7 @@ function uploadImage(imageFiles: File | File[], site: number | string): (dispatc
         const form = new FormData();
         form.append("file", image);
         site && form.append("site", JSON.stringify(site));
-        const createdImage = await images.createImage(form);
+        const createdImage = await images.createImage(form, setProgress);
         return { ...createdImage, image };
       });
       const results = await Promise.all(uploadPromises);

package/src/containers/Sites/actions.tsx

@@ -49,13 +49,15 @@ import { resetPageEditor } from "@ax/containers/PageEditor/actions";
 import { analyticsActions } from "@ax/containers/Analytics";
 import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
 import { socialActions } from "@ax/containers/Settings/Social";
+import { integrationsActions } from "@ax/containers/Integrations";
 import { getDefaultTheme, handleRequest, isReqOk, sortBy } from "@ax/helpers";
 import { usersActions } from "@ax/containers/Users";
 
 const { setIsLoading, setIsSaving, setLanguage } = appActions;
-const { resetDefaultsValues } = navigationActions;
+const { resetDefaultsValues, getDefaults } = navigationActions;
 const { resetMenuValues } = menuActions;
 const { getAnalytics } = analyticsActions;
+const { getIntegrations } = integrationsActions;
 const { getUsers, getUserCurrentPermissions, getRoles } = usersActions;
 
 function setSites(sitesList: ISite[]): ISetSitesAction {
@@ -126,7 +128,28 @@ function getSites(params: IGetSitesParams = { recentSitesNumber: 7 }): (dispatch
 
       await handleRequest(callback, responseActions, [])(dispatch);
     } catch (e) {
-      console.log(e); // TODO: capturar errores mejor
+      console.log(e);
+    }
+  };
+}
+
+function getSite(siteID: number): (dispatch: Dispatch, getState: any) => Promise<void> {
+  return async (dispatch, getState) => {
+    try {
+      const responseActions = {
+        handleSuccess: async (data: ISite) => {
+          await setSiteInfo(data)(dispatch, getState);
+          await getDefaults()(dispatch, getState);
+          await getIntegrations(data.id)(dispatch);
+          dispatch(setCurrentSiteInfo(data));
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+      const callback = async () => sites.getSiteInfo(siteID);
+
+      await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
     }
   };
 }
@@ -621,12 +644,14 @@ function deleteAndRemoveFromSiteBulk(
         },
       };
 
-      const callbackPages = async () => pages.bulkDelete(pageIds);
+      const pageNoGlobalIds = pageIds.filter((elemento) => !globalPageIds.includes(elemento));
+
+      const callbackPages = async () => pages.bulkDelete(pageNoGlobalIds);
       const callbackGlobalPages = async () => sites.removePageBulk(currentSiteInfo.id, globalPageIds);
 
       let errors = 0;
 
-      if (pageIds.length > 0) {
+      if (pageNoGlobalIds.length > 0) {
         const result = await handleRequest(callbackPages, responsePageActions, [])(dispatch);
         if (!result) {
           errors = errors + 1;
@@ -698,4 +723,5 @@ export {
   setContentFilters,
   deleteAndRemoveFromSiteBulk,
   setListConfig,
+  getSite,
 };

package/src/containers/Sites/reducer.tsx

@@ -66,7 +66,7 @@ export const initialState = {
   config,
 };
 
-export function reducer(state = initialState, action: SitesActionsCreators): ISitesState {
+export function reducer(state = initialState, action: any): ISitesState {
   switch (action.type) {
     case SET_FILTER:
     case SET_SITES:

package/src/modules/App/Routing/NavMenu/index.tsx

@@ -46,7 +46,7 @@ const NavMenu = (props: IProps) => {
   const goToPublishedSite = () => {
     const language = siteLanguages.find((l) => l.id === lang.id);
     if (language && language.home) {
-      window.open(language.home, "_blank");
+      window.open(`${language.home}/`, "_blank");
     }
   };
 

package/src/modules/Content/index.tsx

@@ -19,6 +19,7 @@ import {
   IErrorItem,
   IGetSitesParams,
   ISiteRoles,
+  IPageLanguage,
 } from "@ax/types";
 import { MainWrapper, Modal, TableList, ErrorToast, Toast, EmptyState, Notification } from "@ax/components";
 import { isGlobalStructuredData, isStructuredDataFromPage } from "@ax/helpers";
@@ -406,7 +407,21 @@ const Content = (props: IProps): JSX.Element => {
       .filter((page: IPage) => pageIds.includes(page.id) && page.origin !== "GLOBAL")
       .map((page: IPage) => page.id);
 
-    const deleted = await deleteAndRemoveFromSiteBulk(filteredPageIds, globalPageIds);
+    const globalPageTranslatedIds = pagesSelected.flatMap((page: IPage) => {
+      return page.origin === "GLOBAL"
+        ? page.pageLanguages.filter((trans: any) => pageIds.includes(trans.pageId)).map((trans: any) => trans.pageId)
+        : [];
+    });
+
+    const filteredPageTranslatedIds = pagesSelected.flatMap((page: IPage) => {
+      return page.origin !== "GLOBAL"
+        ? page.pageLanguages.filter((trans: any) => pageIds.includes(trans.pageId)).map((trans: any) => trans.pageId)
+        : [];
+    });
+
+    const deleted = deleteAllVersions
+      ? await deleteAndRemoveFromSiteBulk(filteredPageTranslatedIds, globalPageTranslatedIds)
+      : await deleteAndRemoveFromSiteBulk(filteredPageIds, globalPageIds);
 
     if (deleted) {
       setDeletedItem(pageIds);
@@ -415,13 +430,25 @@ const Content = (props: IProps): JSX.Element => {
   };
 
   const bulkDelete = async () => {
+    let allPageVersions: number[] = [];
+    if (deleteAllVersions) {
+      const selectedPages = currentSitePages.filter((page) => selectedItems.all.includes(page.id));
+      const pageLanguages = selectedPages.map((element) => element.pageLanguages);
+      pageLanguages.forEach((element) => {
+        const ids = element.map((lang: IPageLanguage) => lang.pageId);
+        allPageVersions = [...allPageVersions, ...ids];
+      });
+    }
+
     isStructuredData
       ? await deleteDataContent(selectedItems.all).then((deleted: boolean) => {
           if (deleted) {
-            setDeletedItem(selectedItems.all);
+            deleteAllVersions ? setDeletedItem(allPageVersions) : setDeletedItem(selectedItems.all);
             toggleToast();
           }
         })
+      : deleteAllVersions
+      ? await handleBulkDelete(allPageVersions)
       : await handleBulkDelete(selectedItems.all);
     toggleDeleteModal();
     const allPageItemsSelected = selectedItems.all.length >= currentSitePages.length;
@@ -891,7 +918,7 @@ interface IDispatchProps {
   getSitePages(params: IGetSitePagesParams, structuredData?: string | undefined, filterQuery?: string): Promise<void>;
   updatePageStatus(ids: number[], status: string, updatePageStatus?: boolean): Promise<boolean>;
   deletePage(params?: ISavePageParams): Promise<boolean>;
-  setHistoryPush(page: string, isEditor: boolean): any;
+  setHistoryPush(page: string, isEditor: boolean): Promise<void>;
   setLanguage(lang: { locale: string; id: number | null }): void;
   createNewTranslation(isNewTranslation: boolean): void;
   getFilteredContent(filter: string | null): void;