@griddo/ax 1.73.28 → 1.74.0

package/src/modules/Sites/SitesList/index.tsx

@@ -1,39 +1,112 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
-import { IRootState, ISettingsForm, ISite, IUser } from "@ax/types";
-import { useModal } from "@ax/hooks";
-import { MainWrapper, Modal, ErrorToast } from "@ax/components";
+import { ICheck, IGetSitesParams, IRootState, ISettingsForm, ISite, IUser } from "@ax/types";
+import { useBulkSelection, useModal } from "@ax/hooks";
+import { MainWrapper, Modal, ErrorToast, Icon, IconAction, TableList, EmptyState } from "@ax/components";
+
+import { useFilterQuery, useSortedListStatus, useIsMount } from "./hooks";
+import { filterByStatus, getSortedListStatus } from "./utils";
 
 import SiteModal from "./SiteModal";
-import SiteItem from "./SiteItem";
+import RecentSiteItem from "./RecentSiteItem";
+import GridHeaderFilter from "./GridView/GridHeaderFilter";
+import GridSiteItem from "./GridView/GridSiteItem";
+import BulkHeader from "./ListView/BulkHeader";
+import ListSiteItem from "./ListView/ListSiteItem";
 
 import * as S from "./style";
 
-const SitesList = (props: IProps): JSX.Element => {
-  const { sites, saveSettings, setHistoryPush, currentUser } = props;
+const SitesList = (props: ISitesListProps): JSX.Element => {
+  const {
+    token,
+    sites,
+    recentSites,
+    totalItems,
+    saveSettings,
+    setHistoryPush,
+    currentUser,
+    getSites,
+    publishSitesBulk,
+    unpublishSitesBulk,
+  } = props;
 
+  const isMount = useIsMount();
   const initialState = {
     name: "",
     defaultLanguage: null,
     path: "",
     domain: null,
   };
+
+  const itemsPerPage = 30;
+  const firstPage = 1;
+  const [sitesIds, setsitesIds] = useState<any[]>([]);
+
+  const [page, setPage] = useState(firstPage);
   const [form, setForm] = useState(initialState);
+  const [isRecentSitesListDisplayed, setIsRecentSitesListDisplayed] = useState<boolean>(true);
+  const [displayMode, setDisplayMode] = useState<"list" | "grid">("grid");
+  const [searchQuery, setSearchQuery] = useState<string | null>("");
+  const [currentFilterQuery, setCurrentFilterQuery] = useState("&order=lastAccess-desc");
 
-  const { isOpen, toggleModal } = useModal();
+  const tableRef = useRef<HTMLDivElement>(null);
 
-  const openModal = () => {
-    toggleModal();
+  const pagination = {
+    setPage,
+    itemsPerPage,
+    totalItems,
+    currPage: page,
   };
 
+  const { isOpen, toggleModal } = useModal();
+
+  const openModal = () => toggleModal();
   const rightButtonProps = {
     label: "New",
     action: openModal,
   };
 
+  const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
+  const { setFiltersSelection, setFilterQuery, filterValues } = useFilterQuery();
+
+  useEffect(() => {
+    if (token) {
+      const query = searchQuery ? `&query=${searchQuery}` : "";
+      const params = {
+        pagination: true,
+        language: undefined,
+        recentSitesNumber: 7,
+        page,
+        itemsPerPage,
+        filterQuery: currentFilterQuery,
+        searchQuery: query,
+      };
+      if (isMount) {
+        getSites({ ...params, token });
+      } else {
+        getSites(params);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token, currentFilterQuery, searchQuery, page]);
+
+  useEffect(() => {
+    if (sites.length > 0) {
+      const currentSitesId = sites?.map((site: any) => site.id);
+      setsitesIds(currentSitesId);
+    }
+  }, [sites]);
+
+  useEffect(() => {
+    if (tableRef.current) {
+      tableRef.current.scrollTo(0, 0);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, searchQuery, filterValues]);
+
   const saveSiteSettings = async () => {
     const result = await saveSettings(form);
     if (result) {
@@ -51,17 +124,184 @@ const SitesList = (props: IProps): JSX.Element => {
   const secondaryAction = { title: "Cancel", onClick: toggleModal };
 
   const userHasSite = (siteID: number) => currentUser.sites.includes("all") || currentUser.sites.includes(siteID);
+  const toggleRecentSites = () => setIsRecentSitesListDisplayed(!isRecentSitesListDisplayed);
 
-  return (
-    <MainWrapper title="Sites" rightButton={rightButtonProps}>
-      <ErrorToast />
-      <S.Sites>
-        {sites
+  const sortItems = (orderPointer: string, isAscending: boolean) => {
+    setIsRecentSitesListDisplayed(false);
+    setPage(firstPage);
+    const orderMethod = isAscending ? "asc" : "desc";
+    const sortedState = getSortedListStatus(orderPointer, isAscending);
+    setSortedListStatus(sortedState);
+    const pointer = orderPointer === "title" ? "name" : orderPointer;
+    const filtersSelection = setFiltersSelection("order", pointer, orderMethod);
+    const filterQuery = setFilterQuery(filtersSelection);
+
+    setCurrentFilterQuery(filterQuery);
+  };
+
+  const filterItems = async (filterPointer: string, filtersSelected: string) => {
+    setIsRecentSitesListDisplayed(false);
+    setPage(firstPage);
+    const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
+    const filterQuery = setFilterQuery(filtersSelection);
+    setCurrentFilterQuery(filterQuery);
+  };
+
+  const RecentSitesHeader = () => (
+    <S.SectionHeader data-testid="recent-sites-header" isRecentSites={true}>
+      <S.Title data-testid="recent-sites-title" isActive={isRecentSitesListDisplayed}>
+        Recent sites
+      </S.Title>
+      <S.CollapseButton data-testid="recent-sites-collapse-button" onClick={toggleRecentSites}>
+        {isRecentSitesListDisplayed ? (
+          <>
+            <S.Label data-testid="recent-sites-hide-label">Hide recent sites </S.Label> <Icon name="UpArrow" />
+          </>
+        ) : (
+          <>
+            <S.Label data-testid="recent-sites-show-label">Show recent sites </S.Label> <Icon name="DownArrow" />
+          </>
+        )}
+      </S.CollapseButton>
+    </S.SectionHeader>
+  );
+
+  const RecentSitesList = () => (
+    <S.RecentSites data-testid="recent-sites-list">
+      <RecentSitesHeader />
+      <S.RecentSitesItemsWrapper data-testid="recent-sites-items-wrapper" isHidden={!isRecentSitesListDisplayed}>
+        {recentSites
           .filter((site: ISite) => userHasSite(site.id))
-          .map((site: ISite) => (
-            <SiteItem key={site.id} site={site} />
+          .map((site: ISite, i: number) => (
+            <RecentSiteItem key={i} site={site} />
           ))}
-      </S.Sites>
+      </S.RecentSitesItemsWrapper>
+    </S.RecentSites>
+  );
+
+  const AllSitesHeader = () => (
+    <S.SectionHeader data-testid="all-sites-header">
+      <S.Title isActive={true} data-testid="all-sites-title">
+        All sites
+      </S.Title>
+      <S.HeaderIconsWrapper data-testid="all-sites-header-icons">
+        {displayMode === "grid" ? (
+          <S.FilterSelect data-testid="all-sites-grid-filter">
+            <S.FilterSelectLabel data-testid="all-sites-grid-filter-label">Sort by:</S.FilterSelectLabel>{" "}
+            <GridHeaderFilter sortItems={sortItems} sortedState={sortedListStatus} />{" "}
+          </S.FilterSelect>
+        ) : null}
+        <IconAction icon="Grid2" onClick={() => setDisplayMode("grid")} active={displayMode === "grid"} />
+        <IconAction icon="BulletList" onClick={() => setDisplayMode("list")} active={displayMode === "list"} />
+      </S.HeaderIconsWrapper>
+    </S.SectionHeader>
+  );
+
+  const {
+    resetBulkSelection,
+    selectedItems,
+    isSelected,
+    areItemsSelected,
+    checkState,
+    addToBulkSelection,
+    selectAllItems,
+  } = useBulkSelection(sitesIds);
+
+  const bulkFilter = (bulkSelection: number[]) => filterByStatus(bulkSelection, sites);
+
+  const handleAddToBulk = (item: ICheck) => addToBulkSelection(item, bulkFilter);
+
+  const handleSelectAll = () => selectAllItems(bulkFilter);
+
+  const unselectAllItems = () => resetBulkSelection();
+
+  const selectItems = () => (checkState.isAllSelected ? unselectAllItems() : handleSelectAll());
+
+  const bulkPublishAction = async (isPublish: boolean) => {
+    const { notPublished, published } = selectedItems;
+    if (notPublished.length > 0 && isPublish) {
+      publishSitesBulk(notPublished);
+    }
+    if (published.length > 0 && !isPublish) {
+      unpublishSitesBulk(published);
+    }
+
+    const query = searchQuery ? `&query=${searchQuery}` : "";
+    const params = {
+      pagination: true,
+      language: undefined,
+      recentSitesNumber: 7,
+      page,
+      itemsPerPage,
+      filterQuery: currentFilterQuery,
+      searchQuery: query,
+    };
+    getSites(params);
+    unselectAllItems();
+  };
+
+  const bulkPublish = () => bulkPublishAction(true);
+  const bulkUnpublish = () => bulkPublishAction(false);
+
+  const Header = (
+    <BulkHeader
+      showBulk={areItemsSelected(sitesIds)}
+      bulkPublish={bulkPublish}
+      bulkUnpublish={bulkUnpublish}
+      checkState={checkState}
+      selectAllItems={handleSelectAll}
+      totalItems={totalItems}
+      selectItems={selectItems}
+      sortItems={sortItems}
+      sortedListStatus={sortedListStatus}
+      filterItems={filterItems}
+      filterValues={filterValues}
+    />
+  );
+
+  const mappedSites =
+    sites.length > 0 ? (
+      sites
+        .filter((site: ISite) => userHasSite(site.id))
+        .map((site: ISite) => {
+          const isItemSelected = isSelected(site.id);
+          return displayMode === "grid" ? (
+            <GridSiteItem key={site.id} site={site} />
+          ) : (
+            <ListSiteItem key={site.id} site={site} isSelected={isItemSelected} onCheck={handleAddToBulk} />
+          );
+        })
+    ) : (
+      <S.EmptyStateWrapper data-testid="empty-state">
+        <EmptyState icon="search" message="We couldn't find what you are looking for. Please, try another search." />
+      </S.EmptyStateWrapper>
+    );
+
+  const GridList = () => (
+    <S.GridList data-testid="sites-grid-list" isEmpty={sites.length === 0}>
+      {mappedSites}
+    </S.GridList>
+  );
+  const ListTable = () => (
+    <TableList
+      tableHeader={Header}
+      pagination={pagination}
+      hasFixedHeader={true}
+      tableRef={tableRef}
+      overflow="visible"
+    >
+      {mappedSites}
+    </TableList>
+  );
+
+  const AllSitesList = () => (displayMode === "grid" ? <GridList /> : <ListTable />);
+
+  return (
+    <MainWrapper title="Sites" rightButton={rightButtonProps} searchAction={setSearchQuery}>
+      <ErrorToast />
+      {recentSites?.length > 0 ? <RecentSitesList /> : null}
+      <AllSitesHeader />
+      <AllSitesList />
       <Modal
         isOpen={isOpen}
         hide={toggleModal}
@@ -78,23 +318,36 @@ const SitesList = (props: IProps): JSX.Element => {
 
 interface ISitesProps {
   sites: ISite[];
+  recentSites: ISite[];
   currentUser: IUser;
+  totalItems: number;
+  token: string;
 }
 
 const mapStateToProps = (state: IRootState) => ({
   currentUser: state.users.currentUser,
+  totalItems: state.sites.sitesTotalItems,
+  token: state.app.token,
+  sites: state.sites.sites,
+  recentSites: state.sites.recentSites,
 });
 
 interface IDispatchProps {
   setHistoryPush(path: string, isEditor?: boolean): void;
   saveSettings(form: ISettingsForm): Promise<boolean>;
+  getSites(params: IGetSitesParams): void;
+  publishSitesBulk(ids: number[]): void;
+  unpublishSitesBulk(ids: number[]): void;
 }
 
 const mapDispatchToProps = {
   setHistoryPush: appActions.setHistoryPush,
   saveSettings: sitesActions.saveSettings,
+  getSites: sitesActions.getSites,
+  publishSitesBulk: sitesActions.publishSitesBulk,
+  unpublishSitesBulk: sitesActions.unpublishSitesBulk,
 };
 
-type IProps = ISitesProps & IDispatchProps;
+export type ISitesListProps = ISitesProps & IDispatchProps;
 
 export default connect(mapStateToProps, mapDispatchToProps)(SitesList);

package/src/modules/Sites/SitesList/style.tsx

@@ -1,8 +1,161 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
-export const Sites = styled.div`
+const SectionHeader = styled.div<{ isRecentSites?: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  margin: 0 ${(p) => (p.isRecentSites ? p.theme.spacing.s : p.theme.spacing.m)};
+  margin-top: ${(p) => p.theme.spacing.m};
+`;
+
+const Label = styled.span`
+  margin-right: 14px;
+`;
+
+const Title = styled.h1<{ isActive?: boolean }>`
+  margin: 0;
+  margin-right: ${(p) => p.theme.spacing.m};
+  ${(p) => p.theme.textStyle.headingM};
+  color: ${(p) => (p.isActive ? p.theme.colors.textHighEmphasis : p.theme.colors.textMediumEmphasis)};
+`;
+
+const HeaderIconsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const FilterSelectLabel = styled.span`
+  color: ${(p) => p.theme.color.interactive01};
+`;
+
+const FilterSelect = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  line-height: 32px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  color: ${(p) => p.theme.color.textLowEmphasis};
+`;
+
+const CollapseButton = styled.div`
+  display: flex;
+  align-items: center;
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+`;
+
+const RecentSites = styled.div`
+  padding-bottom: ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.theme.radii.s};
+  background: ${(p) => p.theme.color.uiBackground02};
+  min-height: 56px;
+  overflow: hidden;
+  margin: ${(p) => p.theme.spacing.m};
+  margin-bottom: 0;
+
+  h1 {
+    padding-left: 0;
+  }
+`;
+
+const RecentSitesItemsWrapper = styled.div<{ isHidden: boolean }>`
   display: grid;
-  grid-template-columns: repeat(auto-fit, 270px);
+  grid-auto-flow: column;
+  overflow: auto;
   grid-gap: ${(p) => p.theme.spacing.m};
-  padding: ${(p) => p.theme.spacing.m};
+  padding: ${(p) => p.theme.spacing.s} ${(p) => p.theme.spacing.s} 0px ${(p) => p.theme.spacing.s};
+  overflow: hidden;
+
+  div {
+    min-width: 100%;
+  }
+
+  ${(props) =>
+    props.isHidden &&
+    css`
+      height: 0;
+      padding: 0;
+      padding-left: ${(p) => p.theme.spacing.s};
+      padding-top: ${(p) => p.theme.spacing.xs};
+    `};
+
+  @media (min-width: 1200px) {
+    div:nth-child(6),
+    div:nth-child(7) {
+      display: none;
+    }
+  }
+
+  @media (min-width: 1600px) {
+    div:nth-child(6) {
+      display: block;
+    }
+    div:nth-child(7) {
+      display: none;
+    }
+  }
+
+  @media (min-width: 1700px) {
+    div:nth-child(6),
+    div:nth-child(7) {
+      display: block;
+    }
+  }
+`;
+
+const GridList = styled.div<{ isEmpty: boolean }>`
+  padding-top: ${(p) => p.theme.spacing.s};
+  padding-bottom: ${(p) => p.theme.spacing.m};
+  margin: 0 ${(p) => p.theme.spacing.m};
+
+  ${({ isEmpty, theme }) =>
+    isEmpty
+      ? `
+    display: flex;
+    justify-content: center;
+  `
+      : `display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
+    grid-gap: ${theme.spacing.m};
+  `}
 `;
+
+const EmptyStateWrapper = styled.div`
+  text-align: center;
+`;
+
+const ImageWrapper = styled.div<{ borderRadius?: boolean }>`
+  img {
+    border-radius: ${(p) => (p.borderRadius ? p.theme.spacing.xs : 0)};
+    object-fit: cover;
+  }
+`;
+
+const Thumbnail = styled.div<{ backgroundUrl: string; height: number; width: number; borderRadius?: boolean }>`
+  background: url(${(p) => p.backgroundUrl}) no-repeat center;
+  background-size: cover;
+  height: ${(p) => p.height}px;
+  width: ${(p) => p.width}px;
+  border-radius: ${(p) => (p.borderRadius ? p.theme.spacing.xs : 0)};
+`;
+
+const ItemName = styled.span``;
+
+export {
+  SectionHeader,
+  CollapseButton,
+  Label,
+  Title,
+  HeaderIconsWrapper,
+  FilterSelect,
+  FilterSelectLabel,
+  RecentSites,
+  RecentSitesItemsWrapper,
+  GridList,
+  EmptyStateWrapper,
+  ImageWrapper,
+  Thumbnail,
+  ItemName,
+};

package/src/modules/Sites/SitesList/utils.tsx

@@ -0,0 +1,33 @@
+import { ISite } from "@ax/types";
+
+const getSortedListStatus = (orderPointer: string, isAscending: boolean): any => {
+  const sortedListStatus = {
+    isAscending,
+    sortedByTitle: orderPointer === "name",
+    sortedByLastAccess: orderPointer === "lastAccess",
+    sortedByDateCreated: orderPointer === "dateCreated",
+  };
+
+  return sortedListStatus;
+};
+
+const filterByStatus = (bulkSelection: number[], sites: ISite[]): Record<string, number[]> => {
+  const notPublishedItems: number[] = [];
+  const publishedItems: number[] = [];
+
+  sites.forEach((site: ISite) => {
+    const { id, isPublished } = site;
+    if (bulkSelection.includes(id)) {
+      isPublished ? publishedItems.push(id) : notPublishedItems.push(id);
+    }
+  });
+
+  const filteredItems = {
+    all: bulkSelection,
+    notPublished: notPublishedItems,
+    published: publishedItems,
+  };
+
+  return filteredItems;
+};
+export { getSortedListStatus, filterByStatus };

package/src/modules/Sites/index.tsx

@@ -1,23 +1,23 @@
 import React, { useEffect } from "react";
+
 import { connect } from "react-redux";
 import { withRouter, RouteComponentProps } from "react-router-dom";
 
-import { ISite, IRootState } from "@ax/types";
+import { IRootState } from "@ax/types";
 import { Loading } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
 import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { usersActions } from "@ax/containers/Users";
+
 import SitesList from "./SitesList";
 
-const Sites = (props: IProps): JSX.Element => {
+const Sites = (props: ISitesProps): JSX.Element => {
   const {
     isLoading,
-    sites,
     token,
     setCurrentSiteInfo,
-    getSites,
     getStructuredData,
     setLanguage,
     getAllDataPacks,
@@ -28,7 +28,6 @@ const Sites = (props: IProps): JSX.Element => {
   const fetchInitialData = async () => {
     setCurrentSiteInfo(null);
     await getStructuredData(token);
-    await getSites();
     await getAllDataPacks();
     await getUser("me");
 
@@ -49,37 +48,33 @@ const Sites = (props: IProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token]);
 
-  return isLoading && sites.length === 0 ? <Loading /> : <SitesList sites={sites} />;
+  return isLoading ? <Loading /> : <SitesList />;
 };
 
 const mapStateToProps = (state: IRootState) => ({
   isLoading: state.app.isLoading,
-  sites: state.sites.sites,
   token: state.app.token,
   globalLangs: state.app.globalLangs,
 });
 
 interface IStateProps {
   isLoading: boolean;
-  sites: ISite[];
   token: string;
   globalLangs: any[];
 }
 
 interface IDispatchProps {
   setCurrentSiteInfo(currentSiteInfo: any): void;
-  getSites(): Promise<void>;
   getStructuredData(token: string, siteId?: number): Promise<void>;
   setLanguage(lang: { locale: string; id: number | null }): void;
   getAllDataPacks: () => Promise<void>;
   getUser: (id: string) => Promise<void>;
 }
 
-type IProps = IStateProps & IDispatchProps & RouteComponentProps;
+export type ISitesProps = IStateProps & IDispatchProps & RouteComponentProps;
 
 const mapDispatchToProps = {
   setCurrentSiteInfo: sitesActions.setCurrentSiteInfo,
-  getSites: sitesActions.getSites,
   getStructuredData: structuredDataActions.getStructuredData,
   setLanguage: appActions.setLanguage,
   getAllDataPacks: dataPacksActions.getAllDataPacks,

package/src/modules/StructuredData/StructuredDataList/BulkHeader/TableHeader/index.tsx

@@ -105,7 +105,7 @@ const TableHeader = (props: IProps): JSX.Element => {
           </S.NameWrapper>
             {activeColumns.includes("live") && (
               <S.HeaderWrapper>
-                <LiveFilter filterItems={filterItems} value={filterValues.liveStatus} isStructuredData={true} />
+                <LiveFilter filterItems={filterItems} value={filterValues.liveStatus} hasBasicStatus={true} />
               </S.HeaderWrapper>
             )}
             {CategoryColumns}

package/src/types/index.tsx

@@ -97,10 +97,22 @@ export interface IPage extends IAPIPage {
   isGlobal?: boolean;
 }
 
+export interface IGetSitesParams {
+  token?: string;
+  language?: number;
+  recentSitesNumber?: number;
+  pagination?: boolean;
+  page?: number;
+  itemsPerPage?: number;
+  searchQuery?: string;
+  filterQuery?: string;
+}
+
 export interface ISite {
   author: string;
   id: number;
   name: string;
+  home?: string;
   pages: IPage[];
   published: string;
   isPublished: boolean;
@@ -114,6 +126,12 @@ export interface ISite {
   bigAvatar: string;
   thumbnail: string;
   domain: number | null;
+  lastAccess?: string;
+}
+
+export interface IRecentSite {
+  lastAccess: string;
+  siteId: number;
 }
 
 export interface ISchema {
@@ -169,8 +187,8 @@ export interface IUrlField {
 }
 
 export interface IHeadingField {
-  content: string;
-  tag: string;
+  content?: string;
+  tag?: string;
 }
 
 export interface IRootState {
@@ -625,6 +643,11 @@ export interface IUsersQueryValues {
   filterSites: string;
 }
 
+export interface ISitesQueryValues {
+  order: string;
+  liveStatus: string;
+}
+
 export interface IDataPackConfigImportCategory {
   id: number;
   title: string;