@griddo/ax 1.55.12 → 1.56.0

package/package.json

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

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/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));

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

@@ -1,43 +1,46 @@
-import React, { memo, useReducer, useRef } from "react";
-
-import { IImage } from "@ax/types";
-import {
-  reducer,
-  initialState,
-  setDropDepth,
-  setInDropZone,
-  setIsUploading,
-  setUploadSuccess,
-  setUploadError,
-  uploadImage,
-} from "../../store";
+import React, { memo, useRef, useState } from "react";
+import { connect } from "react-redux";
+
+import { galleryActions } from "@ax/containers/Gallery";
+import { IGetSiteImages, IImage, IRootState } from "@ax/types";
 import { Icon, DragAndDrop } from "@ax/components";
 
 import * as S from "./style";
 
 const GalleryDragAndDrop = (props: IProps) => {
-  const { isImageSelected, validFormats, addImage, site, allowUpload } = props;
-
+  const { isImageSelected,
+    validFormats,
+    site,
+    allowUpload,
+    refreshImages,
+    uploadError,
+    isUploading,
+    isSuccess,
+    isError,
+    errorMsg,
+    uploadImage,
+    selectImage,
+  } = props;
   const validExtensions = validFormats.map((format) => `.${format}`).join(",");
 
-  const filesInputRef = useRef<any>(null);
-  const filesButtonRef = useRef<any>(null);
-
-  const [state, dispatch] = useReducer(reducer, initialState);
+  const filesInputRef = useRef<HTMLInputElement>(null);
+  const filesButtonRef = useRef<HTMLButtonElement>(null);
+  const [inDropZone, setInDropZone] = useState(false);
+  const [dropDepth, setDropDepth] = useState(0);
 
   const handleDragEnter = () => {
-    dispatch(setDropDepth(state.dropDepth + 1));
+    setDropDepth((depth) => depth + 1);
   };
 
   const handleDragLeave = () => {
-    dispatch(setDropDepth(state.dropDepth - 1));
-    if (state.dropDepth > 1) return;
-    dispatch(setInDropZone(false));
+    setDropDepth((depth) => depth - 1);
+    if (dropDepth > 1) return;
+    setInDropZone(false);
   };
 
   const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
     e.dataTransfer.dropEffect = "copy";
-    dispatch(setInDropZone(true));
+    setInDropZone(true);
   };
 
   const checkType = (type: string) => {
@@ -51,7 +54,7 @@ const GalleryDragAndDrop = (props: IProps) => {
     const files = Array.from(e.dataTransfer.files);
     e.dataTransfer.clearData();
     await handleUploadFile(files);
-    dispatch(setDropDepth(0));
+    setDropDepth(0);
   };
 
   const handleFilesUpload = (e: any) => {
@@ -61,23 +64,15 @@ const GalleryDragAndDrop = (props: IProps) => {
 
   const handleUploadFile = async (files: Array<any>) => {
     if (files[0]) {
-      dispatch(setIsUploading());
-
       if (!checkType(files[0].type)) {
-        dispatch(setUploadError("Invalid format"));
+        uploadError("Invalid format");
       } else {
         try {
-          const value = await uploadImage(files[0], site);
-          if (value) {
-            dispatch(setUploadSuccess());
-            value.file = files[0];
-            addImage(value);
-            dispatch(setInDropZone(false));
-          } else {
-            dispatch(setUploadError("Error uploading image"));
-          }
+          const newImage = await uploadImage(files[0], site);
+          setInDropZone(false);
+          await refreshImages();
+          selectImage(newImage);
         } catch (error) {
-          dispatch(setUploadError("Error uploading image"));
           console.log(error);
         }
       }
@@ -85,16 +80,14 @@ const GalleryDragAndDrop = (props: IProps) => {
   };
 
   const handleTryAgain = () => {
-    dispatch(setInDropZone(false));
+    setInDropZone(false);
   };
 
   const handleFileClick = () => {
-    if (filesInputRef) {
-      filesInputRef.current.click();
-    }
+    filesInputRef && filesInputRef.current && filesInputRef.current.click();
   };
 
-  const errorWrapper = state.errorMsg ? <S.ErrorMsg>{state.errorMsg}</S.ErrorMsg> : null;
+  const errorWrapper = errorMsg ? <S.ErrorMsg>{errorMsg}</S.ErrorMsg> : null;
 
   const renderDragAndDrop = () => (
     <DragAndDrop
@@ -135,7 +128,7 @@ const GalleryDragAndDrop = (props: IProps) => {
       <S.DragIcon>
         <Icon name="image" size="36" />
       </S.DragIcon>
-      <S.DragTitle>Select and image to see details</S.DragTitle>
+      <S.DragTitle>Select an image to see details</S.DragTitle>
     </S.StatusWrapper>
 
   );
@@ -143,18 +136,18 @@ const GalleryDragAndDrop = (props: IProps) => {
   return (
     <S.Wrapper hidden={isImageSelected}>
       <S.DragAndDropWrapper
-        inDropZone={state.inDropZone}
-        uploading={state.isUploading}
-        success={state.isSuccess}
-        error={state.isError}
+        inDropZone={inDropZone}
+        uploading={isUploading}
+        success={isSuccess}
+        error={isError}
       >
         {allowUpload ? renderDragAndDrop() : renderPlaceholder()}
       </S.DragAndDropWrapper>
       <S.UploadingWrapper
-        inDropZone={state.inDropZone}
-        uploading={state.isUploading}
-        success={state.isSuccess}
-        error={state.isError}
+        inDropZone={inDropZone}
+        uploading={isUploading}
+        success={isSuccess}
+        error={isError}
       >
         <S.StatusWrapper>
           <S.UploadingStatus>
@@ -185,12 +178,39 @@ const GalleryDragAndDrop = (props: IProps) => {
   );
 };
 
-interface IProps {
+interface IGalleryDragAndDropProps {
   isImageSelected: boolean;
   validFormats: string[];
-  addImage: (image: IImage) => void;
   site: number | string;
   allowUpload: boolean;
+  refreshImages: () => Promise<void>;
+  isUploading: boolean,
+  isSuccess: boolean,
+  isError: boolean,
+  errorMsg: string;
 }
 
-export default memo(GalleryDragAndDrop);
+const mapStateToProps = (state: IRootState) => ({
+  isUploading: state.gallery.isUploading,
+  isSuccess: state.gallery.isSuccess,
+  isError: state.gallery.isError,
+  errorMsg: state.gallery.errorMsg,
+});
+
+interface IDispatchProps {
+  getSiteImages(params: IGetSiteImages): Promise<void>;
+  selectImage(item: IImage): void;
+  uploadError: (error: string) => Promise<void>;
+  uploadImage: (imageFile: File, site: number | string) => Promise<IImage>;
+}
+
+const mapDispatchToProps = {
+  getSiteImages: galleryActions.getSiteImages,
+  selectImage: galleryActions.selectImage,
+  uploadError: galleryActions.uploadError,
+  uploadImage: galleryActions.uploadImage,
+};
+
+type IProps = IGalleryDragAndDropProps & IDispatchProps;
+
+export default connect(mapStateToProps, mapDispatchToProps)(memo(GalleryDragAndDrop));

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

@@ -1,24 +1,31 @@
 import React, { memo } from "react";
+
 import { IImage } from "@ax/types";
+
 import GalleryDragAndDrop from "./GalleryDragAndDrop";
 import DetailPanel from "./DetailPanel";
-
 import * as S from "./style";
 
 const GalleryPanel = (props: IGalleryPanelProps) => {
-  const { isImageSelected, imageSelected, updateItems, validFormats, setImage, addImage, isGlobalTab, site, selectedTab } = props;
+  const { isImageSelected, imageSelected, validFormats, setImage, isGlobalTab, site, selectedTab, refreshImages } =
+    props;
   const allowUpload = !isGlobalTab || !selectedTab;
 
   return (
     <S.GalleryPanel>
-      <GalleryDragAndDrop isImageSelected={isImageSelected} validFormats={validFormats} addImage={addImage} site={site} allowUpload={allowUpload} />
+      <GalleryDragAndDrop
+        isImageSelected={isImageSelected}
+        validFormats={validFormats}
+        site={site}
+        allowUpload={allowUpload}
+        refreshImages={refreshImages}
+      />
       <DetailPanel
         imageSelected={imageSelected}
         isImageSelected={isImageSelected}
         setImage={setImage}
-        updateImage={updateItems}
-        deleteImage={updateItems}
         isGlobalTab={isGlobalTab}
+        refreshImages={refreshImages}
       />
     </S.GalleryPanel>
   );
@@ -28,12 +35,11 @@ interface IGalleryPanelProps {
   isImageSelected: boolean;
   imageSelected: IImage | null;
   validFormats: string[];
-  updateItems: () => void;
-  setImage: () => void;
-  addImage: (image: IImage) => void;
+  setImage: (imageData: any) => void;
   isGlobalTab: boolean;
   site: number | string;
   selectedTab: string;
+  refreshImages: () => Promise<void>;
 }
 
 export default memo(GalleryPanel);