@griddo/ax 1.55.14 → 1.56.2

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

@@ -1,43 +1,46 @@
-import React, { memo, useReducer, useRef } from "react";
-
-import { IImage } from "@ax/types";
-import {
-  reducer,
-  initialState,
-  setDropDepth,
-  setInDropZone,
-  setIsUploading,
-  setUploadSuccess,
-  setUploadError,
-  uploadImage,
-} from "../../store";
+import React, { memo, useRef, useState } from "react";
+import { connect } from "react-redux";
+
+import { galleryActions } from "@ax/containers/Gallery";
+import { IGetSiteImages, IImage, IRootState } from "@ax/types";
 import { Icon, DragAndDrop } from "@ax/components";
 
 import * as S from "./style";
 
 const GalleryDragAndDrop = (props: IProps) => {
-  const { isImageSelected, validFormats, addImage, site, allowUpload } = props;
-
+  const { isImageSelected,
+    validFormats,
+    site,
+    allowUpload,
+    refreshImages,
+    uploadError,
+    isUploading,
+    isSuccess,
+    isError,
+    errorMsg,
+    uploadImage,
+    selectImage,
+  } = props;
   const validExtensions = validFormats.map((format) => `.${format}`).join(",");
 
-  const filesInputRef = useRef<any>(null);
-  const filesButtonRef = useRef<any>(null);
-
-  const [state, dispatch] = useReducer(reducer, initialState);
+  const filesInputRef = useRef<HTMLInputElement>(null);
+  const filesButtonRef = useRef<HTMLButtonElement>(null);
+  const [inDropZone, setInDropZone] = useState(false);
+  const [dropDepth, setDropDepth] = useState(0);
 
   const handleDragEnter = () => {
-    dispatch(setDropDepth(state.dropDepth + 1));
+    setDropDepth((depth) => depth + 1);
   };
 
   const handleDragLeave = () => {
-    dispatch(setDropDepth(state.dropDepth - 1));
-    if (state.dropDepth > 1) return;
-    dispatch(setInDropZone(false));
+    setDropDepth((depth) => depth - 1);
+    if (dropDepth > 1) return;
+    setInDropZone(false);
   };
 
   const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
     e.dataTransfer.dropEffect = "copy";
-    dispatch(setInDropZone(true));
+    setInDropZone(true);
   };
 
   const checkType = (type: string) => {
@@ -51,7 +54,7 @@ const GalleryDragAndDrop = (props: IProps) => {
     const files = Array.from(e.dataTransfer.files);
     e.dataTransfer.clearData();
     await handleUploadFile(files);
-    dispatch(setDropDepth(0));
+    setDropDepth(0);
   };
 
   const handleFilesUpload = (e: any) => {
@@ -61,23 +64,15 @@ const GalleryDragAndDrop = (props: IProps) => {
 
   const handleUploadFile = async (files: Array<any>) => {
     if (files[0]) {
-      dispatch(setIsUploading());
-
       if (!checkType(files[0].type)) {
-        dispatch(setUploadError("Invalid format"));
+        uploadError("Invalid format");
       } else {
         try {
-          const value = await uploadImage(files[0], site);
-          if (value) {
-            dispatch(setUploadSuccess());
-            value.file = files[0];
-            addImage(value);
-            dispatch(setInDropZone(false));
-          } else {
-            dispatch(setUploadError("Error uploading image"));
-          }
+          const newImage = await uploadImage(files[0], site);
+          setInDropZone(false);
+          await refreshImages();
+          selectImage(newImage);
         } catch (error) {
-          dispatch(setUploadError("Error uploading image"));
           console.log(error);
         }
       }
@@ -85,16 +80,14 @@ const GalleryDragAndDrop = (props: IProps) => {
   };
 
   const handleTryAgain = () => {
-    dispatch(setInDropZone(false));
+    setInDropZone(false);
   };
 
   const handleFileClick = () => {
-    if (filesInputRef) {
-      filesInputRef.current.click();
-    }
+    filesInputRef && filesInputRef.current && filesInputRef.current.click();
   };
 
-  const errorWrapper = state.errorMsg ? <S.ErrorMsg>{state.errorMsg}</S.ErrorMsg> : null;
+  const errorWrapper = errorMsg ? <S.ErrorMsg>{errorMsg}</S.ErrorMsg> : null;
 
   const renderDragAndDrop = () => (
     <DragAndDrop
@@ -135,7 +128,7 @@ const GalleryDragAndDrop = (props: IProps) => {
       <S.DragIcon>
         <Icon name="image" size="36" />
       </S.DragIcon>
-      <S.DragTitle>Select and image to see details</S.DragTitle>
+      <S.DragTitle>Select an image to see details</S.DragTitle>
     </S.StatusWrapper>
 
   );
@@ -143,18 +136,18 @@ const GalleryDragAndDrop = (props: IProps) => {
   return (
     <S.Wrapper hidden={isImageSelected}>
       <S.DragAndDropWrapper
-        inDropZone={state.inDropZone}
-        uploading={state.isUploading}
-        success={state.isSuccess}
-        error={state.isError}
+        inDropZone={inDropZone}
+        uploading={isUploading}
+        success={isSuccess}
+        error={isError}
       >
         {allowUpload ? renderDragAndDrop() : renderPlaceholder()}
       </S.DragAndDropWrapper>
       <S.UploadingWrapper
-        inDropZone={state.inDropZone}
-        uploading={state.isUploading}
-        success={state.isSuccess}
-        error={state.isError}
+        inDropZone={inDropZone}
+        uploading={isUploading}
+        success={isSuccess}
+        error={isError}
       >
         <S.StatusWrapper>
           <S.UploadingStatus>
@@ -185,12 +178,39 @@ const GalleryDragAndDrop = (props: IProps) => {
   );
 };
 
-interface IProps {
+interface IGalleryDragAndDropProps {
   isImageSelected: boolean;
   validFormats: string[];
-  addImage: (image: IImage) => void;
   site: number | string;
   allowUpload: boolean;
+  refreshImages: () => Promise<void>;
+  isUploading: boolean,
+  isSuccess: boolean,
+  isError: boolean,
+  errorMsg: string;
 }
 
-export default memo(GalleryDragAndDrop);
+const mapStateToProps = (state: IRootState) => ({
+  isUploading: state.gallery.isUploading,
+  isSuccess: state.gallery.isSuccess,
+  isError: state.gallery.isError,
+  errorMsg: state.gallery.errorMsg,
+});
+
+interface IDispatchProps {
+  getSiteImages(params: IGetSiteImages): Promise<void>;
+  selectImage(item: IImage): void;
+  uploadError: (error: string) => Promise<void>;
+  uploadImage: (imageFile: File, site: number | string) => Promise<IImage>;
+}
+
+const mapDispatchToProps = {
+  getSiteImages: galleryActions.getSiteImages,
+  selectImage: galleryActions.selectImage,
+  uploadError: galleryActions.uploadError,
+  uploadImage: galleryActions.uploadImage,
+};
+
+type IProps = IGalleryDragAndDropProps & IDispatchProps;
+
+export default connect(mapStateToProps, mapDispatchToProps)(memo(GalleryDragAndDrop));

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

@@ -1,24 +1,31 @@
 import React, { memo } from "react";
+
 import { IImage } from "@ax/types";
+
 import GalleryDragAndDrop from "./GalleryDragAndDrop";
 import DetailPanel from "./DetailPanel";
-
 import * as S from "./style";
 
 const GalleryPanel = (props: IGalleryPanelProps) => {
-  const { isImageSelected, imageSelected, updateItems, validFormats, setImage, addImage, isGlobalTab, site, selectedTab } = props;
+  const { isImageSelected, imageSelected, validFormats, setImage, isGlobalTab, site, selectedTab, refreshImages } =
+    props;
   const allowUpload = !isGlobalTab || !selectedTab;
 
   return (
     <S.GalleryPanel>
-      <GalleryDragAndDrop isImageSelected={isImageSelected} validFormats={validFormats} addImage={addImage} site={site} allowUpload={allowUpload} />
+      <GalleryDragAndDrop
+        isImageSelected={isImageSelected}
+        validFormats={validFormats}
+        site={site}
+        allowUpload={allowUpload}
+        refreshImages={refreshImages}
+      />
       <DetailPanel
         imageSelected={imageSelected}
         isImageSelected={isImageSelected}
         setImage={setImage}
-        updateImage={updateItems}
-        deleteImage={updateItems}
         isGlobalTab={isGlobalTab}
+        refreshImages={refreshImages}
       />
     </S.GalleryPanel>
   );
@@ -28,12 +35,11 @@ interface IGalleryPanelProps {
   isImageSelected: boolean;
   imageSelected: IImage | null;
   validFormats: string[];
-  updateItems: () => void;
-  setImage: () => void;
-  addImage: (image: IImage) => void;
+  setImage: (imageData: any) => void;
   isGlobalTab: boolean;
   site: number | string;
   selectedTab: string;
+  refreshImages: () => Promise<void>;
 }
 
 export default memo(GalleryPanel);

package/src/components/Gallery/index.tsx

@@ -1,36 +1,31 @@
 import React, { useEffect, useState, memo, useRef } from "react";
+import { connect } from "react-redux";
 
-import { getSiteImages, ITEMS_PER_PAGE } from "./store";
-import { IImage, ISite } from "@ax/types";
-import { Icon, Loader, Tabs, SearchField, EmptyState } from "@ax/components";
+import { galleryActions } from "@ax/containers/Gallery";
+import { IData, IIsLoading } from "@ax/containers/Gallery/reducer";
+import { IGetSiteImages, IImage, IRootState, ISite } from "@ax/types";
+import { Icon, Loader, Tabs, SearchField, EmptyState, ErrorToast, Notification } from "@ax/components";
 
-import Orientation from "./GalleryFilters/Orientation"
-import SortBy from "./GalleryFilters/SortBy"
+import Orientation from "./GalleryFilters/Orientation";
+import SortBy from "./GalleryFilters/SortBy";
 import GalleryPanel from "./GalleryPanel";
 import * as S from "./style";
 import { useFilterQuery, useSortedListStatus } from "./hooks";
-import { getSortedListStatus } from "./utils"
+import { getSortedListStatus } from "./utils";
 
-const Gallery = (props: IGalleryProps): JSX.Element => {
-  const { getImageSelected, toggleModal, site } = props;
+const itemsPerPage = 50;
+const firstPage = 1;
+
+const Gallery = (props: IProps): JSX.Element => {
+  const { data, isLoading, getSiteImages, selectImage, getImageSelected, toggleModal, site } = props;
 
   const tabs = [];
   if (site) tabs.unshift(...["Local", "Global"]);
   const [selectedTab, setSelectedTab] = useState(tabs[0]);
   const isLocalTab = selectedTab === "Local";
+  const isGlobalTab = selectedTab === "Global";
   const galleryScope = isLocalTab ? site.id : "global";
 
-  const initialState: IGalleryState = {
-    items: [],
-    isImageSelected: false,
-    imageSelected: null,
-    page: 1,
-    isFinished: false,
-  };
-
-  const [data, setData] = useState(initialState);
-  const [isLoading, setIsLoading] = useState({ init: false, more: false });
-
   const validFormats = ["jpeg", "jpg", "png", "svg"];
 
   const galleryRef = useRef<HTMLDivElement>(null);
@@ -40,125 +35,67 @@ const Gallery = (props: IGalleryProps): JSX.Element => {
   const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
   const [searchQuery, setSearchQuery] = useState<string>("");
   const isSearching = searchQuery.length > 0;
+  const pageRef = useRef(firstPage);
 
   const getParams = () => ({
     site: galleryScope,
-    page: data.page,
-    items: ITEMS_PER_PAGE,
+    page: data?.page,
+    items: itemsPerPage,
     query: currentFilterQuery,
-    search: searchQuery
+    search: searchQuery,
   });
 
+  pageRef.current = getParams().page;
+
   useEffect(() => {
     const params = getParams();
-    const getAndSetImages = () => {
-      getSiteImages({ ...params, page: 1 })
-        .then((result) => {
-          setData({ items: result, page: 1, isImageSelected: false, imageSelected: null, isFinished: false });
-          setIsLoading({ init: false, more: false });
-        })
-        .catch((error) => console.log(error));
-    };
-    setIsLoading({ init: true, more: false });
-    getAndSetImages();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    getSiteImages({ ...params, page: firstPage });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [galleryScope]);
 
   useEffect(() => {
     const handleScroll = () => {
-      if (
-        galleryRef.current && galleryRef.current.getBoundingClientRect().top + galleryRef.current.scrollTop + 60 <=
-        galleryRef.current.getBoundingClientRect().height
-      ) {
-        return;
-      }
+      const loadMore =
+        galleryRef.current &&
+        galleryRef.current.scrollHeight -
+          (galleryRef.current.scrollTop + galleryRef.current.getBoundingClientRect().height) <
+          60 &&
+        galleryRef.current.scrollTop > 0;
+      if (!loadMore) return;
       if (!data.isFinished) {
-        setIsLoading({ init: false, more: true });
+        const params = getParams();
+        getSiteImages({ ...params, page: pageRef.current + 1, more: true });
       }
     };
     window.addEventListener("scroll", handleScroll, true);
     return () => window.removeEventListener("scroll", handleScroll, true);
-  }, [data.isFinished]);
-
-  const getAndSetMoreImages = async () => {
-    const params = getParams();
-    const result = await getSiteImages({ ...params, page: params.page + 1 });
-    try {
-      setData({
-        ...data,
-        items: [...data.items, ...result],
-        page: data.page + 1,
-        isFinished: result.length < ITEMS_PER_PAGE,
-      });
-      setIsLoading({ init: false, more: false });
-    } catch (error) {
-      console.log(error);
-    }
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data?.isFinished]);
 
-  const getAndSetImages = async () => {
+  const refreshImages = async (page = firstPage) => {
     const params = getParams();
-    const result = await getSiteImages(params);
-    try {
-      setData({ ...data, items: result, isFinished: result.length < ITEMS_PER_PAGE });
-      setIsLoading({ init: false, more: false });
-      galleryRef && galleryRef.current && galleryRef.current.scrollTo(0, 0);
-    } catch (error) {
-      console.log(error);
-    }
+    const more = page !== firstPage;
+    await getSiteImages({ ...params, page, more });
+    if (page < params.page) refreshImages(page + 1);
   };
 
   useEffect(() => {
-    if (!isLoading.more) return;
-    setTimeout(() => {
-      getAndSetMoreImages();
-      }, 2000);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoading.more]);
-
-  useEffect(() => {
-    setIsLoading({ init: true, more: false });
-    getAndSetImages();
+    const params = getParams();
+    getSiteImages({ ...params, page: firstPage });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentFilterQuery, searchQuery]);
 
-  const _handleClick = (item: IImage) => (e: React.MouseEvent<HTMLDivElement>) => {
-    if (data.imageSelected === item) {
-      setData({ ...data, imageSelected: null, isImageSelected: false });
-    } else {
-      setData({ ...data, imageSelected: item, isImageSelected: true });
-    }
+  const handleClick = (item: IImage) => (e: React.MouseEvent<HTMLDivElement>) => {
+    selectImage(item);
   };
 
-  const setImage = () => {
-    getImageSelected(data.imageSelected);
+  const setImage = (imageData: any) => {
+    const updatedImage = { ...data.imageSelected, ...imageData };
+    getImageSelected(updatedImage);
     toggleModal();
   };
 
-  const updateItems = () => {
-    setIsLoading({ init: true, more: false });
-    const params = getParams();
-    getSiteImages({ ...params, page: 1 })
-      .then((result) => {
-        setData({ items: result, isImageSelected: false, imageSelected: null, page: 1, isFinished: false });
-        setIsLoading({ init: false, more: false });
-      })
-      .catch((error) => console.log(error));
-  };
-
-  const addImage = (item: IImage) => {
-    setIsLoading({ init: true, more: false });
-    const params = getParams();
-    getSiteImages({ ...params, page: 1 })
-      .then((result) => {
-        setData({ items: result, isImageSelected: true, imageSelected: item, page: 1, isFinished: false });
-        setIsLoading({ init: false, more: false });
-      })
-      .catch((error) => console.log(error));
-  };
-
   const sortItems = async (orderPointer: string, isAscending: boolean) => {
-    setData((data) => ({ ...data, page: 1 }));
     const sortedState = getSortedListStatus(orderPointer, isAscending);
     setSortedListStatus(sortedState);
 
@@ -168,7 +105,6 @@ const Gallery = (props: IGalleryProps): JSX.Element => {
   };
 
   const filterItems = async (filterPointer: string, filtersSelected: string) => {
-    setData((data) => ({ ...data, page: 1 }));
     const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
     const filterQuery = setFilterQuery(filtersSelection);
     setCurrentFilterQuery(filterQuery);
@@ -178,9 +114,9 @@ const Gallery = (props: IGalleryProps): JSX.Element => {
     icon: "search",
     title: "Oh! No Results Found",
     message: "We couldn’t find what you are looking for. Please, try another search.",
-  }
+  };
 
-  const noSearchResults = !data.items.length && isSearching;
+  const noSearchResults = !data?.items?.length && isSearching;
 
   return (
     <S.Wrapper>
@@ -195,76 +131,102 @@ const Gallery = (props: IGalleryProps): JSX.Element => {
             <Orientation filterItems={filterItems} />
             <SortBy sortItems={sortItems} sortedState={sortedListStatus} />
           </S.Filters>
-        </ S.Header>
+        </S.Header>
         <S.Search>
           <SearchField onChange={setSearchQuery} placeholder="Type an image’s name, title, or #tag" />
-        </ S.Search>
+        </S.Search>
         <S.GalleryWrapper ref={galleryRef}>
+          {isGlobalTab && (
+            <S.NotificationWrapper>
+              <Notification
+                type="info"
+                text="This is a global Library. All the changes you make will be applied to all the sites."
+              />
+            </S.NotificationWrapper>
+          )}
+          <ErrorToast size="l" />
           {isLoading.init ? (
             <S.LoadingWrapper>
               <Loader name="circle" />
             </S.LoadingWrapper>
           ) : (
-            <S.Grid>
-              {data.items &&
-                data.items.map((item: IImage, index: number) => {
-                  const isSelected = data.imageSelected ? item.id === data.imageSelected.id : false;
-                  return (
-                    <S.GridItem key={item.name + index}>
-                      <S.ImageWrapper onClick={_handleClick(item)} selected={isSelected}>
-                        <img src={item.thumb} alt={item.alt} />
-                        <S.IconUnchecked>
-                          <Icon name="emptyCheck" size="24" />
-                        </S.IconUnchecked>
-                        <S.IconChecked>
-                          <Icon name="success" size="24" />
-                        </S.IconChecked>
-                      </S.ImageWrapper>
-                    </S.GridItem>
-                  );
-                })
-                }
+            <>
+              {noSearchResults ? (
+                <S.EmptyWrapper>
+                  <EmptyState {...emptyStateProps} />
+                </S.EmptyWrapper>
+              ) : (
+                <S.Grid>
+                  {data &&
+                    data.items &&
+                    data.items.map((item: IImage, index: number) => {
+                      const isSelected = data.imageSelected ? item.id === data.imageSelected.id : false;
+                      return (
+                        <S.GridItem key={item.name + index} orientation={item.orientation}>
+                          <S.ImageWrapper
+                            onClick={handleClick(item)}
+                            selected={isSelected}
+                            orientation={item.orientation}
+                          >
+                            <img src={item.thumb} alt={item.alt} />
+                            <S.IconUnchecked>
+                              <Icon name="emptyCheck" size="24" />
+                            </S.IconUnchecked>
+                            <S.IconChecked>
+                              <Icon name="success" size="24" />
+                            </S.IconChecked>
+                          </S.ImageWrapper>
+                        </S.GridItem>
+                      );
+                    })}
+                </S.Grid>
+              )}
               {isLoading.more && (
                 <S.LoaderWrapper>
                   <Loader name="dots" />
                 </S.LoaderWrapper>
               )}
-                {noSearchResults && (
-                  <S.EmptyWrapper>
-                    <EmptyState {...emptyStateProps} />
-                  </S.EmptyWrapper>)
-                }
-            </S.Grid>
+            </>
           )}
         </S.GalleryWrapper>
-      </ S.GalleryTabs>
+      </S.GalleryTabs>
       <GalleryPanel
-        isImageSelected={data.isImageSelected}
-        imageSelected={data.imageSelected}
+        isImageSelected={data?.isImageSelected}
+        imageSelected={data?.imageSelected}
         validFormats={validFormats}
-        addImage={addImage}
-        updateItems={updateItems}
         setImage={setImage}
         isGlobalTab={!isLocalTab}
         site={galleryScope}
         selectedTab={selectedTab}
+        refreshImages={refreshImages}
       />
     </S.Wrapper>
   );
 };
 
-interface IGalleryState {
-  items: IImage[];
-  isImageSelected: boolean;
-  imageSelected: IImage | null;
-  page: number;
-  isFinished: boolean;
-}
-
 interface IGalleryProps {
   getImageSelected: (img: IImage | null) => void;
   toggleModal: () => void;
   site: ISite;
+  data: IData;
+  isLoading: IIsLoading;
+}
+
+const mapStateToProps = (state: IRootState) => ({
+  data: state.gallery.data,
+  isLoading: state.gallery.isLoading,
+});
+
+interface IDispatchProps {
+  getSiteImages(params: IGetSiteImages): Promise<void>;
+  selectImage(item: IImage): void;
 }
 
-export default memo(Gallery);
+const mapDispatchToProps = {
+  getSiteImages: galleryActions.getSiteImages,
+  selectImage: galleryActions.selectImage,
+};
+
+type IProps = IGalleryProps & IDispatchProps;
+
+export default connect(mapStateToProps, mapDispatchToProps)(memo(Gallery));