@griddo/ax 11.4.12-rc.0 → 11.4.13-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.4.12-rc.0",
+  "version": "11.4.13-rc.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -220,5 +220,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "738fb7222de3e13dd8a31eeba849450735e090a7"
+  "gitHead": "ce34b7c15cd11a725be71a317afd8bde37880bb2"
 }

package/src/api/utils.tsx

@@ -108,7 +108,7 @@ export const sendInitialRequest = async (
     const response = await axios(config);
     return response;
   } catch (e) {
-    return e.response || { data: { code: e.code || "unknown", message: e.message || "Platform error" } };
+    return e.response;
   }
 };
 
@@ -146,7 +146,7 @@ export const sendRequest = async (
     // return response;
     return await axios(requestConfig);
   } catch (e) {
-    return e.response || { data: { code: e.code || "unknown", message: e.message || "Platform error" } };
+    return e.response;
   }
 };
 
@@ -174,7 +174,7 @@ export const sendUploadRequest = async (
 
     return await axios(requestConfig);
   } catch (e) {
-    return e.response || { data: { code: e.code || "unknown", message: e.message || "Platform error" } };
+    return e.response;
   }
 };
 

package/src/components/MainWrapper/index.tsx

@@ -1,7 +1,5 @@
 import React from "react";
 import { IErrorItem, ILanguage } from "@ax/types";
-import { useNetworkStatus } from "@ax/hooks";
-import { Notification } from "@ax/components";
 
 import AppBar from "./AppBar";
 
@@ -10,19 +8,11 @@ import * as S from "./style";
 const MainWrapper = (props: IWrapperProps): JSX.Element => {
   const { children, fixedAppBar, fullWidth, hasAnimation } = props;
 
-  const { isOnline } = useNetworkStatus();
-
   return (
     <S.Wrapper fixedAppBar={fixedAppBar} data-testid="main-wrapper">
       {hasAnimation && <S.BackgroundAnimation />}
       <AppBar {...props} />
       <S.Main fullWidth={fullWidth} data-testid="main-component" id="main-component">
-        {!isOnline && (
-          <Notification
-            type="error"
-            text="You are offline. Please, check your internet connection. Changes you make may not be saved."
-          />
-        )}
         {children}
       </S.Main>
     </S.Wrapper>

package/src/helpers/requests.tsx

@@ -1,3 +1,4 @@
+import { setError } from "@ax/containers/App/actions";
 import { Dispatch } from "redux";
 
 const isReqOk = (reqStatus: number) => reqStatus >= 200 && reqStatus < 400;
@@ -14,6 +15,15 @@ function handleRequest(
 
     const response = await callback();
 
+    if (!response) {
+      dispatch(
+        setError({
+          text: "You are offline. Please, check your internet connection. Changes you make may not be saved.",
+        })
+      );
+      return false;
+    }
+
     const responseArr = Array.isArray(response) ? response : [response];
 
     let result = true;

package/src/hooks/index.tsx

@@ -7,7 +7,6 @@ import { useWindowSize } from "./window";
 import { useOnMessageReceivedFromIframe, useOnMessageReceivedFromOutside } from "./iframe";
 import { usePermission, useGlobalPermission } from "./users";
 import { useResizable } from "./resize";
-import { useNetworkStatus } from "./network";
 
 export {
   useModal,
@@ -29,5 +28,4 @@ export {
   useGlobalPermission,
   useOnMessageReceivedFromIframe,
   useOnMessageReceivedFromOutside,
-  useNetworkStatus,
 };

package/src/modules/App/Routing/NavMenu/NavItem/index.tsx

@@ -53,7 +53,9 @@ const NavItem = (props: IProps) => {
         )}
       </S.NavLink>
       <S.Dropdown isSubmenu={hasSubmenu} isSubmenuOpen={state[name]} className={DropdownClass} type={type}>
-        <S.Heading>{name}</S.Heading>
+        <S.Heading onClick={handleClick}>
+          <div>{name}</div>
+        </S.Heading>
         {routesGroups &&
           routesGroups.map((subGroup: any, groupI: any) => (
             <React.Fragment key={groupI}>

package/src/modules/App/Routing/NavMenu/NavItem/style.tsx

@@ -2,7 +2,10 @@ import styled from "styled-components";
 
 export const Heading = styled.li`
   ${(p) => p.theme.textStyle.headingXXS};
-  cursor: default;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
 `;
 
 export const Dropdown = styled.ul<{ isSubmenu?: boolean; isSubmenuOpen: boolean; type: string }>`
@@ -18,6 +21,7 @@ export const Dropdown = styled.ul<{ isSubmenu?: boolean; isSubmenuOpen: boolean;
 
   ${Heading} {
     margin-bottom: ${(p) => (p.isSubmenu ? p.theme.spacing.xs : "0")};
+    cursor: ${(p) => (p.isSubmenu ? "default" : "pointer")};
   }
 
   &.floating {
@@ -63,23 +67,24 @@ export const Arrow = styled.div`
 export const LinkName = styled.span<{ active: boolean }>`
   white-space: nowrap;
   overflow: hidden;
-  color: ${(p) => p.active ? p.theme.color.textHighEmphasisInverse : p.theme.color.textMediumEmphasisInverse};
+  color: ${(p) => (p.active ? p.theme.color.textHighEmphasisInverse : p.theme.color.textMediumEmphasisInverse)};
 `;
 
 export const Item = styled.li<{ type: string; isOpened: boolean; isSubmenuOpen: boolean; active: boolean }>`
   position: relative;
-  margin-left: ${(p) => p.isSubmenuOpen ? "0" : p.theme.spacing.s};
-  margin-right: ${(p) => p.isOpened && !p.isSubmenuOpen ? p.theme.spacing.s : "0"};
-  padding-left: ${(p) => p.isSubmenuOpen ? p.theme.spacing.s : "0"};
-  padding-right: ${(p) => p.isOpened && !p.isSubmenuOpen ? "0" : p.theme.spacing.s};
-  border-radius: ${(p) => p.isOpened ? p.theme.radii.s : `${p.theme.radii.s} 0 0 ${p.theme.radii.s}`};
-  background-color: ${(p) => p.isSubmenuOpen ? p.theme.color.overlayHoverDark : "transparent" };
-  color: ${(p) => p.isSubmenuOpen ? p.theme.color.textHighEmphasisInverse : "inherit" };
+  margin-left: ${(p) => (p.isSubmenuOpen ? "0" : p.theme.spacing.s)};
+  margin-right: ${(p) => (p.isOpened && !p.isSubmenuOpen ? p.theme.spacing.s : "0")};
+  padding-left: ${(p) => (p.isSubmenuOpen ? p.theme.spacing.s : "0")};
+  padding-right: ${(p) => (p.isOpened && !p.isSubmenuOpen ? "0" : p.theme.spacing.s)};
+  border-radius: ${(p) => (p.isOpened ? p.theme.radii.s : `${p.theme.radii.s} 0 0 ${p.theme.radii.s}`)};
+  background-color: ${(p) => (p.isSubmenuOpen ? p.theme.color.overlayHoverDark : "transparent")};
+  color: ${(p) => (p.isSubmenuOpen ? p.theme.color.textHighEmphasisInverse : "inherit")};
   margin-bottom: ${(p) => p.theme.spacing.xxs};
 
   svg {
     path {
-      fill: ${(p) => (p.isSubmenuOpen || p.active) ? p.theme.color.textHighEmphasisInverse : p.theme.color.textMediumEmphasisInverse };
+      fill: ${(p) =>
+        p.isSubmenuOpen || p.active ? p.theme.color.textHighEmphasisInverse : p.theme.color.textMediumEmphasisInverse};
     }
   }
 
@@ -120,7 +125,7 @@ export const Item = styled.li<{ type: string; isOpened: boolean; isSubmenuOpen:
     cursor: pointer;
 
     &.selected {
-      background-color: ${(p) => p.isSubmenuOpen ? "transparent" : p.theme.color.overlayPressedDark };
+      background-color: ${(p) => (p.isSubmenuOpen ? "transparent" : p.theme.color.overlayPressedDark)};
       color: ${(p) => p.theme.color.textHighEmphasisInverse};
 
       path {

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

@@ -113,9 +113,9 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
   const isTranslated = pageLanguages.length > 1;
   const activeColumns = columns.filter((col) => col.show).map((col) => col.id);
   const API_URL = process.env.GRIDDO_API_URL || process.env.REACT_APP_API_ENDPOINT;
-  const isPublished = liveStatus.status === pageStatus.PUBLISHED || liveStatus.status === pageStatus.UPLOAD_PENDING;
+  const isPublished = liveStatus?.status === pageStatus.PUBLISHED || liveStatus?.status === pageStatus.UPLOAD_PENDING;
   const isAllowedToDelete = (isPublished && isAllowedToDeletePublishedPage) || (!isPublished && isAllowedToDeletePage);
-  const isScheduledPub = !!publicationScheduled && (liveStatus.status === pageStatus.SCHEDULED || haveDraftPage);
+  const isScheduledPub = !!publicationScheduled && (liveStatus?.status === pageStatus.SCHEDULED || haveDraftPage);
 
   const publishedTooltip: Record<string, string> = {
     active: "Live",
@@ -408,7 +408,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     action: viewPage,
   };
 
-  const publishAction = getPublishItem(page.liveStatus.status, canBeUnpublished);
+  const publishAction = getPublishItem(page.liveStatus?.status, canBeUnpublished);
 
   menuOptions = publishAction && isAllowedToPublishPages ? [publishAction, ...menuOptions] : menuOptions;
 
@@ -432,7 +432,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
   menuOptions = page.haveDraftPage ? [...editOptions, ...menuOptions] : menuOptions;
 
-  menuOptions = page.liveStatus.status === pageStatus.PUBLISHED ? [viewOption, ...menuOptions] : menuOptions;
+  menuOptions = page.liveStatus?.status === pageStatus.PUBLISHED ? [viewOption, ...menuOptions] : menuOptions;
 
   const GlobalMark = () => (
     <Tooltip content="Global Page">
@@ -467,7 +467,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
   const mainCopyModalAction = { title: "Copy page", onClick: copyToOtherSite, disabled: !site };
 
-  const getLiveStatus = () => (isScheduledPub ? "scheduled" : haveDraftPage ? "modified" : liveStatus.status);
+  const getLiveStatus = () => (isScheduledPub ? "scheduled" : haveDraftPage ? "modified" : liveStatus?.status);
 
   const mainUnpublishAction = { title: "Ok", onClick: toggleUnpublishModal };
 

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

@@ -268,12 +268,12 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
     });
   }
 
-  const publishAction = getPublishItem(globalPage.liveStatus.status);
+  const publishAction = getPublishItem(globalPage.liveStatus?.status);
   menuOptions = publishAction && isAllowedToPublishPages ? [publishAction, ...menuOptions] : menuOptions;
 
   menuOptions = globalPage.haveDraftPage ? [...editOptions, ...menuOptions] : menuOptions;
 
-  menuOptions = globalPage.liveStatus.status === pageStatus.PUBLISHED ? [viewOption, ...menuOptions] : menuOptions;
+  menuOptions = globalPage.liveStatus?.status === pageStatus.PUBLISHED ? [viewOption, ...menuOptions] : menuOptions;
 
   const mainDuplicateModalAction = {
     title: "Duplicate",

package/src/hooks/network.tsx

@@ -1,31 +0,0 @@
-import { useEffect, useState } from "react";
-
-const useNetworkStatus = () => {
-  const [isOnline, setOnline] = useState<boolean>(true);
-
-  const updateNetworkStatus = () => {
-    setOnline(navigator.onLine);
-  };
-
-  //   sometimes, the load event does not trigger on some browsers, that is why manually calling updateNetworkStatus on initial mount
-  useEffect(() => {
-    updateNetworkStatus();
-  }, []);
-
-  useEffect(() => {
-    window.addEventListener("load", updateNetworkStatus);
-    window.addEventListener("online", updateNetworkStatus);
-    window.addEventListener("offline", updateNetworkStatus);
-
-    return () => {
-      window.removeEventListener("load", updateNetworkStatus);
-      window.removeEventListener("online", updateNetworkStatus);
-      window.removeEventListener("offline", updateNetworkStatus);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [navigator.onLine]);
-
-  return { isOnline };
-};
-
-export { useNetworkStatus };