@griddo/ax 1.55.13 → 1.56.1

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));

package/src/components/Gallery/style.tsx

@@ -1,7 +1,11 @@
 import styled from "styled-components";
 
-const gutter = "16px";
-const columns = "5";
+const gutter = "6px";
+const imageSizes: Record<string, number> = {
+  "S": 2.5,
+  "L": 4,
+  "P": 1.75
+}
 
 export const Wrapper = styled.div`
   display: flex;
@@ -53,6 +57,7 @@ export const GalleryWrapper = styled.div`
   overflow: auto;
   padding-right: ${gutter};
   min-height: calc(100% - ${p => p.theme.spacing.xl} * 2);
+  position: relative;
 `;
 
 export const IconChecked = styled.div`
@@ -86,26 +91,37 @@ export const IconUnchecked = styled.div`
 export const Grid = styled.div`
   display: flex;
   flex-flow: row wrap;
+  align-content: flex-start;
+  align-items: stretch;
   padding: ${p => p.theme.spacing.m};
   margin: 0 -${gutter};
   margin-top: -${gutter};
   border-right: 1px solid ${p => p.theme.color.uiLine};
   min-height: calc(100% + ${gutter});
+
+  &::after {
+    content: "";
+    flex: auto;
+  }
 `;
 
-export const GridItem = styled.div`
-  width: calc(100% / ${columns});
+export const GridItem = styled.div<{ orientation: string }>`
   padding-left: ${gutter};
   padding-top: ${gutter};
+  flex: ${p => p.orientation === "P" ? 0 : 1};
+
+  &:last-child {
+    flex: 0;
+  }
 `;
 
-export const ImageWrapper = styled.div<{ selected: boolean }>`
+export const ImageWrapper = styled.div<{ selected: boolean, orientation: string }>`
   position: relative;
-  width: ${p => `calc(${p.theme.spacing.xl} * 2)`};
-  height: ${p => `calc(${p.theme.spacing.l} * 2)`};
+  min-width: ${p => `calc(${p.theme.spacing.l} * ${imageSizes[p.orientation]})`};
+  width: ${p => p.orientation === "P" ? `calc(${p.theme.spacing.l} * ${imageSizes["P"]})` : "auto"};
+  height: ${p => `calc(${p.theme.spacing.l} * ${imageSizes["S"]})`};
   border: 1px solid;
   border-color: ${p => (p.selected === true ? p.theme.color.interactive02 : p.theme.color.uiLine)};
-  border-radius: 4px;
   :before {
     content: "";
     position: absolute;
@@ -116,7 +132,6 @@ export const ImageWrapper = styled.div<{ selected: boolean }>`
     opacity: ${p => (p.selected === true ? 1 : 0)};
     transition: opacity 0.1s;
     background-color: ${p => (p.selected === true ? p.theme.color.overlay : `transparent`)};
-    border-radius: 4px;
   }
   :hover {
     cursor: pointer;
@@ -133,7 +148,6 @@ export const ImageWrapper = styled.div<{ selected: boolean }>`
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: 4px;
   }
   ${IconChecked} {
     display: ${p => (p.selected === true ? `block` : 0)};
@@ -156,10 +170,26 @@ export const LoadingWrapper = styled.div`
 export const LoaderWrapper = styled.div`
   width: 100%;
   text-align: center;
+  margin-bottom: ${p => p.theme.spacing.s};
 `;
 
 export const EmptyWrapper = styled.div`
   display: flex;
   align-items: center;
   margin: auto;
+  align-content: center;
+  padding: ${p => p.theme.spacing.m};
+  margin: 0 -${gutter};
+  margin-top: -${gutter};
+  border-right: 1px solid ${p => p.theme.color.uiLine};
+  min-height: calc(100% + ${gutter});
+`;
+
+export const NotificationWrapper = styled.div`
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
 `;

package/src/components/MainWrapper/AppBar/index.tsx

@@ -84,6 +84,7 @@ const AppBar = (props: IProps): JSX.Element => {
     if (pageLanguages && !getCurrentLanguage(item.locale)) {
       setNewTranslation(true);
       languageActions.getContent && currentPageID && languageActions.getContent(currentPageID);
+      languageActions.getDataContent && currentPageID && languageActions.getDataContent(currentPageID);
     }
   };
 

package/src/components/Toast/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useEffect } from "react";
 
 import { createPortal } from "react-dom";
 import { Button, IconAction } from "@ax/components";
@@ -10,22 +10,28 @@ const Toast = (props: IProps) => {
   const toast = useRef<any>(null);
 
   let temp: any;
-  const setTemp = () => (temp = setTimeout(() => setIsVisible(false), 2000));
-  const stopTemp = () => clearTimeout(temp);
+  const setTemp = (time: number) => (temp = setTimeout(() => setIsVisible(false), time));
 
   const close = () => {
     toast.current.classList.add("close-animation");
-    setTemp();
-    stopTemp();
+    setTemp(1000);
   };
 
+  useEffect(() => {
+    setTemp(5000);
+    return () => clearTimeout(temp);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return createPortal(
     <S.Wrapper ref={toast}>
       <S.Text>{message}</S.Text>
       <S.Buttons>
-        <Button type="button" buttonStyle="lineInverse" onClick={action}>
-          Undo
-        </Button>
+        {action &&
+          <Button type="button" buttonStyle="lineInverse" onClick={action}>
+            Undo
+          </Button>
+        }
         <IconAction icon="close" onClick={close} inversed={true} />
       </S.Buttons>
     </S.Wrapper>,
@@ -34,7 +40,7 @@ const Toast = (props: IProps) => {
 };
 
 interface IProps {
-  action: () => void;
+  action?: () => void;
   message: string;
   setIsVisible: (visibility: boolean) => void;
 }

package/src/components/Toast/style.tsx

@@ -8,8 +8,8 @@ const Wrapper = styled.div`
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
-   position: absolute;
-   z-index: 1;
+   position: fixed;
+   z-index: 1100;
    bottom: ${p => p.theme.spacing.m};
    left: ${p => `calc(${p.theme.spacing.m} * 4)`};
    padding-left: ${p => p.theme.spacing.m};