@griddo/ax 1.55.14 → 1.56.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.55.14",
+  "version": "1.56.2",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -233,5 +233,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "74a33fa1c0a01633e2c999a7166a175be820b09f"
+  "gitHead": "76dddc292b1037223a780b2093399c3c6e12ce02"
 }

package/src/GlobalStore.tsx

@@ -16,6 +16,7 @@ import { languagesReducer, languagesInitialState } from "./containers/Settings/L
 import { dataPacksReducer, dataPacksInitialState } from "./containers/Settings/DataPacks/reducer";
 import { socialReducer, socialInitialState } from "./containers/Settings/Social/reducer";
 import { usersReducer, usersInitialState } from "./containers/Users/reducer";
+import { galleryReducer, galleryInitialState } from "./containers/Gallery/reducer";
 
 import { IRootState } from "@ax/types";
 
@@ -44,6 +45,7 @@ export class GlobalStore {
       dataPacks: dataPacksReducer as Reducer<any, Action<any>>,
       social: socialReducer as Reducer<any, Action<any>>,
       users: usersReducer as Reducer<any, Action<any>>,
+      gallery: galleryReducer as Reducer<any, Action<any>>,
     });
 
     const rootReducer = (state: IRootState | undefined, action: any) => {
@@ -60,6 +62,7 @@ export class GlobalStore {
           dataPacks: dataPacksInitialState,
           social: socialInitialState,
           users: usersInitialState,
+          gallery: galleryInitialState,
         };
       }
 

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/index.tsx

@@ -111,6 +111,12 @@ const PageConnectedField = (props: any) => {
         updateEditorContent(selectedEditorID, "metaTitle", value);
       }
     }
+
+    const isComponentImage = ["LinkableImage", "Image"].includes(selectedContent.component) && key === "file";
+    if (isComponentImage) {
+      updateEditorContent(selectedEditorID, "title", value.title);
+      updateEditorContent(selectedEditorID, "alt", value.alt);
+    }
   };
 
   if (isOverride) {

package/src/components/Fields/ArrayFieldGroup/ArrayFieldInline/index.tsx

@@ -7,8 +7,21 @@ import * as S from "./style";
 const ArrayFieldInline = (props: IProps): JSX.Element => {
   const { fields, item, index, onChange, handleDelete } = props;
 
-  const deleteItem = () => {
-    handleDelete(index);
+  const deleteItem = () => handleDelete(index);
+
+  const getFields = (fields: any[]): any[] => {
+    return fields.map((field: any) => {
+      const key = field.props.objKey;
+      const handleChange = (newValue: any) => onChange({ [key]: newValue });
+
+      const innerFields = field.props.innerFields ? getFields(field.props.innerFields) : undefined;
+
+      return {
+        ...field,
+        props: { ...field.props, value: item[key], objKey: key, onChange: handleChange, innerFields },
+        key,
+      };
+    });
   };
 
   return (
@@ -17,16 +30,7 @@ const ArrayFieldInline = (props: IProps): JSX.Element => {
         <S.IconWrapper>
           <IconAction icon="delete" onClick={deleteItem} size="s" />
         </S.IconWrapper>
-        {fields.map((field: any) => {
-          const key = field.props.objKey;
-          const handleChange = (newValue: any) => onChange({ [key]: newValue });
-
-          return {
-            ...field,
-            props: { ...field.props, value: item[key], objKey: key, onChange: handleChange },
-            key,
-          };
-        })}
+        {getFields(fields)}
       </S.Content>
     </S.Wrapper>
   );

package/src/components/Fields/ArrayFieldGroup/ArrayFieldItem/index.tsx

@@ -9,9 +9,7 @@ const ArrayFieldItem = (props: IProps): JSX.Element => {
 
   const handleClick = () => setIsOpen(!isOpen);
 
-  const deleteItem = () => {
-    handleDelete(index);
-  };
+  const deleteItem = () => handleDelete(index);
 
   const menuOptions = [
     {
@@ -21,24 +19,28 @@ const ArrayFieldItem = (props: IProps): JSX.Element => {
     },
   ];
 
+  const getFields = (fields: any[]): any[] => {
+    return fields.map((field: any) => {
+      const key = field.props.objKey;
+      const handleChange = (newValue: any) => onChange({ [key]: newValue });
+
+      const innerFields = field.props.innerFields ? getFields(field.props.innerFields) : undefined;
+
+      return {
+        ...field,
+        props: { ...field.props, value: item[key], objKey: key, onChange: handleChange, innerFields },
+        key,
+      };
+    });
+  };
+
   return (
     <S.Wrapper isOpen={isOpen}>
       <S.Title onClick={handleClick} isOpen={isOpen}>
         {`${name} ${index + 1}`}
         <S.StyledActionMenu icon="more" options={menuOptions} />
       </S.Title>
-      <S.Content isOpen={isOpen}>
-        {fields.map((field: any) => {
-          const key = field.props.objKey;
-          const handleChange = (newValue: any) => onChange({ [key]: newValue });
-
-          return {
-            ...field,
-            props: { ...field.props, value: item[key], objKey: key, onChange: handleChange },
-            key,
-          };
-        })}
-      </S.Content>
+      <S.Content isOpen={isOpen}>{getFields(fields)}</S.Content>
     </S.Wrapper>
   );
 };

package/src/components/Fields/ConditionalField/index.tsx

@@ -6,9 +6,7 @@ import * as S from "./style";
 const ConditionalField = (props: IConditionalFieldProps) => {
   const { value, options, innerFields, onChange } = props;
 
-  const handleChange = (newValue: any) => {
-    onChange(newValue);
-  };
+  const handleChange = (newValue: any) => onChange(newValue);
 
   return (
     <S.Wrapper>

package/src/components/Fields/FileField/index.tsx

@@ -80,7 +80,7 @@ const FileField = (props: IProps) => {
           <TextField
             name="url"
             value={value.url}
-            onChange={() => {}}
+            onChange={() => null}
             readonly={true}
             icon="openOutside"
             onClickIcon={handleOnClickUrl}

package/src/components/Fields/Wysiwyg/config.tsx

@@ -1,4 +1,3 @@
-
 const buttonsFull = {
     moreText: {
       buttons: ["bold", "italic", "paragraphFormat", "formatUL", "quote", "alignCenter"],

package/src/components/Fields/Wysiwyg/index.tsx

@@ -1,15 +1,16 @@
 import React from "react";
+import { connect } from "react-redux";
 import FroalaEditor from "react-froala-wysiwyg";
 import { decodeEntities } from "@ax/helpers";
-import { uploadImage } from "@ax/components/Gallery/store";
-import { ISite } from "@ax/types";
+import { IImage, ISite } from "@ax/types";
+import { galleryActions } from "@ax/containers/Gallery";
 
 import { wysiwygConfig, buttons, buttonsFull } from "./config";
 import "./vendors";
 import * as S from "./style";
 
-const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
-  const { value, error, onChange, placeholder, full = true, disabled, handleValidation, site } = props;
+const Wysiwyg = (props: IProps): JSX.Element => {
+  const { value, error, onChange, placeholder, full = true, disabled, handleValidation, site, uploadImage } = props;
 
   const imageSite = site ? site.id : "global"
 
@@ -71,4 +72,14 @@ interface IWysiwygProps {
   site: ISite;
 }
 
-export default Wysiwyg;
+interface IDispatchProps {
+  uploadImage: (imageFile: File, site: number | string) => Promise<IImage>;
+}
+
+const mapDispatchToProps = {
+  uploadImage: galleryActions.uploadImage,
+};
+
+type IProps = IWysiwygProps & IDispatchProps;
+
+export default connect(null, mapDispatchToProps)(Wysiwyg);

package/src/components/Gallery/GalleryPanel/DetailPanel/index.tsx

@@ -1,114 +1,106 @@
-import React, { memo, useReducer, useEffect, useState } from "react";
-import { IImage } from "@ax/types";
-import { Button, CheckField, FieldsBehavior } from "@ax/components";
+import React, { memo, useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { IImage, IRootState, IImageForm } from "@ax/types";
+import { Button, CheckField, FieldsBehavior, Toast } from "@ax/components";
 import { formatBytes, getFormattedDateWithTimezone } from "@ax/helpers";
-import {
-  reducer,
-  initialState,
-  setInitForm,
-  setFormField,
-  saveImageData,
-  deleteImageData,
-  uploadImage,
-} from "../../store";
 
+import { galleryActions } from "@ax/containers/Gallery";
+import { IIsSaving } from "@ax/containers/Gallery/reducer";
 import * as S from "./style";
 
 const GalleryDetailPanel = (props: IProps) => {
-  const { setImage, imageSelected, isImageSelected, updateImage, deleteImage, isGlobalTab } = props;
+  const {
+    imageSelected,
+    isImageSelected,
+    deleteImage,
+    isGlobalTab,
+    updateImage,
+    refreshImages,
+    isSaving,
+    setImage,
+    uploadImage,
+  } = props;
+
+  const initialState: IImageForm = {
+    id: undefined,
+    alt: "",
+    title: "",
+    description: "",
+    tags: [],
+  };
 
-  const [state, dispatch] = useReducer(reducer, initialState);
-  const [isSaving, setIsSaving] = useState({ save: false, saveAdd: false, delete: false });
+  const [imageForm, setImageForm] = useState(initialState);
   const [addToGlobal, setAddToGlobal] = useState({ value: "addToGlobal", isChecked: false });
+  const [deletedToast, setDeletedToast] = useState(false);
+
+  const setInitForm = (imageSelected: IImage) => {
+    const form = {
+      id: imageSelected.id,
+      title: imageSelected.title ? imageSelected.title : "",
+      alt: imageSelected.alt ? imageSelected.alt : "",
+      description: imageSelected.description ? imageSelected.description : "",
+      tags: imageSelected.tags ? imageSelected.tags : [],
+    };
+    setImageForm(form);
+  };
+
+  const updateFormField = (field: string, value: string) => setImageForm((state) => ({ ...state, [field]: value }));
 
   useEffect(() => {
-    if (imageSelected && imageSelected.id !== state.imageForm.id) {
-      dispatch(
-        setInitForm({
-          id: imageSelected.id,
-          title: imageSelected.title,
-          alt: imageSelected.alt,
-          description: imageSelected.description,
-          tags: imageSelected.tags,
-        })
-      );
+    if (imageSelected && imageSelected.id !== imageForm.id) {
+      setInitForm(imageSelected);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [imageSelected]);
 
-  const _handleTitle = (newValue: string) => {
-    dispatch(setFormField("title", newValue));
+  const handleTitle = (newValue: string) => {
+    updateFormField("title", newValue);
   };
 
-  const _handleAlt = (newValue: string) => {
-    dispatch(setFormField("alt", newValue));
+  const handleAlt = (newValue: string) => {
+    updateFormField("alt", newValue);
   };
 
-  const _handleDescription = (newValue: string) => {
-    dispatch(setFormField("description", newValue));
+  const handleDescription = (newValue: string) => {
+    updateFormField("description", newValue);
   };
 
-  const _handleTags = (newValue: string) => {
-    dispatch(setFormField("tags", newValue));
+  const handleTags = (newValue: string) => {
+    updateFormField("tags", newValue);
   };
 
   const handleSetAsGlobal = async () => {
     const saveAsGlobal = !isGlobalTab && addToGlobal.isChecked && imageSelected?.file;
-    const image = saveAsGlobal && imageSelected && await uploadImage(imageSelected.file, "global");
-    if (image) await saveImageData(image.id, state.imageForm)
+    const image = saveAsGlobal && imageSelected && (await uploadImage(imageSelected.file, "global"));
+    if (image && image.id) await updateImage(image.id, imageForm);
     setAddToGlobal({ value: "addToGlobal", isChecked: false });
   };
 
-  const _handleSaveAndAdd = async () => {
-    if (state.imageForm.id) {
-      try {
-        setIsSaving({ ...isSaving, saveAdd: true });
-        await handleSetAsGlobal();
-        const value = await saveImageData(state.imageForm.id, state.imageForm);
-        if (value) {
-          updateImage(value);
-        }
-        setIsSaving({ ...isSaving, saveAdd: false });
-        setImage();
-      } catch (error) {
-        console.log(error);
-      }
+  const handleSave = async () => {
+    if (imageForm.id) {
+      await updateImage(imageForm.id, imageForm);
+      await handleSetAsGlobal();
+      refreshImages();
     }
   };
 
-  const _handleSave = async () => {
-    if (state.imageForm.id) {
-      try {
-        setIsSaving({ ...isSaving, save: true });
-        await handleSetAsGlobal();
-        const value = await saveImageData(state.imageForm.id, state.imageForm);
-        if (value) {
-          updateImage(value);
-        }
-        setIsSaving({ ...isSaving, save: false });
-      } catch (error) {
-        console.log(error);
-      }
+  const handleSaveAndAdd = async () => {
+    if (imageForm.id) {
+      await updateImage(imageForm.id, imageForm, true);
+      handleSetAsGlobal();
+      setImage(imageForm);
     }
   };
 
-  const _handleDelete = () => {
-    if (state.imageForm.id) {
-      setIsSaving({ ...isSaving, delete: true });
-      deleteImageData(state.imageForm.id)
-        .then((value) => {
-          if (value && state.imageForm.id) {
-            deleteImage(state.imageForm.id);
-          }
-          setIsSaving({ ...isSaving, delete: false });
-        })
-        .catch((error) => {
-          console.log(error);
-        });
+  const handleDelete = async () => {
+    if (imageForm.id) {
+      const deleted = await deleteImage(imageForm.id);
+      if (deleted) setDeletedToast(true);
+      refreshImages();
     }
   };
 
-  const _handleOnClickUrl = () => {
+  const handleOnClickUrl = () => {
     if (imageSelected) {
       const win = window.open(imageSelected.url, "_blank");
       if (win) {
@@ -137,14 +129,14 @@ const GalleryDetailPanel = (props: IProps) => {
 
   const canSetAsGlobal = !isGlobalTab && imageSelected?.file;
 
-  const imageForm = !imageSelected ? null : (
+  const renderImageForm = !imageSelected ? null : (
     <S.PanelForm>
       {canSetAsGlobal && <AddToGlobal />}
       <S.DateWrapper>Uploaded: {getFormattedDateWithTimezone(imageSelected.published, "d MMM Y")}</S.DateWrapper>
       <S.ImageName>{imageSelected.name}</S.ImageName>
       <S.ImageInfoWrapper>
         <S.ImageWrapper>
-          <img src={imageSelected.url} alt={state.imageForm.alt} />
+          <img src={imageSelected.url} alt={imageForm.alt} />
         </S.ImageWrapper>
         <S.ImageData>
           <S.ImageSize>{formatBytes(imageSelected.size)}</S.ImageSize>
@@ -159,42 +151,42 @@ const GalleryDetailPanel = (props: IProps) => {
           fieldType="TextField"
           readonly={true}
           icon="openOutside"
-          onClickIcon={_handleOnClickUrl}
+          onClickIcon={handleOnClickUrl}
         />
         <FieldsBehavior
-          title="Default aux text"
-          name="alt"
-          value={state.imageForm.alt}
+          title="Title"
+          name="title"
+          value={imageForm.title}
           fieldType="TextField"
-          onChange={_handleAlt}
+          onChange={handleTitle}
         />
         <FieldsBehavior
-          title="Title"
-          name="title"
-          value={state.imageForm.title}
+          title="Alternative text"
+          name="alt"
+          value={imageForm.alt}
           fieldType="TextField"
-          onChange={_handleTitle}
+          onChange={handleAlt}
         />
         <FieldsBehavior
           title="Description"
           name="description"
-          value={state.imageForm.description}
+          value={imageForm.description}
           fieldType="TextArea"
-          onChange={_handleDescription}
+          onChange={handleDescription}
         />
-        <FieldsBehavior title="Tags" value={state.imageForm.tags} fieldType="TagField" onChange={_handleTags} />
+        <FieldsBehavior title="Tags" value={imageForm.tags} fieldType="TagField" onChange={handleTags} />
       </S.FormWrapper>
     </S.PanelForm>
   );
 
   return (
     <S.DetailPanelWrapper hidden={!isImageSelected}>
-      {imageForm}
+      {renderImageForm}
       <S.PanelActions>
         <Button
           type="button"
           buttonStyle="text"
-          onClick={_handleDelete}
+          onClick={handleDelete}
           disabled={isSaving.save || isSaving.saveAdd || isSaving.delete}
         >
           {isSaving.delete ? `Deleting` : `Delete`}
@@ -202,30 +194,49 @@ const GalleryDetailPanel = (props: IProps) => {
         <Button
           type="button"
           buttonStyle="line"
-          onClick={_handleSave}
+          onClick={handleSave}
           disabled={isSaving.save || isSaving.saveAdd || isSaving.delete}
         >
           {isSaving.save ? `Saving` : `Save`}
         </Button>
         <Button
           type="button"
-          onClick={_handleSaveAndAdd}
+          onClick={handleSaveAndAdd}
           disabled={isSaving.save || isSaving.saveAdd || isSaving.delete}
         >
           {isSaving.saveAdd ? `Saving` : `Save & Add`}
         </Button>
       </S.PanelActions>
+      {deletedToast && <Toast message="1 image deleted" setIsVisible={setDeletedToast} />}
     </S.DetailPanelWrapper>
   );
 };
 
-interface IProps {
-  setImage: () => void;
-  updateImage: (image: IImage) => void;
-  deleteImage: (imageID: number) => void;
+interface IDetailPanelProps {
+  setImage: (imageData: any) => void;
   imageSelected: IImage | null;
   isImageSelected: boolean;
   isGlobalTab: boolean;
+  refreshImages: () => void;
+  isSaving: IIsSaving;
+}
+
+const mapStateToProps = (state: IRootState) => ({
+  isSaving: state.gallery.isSaving,
+});
+
+interface IDispatchProps {
+  updateImage: (imageID: number, imageData: IImageForm, add?: boolean) => Promise<void>;
+  deleteImage: (imageID: number) => Promise<boolean>;
+  uploadImage: (imageFile: File, site: number | string) => Promise<IImage>;
 }
 
-export default memo(GalleryDetailPanel);
+const mapDispatchToProps = {
+  updateImage: galleryActions.updateImage,
+  deleteImage: galleryActions.deleteImage,
+  uploadImage: galleryActions.uploadImage,
+};
+
+type IProps = IDetailPanelProps & IDispatchProps;
+
+export default connect(mapStateToProps, mapDispatchToProps)(memo(GalleryDetailPanel));