@griddo/ax 1.56.9 → 1.57.2

package/src/hooks/forms.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef, memo } from "react";
 import isEqual from "lodash.isequal";
 
 import { deepClone } from "@ax/helpers";
-import { cleanPageValues, getIsSavedData, setIsSavedData } from "@ax/forms";
+import { cleanPageValues, getIsSavedData } from "@ax/forms";
 
 const useEqualValue = (component: any) =>
   memo(component, (prevProps: any, newProps: any) => {
@@ -59,7 +59,7 @@ const useEqualStructured = (component: any) => {
   });
 };
 
-const usePrevious = (value: any): Record<string, unknown> | undefined => {
+const usePrevious = (value: any, isSaved?: boolean): Record<string, unknown> | undefined => {
   const stringValue = value && JSON.stringify(value);
   const ref = useRef();
   const isSavedData = getIsSavedData();
@@ -71,19 +71,24 @@ const usePrevious = (value: any): Record<string, unknown> | undefined => {
   }, [stringValue]);
 
   useEffect(() => {
-    if (isSavedData) {
+    if (isSavedData || isSaved) {
       ref.current = stringValue && JSON.parse(stringValue);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSavedData]);
+  }, [isSavedData, isSaved]);
 
   return ref.current;
 };
 
-const useIsDirty = (updatedValues: any): { isDirty: boolean } => {
+const useIsDirty = (
+  updatedValues: any,
+  isNew?: boolean
+): { isDirty: boolean; setIsDirty(state: boolean): void; resetDirty: any } => {
   const [isDirty, setIsDirty] = useState(false);
+  const [isSaved, setIsSaved] = useState(false);
+
+  const prevContent = usePrevious(updatedValues, isSaved);
 
-  const prevContent = usePrevious(updatedValues);
   const hasChanged = () => {
     if (prevContent && updatedValues) {
       const updatedValuesCloned = updatedValues && deepClone(updatedValues);
@@ -97,15 +102,20 @@ const useIsDirty = (updatedValues: any): { isDirty: boolean } => {
     }
   };
 
-  const isSavedData = getIsSavedData();
+  const resetDirty = () => {
+    setIsDirty(false);
+    setIsSaved(true);
+  };
 
   useEffect(() => {
-    if (prevContent && updatedValues) {
-      const isNewElem = prevContent.id !== updatedValues.id;
+    if (isNew) {
+      setIsDirty(true);
+    } else if (prevContent && updatedValues) {
       const isUpdated = hasChanged();
-      if (isUpdated && !isNewElem) {
-        isSavedData === "false" ? setIsDirty(true) : setIsDirty(false);
-        setIsSavedData(false);
+
+      if (isUpdated) {
+        setIsDirty(true);
+        setIsSaved(false);
       } else {
         setIsDirty(false);
       }
@@ -113,18 +123,7 @@ const useIsDirty = (updatedValues: any): { isDirty: boolean } => {
     // eslint-disable-next-line
   }, [JSON.stringify(updatedValues)]);
 
-  useEffect(() => {
-    if (updatedValues && updatedValues.id === undefined && isSavedData === "false") {
-      setIsDirty(true);
-    }
-
-    if (prevContent && !hasChanged() && isSavedData === "true") {
-      setIsDirty(false);
-    }
-    // eslint-disable-next-line
-  }, [isSavedData]);
-
-  return { isDirty };
+  return { isDirty, setIsDirty, resetDirty };
 };
 
 export { useEqualValue, useDebounce, useEqualStructured, usePrevious, useIsDirty };

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

@@ -19,7 +19,8 @@ const NavItem = (props: IProps) => {
 
   const { state, toggleSubmenu } = useContext(NavContext)!;
 
-  const isSelected = location && (location.pathname === path || location.pathname.includes(path)) ? "selected" : "";
+  const isSelected = location && (location.pathname === path || location.pathname.includes(path));
+  const isSelectedClass = isSelected ? "selected" : "";
 
   const hasSubmenu = routesGroups && routesGroups.length > 0;
 
@@ -40,10 +41,10 @@ const NavItem = (props: IProps) => {
   const DropdownClass = isOpened ? "inline" : "floating";
 
   return (
-    <S.Item key={name} type={type} isOpened={isOpened} isSubmenuOpen={state[name]}>
-      <S.NavLink onClick={handleClick} className={isSelected}>
+    <S.Item key={name} type={type} isOpened={isOpened} isSubmenuOpen={state[name]} active={isSelected}>
+      <S.NavLink onClick={handleClick} className={isSelectedClass}>
         <S.Icon>{icon && <Icon name={icon} size="24px" />}</S.Icon>
-        <S.LinkName>{name}</S.LinkName>
+        <S.LinkName active={isSelected || state[name]}>{name}</S.LinkName>
         {hasSubmenu && isOpened && (
           <S.Arrow>
             <Icon name={subMenuIcon} />
@@ -73,7 +74,11 @@ const NavItem = (props: IProps) => {
 
                     return (
                       <NavSubItem key={subI} active={isSelectedSubItem} type={type}>
-                        <S.NavLink onClick={goToSubLink}>{subLink.name}</S.NavLink>
+                        <S.NavLink onClick={goToSubLink}>
+                          <S.LinkName active={isSelected}>
+                            {subLink.name}
+                          </S.LinkName>
+                        </S.NavLink>
                       </NavSubItem>
                     );
                   })}

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

@@ -28,8 +28,7 @@ export const Dropdown = styled.ul<{ isSubmenu?: boolean; isSubmenuOpen: boolean;
     z-index: 1000;
     height: ${(p) => p.isSubmenu ? "auto" : "40px"};
     width: calc(${(p) => p.theme.spacing.xl} * 3);
-    padding-top: ${(p) => p.isSubmenu ? p.theme.spacing.s : "0"};
-    padding-bottom: ${(p) => p.isSubmenu ? p.theme.spacing.s : "0"};
+    padding: ${(p) => p.isSubmenu ? p.theme.spacing.s : "0"};
   }
 
   &.inline {
@@ -60,7 +59,13 @@ export const Arrow = styled.div`
   }
 `;
 
-export const Item = styled.li<{ type: string; isOpened: boolean; isSubmenuOpen: boolean }>`
+export const LinkName = styled.span<{ active: boolean }>`
+  white-space: nowrap;
+  overflow: hidden;
+  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"};
@@ -73,7 +78,7 @@ export const Item = styled.li<{ type: string; isOpened: boolean; isSubmenuOpen:
 
   svg {
     path {
-      fill: ${(p) => p.isSubmenuOpen ? p.theme.color.textHighEmphasisInverse : p.theme.color.textMediumEmphasisInverse };
+      fill: ${(p) => (p.isSubmenuOpen || p.active) ? p.theme.color.textHighEmphasisInverse : p.theme.color.textMediumEmphasisInverse };
     }
   }
 
@@ -81,6 +86,10 @@ export const Item = styled.li<{ type: string; isOpened: boolean; isSubmenuOpen:
     background-color: ${(p) => p.theme.color.overlayHoverDark};
     color: ${(p) => p.theme.color.textHighEmphasisInverse};
 
+    ${LinkName} {
+      color: ${(p) => p.theme.color.textHighEmphasisInverse};
+    }
+
     svg {
       path {
         fill: ${(p) => p.theme.color.textHighEmphasisInverse};
@@ -154,8 +163,3 @@ export const Icon = styled.div`
     fill: ${(p) => p.theme.color.textMediumEmphasisInverse};
   }
 `;
-
-export const LinkName = styled.span`
-  white-space: nowrap;
-  overflow: hidden;
-`;

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

@@ -125,43 +125,45 @@ const NavMenu = (props: IProps) => {
           )}
           <S.NavLink>{config.logo}</S.NavLink>
         </S.Home>
-        <S.List>
-          {config.routes &&
-            config.routes
-              .filter((route: IRouter) => route.showInNav)
-              .map(
-                (route: IRouter): JSX.Element => (
-                  <NavItem
-                    setHistoryPush={setHistoryPush}
-                    key={route.name}
-                    route={route}
-                    location={location}
-                    type={config.type}
-                    isOpened={isOpened}
-                  />
-                )
-              )}
-        </S.List>
-        <S.List bottom={true}>
-          {isSitePublished && (
-            <>
-              <NavItem setHistoryPush={setHistoryPush} route={siteRoute} type={config.type} isOpened={isOpened} />
-              <S.Separator />
-            </>
-          )}
-          {!isSite && (
-            <NavItem
-              setHistoryPush={setHistoryPush}
-              route={profileRoute}
-              type={config.type}
-              isOpened={isOpened}
-              location={location}
-            />
-          )}
-          <NavItem setHistoryPush={setHistoryPush} route={logoutRoute} type={config.type} isOpened={isOpened} />
-          <S.Separator />
-          <NavItem setHistoryPush={setHistoryPush} route={collapseRoute} type={config.type} isOpened={isOpened} />
-        </S.List>
+        <S.Lists>
+          <S.List>
+            {config.routes &&
+              config.routes
+                .filter((route: IRouter) => route.showInNav)
+                .map(
+                  (route: IRouter): JSX.Element => (
+                    <NavItem
+                      setHistoryPush={setHistoryPush}
+                      key={route.name}
+                      route={route}
+                      location={location}
+                      type={config.type}
+                      isOpened={isOpened}
+                    />
+                  )
+                )}
+          </S.List>
+          <S.List>
+            {isSitePublished && (
+              <>
+                <NavItem setHistoryPush={setHistoryPush} route={siteRoute} type={config.type} isOpened={isOpened} />
+                <S.Separator />
+              </>
+            )}
+            {!isSite && (
+              <NavItem
+                setHistoryPush={setHistoryPush}
+                route={profileRoute}
+                type={config.type}
+                isOpened={isOpened}
+                location={location}
+              />
+            )}
+            <NavItem setHistoryPush={setHistoryPush} route={logoutRoute} type={config.type} isOpened={isOpened} />
+            <S.Separator />
+            <NavItem setHistoryPush={setHistoryPush} route={collapseRoute} type={config.type} isOpened={isOpened} />
+          </S.List>
+        </S.Lists>
       </S.NavWrapper>
     </NavProvider>
   );

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

@@ -18,7 +18,7 @@ export const Home = styled.div<{ type: string; isSite: boolean; isOpened: boolea
   padding: ${(p) => `${p.theme.spacing.xs} 12px`};
   background-color: ${(p) =>
     p.type === "multisite" ? p.theme.color.uiMainMenuBackground : p.theme.color.uiBarBackground};
-  height: ${(p) => p.theme.spacing.xl};
+  height: calc(${(p) => p.theme.spacing.xxs} * 17);
   display: flex;
   align-items: center;
   justify-content: ${(p) => (p.isOpened ? "flex-start" : "center")};
@@ -106,10 +106,16 @@ export const NavWrapper = styled.nav<{ type: string; isOpened: boolean }>`
   }
 `;
 
-export const List = styled.ul<{ bottom?: boolean }>`
-  ${(p) => p.bottom && `margin-top: auto;`}
+export const Lists = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  padding-top: ${(p) => p.theme.spacing.s};
 `;
 
+export const List = styled.ul``;
+
 export const Separator = styled.li`
   border-bottom: 1px solid ${(p) => p.theme.color.uiLineInverse};
   margin: ${(p) => `${p.theme.spacing.s} 0`};

package/src/modules/Categories/CategoriesList/CategoryItem/index.tsx

@@ -116,7 +116,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
   );
 
   const translations = isTranslatable ? (
-    <FloatingMenu Button={FlagsButton} isWide={true}>
+    <FloatingMenu Button={FlagsButton}>
       {languageMenu()}
     </FloatingMenu>
   ) : (

package/src/modules/Categories/CategoriesList/CategoryNav/NavItem/index.tsx

@@ -26,12 +26,15 @@ const NavItem = (props: IProps): JSX.Element => {
       <S.Dropdown isOpen={isOpen}>
         {categories &&
           categories.map((category: IStructuredData, key: number) => {
-            const isSelected = current && category.id === current.id ? "selected" : "";
+            const isSelected = !!current && category.id === current.id;
+            const selectedClass = isSelected ? "selected" : "";
             const handleClick = () => onClick(category.id);
             return (
               <MenuItem key={key} onClick={handleClick}>
-                <NavLink to="#" className={isSelected}>
-                  {category.title}
+                <NavLink to="#" className={selectedClass}>
+                  <S.Link active={isSelected}>
+                    {category.title}
+                  </S.Link>
                 </NavLink>
               </MenuItem>
             );

package/src/modules/Categories/CategoriesList/CategoryNav/NavItem/style.tsx

@@ -31,4 +31,8 @@ const Dropdown = styled.ul<{isOpen: boolean}>`
   flex-direction: column;
 `;
 
-export { NavItemWrapper, NavLink, Title, Arrow, Dropdown };
+const Link = styled.div<{ active: boolean }>`
+    color: ${p => p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis};
+`;
+
+export { NavItemWrapper, NavLink, Title, Arrow, Dropdown, Link };

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

@@ -41,12 +41,15 @@ const ContentFilters = (props: IProps): JSX.Element => {
                   }
                 };
 
-                const isSelected = value === current ? "selected" : "";
+                const isSelected = value === current;
+                const selectedClass = isSelected ? "selected" : "";
 
                 return (
                   <MenuItem key={filterKey} onClick={handleClick}>
-                    <NavLink to="#" className={isSelected}>
-                      {name}
+                    <NavLink to="#" className={selectedClass}>
+                      <S.Link active={isSelected}>
+                        {name}
+                      </S.Link>
                     </NavLink>
                   </MenuItem>
                 );

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

@@ -2,6 +2,7 @@ import styled from "styled-components";
 
 export const Heading = styled.li`
   ${p => p.theme.textStyle.headingXXS};
+  color: ${p => p.theme.color.textLowEmphasis};
   margin-bottom: ${p => p.theme.spacing.xs};
   cursor: default;
 
@@ -33,6 +34,10 @@ export const SubItem = styled.li`
   }
 `;
 
-export const Item = styled.article`
+export const Item = styled.div`
   margin-bottom: ${p => p.theme.spacing.m};
 `;
+
+export const Link = styled.div<{ active: boolean }>`
+    color: ${p => p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis};
+`;

package/src/modules/Content/HeaderMenus/Live/index.tsx

@@ -77,7 +77,7 @@ const Live = (props: ILiveProps): JSX.Element => {
   );
 
   return (
-    <FloatingMenu isWide={true} Button={Header} position="left" closeOnSelect={false}>
+    <FloatingMenu Button={Header} position="left" closeOnSelect={false}>
       <ListTitle>Filter by status</ListTitle>
       <S.ChecksWrapper>
         <CheckGroup options={options} value={selectedValue} onChange={setQuery} selectAllOption={selectAllOption} />

package/src/modules/Content/HeaderMenus/Name/index.tsx

@@ -28,12 +28,18 @@ const NameHeader = ({ sortItems, sortedState }: INameHeaderProps) => {
   );
 
   return (
-    <FloatingMenu isWide={true} Button={Header} position="left">
+    <FloatingMenu Button={Header} position="left">
       <ListTitle>Name Sorting</ListTitle>
-      <ListItem onClick={sortAscendingName}>Ascendent</ListItem>
-      <ListItem onClick={sortDescendingName}>Descendent</ListItem>
+      <ListItem isSelected={sortedByTitle && isAscending} onClick={sortAscendingName}>
+        Ascendent
+      </ListItem>
+      <ListItem isSelected={sortedByTitle && !isAscending} onClick={sortDescendingName}>
+        Descendent
+      </ListItem>
       <ListTitle>URL Sorting</ListTitle>
-      <ListItem onClick={sortAscendingURL}>Ascendent</ListItem>
+      <ListItem isSelected={sortedByURL} onClick={sortAscendingURL}>
+        Ascendent
+      </ListItem>
     </FloatingMenu>
   );
 };

package/src/modules/Content/HeaderMenus/Status/index.tsx

@@ -27,10 +27,14 @@ const Status = ({ sortItems, sortedState }: IStatusProps) => {
   );
 
   return (
-    <FloatingMenu isWide={true} Button={Header} position="left">
+    <FloatingMenu Button={Header} position="left">
       <ListTitle>Sort by modified date</ListTitle>
-      <ListItem onClick={sortMostRecentModifiedDate}>Most recent</ListItem>
-      <ListItem onClick={sortOldestModifiedDate}>Oldest</ListItem>
+      <ListItem isSelected={sortedByDate && !isAscending} onClick={sortMostRecentModifiedDate}>
+        Most recent
+      </ListItem>
+      <ListItem isSelected={sortedByDate && isAscending} onClick={sortOldestModifiedDate}>
+        Oldest
+      </ListItem>
     </FloatingMenu>
   );
 };

package/src/modules/Content/HeaderMenus/Translations/index.tsx

@@ -46,7 +46,7 @@ const Translations = ({ filterItems }: ITranslationsProps) => {
   );
 
   return (
-    <FloatingMenu isWide={true} Button={Header} position="left" closeOnSelect={true} isCheckGroup={true}>
+    <FloatingMenu Button={Header} position="left" closeOnSelect={true} isCheckGroup={true}>
       <ListTitle>Filter by translations</ListTitle>
       <S.ChecksWrapper>
         <CheckGroup options={filters} value={selectedValue} onChange={setQuery} selectAllOption={selectAllOption} />

package/src/modules/Content/HeaderMenus/Types/index.tsx

@@ -51,7 +51,7 @@ const Types = ({ filterItems }: ITypesProps) => {
   );
 
   return (
-    <FloatingMenu isWide={true} Button={Header} position="left" closeOnSelect={true} isCheckGroup={true}>
+    <FloatingMenu Button={Header} position="left" closeOnSelect={true} isCheckGroup={true}>
       <ListTitle>Filter by types</ListTitle>
       <S.ChecksWrapper>
         <CheckGroup

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

@@ -101,11 +101,14 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
       <S.Column>
         {filters.map((item: any, i: number) => {
           const displayFilteredOptions = () => state.selectedType !== item.type && displayOptions(item);
-          const isSelected = item.value === state.selectedType ? "selected" : "";
+          const isSelected = item.value === state.selectedType;
+          const selectedClass = isSelected ? "selected" : "";
           return (
             <MenuItem key={`${item.type}${i}`}>
-              <S.NavLink onClick={displayFilteredOptions} className={isSelected}>
-                {item.label}
+              <S.NavLink onClick={displayFilteredOptions} className={selectedClass}>
+                <S.Link active={isSelected}>
+                  {item.label}
+                </S.Link>
               </S.NavLink>
             </MenuItem>
           );

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

@@ -48,3 +48,7 @@ export const Thumbnail = styled.div<{backgroundUrl: string | boolean}>`
   min-width: calc(${p => p.theme.spacing.l} * 3);
   height: 100%;
 `;
+
+export const Link = styled.div<{ active: boolean }>`
+    color: ${p => p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis};
+`;

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

@@ -96,7 +96,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
   const SeoTitleMenu = () => {
     if (page.metaTitle) {
       return (
-        <FloatingMenu isWide={true} Button={SeoItems.Title}>
+        <FloatingMenu Button={SeoItems.Title}>
           <S.FloatingSeo>{page.metaTitle}</S.FloatingSeo>
         </FloatingMenu>
       );
@@ -107,7 +107,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
   const SeoDescriptionMenu = () => {
     if (page.metaDescription) {
       return (
-        <FloatingMenu isWide={true} Button={SeoItems.Description}>
+        <FloatingMenu Button={SeoItems.Description}>
           <S.FloatingSeo>{page.metaDescription}</S.FloatingSeo>
         </FloatingMenu>
       );
@@ -382,7 +382,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
           <S.ModDate>{`Mod. ${getHumanLastModifiedDate(page.modified)}`}</S.ModDate>
         </S.StatusCell>
         <S.TransCell role="cell">
-          <FloatingMenu Button={FlagsButton} isWide={true}>
+          <FloatingMenu Button={FlagsButton}>
             {languageMenu()}
           </FloatingMenu>
         </S.TransCell>

package/src/modules/Content/index.tsx

@@ -169,9 +169,11 @@ const Content = (props: IProps): JSX.Element => {
   const getPages = (params: any, siteID: number, filterQuery?: any) => {
     const isStructuredDataPage = filter !== "unique-pages";
     if (filterQuery && !isStructuredDataPage) {
-      const { deleted, page, itemsPerPage } = params;
-      const query = filterQuery.concat(`&deleted=${deleted}&page=${page}&itemsPerPage=${itemsPerPage}`);
-      getOrderedSitePages(siteID, query);
+      const { deleted, page, itemsPerPage, query } = params;
+      const fullQuery = filterQuery.concat(
+        `&deleted=${deleted}&page=${page}&itemsPerPage=${itemsPerPage}&query=${query}`
+      );
+      getOrderedSitePages(siteID, fullQuery);
     } else {
       const pageFilter = isStructuredDataPage ? filter : undefined;
       getSitePages(params, pageFilter);