@griddo/ax 1.69.9 → 1.71.0

package/src/modules/StructuredData/Form/ConnectedField/index.tsx

@@ -11,7 +11,7 @@ import * as S from "./style";
 const ConnectedField = (props: IProps) => {
   const { field, site, form, fieldKey, updateFormValue, disabled, errors, deleteError, theme } = props;
 
-  const value = form.content && form.content[fieldKey];
+  const value = form?.content && form.content[fieldKey];
   const error = errors.find((err: any) => err.key === field.key);
 
   const handleChange = (newValue: any) => updateFormValue({ [fieldKey]: newValue });
@@ -22,7 +22,7 @@ const ConnectedField = (props: IProps) => {
   let innerFields: JSX.Element[] = [];
 
   if (isConditional || isArrayGroup) {
-    innerFields = getStructuredDataInnerFields(field.fields, form.content, updateFormValue, theme, errors);
+    innerFields = getStructuredDataInnerFields(field.fields, form?.content, updateFormValue, theme, errors);
   }
 
   const fieldProps = {
@@ -37,6 +37,7 @@ const ConnectedField = (props: IProps) => {
     error,
     deleteError,
     theme,
+    delayed: false,
   };
 
   return (

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

@@ -40,12 +40,11 @@ const Form = (props: IProps) => {
     validated,
     validateForm,
     currentStructuredDataId,
-    resetForm,
     skipReviewOnPublish,
   } = props;
 
-  const [isNewStructuredData, setIsNewStructuredData] = useState(!form.id);
-  const { isDirty, resetDirty } = useIsDirty(form);
+  const [isNewStructuredData, setIsNewStructuredData] = useState(!currentStructuredDataId);
+  const { isDirty, resetDirty, setIsDirty } = useIsDirty(form);
 
   const { fields } = schema;
 
@@ -60,17 +59,25 @@ const Form = (props: IProps) => {
   const theme = getDefaultTheme();
 
   useEffect(() => {
-    resetForm();
-    currentStructuredDataId && getDataContent(currentStructuredDataId);
+    const handleGetContent = async (dataID: number) => {
+      await getDataContent(dataID);
+    };
+
+    if (currentStructuredDataId) {
+      handleGetContent(currentStructuredDataId);
+    } else {
+      setIsDirty(true);
+    }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentStructuredDataId]);
+  }, []);
 
   const Fields =
     fields &&
     fields.map((field: any, i: number) => {
       const { type, key } = field;
       if (key === "title") {
-        title = form.content && form.content[key] ? form.content[key] : "";
+        title = form?.content && form.content[key] ? form.content[key] : "";
       }
       return (
         <ConnectedField
@@ -116,14 +123,14 @@ const Form = (props: IProps) => {
 
   const getSaveLabel = () => {
     if (isNewStructuredData) return "Save";
-    return form.draft ? "Save" : "Save & publish";
+    return form?.draft ? "Save" : "Save & publish";
   };
 
   const handleSaveAndPublish = () => (isNewStructuredData || form.draft ? handleSave(false) : handleSave(true));
 
   const rightButtonProps = {
     label: isSaving ? "Saving" : getSaveLabel(),
-    disabled: isSaving || isDisabled,
+    disabled: isSaving || isDisabled || !isDirty,
     action: handleSaveAndPublish,
   };
 
@@ -142,7 +149,7 @@ const Form = (props: IProps) => {
   const getCurrentLanguages = () => {
     const availables: any[] = [];
 
-    form.dataLanguages &&
+    form?.dataLanguages &&
       form.dataLanguages.forEach(
         (dataLang: any) =>
           languages &&
@@ -228,7 +235,7 @@ const Form = (props: IProps) => {
 
   const downArrowMenu = {
     displayed: true,
-    button: getPublishButton(form.draft),
+    button: getPublishButton(form?.draft),
     options: [
       {
         label: "Review",
@@ -243,7 +250,7 @@ const Form = (props: IProps) => {
     ],
   };
 
-  const status = form.draft === true || form.draft === undefined ? "offline" : "active";
+  const status = !form || form.draft === true || form.draft === undefined ? "offline" : "active";
 
   const languageProps = {
     lang: isDataTranslatable ? lang : null,
@@ -273,7 +280,7 @@ const Form = (props: IProps) => {
         pageStatus={status}
         downArrowMenu={downArrowMenu}
         isFromEditor={true}
-        currentPageID={form.id}
+        currentPageID={form?.id}
         errors={errors}
       >
         {isDisabled && (
@@ -305,7 +312,7 @@ const Form = (props: IProps) => {
 
 interface IProps {
   schema: any;
-  form: any;
+  form: any | null;
   site: ISite | null;
   currentStructuredData: any;
   isSaving: boolean;
@@ -322,13 +329,12 @@ interface IProps {
   createStructuredDataContent: (payload: any) => Promise<boolean>;
   updateStructuredDataContent: (payload: any) => Promise<boolean>;
   setLanguage(lang: { locale: string; id: number | null }): void;
-  getDataContent(id: number): void;
+  getDataContent(id: number): Promise<void>;
   setHistoryPush(path: string, isEditor?: boolean): void;
   getSiteDataPack(packID: string): void;
   setDataStatus(id: number, status: string): Promise<boolean>;
   deleteStructuredDataContent(id: number): Promise<boolean>;
   validateForm(publish?: boolean): Promise<boolean>;
-  resetForm(): void;
 }
 
 const mapStateToProps = (state: IRootState) => ({
@@ -359,7 +365,6 @@ const mapDispatchToProps = {
   setDataStatus: structuredDataActions.setStatusStructuredDataContent,
   deleteStructuredDataContent: structuredDataActions.deleteStructuredDataContent,
   validateForm: structuredDataActions.validateForm,
-  resetForm: structuredDataActions.resetForm,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Form);

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

@@ -17,7 +17,10 @@ const useSortedListStatus = (): IUseSortedListStatus => {
   };
 };
 
-const useFilterQuery = (currentStructuredData: IStructuredData | null): IUseFilterQuery => {
+const useFilterQuery = (
+  currentStructuredData: IStructuredData | null,
+  values: Record<string, IStructuredDataQueryValues> | null
+): IUseFilterQuery => {
   const structuredDataType = currentStructuredData ? currentStructuredData.id : "all";
   const initialQueryValues = {
     types: "all",
@@ -29,16 +32,7 @@ const useFilterQuery = (currentStructuredData: IStructuredData | null): IUseFilt
     related: "all",
   };
 
-  const [query, setQuery] = useState<Record<string, IStructuredDataQueryValues>>({ all: initialQueryValues });
-
-  useEffect(() => {
-    if (!query[structuredDataType]) {
-      setQuery((state) => ({ [structuredDataType]: initialQueryValues, ...state }));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [structuredDataType]);
-
-  const setFilterQuery = (filterValues: IStructuredDataQueryValues) => {
+  const getFilterQuery = (filterValues: IStructuredDataQueryValues) => {
     const { types, translated, liveStatus, order, filterSites, categories, related } = filterValues;
     let filterQuery = "";
 
@@ -61,9 +55,22 @@ const useFilterQuery = (currentStructuredData: IStructuredData | null): IUseFilt
     return filterQuery;
   };
 
+  const initState = values ? values : { all: initialQueryValues };
+  const [state, setState] = useState<Record<string, IStructuredDataQueryValues>>(initState);
+
+  const initQuery = values && values[structuredDataType] ? getFilterQuery(values[structuredDataType]) : "";
+  const [query, setQuery] = useState(initQuery);
+
+  useEffect(() => {
+    if (!state[structuredDataType]) {
+      setState((state) => ({ [structuredDataType]: initialQueryValues, ...state }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [structuredDataType]);
+
   const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
     const { types, translated, liveStatus, order, filterSites, categories, related } =
-      query[structuredDataType] || initialQueryValues;
+      state[structuredDataType] || initialQueryValues;
     const orderMethod = isAscendent ? "asc" : "desc";
     const filterValues = {
       types: pointer === "types" ? filter : types,
@@ -75,18 +82,21 @@ const useFilterQuery = (currentStructuredData: IStructuredData | null): IUseFilt
       related: pointer === "related" ? filter : related,
     };
 
-    setQuery((state) => ({ ...state, [structuredDataType]: filterValues }));
-
-    return filterValues;
+    setState((state) => ({ ...state, [structuredDataType]: filterValues }));
+    const filterQuery = getFilterQuery(filterValues);
+    setQuery(filterQuery);
   };
 
-  const resetFilterQuery = () => setQuery({ [structuredDataType]: initialQueryValues });
+  const resetFilterQuery = () => {
+    setState({ [structuredDataType]: initialQueryValues });
+    setQuery("");
+  };
 
   return {
     setFiltersSelection,
-    setFilterQuery,
     resetFilterQuery,
-    filterValues: query,
+    filterValues: state,
+    query,
   };
 };
 
@@ -96,10 +106,10 @@ interface IUseSortedListStatus {
 }
 
 interface IUseFilterQuery {
-  setFiltersSelection(pointer: string, filter: string, isAscendent?: boolean): IStructuredDataQueryValues;
-  setFilterQuery(filterValues: IStructuredDataQueryValues): string;
+  setFiltersSelection(pointer: string, filter: string, isAscendent?: boolean): void;
   resetFilterQuery(): void;
   filterValues: Record<string, IStructuredDataQueryValues>;
+  query: string;
 }
 
 export { useSortedListStatus, useFilterQuery };

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

@@ -16,6 +16,7 @@ import {
   IPage,
   ICheck,
   IColumn,
+  IStructuredDataQueryValues,
 } from "@ax/types";
 import {
   ISetCurrentPageIDAction,
@@ -86,6 +87,8 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     resetCurrentSiteErrorPages,
     currentSiteErrorPages,
     skipReviewOnPublish,
+    setContentFilters,
+    contentFilters,
   } = props;
 
   const itemsPerPage = 50;
@@ -108,8 +111,12 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   const { isOpen: isNewOpen, toggleModal: toggleNewModal } = useModal();
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
   const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
-  const { setFiltersSelection, setFilterQuery, filterValues, resetFilterQuery } = useFilterQuery(currentStructuredData);
-  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
+  const {
+    setFiltersSelection,
+    filterValues,
+    resetFilterQuery,
+    query: currentFilterQuery,
+  } = useFilterQuery(currentStructuredData, contentFilters);
   const history = useHistory();
   const [isFirstRender, setIsFirstRender] = useState(true);
   const [deleteAllVersions, setDeleteAllVersions] = useState(false);
@@ -218,6 +225,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     setIsFirstRender(false);
     resetPageEditor();
     resetCurrentSiteErrorPages();
+    resetForm();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -264,10 +272,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentDataContent]);
 
-  const resetFilterValues = () => {
-    resetFilterQuery();
-    setCurrentFilterQuery("");
-  };
+  const resetFilterValues = () => resetFilterQuery();
 
   useEffect(() => {
     if (!isFirstRender && !isLoading) {
@@ -296,6 +301,11 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    setContentFilters(filterValues);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filterValues]);
+
   const handleClick = (isFromPage?: boolean, globalPage?: IPage, forceLive?: boolean) => {
     if (isFromPage && globalPage) {
       const pageID = globalPage.haveDraftPage && !forceLive ? globalPage.haveDraftPage : globalPage.id;
@@ -312,7 +322,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 
   const createNewData = () => {
     setCurrentDataID(null);
-    resetForm();
+    resetForm(true);
     handleClick();
   };
 
@@ -404,17 +414,13 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     const sortedState = getSortedListStatus(orderPointer, isAscending);
     setSortedListStatus(sortedState);
 
-    const filtersSelection = setFiltersSelection("order", orderPointer, isAscending);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
+    setFiltersSelection("order", orderPointer, isAscending);
   };
 
   const filterItems = async (filterPointer: string, filtersSelected: string) => {
     setPage(firstPage);
     if (!isStructuredDataFromPage && filterPointer === "categories") filterPointer = "related";
-    const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
+    setFiltersSelection(filterPointer, filtersSelected);
   };
 
   const currentDataColumnsState = currentStructuredData ? columnsState[structuredDataType] || [] : columnsState["all"];
@@ -637,6 +643,7 @@ const mapStateToProps = (state: IRootState) => ({
   currentSitePages: state.sites.currentSitePages,
   currentSiteErrorPages: state.sites.currentSiteErrorPages,
   skipReviewOnPublish: state.app.globalSettings.skipReviewOnPublish,
+  contentFilters: state.structuredData.contentFilters,
 });
 
 const mapDispatchToProps = {
@@ -661,11 +668,12 @@ const mapDispatchToProps = {
   getAnalytics: analyticsActions.getAnalytics,
   setCurrentDataID: structuredDataActions.setCurrentDataID,
   resetCurrentSiteErrorPages: sitesActions.resetCurrentSiteErrorPages,
+  setContentFilters: structuredDataActions.setContentFilters,
 };
 
 interface IDispatchProps {
   setHistoryPush(route: string, isEditor?: boolean): void;
-  resetForm(): void;
+  resetForm(setDefault?: boolean): void;
   setLanguage(lang: { locale: string; id: number }): void;
   getStructuredDataContents(params: IGetStructuredDataParams): void;
   setSelectedStructuredData(id: string, scope: string): void;
@@ -685,6 +693,7 @@ interface IDispatchProps {
   getAnalytics(): void;
   setCurrentDataID(id: number | null): void;
   resetCurrentSiteErrorPages: () => Promise<void>;
+  setContentFilters(contentFilters: Record<string, IStructuredDataQueryValues> | null): void;
 }
 
 interface ICategoriesProps {
@@ -702,6 +711,7 @@ interface ICategoriesProps {
   currentSitePages: IPage[];
   currentSiteErrorPages: number[];
   skipReviewOnPublish?: boolean;
+  contentFilters: Record<string, IStructuredDataQueryValues> | null;
 }
 
 type IProps = ICategoriesProps & IDispatchProps;

package/src/types/index.tsx

@@ -140,20 +140,21 @@ export interface ISchemaField {
 export interface IImage {
   id?: number;
   name: string;
-  type: string;
+  title: string;
+  description: string;
   alt: string;
+  tags: string[];
   url: string;
+  thumb: string;
   publicId: string;
-  title: string;
+  damId: string;
+  published: Date;
   size: number;
   width: number;
   height: number;
-  published: Date;
-  description: string;
-  thumb: string;
-  tags: string[];
-  file: File;
   orientation: string;
+  site: string;
+  file?: File;
 }
 
 export interface IUrlField {