@griddo/ax 1.58.7 → 1.59.0

package/src/modules/Content/PageItem/style.tsx

@@ -15,7 +15,6 @@ const CheckCell = styled(Cell)`
 `;
 
 const NameCell = styled(Cell)`
-  width: 35%;
   flex-grow: 1;
   svg {
     height: ${(p) => p.theme.spacing.s};
@@ -35,12 +34,12 @@ const Title = styled.div`
 const Slug = styled.div``;
 
 const TypeCell = styled(Cell)`
-  width: 140px;
+  flex: 0 0 170px;
   align-items: center;
 `;
 
 const LiveCell = styled(Cell)`
-  width: 80px;
+  flex: 0 0 80px;
   align-items: center;
   svg {
     width: ${(p) => p.theme.spacing.m};
@@ -49,7 +48,7 @@ const LiveCell = styled(Cell)`
 `;
 
 const StatusCell = styled(Cell)`
-  width: 170px;
+  flex: 0 0 170px;
   align-items: center;
   div:nth-child(2) {
     margin-top: ${(p) => p.theme.spacing.xs};
@@ -58,18 +57,19 @@ const StatusCell = styled(Cell)`
 
 const TransCell = styled(Cell)`
   ${(p) => p.theme.textStyle.uiXS};
-  width: 90px;
+  flex: 0 0 115px;
   position: relative;
   align-items: center;
 `;
 
 const SeoCell = styled(Cell)`
   ${(p) => p.theme.textStyle.uiXS};
-  width: 124px;
+  flex: 0 0 124px;
 `;
 
 const GlobalCell = styled(Cell)`
   width: 24px;
+  flex: 0 0 24px;
 `;
 
 const Mark = styled.div`
@@ -89,7 +89,13 @@ const Wrapper = styled.div`
 `;
 
 const ActionsCell = styled(Cell)`
-  width: 92px;
+  flex: 0 0 100px;
+`;
+
+const CategoryCell = styled(Cell)`
+  flex: 0 0 150px;
+  align-items: center;
+  position: relative;
 `;
 
 const StyledActionMenu = styled(ActionMenu)`
@@ -191,4 +197,5 @@ export {
   ModalContent,
   GlobalCell,
   Mark,
+  CategoryCell,
 };

package/src/modules/Content/hooks.tsx

@@ -1,18 +1,23 @@
 import { useState } from "react";
 
 const useSortedListStatus = () => {
-  const sortedInitialState: {isAscending: boolean; sortedByTitle: boolean; sortedByURL: boolean; sortedByDate: boolean;} = {
+  const sortedInitialState: {
+    isAscending: boolean;
+    sortedByTitle: boolean;
+    sortedByURL: boolean;
+    sortedByDate: boolean;
+  } = {
     isAscending: false,
     sortedByTitle: false,
     sortedByURL: false,
-    sortedByDate: false
+    sortedByDate: false,
   };
 
-  const [ sortedListStatus, setSortedListStatus ] = useState(sortedInitialState);
+  const [sortedListStatus, setSortedListStatus] = useState(sortedInitialState);
 
   return {
     sortedListStatus,
-    setSortedListStatus
+    setSortedListStatus,
   };
 };
 
@@ -20,20 +25,19 @@ const useFilterQuery = () => {
   const initialQueryValues = {
     type: "",
     translated: "",
-    liveStatus: "",
-    order: ""
+    liveStatus: "all",
+    order: "",
+    categories: "all",
   };
 
   const [query, setQuery] = useState(initialQueryValues);
 
   const setFilterQuery = (filterValues: any) => {
-    const { type, translated, liveStatus, order } = filterValues;
+    const { type, translated, liveStatus, order, categories } = filterValues;
     let filterQuery = "";
 
     const currentQuery = (pointer: string, values: string) => {
-      return filterQuery
-      ? filterQuery.concat(`&${pointer}=${values}`)
-      : `?${pointer}=${values}`;
+      return filterQuery ? filterQuery.concat(`&${pointer}=${values}`) : `?${pointer}=${values}`;
     };
 
     if (type) {
@@ -52,17 +56,22 @@ const useFilterQuery = () => {
       filterQuery = currentQuery("order", order);
     }
 
+    if (categories) {
+      filterQuery = currentQuery("categories", categories);
+    }
+
     return filterQuery;
   };
 
   const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
-    const { type, translated, liveStatus, order } = query;
+    const { type, translated, liveStatus, order, categories } = query;
     const orderMethod = isAscendent ? "asc" : "desc";
     const filterValues = {
       type: pointer === "type" ? filter : type,
       translated: pointer === "translated" ? filter : translated,
       liveStatus: pointer === "liveStatus" ? filter : liveStatus,
-      order: pointer === "order" ? `${filter}-${orderMethod}` : order
+      order: pointer === "order" ? `${filter}-${orderMethod}` : order,
+      categories: pointer === "categories" ? filter : categories,
     };
 
     setQuery(filterValues);
@@ -70,13 +79,14 @@ const useFilterQuery = () => {
     return filterValues;
   };
 
+  const resetFilterQuery = () => setQuery(initialQueryValues);
+
   return {
     setFiltersSelection,
-    setFilterQuery
+    setFilterQuery,
+    resetFilterQuery,
+    filterValues: query,
   };
 };
 
-export {
-  useSortedListStatus,
-  useFilterQuery
-};
+export { useSortedListStatus, useFilterQuery };

package/src/modules/Content/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useCallback, useState, useRef } from "react";
 import { connect } from "react-redux";
 import { useLocation } from "react-router-dom";
 
-import { useModal, useBulkSelection, useToast } from "@ax/hooks";
+import { useModal, useBulkSelection, useToast, useCategoryColors } from "@ax/hooks";
 import {
   IRootState,
   IPage,
@@ -12,6 +12,7 @@ import {
   IEmptyStateProps,
   ICheck,
   IGetSitePagesParams,
+  IColumn,
 } from "@ax/types";
 import { MainWrapper, Modal, TableList, ErrorToast, Toast, EmptyState } from "@ax/components";
 import { getFilteredStructuredData, isStructuredDataFromPage } from "@ax/helpers";
@@ -87,18 +88,43 @@ const Content = (props: IProps): JSX.Element => {
   const { isOpen: isNewOpen, toggleModal: toggleNewModal } = useModal();
   const { isOpen: isImporterOpen, toggleModal: toggleImporterModal } = useModal();
   const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
-  const { setFiltersSelection, setFilterQuery } = useFilterQuery();
+  const { setFiltersSelection, setFilterQuery, resetFilterQuery, filterValues } = useFilterQuery();
   const { state: locationState } = useLocation<{ isFromEditor: boolean }>();
 
   const currentFilter = getCurrentFilter(structuredData, filter);
   const checkFromPage = currentFilter ? currentFilter.fromPage : undefined;
   const isStructuredData = filter !== "unique-pages" && !checkFromPage;
+  const isGlobalPages = filter !== "unique-pages" && checkFromPage;
   const isDataEditable = !isStructuredData || (currentStructuredData && currentStructuredData.editable);
 
   const pagesIds = currentSitePages && currentSitePages.map((page: any) => page.id);
   const dataIds = currentDataContent && currentDataContent.map((data: any) => data.id);
   const contentIds = isStructuredData ? dataIds : pagesIds;
 
+  const categoryColumns =
+    currentStructuredData && currentStructuredData.schema
+      ? currentStructuredData.schema.fields.filter((field: any) => field.showList)
+      : [];
+
+  const defaultColumns: Record<string, IColumn> = {
+    type: { title: "Types", show: true },
+    live: { title: "Live", show: true },
+    status: { title: "Status", show: true },
+    translation: { title: "Trans.", show: true },
+    seo: { title: "SEO", show: true },
+  };
+
+  const extraColumns = categoryColumns.reduce((acc: Record<string, IColumn>, cur: any) => {
+    acc[cur.key] = { title: cur.title, show: false };
+    return acc;
+  }, {});
+
+  const filterColumns = { ...extraColumns, ...defaultColumns };
+
+  const initialColumns = isGlobalPages ? filterColumns : defaultColumns;
+
+  const [columnsState, setColumnsState] = useState(initialColumns);
+
   const {
     resetBulkSelection,
     selectedItems,
@@ -132,6 +158,8 @@ const Content = (props: IProps): JSX.Element => {
     setIsVisible: setIsVisibleRemovedToast,
   } = useToast();
 
+  const { categoryColors, addCategoryColors } = useCategoryColors();
+
   const getParams = useCallback(() => {
     const siteID = currentSiteInfo ? currentSiteInfo.id : null;
     const params = isStructuredData
@@ -176,7 +204,7 @@ const Content = (props: IProps): JSX.Element => {
       getOrderedSitePages(siteID, fullQuery);
     } else {
       const pageFilter = isStructuredDataPage ? filter : undefined;
-      getSitePages(params, pageFilter);
+      getSitePages(params, pageFilter, filterQuery);
     }
   };
 
@@ -198,7 +226,12 @@ const Content = (props: IProps): JSX.Element => {
     // eslint-disable-next-line
   }, [page, filter, currentFilterQuery, searchQuery]);
 
-  useEffect(() => setPage(firstPage), [filter]);
+  useEffect(() => {
+    setPage(firstPage);
+    const initialColumns = filter !== "unique-pages" ? filterColumns : defaultColumns;
+    setColumnsState(initialColumns);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filter]);
 
   useEffect(() => {
     if (!locationState || locationState.isFromEditor !== true) {
@@ -342,6 +375,11 @@ const Content = (props: IProps): JSX.Element => {
       sortedListStatus={sortedListStatus}
       filterItems={filterItems}
       isEditable={isDataEditable}
+      filterValues={filterValues}
+      categoryColumns={categoryColumns}
+      columns={columnsState}
+      setColumns={setColumnsState}
+      isGlobalPages={isGlobalPages}
     />
   );
 
@@ -445,6 +483,10 @@ const Content = (props: IProps): JSX.Element => {
           activatedTemplates={activatedTemplates}
           toggleToast={toggleRemovedToast}
           setRemovedPage={setRemovedPage}
+          categoryColumns={categoryColumns}
+          columns={columnsState}
+          categoryColors={categoryColors}
+          addCategoryColors={addCategoryColors}
         />
       );
     });
@@ -519,6 +561,11 @@ const Content = (props: IProps): JSX.Element => {
     ? { onClick: handleImport, title: "NEXT" }
     : { onClick: createContent, title: "ADD" };
 
+  const resetFilter = () => {
+    resetFilterQuery();
+    setCurrentFilterQuery("");
+  };
+
   return (
     <MainWrapper
       title={title}
@@ -529,7 +576,7 @@ const Content = (props: IProps): JSX.Element => {
       searchAction={setSearchQuery}
     >
       <S.ContentListWrapper>
-        <ContentFilters current={filter} dynamicValues={structuredData} />
+        <ContentFilters current={filter} dynamicValues={structuredData} resetFilter={resetFilter} />
         <S.TableWrapper>
           <ErrorToast />
           <TableList
@@ -599,7 +646,7 @@ interface IDispatchProps {
   setCurrentPageStatus(currentPageStatus: string | null): ISetCurrentPageStatusAction;
   setCurrentPageName(currentPageName: string): ISetCurrentPageNameAction;
   addTemplate(template: string): void;
-  getSitePages(params: IGetSitePagesParams, structuredData?: string | undefined): Promise<void>;
+  getSitePages(params: IGetSitePagesParams, structuredData?: string | undefined, filterQuery?: string): Promise<void>;
   updatePageStatus(ids: number[], status: string, updatePageStatus?: boolean): Promise<boolean>;
   deletePage(params?: ISavePageParams): any;
   setHistoryPush(page: string, isEditor: boolean): any;

package/src/modules/GlobalEditor/index.tsx

@@ -147,12 +147,8 @@ const GlobalEditor = (props: IProps) => {
 
   const handlePublishDraft = async () => {
     const { savePage } = props;
-
-    await savePage(false, null, true).then((isSaved: boolean) => {
-      if (isSaved) {
-        resetDirty();
-      }
-    });
+    const isSaved = await savePage(false, null, true);
+    if (isSaved) resetDirty();
   };
 
   const handleDiscardDraft = async () => {
@@ -254,11 +250,9 @@ const GlobalEditor = (props: IProps) => {
 
     const createDraft = isPublished && !hasDraft;
     const status = props.pageStatus === pageStatus.PUBLISHED && !createDraft ? publishPage : undefined;
-    await savePage(createDraft, status).then((isSaved: boolean) => {
-      if (isSaved) {
-        resetDirty();
-      }
-    });
+
+    const isSaved = await savePage(createDraft, status);
+    if (isSaved) resetDirty();
   };
 
   const goToPages = (path: string) => setRoute(path);

package/src/modules/GlobalSettings/Robots/Item/RobotsPanel/index.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+
+import { IDomainRobot } from "@ax/types";
+import { FloatingPanel, Button, FieldsBehavior } from "@ax/components";
+
+import * as S from "./style";
+
+const RobotsPanel = (props: IProps): JSX.Element => {
+  const { isOpen, toggleModal, item, setItemContent } = props;
+
+  const [value, setValue] = useState(item.content);
+
+  const editItemAction = () => {
+    setItemContent(value);
+    toggleModal();
+  };
+
+  const resetItem = () => setValue("");
+
+  const title = item.content ? "Update Robots.txt" : "Add Robots.txt";
+
+  const editButton = {
+    label: title,
+    action: editItemAction,
+  };
+
+  const placeholder = "User-agent: * \nDisallow: *";
+
+  return (
+    <FloatingPanel title={title} toggleModal={toggleModal} isOpen={isOpen}>
+      <S.Item>
+        <S.ItemHeader>You are editing</S.ItemHeader>
+        <S.ItemContent>{item.fullUrl}</S.ItemContent>
+      </S.Item>
+      <FieldsBehavior
+        fieldType="TextArea"
+        onChange={setValue}
+        value={value}
+        title="Robots.txt"
+        placeholder={placeholder}
+      />
+      <Button buttonStyle="text" type="button" icon="refresh" disabled={!value} onClick={resetItem}>
+        Reset to default
+      </Button>
+      <S.Footer>
+        <Button className="button" type="button" onClick={editButton.action}>
+          {editButton.label}
+        </Button>
+      </S.Footer>
+    </FloatingPanel>
+  );
+};
+
+interface IProps {
+  item: IDomainRobot;
+  isOpen: boolean;
+  toggleModal(): any;
+  setItemContent(content: string): void;
+}
+
+export default RobotsPanel;

package/src/modules/GlobalSettings/Robots/Item/RobotsPanel/style.tsx

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+
+const Item = styled.div`
+  background-color: ${(p) => p.theme.color.uiBarBackground};
+  padding: ${(p) => p.theme.spacing.s};
+  margin-bottom: ${(p) => p.theme.spacing.m};
+  border: 1px solid ${(p) => p.theme.color.uiLine};
+  box-sizing: border-box;
+  border-radius: ${(p) => p.theme.radii.s};
+`;
+
+const ItemHeader = styled.div`
+  ${(p) => p.theme.textStyle.headingXXS};
+  color: ${(p) => p.theme.color.textLowEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const ItemContent = styled.div`
+  ${(p) => p.theme.textStyle.fieldContent};
+  display: flex;
+  color: ${(p) => p.theme.color.textHighEmphasis};
+`;
+
+const Footer = styled.div`
+  position: absolute;
+  bottom: ${(p) => p.theme.spacing.m};
+  right: ${(p) => p.theme.spacing.m};
+`;
+
+export { Item, ItemHeader, ItemContent, Footer };

package/src/modules/GlobalSettings/Robots/Item/index.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { IDomainRobot } from "@ax/types";
+import { useModal } from "@ax/hooks";
+import RobotsPanel from "./RobotsPanel";
+
+import * as S from "./style";
+
+const Item = (props: IProps): JSX.Element => {
+  const { item, setItemContent } = props;
+
+  const { isOpen, toggleModal } = useModal();
+
+  const handleClick = () => toggleModal();
+
+  const buttonText = item.content.trim() !== "" ? "Edit robots.txt" : "Add robots.txt";
+
+  return (
+    <>
+      <S.Component onClick={handleClick}>
+        {item.fullUrl} <S.Button>{buttonText}</S.Button>
+      </S.Component>
+      <RobotsPanel item={item} isOpen={isOpen} toggleModal={toggleModal} setItemContent={setItemContent} />
+    </>
+  );
+};
+
+interface IProps {
+  item: IDomainRobot;
+  setItemContent(content: string): void;
+}
+
+export default Item;

package/src/modules/GlobalSettings/Robots/Item/style.tsx

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+
+const Component = styled.div`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: ${(p) => p.theme.spacing.l};
+  background: ${(p) => p.theme.color.uiBackground02};
+  border: 1px solid transparent;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  padding: 0 ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.theme.radii.s};
+  box-shadow: ${(p) => p.theme.shadow.shadowS};
+  text-align: left;
+  cursor: pointer;
+`;
+
+const Button = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  display: flex;
+  color: ${(p) => p.theme.color.interactive01};
+  margin-left: auto;
+`;
+
+export { Component, Button };

package/src/modules/GlobalSettings/Robots/index.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+
+import { IDomainRobot, INavItem, IRootState } from "@ax/types";
+import { appActions } from "@ax/containers/App";
+import { domainsActions } from "@ax/containers/Domains";
+import { MainWrapper, ErrorToast, Nav, Loading } from "@ax/components";
+import { RouteLeavingGuard } from "@ax/guards";
+import { useIsDirty } from "@ax/hooks";
+import Item from "./Item";
+
+import * as S from "./style";
+
+const Robots = (props: IProps): JSX.Element => {
+  const {
+    isSaving,
+    isLoading,
+    navItems,
+    currentNavItem,
+    robots,
+    getDomainsRobots,
+    setHistoryPush,
+    updateDomainRobots,
+  } = props;
+
+  const [robotItems, setRobotItems] = useState(robots);
+  const { isDirty, setIsDirty } = useIsDirty(robotItems);
+
+  useEffect(() => {
+    getDomainsRobots();
+  }, [getDomainsRobots]);
+
+  useEffect(() => {
+    setRobotItems(robots);
+  }, [robots]);
+
+  const handleSave = async () => {
+    const isSaved = await updateDomainRobots(robotItems);
+    if (isSaved) {
+      setIsDirty(false);
+    }
+  };
+
+  const rightButtonProps = {
+    label: isSaving ? "Saving" : "Save",
+    disabled: isSaving,
+    action: () => handleSave(),
+  };
+
+  const handleMenuClick = (path: string) => {
+    setHistoryPush(path);
+  };
+
+  const mapItemList = (items: IDomainRobot[]) =>
+    Array.isArray(items) &&
+    items.map((item: IDomainRobot, i: number) => {
+      const handleSetItem = (newContent: string) => {
+        const newItems = [...robotItems];
+        newItems[i].content = newContent;
+        setRobotItems(newItems);
+      };
+
+      return <Item key={`${item.path}${i}`} item={item} setItemContent={handleSetItem} />;
+    });
+
+  const setRoute = (path: string) => setHistoryPush(path);
+  const modalText = (
+    <>
+      Some robots <strong>are not saved</strong>.{" "}
+    </>
+  );
+
+  return (
+    <>
+      <RouteLeavingGuard when={isDirty} action={setRoute} text={modalText} />
+      <MainWrapper backLink={false} title="SEO Settings" rightButton={rightButtonProps}>
+        <S.Wrapper>
+          <Nav current={currentNavItem} items={navItems} onClick={handleMenuClick} />
+          <S.ContentWrapper>
+            <ErrorToast />
+            <S.Title>Robots.txt editor</S.Title>
+            <S.Description>
+              You can edit your robots.txt files to show search engines which pages on your site to track.
+            </S.Description>
+            {isLoading ? <Loading /> : <S.Table>{robotItems && mapItemList(robotItems)}</S.Table>}
+          </S.ContentWrapper>
+        </S.Wrapper>
+      </MainWrapper>
+    </>
+  );
+};
+
+const mapStateToProps = (state: IRootState) => ({
+  isSaving: state.app.isSaving,
+  isLoading: state.app.isLoading,
+  robots: state.domains.robots,
+});
+
+const mapDispatchToProps = {
+  setHistoryPush: appActions.setHistoryPush,
+  getDomainsRobots: domainsActions.getDomainsRobots,
+  updateDomainRobots: domainsActions.updateDomainsRobots,
+};
+interface IRobotsProps {
+  isSaving: boolean;
+  isLoading: boolean;
+  navItems: INavItem[];
+  currentNavItem: INavItem;
+  robots: IDomainRobot[];
+}
+
+interface IDispatchProps {
+  getDomainsRobots(): void;
+  setHistoryPush(path: string, isEditor?: boolean): void;
+  updateDomainRobots(robots: IDomainRobot[]): Promise<boolean>;
+}
+
+type IProps = IRobotsProps & IDispatchProps;
+
+export default connect(mapStateToProps, mapDispatchToProps)(Robots);

package/src/modules/GlobalSettings/Robots/style.tsx

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  display: flex;
+  height: 100%;
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+  width: 100%;
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+const Table = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: ${(p) => p.theme.spacing.m};
+`;
+
+const Title = styled.div`
+  ${(p) => p.theme.textStyle.headingXS};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const Description = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+`;
+
+export { Wrapper, ContentWrapper, Table, Title, Description };

package/src/modules/GlobalSettings/index.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Switch, Route } from "react-router-dom";
+
+import Robots from "./Robots";
+
+const navItems = [
+  {
+    title: "Robots.txt Editor",
+    path: "/settings/robots",
+    component: Robots,
+  },
+];
+
+const GlobalSettings = (): JSX.Element => {
+  return (
+    <Switch>
+      {navItems.map((item, index) => (
+        <Route exact path={item.path} key={index}>
+          {React.createElement(item.component, { navItems, currentNavItem: item }, null)}
+        </Route>
+      ))}
+    </Switch>
+  );
+};
+
+export default GlobalSettings;

package/src/modules/PageEditor/index.tsx

@@ -154,11 +154,8 @@ const PageEditor = (props: IProps) => {
 
   const handlePublishDraft = async () => {
     const { savePage } = props;
-    await savePage(false, null, true).then((isSaved: boolean) => {
-      if (isSaved) {
-        resetDirty();
-      }
-    });
+    const isSaved = await savePage(false, null, true);
+    if (isSaved) resetDirty();
   };
 
   const handleDiscardDraft = async () => {