@griddo/ax 1.59.8 → 1.60.0

package/src/modules/Redirects/RedirectPanel/index.tsx

@@ -0,0 +1,117 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import { IRedirect } from "@ax/types";
+import { Button, FieldsBehavior, FloatingPanel } from "@ax/components";
+import { redirectsActions } from "@ax/containers/Redirects";
+
+import * as S from "./style";
+
+const RedirectPanel = (props: IProps): JSX.Element => {
+  const {
+    isOpen,
+    toggleModal,
+    redirect,
+    isOpenedSecond,
+    toggleSecondaryPanel,
+    addRedirect,
+    updateRedirect,
+    formValues,
+    setFormValues,
+    currentFilter,
+  } = props;
+
+  const handleOldUrl = (newValue: string) => setFormValues({ ...formValues, from: newValue });
+
+  const handleNewUrl = (newValue: any) => {
+    const url = !newValue ? "" : newValue.linkTo ? newValue.linkToURL : newValue.href;
+    const pageId = newValue ? newValue.linkTo : undefined;
+    const toValue = { ...newValue, pageId, url };
+    setFormValues({ ...formValues, to: toValue });
+  };
+
+  const addItemAction = () => addRedirect();
+
+  const editItemAction = async () => {
+    const toPage = formValues.to.pageId ? formValues.to.pageId : formValues.to.url;
+    formValues.id && (await updateRedirect({ from: formValues.from, to: toPage }, formValues.id, currentFilter));
+    toggleModal();
+  };
+
+  const addButton = {
+    label: "Add Redirect",
+    action: addItemAction,
+    disabled: false,
+  };
+
+  const editButton = {
+    label: "Update Redirect",
+    action: editItemAction,
+    disabled: false,
+  };
+
+  const title = redirect ? "Update Redirect" : "Add Redirect";
+
+  return (
+    <FloatingPanel
+      title={title}
+      toggleModal={toggleModal}
+      isOpen={isOpen}
+      isOpenedSecond={isOpenedSecond}
+      handlePanel={toggleSecondaryPanel}
+    >
+      <FieldsBehavior
+        title="Old URL"
+        name="oldUrl"
+        fieldType="TextField"
+        value={formValues.from}
+        onChange={handleOldUrl}
+        autoComplete="redirect-old"
+      />
+      <FieldsBehavior
+        title="New URL"
+        name="newUrl"
+        fieldType="UrlField"
+        value={formValues.to}
+        onChange={handleNewUrl}
+        handlePanel={toggleSecondaryPanel}
+        inFloatingPanel={true}
+        autoComplete="redirect-new"
+      />
+      <S.Footer>
+        {redirect ? (
+          <Button className="button" type="button" onClick={editButton.action} disabled={editButton.disabled}>
+            {editButton.label}
+          </Button>
+        ) : (
+          <Button className="button" type="button" onClick={addButton.action} disabled={addButton.disabled}>
+            {addButton.label}
+          </Button>
+        )}
+      </S.Footer>
+    </FloatingPanel>
+  );
+};
+
+const mapDispatchToProps = {
+  updateRedirect: redirectsActions.updateRedirect,
+};
+interface ICategoryPanelProps {
+  isOpen: boolean;
+  isOpenedSecond: boolean;
+  toggleSecondaryPanel(): any;
+  toggleModal(): any;
+  redirect?: IRedirect;
+  formValues: IRedirect;
+  setFormValues(redirect: IRedirect): void;
+  currentFilter: string;
+}
+
+interface IDispatchProps {
+  addRedirect(force?: boolean): void;
+  updateRedirect(redirect: { from: string; to: string | number }, redirectID: number, filter?: string): Promise<void>;
+}
+
+type IProps = ICategoryPanelProps & IDispatchProps;
+
+export default connect(null, mapDispatchToProps)(RedirectPanel);

package/src/modules/Redirects/RedirectPanel/style.tsx

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+const Footer = styled.div`
+  position: absolute;
+  bottom: ${(p) => p.theme.spacing.m};
+  right: ${(p) => p.theme.spacing.m};
+`;
+
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+export { Footer, ModalContent };

package/src/modules/Redirects/index.tsx

@@ -0,0 +1,310 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { connect } from "react-redux";
+
+import { INavItem, IRedirect, IRootState } from "@ax/types";
+import { appActions } from "@ax/containers/App";
+import { redirectsActions } from "@ax/containers/Redirects";
+import { MainWrapper, ErrorToast, Nav, TableList, EmptyState, Modal, Toast } from "@ax/components";
+import { useBulkSelection, useModal, useToast } from "@ax/hooks";
+import BulkHeader from "./BulkHeader";
+import RedirectItem from "./RedirectItem";
+import RedirectPanel from "./RedirectPanel";
+
+import * as S from "./style";
+
+const Redirects = (props: IProps): JSX.Element => {
+  const {
+    navItems,
+    currentNavItem,
+    setHistoryPush,
+    getRedirects,
+    redirects,
+    totalItems,
+    deleteRedirect,
+    addRedirect,
+    currentSiteID,
+  } = props;
+
+  const itemsPerPage = 50;
+  const [page, setPage] = useState(1);
+  const [isScrolling, setIsScrolling] = useState(false);
+  const [isOpenedSecond, setIsOpenedSecond] = useState(false);
+  const { isOpen, toggleModal } = useModal();
+  const { isOpen: isOpenDelete, toggleModal: toggleModalDelete } = useModal();
+  const tableRef = useRef<HTMLDivElement>(null);
+  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
+  const [filterValues, setFilterValues] = useState({ sites: "all" });
+  const { isVisible, toggleToast, setIsVisible } = useToast();
+  const { isOpen: isOpenOverwrite, toggleModal: toggleOverwriteModal } = useModal();
+
+  const initState = {
+    from: "",
+    to: {
+      pageId: undefined,
+      url: "",
+    },
+  };
+
+  const [formValues, setFormValues] = useState<IRedirect>(initState);
+
+  const redIds = redirects && redirects.map((red: any) => red.id);
+  const isEmpty = redirects && redirects.length === 0;
+
+  const getParams = useCallback(() => {
+    const params = {
+      page,
+      itemsPerPage,
+      pagination: true,
+    };
+
+    return params;
+  }, [page]);
+
+  useEffect(() => {
+    const params = getParams();
+    const siteFilterQuery = currentSiteID ? `&sites=${currentSiteID}` : currentFilterQuery;
+    getRedirects(params, siteFilterQuery);
+    if (tableRef.current) {
+      tableRef.current.scrollTo(0, 0);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, currentFilterQuery]);
+
+  const {
+    resetBulkSelection,
+    selectedItems,
+    isSelected,
+    areItemsSelected,
+    checkState,
+    addToBulkSelection,
+    selectAllItems,
+  } = useBulkSelection(redIds);
+
+  const bulkDelete = async () => {
+    const deleted = await deleteRedirect(selectedItems.all);
+    if (deleted) {
+      toggleToast();
+    }
+    toggleModalDelete();
+  };
+
+  const unselectAllItems = () => resetBulkSelection();
+
+  const selectItems = () => (checkState.isAllSelected ? unselectAllItems() : handleSelectAll());
+
+  const handleSelectAll = () => selectAllItems();
+
+  const filterItems = async (filterPointer: string, filtersSelected: string) => {
+    let filterQuery = "";
+    if (filtersSelected !== "all") {
+      filterQuery = `&${filterPointer}=${filtersSelected}`;
+    }
+    setFilterValues({ sites: filtersSelected });
+    setCurrentFilterQuery(filterQuery);
+  };
+
+  const TableHeader = (
+    <BulkHeader
+      showBulk={areItemsSelected(redIds)}
+      bulkDelete={toggleModalDelete}
+      selectAllItems={handleSelectAll}
+      totalItems={totalItems}
+      selectItems={selectItems}
+      checkState={checkState}
+      isScrolling={isScrolling}
+      filterItems={filterItems}
+      filterValues={filterValues}
+      isSiteItem={!!currentSiteID}
+    />
+  );
+
+  const onScroll = (e: any) => setIsScrolling(e.target.scrollTop > 0);
+
+  const toggleSecondaryPanel = () => setIsOpenedSecond(!isOpenedSecond);
+
+  const rightButtonProps = {
+    label: "New Redirect",
+    action: () => handleModal(),
+  };
+
+  const handleMenuClick = (path: string) => {
+    setHistoryPush(path);
+  };
+
+  const handleModal = () => {
+    setFormValues(initState);
+    setIsOpenedSecond(false);
+    toggleModal();
+  };
+
+  const handleAddRedirect = async (force?: boolean) => {
+    const toPage = formValues.to.pageId ? formValues.to.pageId : formValues.to.url;
+    await addRedirect({ from: formValues.from, to: toPage }, toggleOverwriteModal, force, currentFilterQuery);
+    isOpen && toggleModal();
+  };
+
+  const addItemActionForce = () => {
+    handleAddRedirect(true);
+    toggleOverwriteModal();
+  };
+
+  const emptyStateProps = {
+    message: "To have a redirects on your site, create as many redirects as you want.",
+    button: "Create New redirect",
+    action: handleModal,
+  };
+
+  const pagination = {
+    setPage,
+    itemsPerPage,
+    totalItems,
+    currPage: page,
+  };
+
+  const toastProps = {
+    setIsVisible,
+    message: "Redirect deleted",
+  };
+
+  const mainDeleteModalAction = {
+    title: "Delete redirects",
+    onClick: bulkDelete,
+  };
+
+  const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleModalDelete };
+
+  const mainOverwriteModalAction = {
+    title: "Overwrite redirect",
+    onClick: addItemActionForce,
+  };
+
+  const secondaryOverwriteModalAction = { title: "Cancel", onClick: toggleOverwriteModal };
+
+  return (
+    <>
+      <MainWrapper backLink={false} title="SEO Settings" rightButton={rightButtonProps}>
+        <S.Wrapper>
+          <Nav current={currentNavItem} items={navItems} onClick={handleMenuClick} />
+          <S.ContentWrapper>
+            <ErrorToast />
+            <S.TitleWrapper>
+              <S.Title>URL Redirects Manager</S.Title>
+              <S.Description>
+                You can create 301 redirects to direct users and search engines from an old URL to a new one.
+              </S.Description>
+            </S.TitleWrapper>
+            <S.TableWrapper>
+              <TableList
+                tableHeader={TableHeader}
+                pagination={pagination}
+                onScroll={onScroll}
+                hasFixedHeader={true}
+                tableRef={tableRef}
+              >
+                {isEmpty ? (
+                  <S.EmptyWrapper>
+                    <EmptyState {...emptyStateProps} />
+                  </S.EmptyWrapper>
+                ) : (
+                  redirects.map((redirect: any) => {
+                    const isItemSelected = isSelected(redirect.id);
+                    return (
+                      <RedirectItem
+                        key={redirect.id}
+                        redirect={redirect}
+                        isSelected={isItemSelected}
+                        onChange={addToBulkSelection}
+                        toggleToast={toggleToast}
+                        setFormValues={setFormValues}
+                        formValues={formValues}
+                        addRedirect={handleAddRedirect}
+                        currentFilter={currentFilterQuery}
+                        isSiteItem={!!currentSiteID}
+                      />
+                    );
+                  })
+                )}
+              </TableList>
+            </S.TableWrapper>
+            {isVisible && <Toast {...toastProps} />}
+          </S.ContentWrapper>
+        </S.Wrapper>
+        {isOpen && (
+          <RedirectPanel
+            isOpen={isOpen}
+            isOpenedSecond={isOpenedSecond}
+            toggleModal={toggleModal}
+            toggleSecondaryPanel={toggleSecondaryPanel}
+            formValues={formValues}
+            setFormValues={setFormValues}
+            addRedirect={handleAddRedirect}
+            currentFilter={currentFilterQuery}
+          />
+        )}
+        <Modal
+          isOpen={isOpenDelete}
+          hide={toggleModalDelete}
+          title="Delete Redirects"
+          secondaryAction={secondaryDeleteModalAction}
+          mainAction={mainDeleteModalAction}
+          size="S"
+        >
+          <S.ModalContent>
+            Are you sure you want to delete the selected <strong>redirects</strong>? This action{" "}
+            <strong>cannot be undone</strong>.
+          </S.ModalContent>
+        </Modal>
+        <Modal
+          isOpen={isOpenOverwrite}
+          hide={toggleOverwriteModal}
+          title="Overwrite Redirect"
+          secondaryAction={secondaryOverwriteModalAction}
+          mainAction={mainOverwriteModalAction}
+          size="S"
+        >
+          <S.ModalContent>
+            This Redirect is already created. It will overwrite.
+            <br />
+            This action <strong>cannot be undone</strong>.
+          </S.ModalContent>
+        </Modal>
+      </MainWrapper>
+    </>
+  );
+};
+
+const mapStateToProps = (state: IRootState) => ({
+  redirects: state.redirects.redirects,
+  totalItems: state.redirects.totalItems,
+  currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
+});
+
+const mapDispatchToProps = {
+  setHistoryPush: appActions.setHistoryPush,
+  getRedirects: redirectsActions.getRedirects,
+  deleteRedirect: redirectsActions.deleteRedirect,
+  addRedirect: redirectsActions.addRedirect,
+};
+interface IRedirectsProps {
+  navItems: INavItem[];
+  currentNavItem: INavItem;
+  redirects: IRedirect[];
+  totalItems: number;
+  currentSiteID: number | null;
+}
+
+interface IDispatchProps {
+  setHistoryPush(path: string, isEditor?: boolean): void;
+  getRedirects(params: any, filters: string): void;
+  deleteRedirect(redirectID: number[]): Promise<boolean>;
+  addRedirect(
+    redirect: { from: string; to: string | number },
+    errorAction: () => void,
+    force?: boolean,
+    filter?: string
+  ): Promise<void>;
+}
+
+type IProps = IRedirectsProps & IDispatchProps;
+
+export default connect(mapStateToProps, mapDispatchToProps)(Redirects);

package/src/modules/Redirects/style.tsx

@@ -0,0 +1,52 @@
+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%;
+`;
+
+const TitleWrapper = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+  border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+`;
+
+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};
+`;
+
+const TableWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+  height: calc(100vh - ${(p) => p.theme.spacing.xl});
+  overflow: auto;
+`;
+
+const EmptyWrapper = styled.div`
+  height: ${(p) => `calc(100vh - (${p.theme.spacing.xl} * 3))`};
+  display: flex;
+  align-items: center;
+`;
+
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+
+  p {
+    margin-bottom: ${(p) => p.theme.spacing.m};
+  }
+`;
+
+export { Wrapper, ContentWrapper, TitleWrapper, Title, Description, TableWrapper, EmptyWrapper, ModalContent };

package/src/modules/Settings/SeoSettings/index.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Switch, Route } from "react-router-dom";
+import Redirects from "../../Redirects";
+
+const navItems = [
+  {
+    title: "SEO",
+    path: "/sites/settings/seo-settings",
+    component: Redirects,
+  },
+];
+
+const SeoSettings = (): 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 SeoSettings;

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

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { connect } from "react-redux";
 
 import { useModal } from "@ax/hooks";
-import { trimText } from "@ax/helpers";
+import { trimText, isDevelopment } from "@ax/helpers";
 import { ISite } from "@ax/types";
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
@@ -122,10 +122,14 @@ const SiteItem = (props: ISiteItemProps): JSX.Element => {
       site.name
     );
 
+  const siteTooltip = isDevelopment() && `Site id: ${site.id}`;
+
   return (
     <>
       <S.SiteWrapper key={site.id} onClick={setSite}>
-        <S.Thumbnail backgroundUrl={thumbnail} />
+        <Tooltip content={siteTooltip}>
+          <S.Thumbnail backgroundUrl={thumbnail} />
+        </Tooltip>
         <S.Wrapper>
           <S.Title>{siteName}</S.Title>
           <S.IconsWrapper>

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

@@ -77,7 +77,7 @@ const TableHeader = (props: IProps): JSX.Element => {
           )}
           {!isAllPages && activeColumns.includes("site") && (
             <S.HeaderWrapper>
-              <SiteFilter filterItems={filterItems} value={filterValues.filterSites} />
+              <SiteFilter filterItems={filterItems} value={filterValues} pointer="filterSites" />
             </S.HeaderWrapper>
           )}
           {activeColumns.includes("live") && (

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/index.tsx

@@ -51,7 +51,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
   const [deleteAllVersions, setDeleteAllVersions] = useState(false);
 
   const { locale } = lang;
-  const { title, pageLanguages, metaDescription, metaTitle, isIndexed, availableSites, structuredData } = globalPage;
+  const { title, pageLanguages, metaDescription, metaTitle, isIndexed, availableSites, structuredData, structuredDataContent } = globalPage;
 
   const publishedTooltip: Record<string, string> = {
     active: "Live",
@@ -305,8 +305,8 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
   const mainUnpublishAction = { title: "Ok", onClick: toggleUnpublishModal };
 
   const CategoryColumns = categoryColumns.map((col: any) => {
-    const type = globalPage.template[col.from];
-    const categories = type && type.map((cat: any) => cat.title);
+    const type = structuredDataContent[col.from];
+    const categories = type && type.map((cat: any) => cat.label || cat.title);
     return (
       activeColumns.includes(col.key) && (
         <CategoryCell

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

@@ -161,6 +161,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       deleted: false,
       include_draft: true,
       query: searchQuery,
+      format: "list",
     };
 
     return params;

package/src/modules/StructuredData/StructuredDataList/utils.tsx

@@ -49,7 +49,7 @@ const getOptionValues = (options: { global: IStructuredData[]; site: IStructured
     const type =
       !!currSchema.type && currSchema.type.value && currSchema.type.value && currSchema.type.value.toLowerCase();
 
-    const isDetailTemplate = component.includes("Detail");
+    const isDetailTemplate = currSchema.type.mode === "detail";
 
     !!currSchema.type &&
       isDetailTemplate &&

package/src/routes/multisite.tsx

@@ -33,4 +33,10 @@ export default [
     showInNav: true,
     icon: "Settings",
   },
+  {
+    path: `/settings/redirects`,
+    component: GlobalSettings,
+    name: "Settings",
+    showInNav: false,
+  },
 ];

package/src/routes/site.tsx

@@ -7,6 +7,7 @@ import ContentTypes from "./../modules/Settings/ContentTypes";
 import Settings from "./../modules/Settings";
 import CategoriesList from "./../modules/Categories/CategoriesList";
 import StructuredData from "./../modules/StructuredData";
+import SeoSettings from "./../modules/Settings/SeoSettings";
 
 const BASE_PATH = "/sites";
 
@@ -78,6 +79,11 @@ export default [
             component: ContentTypes,
             name: "Content types",
           },
+          {
+            path: `${BASE_PATH}/settings/seo-settings`,
+            component: SeoSettings,
+            name: "SEO Settings",
+          },
         ],
       },
     ],

package/src/types/index.tsx

@@ -9,6 +9,7 @@ import { IDataPacksState } from "@ax/containers/Settings/DataPacks/reducer";
 import { IUsersState } from "@ax/containers/Users/reducer";
 import { IGalleryState } from "@ax/containers/Gallery/reducer";
 import { IDomainsState } from "@ax/containers/Domains/reducer";
+import { IRedirectsState } from "@ax/containers/Redirects/reducer";
 
 export interface IBreadcrumbItem {
   editorID: number;
@@ -86,6 +87,8 @@ export interface IAPIPage {
   haveDraftPage: number | null;
   draftFromPage: number | null;
   liveChanged: boolean;
+  templateId: string;
+  structuredDataContent: Record<string, []>
 }
 
 export interface IPage extends IAPIPage {
@@ -181,6 +184,7 @@ export interface IRootState {
   users: IUsersState;
   gallery: IGalleryState;
   domains: IDomainsState;
+  redirects: IRedirectsState;
 }
 
 export interface IStyledProps {
@@ -267,6 +271,7 @@ export interface IGetSitePagesParams {
   query?: string;
   lang?: number;
   filterStructuredData?: string;
+  format?: string;
 }
 
 export interface IGetGlobalPagesParams {
@@ -279,6 +284,7 @@ export interface IGetGlobalPagesParams {
   filterStructuredData?: boolean | string;
   excludeSite?: number;
   liveStatus?: string;
+  format?: string;
 }
 
 export interface IGetStructuredDataParams {
@@ -673,6 +679,13 @@ export interface IDomainRobot {
   content: string;
 }
 
+export interface IRedirect {
+  id?: number;
+  from: string;
+  to: { pageId?: number; url: string; linkTo?: number; href?: string };
+  site?: { siteId: number | null; siteName: string | null };
+}
+
 export type Field =
   | "AsyncCheckGroup"
   | "AsyncSelect"