@griddo/ax 11.5.1 → 11.5.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.5.1",
+  "version": "11.5.2",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -224,5 +224,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a2bb818ce6e0cfc4ac1c83d7a2925da433a908f8"
+  "gitHead": "9e842b52cd5f320535bb5b6a0cedbbe8e7eb1319"
 }

package/src/containers/Gallery/actions.tsx

@@ -253,12 +253,12 @@ function getFolderContent(params: IGetFolderParams): (dispatch: Dispatch, getSta
       const { folderID, loading, infinite = false } = params;
       const responseActions = {
         handleSuccess: (data: IImageFolder) => {
-          if (infinite) {
-            data.images.items = currentFolderContent
+          const imagesData =
+            infinite && currentFolderContent
               ? [...currentFolderContent.images.items, ...data.images.items]
-              : [];
-          }
-          dispatch(setCurrentFolderContent(data));
+              : [...data.images.items];
+
+          dispatch(setCurrentFolderContent({ ...data, images: { ...data.images, items: imagesData } }));
           updateBreadcrumb(folderID)(dispatch, getState);
           dispatch(setUploadSuccess(false));
         },

package/src/modules/MediaGallery/Breadcrumb/index.tsx

@@ -12,11 +12,11 @@ const Breadcrumb = (props: IBreadcrumbProps): JSX.Element => {
     <S.BreadcrumbGroup data-testid="file-breadcrumb">
       <React.Fragment key="root">
         <S.BreadcrumbItem onClick={handleRootClick} isLastItem={false}>
-          All Documents
+          All Media
         </S.BreadcrumbItem>
         {"/"}
       </React.Fragment>
-      {breadcrumb.slice(0).map((item: IFolderTree, index: number, arr: any) => {
+      {breadcrumb.slice(0).map((item: IFolderTree, index: number, arr: IFolderTree[]) => {
         const { id, name } = item;
         const isLastItem = breadcrumb.length === index + 1;
         const handleClick = () => onClick(id);

package/src/modules/MediaGallery/FolderTree/index.tsx

@@ -25,7 +25,7 @@ const FolderTree = (props: IProps) => {
     <>
       {!hideRoot && (
         <S.Item selected={!folderID} onClick={handleRootClick}>
-          <S.RootName>All Documents</S.RootName>
+          <S.RootName>All Media</S.RootName>
           <NewFolderButton />
         </S.Item>
       )}

package/src/modules/MediaGallery/GridItem/style.tsx

@@ -33,7 +33,7 @@ const ImageWrapper = styled.div<{ selected: boolean }>`
   border: 1px solid;
   border-color: ${(p) => (p.selected === true ? p.theme.color.interactive02 : p.theme.color.uiLine)};
   flex-grow: 1;
-  max-width: 400px;
+  max-width: 500px;
   min-width: 150px;
   :before {
     content: "";

package/src/modules/MediaGallery/index.tsx

@@ -81,8 +81,9 @@ const MediaGallery = (props: IProps) => {
   const { images, folders } = currentFolderContent || initState;
   const { items, totalItems } = images;
 
-  const itemsPerPage = 10;
+  const itemsPerPage = 50;
   const firstPage = 1;
+  const lastPage = Math.ceil(totalItems / itemsPerPage);
   const [page, setPage] = useState(firstPage);
   const [isPanelOpen, setPanelOpen] = useState(false);
   const [fileSelected, setFileSelected] = useState<IImage | null>(null);
@@ -90,8 +91,13 @@ const MediaGallery = (props: IProps) => {
   const imagesIds: number[] = (items && items.map((image) => image.id)) || [];
   const [galleryItems, setGalleryItems] = useState<number[]>(imagesIds);
   const [galleryDelete, setGalleryDelete] = useState(true);
-  const [progressItems, setProgressItems] = useState<number[]>([]);
+  const [progressItems, setProgressItems] = useState<IProgressState>({
+    tab: selectedTab,
+    folder: currentFolderID,
+    items: [],
+  });
   const [wrapperWidth, setWrapperWidth] = useState<number>();
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
   const tableRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -174,6 +180,7 @@ const MediaGallery = (props: IProps) => {
     return () => {
       updateCurrentFolder(null);
       updateTab("site");
+      setPage(firstPage);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -182,6 +189,7 @@ const MediaGallery = (props: IProps) => {
     const handleGetContent = async () => {
       const params = getParams();
       await getFolderContent(params);
+      setIsLoadingMore(false);
     };
     const handleGetTree = async () => await getFoldersTree(siteID);
 
@@ -220,7 +228,13 @@ const MediaGallery = (props: IProps) => {
   const onScroll = () => {
     if (contentRef.current && isGrid) {
       const { scrollTop, scrollHeight, clientHeight } = contentRef.current;
-      if (scrollTop + clientHeight === scrollHeight && items.length < totalItems) {
+      if (
+        scrollTop + clientHeight + 100 >= scrollHeight &&
+        items.length < totalItems &&
+        page < lastPage &&
+        !isLoadingMore
+      ) {
+        setIsLoadingMore(true);
         setPage((currentPage) => currentPage + 1);
       }
     }
@@ -257,6 +271,7 @@ const MediaGallery = (props: IProps) => {
 
   const handleBackClick = () => {
     const parentID = breadcrumb.length >= 2 ? breadcrumb[breadcrumb.length - 2].id : null;
+    setPage(firstPage);
     updateCurrentFolder(parentID);
   };
 
@@ -305,7 +320,10 @@ const MediaGallery = (props: IProps) => {
       let index = 0;
       while (files.length) {
         const handleProgress = (progress: number) => {
-          setProgressItems((prevState) => [...prevState.slice(0, index), progress, ...prevState.slice(index + 1)]);
+          setProgressItems((prevState) => ({
+            ...prevState,
+            items: [...prevState.items.slice(0, index), progress, ...prevState.items.slice(index + 1)],
+          }));
         };
 
         const file = files.shift();
@@ -321,11 +339,15 @@ const MediaGallery = (props: IProps) => {
     isUploadOpen && toggleUploadModal();
 
     const initialProgress = files.map(() => 0);
-    setProgressItems(initialProgress);
+    setProgressItems({ tab: selectedTab, folder: currentFolderID, items: initialProgress });
 
     await uploadMultipleFiles(files);
 
-    setProgressItems([]);
+    setProgressItems((prevState) => ({ ...prevState, items: [] }));
+
+    updateTab(selectedTab);
+    updateCurrentFolder(currentFolderID);
+
     const params = getParams();
     await getFolderContent(params);
   };
@@ -348,7 +370,8 @@ const MediaGallery = (props: IProps) => {
 
   const handleDeleteFile = async (imageID: number) => {
     const params = getParams();
-    const isDeleted = await deleteImage(imageID, params);
+    const resetedParams = { ...params, page: firstPage, infinite: false, loading: true };
+    const isDeleted = await deleteImage(imageID, resetedParams);
     if (isDeleted) {
       toggleToast("1 Image deleted");
       isOpen && handleCloseModal();
@@ -357,7 +380,8 @@ const MediaGallery = (props: IProps) => {
 
   const handleBulkDeleteFile = async () => {
     const params = getParams();
-    const isDeleted = await deleteImage(selectedItems.all, params);
+    const resetedParams = { ...params, page: firstPage, infinite: false, loading: true };
+    const isDeleted = await deleteImage(selectedItems.all, resetedParams);
     if (isDeleted) {
       toggleToast(`${selectedItems.all.length} Image${selectedItems.all.length > 1 ? "s" : ""} deleted`);
       resetBulkSelection();
@@ -367,7 +391,8 @@ const MediaGallery = (props: IProps) => {
 
   const handleMoveImage = async (imageID: number, folderID: number | "root") => {
     const params = getParams();
-    const isMoved = await moveImage(imageID, folderID, params);
+    const resetedParams = { ...params, page: firstPage, infinite: false, loading: true };
+    const isMoved = await moveImage(imageID, folderID, resetedParams);
     if (isMoved) {
       toggleToast("1 Image moved to a folder");
     }
@@ -375,7 +400,8 @@ const MediaGallery = (props: IProps) => {
 
   const handleBulkMoveFile = async () => {
     const params = getParams();
-    const isMoved = await moveImage(selectedItems.all, selectedFolder || "root", params);
+    const resetedParams = { ...params, page: firstPage, infinite: false, loading: true };
+    const isMoved = await moveImage(selectedItems.all, selectedFolder || "root", resetedParams);
     if (isMoved) {
       toggleMoveModal();
       toggleToast(`${selectedItems.all.length} Image${selectedItems.all.length > 1 ? "s" : ""} moved to a folder`);
@@ -414,6 +440,7 @@ const MediaGallery = (props: IProps) => {
 
   const handleUpdateCurrentFolder = (folderID: number | null) => {
     setSearchQuery("");
+    setPage(firstPage);
     updateCurrentFolder(folderID);
   };
 
@@ -480,11 +507,14 @@ const MediaGallery = (props: IProps) => {
     />
   );
 
+  const isCurrentUploadingFolder = progressItems.tab === selectedTab && progressItems.folder === currentFolderID;
+
   const gridList = (
     <S.GridWrapper>
-      {progressItems.map((progress: number, index: number) => (
-        <UploadItem uploadPercentage={progress} grid={true} key={index} />
-      ))}
+      {isCurrentUploadingFolder &&
+        progressItems.items.map((progress: number, index: number) => (
+          <UploadItem uploadPercentage={progress} grid={true} key={index} />
+        ))}
       {items &&
         items.map((image: IImage) => {
           const isItemSelected = isSelected(image.id);
@@ -523,9 +553,10 @@ const MediaGallery = (props: IProps) => {
       className="no-padding"
     >
       <>
-        {progressItems.map((progress: number, index: number) => (
-          <UploadItem uploadPercentage={progress} grid={false} key={index} />
-        ))}
+        {isCurrentUploadingFolder &&
+          progressItems.items.map((progress: number, index: number) => (
+            <UploadItem uploadPercentage={progress} grid={false} key={index} />
+          ))}
         {items &&
           items.map((image: IImage) => {
             const isItemSelected = isSelected(image.id);
@@ -734,8 +765,10 @@ const MediaGallery = (props: IProps) => {
                   )}
                   {!hasFolders && isRoot && !isSearching && <NewFolderButton />}
                 </S.SectionHeader>
-                {totalItems > 0 && <S.DocumentsWrapper>{isGrid ? gridList : listTable}</S.DocumentsWrapper>}
-                {totalItems === 0 && !hasFolders && (
+                {(totalItems > 0 || progressItems.items.length > 0) && (
+                  <S.DocumentsWrapper>{isGrid ? gridList : listTable}</S.DocumentsWrapper>
+                )}
+                {totalItems === 0 && progressItems.items.length == 0 && !hasFolders && (
                   <S.EmptyStateWrapper data-testid="empty-state" margin={!isRoot}>
                     {isSearching && <EmptyState {...emptySearchStateProps} />}
                     {!isSearching && isRoot && <EmptyState {...emptyProps} />}
@@ -862,6 +895,12 @@ export interface IImageFormState {
   tags: string[];
 }
 
+interface IProgressState {
+  tab: "global" | "site";
+  folder: number | null;
+  items: number[];
+}
+
 const mapDispatchToProps = {
   getSiteImages: galleryActions.getSiteImages,
   getFolderContent: galleryActions.getFolderContent,