Web: Client: Refactoring.

packages/client/src/components/GlobalEvents/EditRoomEvent.js

@@ -81,7 +81,8 @@ const EditRoomEvent = ({
   defaultRoomsQuota,
   isDefaultRoomsQuotaSet,
 
-  setWatermarks,
+  setInitialWatermarks,
+  getWatermarkRequest,
   watermarksSettings,
   isNotWatermarkSet,
 }) => {
@@ -194,8 +195,11 @@ const EditRoomEvent = ({
       if (removedTags.length)
         actions.push(removeTagsFromRoom(room.id, removedTags));
 
+      
+
       if (watermarksSettings && !isNotWatermarkSet()) {
-        const request = setWatermarkSettings(room.id, watermarksSettings);
+       
+        const request = getWatermarkRequest(room, watermarksSettings);
 
         actions.push(request);
       }
@@ -298,8 +302,8 @@ const EditRoomEvent = ({
       const [tags, watermarks] = await Promise.all(requests);
 
       setFetchedTags(tags);
-      console.log("watermarks", watermarks);
-      setWatermarks(watermarks, true);
+
+      setInitialWatermarks(watermarks);
 
       setIsInitLoading(false);
     };
@@ -367,8 +371,12 @@ export default inject(
     const { updateInfoPanelSelection } = infoPanelStore;
 
     const { defaultRoomsQuota, isDefaultRoomsQuotaSet } = currentQuotaStore;
-    const { setWatermarks, watermarksSettings, isNotWatermarkSet } =
-      createEditRoomStore;
+    const {
+      setInitialWatermarks,
+      watermarksSettings,
+      isNotWatermarkSet,
+      getWatermarkRequest,
+    } = createEditRoomStore;
 
     return {
       defaultRoomsQuota,
@@ -406,9 +414,10 @@ export default inject(
 
       updateInfoPanelSelection,
       changeRoomOwner,
-      setWatermarks,
+      setInitialWatermarks,
       watermarksSettings,
       isNotWatermarkSet,
+      getWatermarkRequest,
     };
   },
 )(observer(EditRoomEvent));

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ImageWatermark.js

@@ -56,11 +56,12 @@ import { Text } from "@docspace/shared/components/text";
 import { ComboBox } from "@docspace/shared/components/combobox";
 import { inject, observer } from "mobx-react";
 import { StyledWatermark } from "./StyledComponent";
-import { FileInput } from "@docspace/shared/components/file-input";
 
-import { imageProcessing } from "@docspace/shared/utils/common";
 import { DropDownItem } from "@docspace/shared/components/drop-down-item";
 
+import FilesSelectorInput from "SRC_DIR/components/FilesSelectorInput";
+import { FilesSelectorFilterTypes } from "@docspace/shared/enums";
+
 const scaleOptions = [
   { key: 100, label: "100" },
   { key: 200, label: "200" },
@@ -77,7 +78,7 @@ const rotateOptions = [
   { key: 90, label: "90" },
 ];
 const getInitialScale = (scale, isEdit) => {
-  if (!isEdit || scale === undefined || scale === 0) return scaleOptions[0];
+  if (!isEdit || !scale) return scaleOptions[0];
 
   return scaleOptions.find((item) => {
     return item.key === scale;
@@ -85,7 +86,7 @@ const getInitialScale = (scale, isEdit) => {
 };
 
 const getInitialRotate = (rotate, isEdit) => {
-  if (!isEdit || rotate === undefined) return rotateOptions[0];
+  if (!isEdit) return rotateOptions[0];
 
   const item = rotateOptions.find((item) => {
     return item.key === rotate;
@@ -96,9 +97,8 @@ const getInitialRotate = (rotate, isEdit) => {
 
 const ImageWatermark = ({
   isEdit,
-
   setWatermarks,
-  watermarksSettings,
+  initialWatermarksSettings,
 }) => {
   const { t } = useTranslation(["CreateEditRoomDialog", "Common"]);
 
@@ -106,49 +106,51 @@ const ImageWatermark = ({
 
   if (initialInfo.current === null) {
     initialInfo.current = {
-      dataScale: scaleOptions,
-      dataRotate: rotateOptions,
-      rotate: getInitialRotate(watermarksSettings?.rotate, isEdit),
-      scale: getInitialScale(watermarksSettings?.imageScale, isEdit),
-      url: watermarksSettings?.imageUrl ?? "",
+      rotate: getInitialRotate(initialWatermarksSettings?.rotate, isEdit),
+      scale: getInitialScale(initialWatermarksSettings?.imageScale, isEdit),
+      url: initialWatermarksSettings?.imageUrl ?? "",
     };
   }
 
   const initialInfoRef = initialInfo.current;
 
   useEffect(() => {
-    if (!isEdit)
-      setWatermarks(
-        {
-          rotate: initialInfoRef.rotate.key,
-          imageScale: initialInfoRef.scale.key,
-          imageUrl: initialInfoRef.url,
-          text: "",
-          additions: 0,
-        },
-        true,
-      );
+    setWatermarks(
+      {
+        rotate: initialInfoRef.rotate.key,
+        additions: 0,
+        isImage: true,
+        enabled: true,
+        ...(initialWatermarksSettings && {
+          imageHeight: initialWatermarksSettings.imageHeight,
+          imageScale: initialWatermarksSettings.imageScale,
+          imageWidth: initialWatermarksSettings.imageWidth,
+          imageUrl: initialWatermarksSettings.imageUrl,
+        }),
+      },
+      true,
+    );
   }, []);
 
   const [selectedRotate, setRotate] = useState(initialInfoRef.rotate);
   const [selectedScale, setScale] = useState(initialInfoRef.scale);
 
-  const onInput = (file) => {
-    console.log("onInput", file);
+  // const onInput = (file) => {
+  //   console.log("onInput", file);
 
-    imageProcessing(file)
-      .then((f) => {
-        if (f instanceof File) setWatermarks({ image: f });
-      })
-      .catch((error) => {
-        if (
-          error instanceof Error &&
-          error.message === "recursion depth exceeded"
-        ) {
-          toastr.error(t("Common:SizeImageLarge"));
-        }
-      });
-  };
+  //   imageProcessing(file)
+  //     .then((f) => {
+  //       if (f instanceof File) setWatermarks({ image: f });
+  //     })
+  //     .catch((error) => {
+  //       if (
+  //         error instanceof Error &&
+  //         error.message === "recursion depth exceeded"
+  //       ) {
+  //         toastr.error(t("Common:SizeImageLarge"));
+  //       }
+  //     });
+  // };
   const onScaleChange = (item) => {
     setScale(item);
 
@@ -185,7 +187,7 @@ const ImageWatermark = ({
           className="access-right-item"
           key={item.key}
           data-key={item.key}
-          onClick={() => onRotateChange(item)}
+          onClick={() => onScaleChange(item)}
         >
           {item.label}%
         </DropDownItem>
@@ -194,10 +196,20 @@ const ImageWatermark = ({
 
     return <div style={{ display: "contents" }}>{items}</div>;
   };
+
+  const onSelectFile = (fileInfo) => {
+    setWatermarks({ image: fileInfo });
+  };
+
   return (
     <StyledWatermark>
-      <FileInput accept={["image/png", "image/jpeg"]} onInput={onInput} scale />
-
+      {/* <FileInput accept={["image/png", "image/jpeg"]} onInput={onInput} scale /> */}
+      <FilesSelectorInput
+        onSelectFile={onSelectFile}
+        filterParam={FilesSelectorFilterTypes.IMG}
+        isSelect
+        scale
+      />
       <div className="options-wrapper">
         <div>
           <Text className="watermark-title" fontWeight={600} lineHeight="20px">
@@ -238,9 +250,9 @@ const ImageWatermark = ({
 };
 
 export default inject(({ createEditRoomStore }) => {
-  const { setWatermarks, watermarksSettings } = createEditRoomStore;
+  const { setWatermarks, initialWatermarksSettings } = createEditRoomStore;
   return {
     setWatermarks,
-    watermarksSettings,
+    initialWatermarksSettings,
   };
 })(observer(ImageWatermark));

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js

@@ -100,7 +100,7 @@ const rotateOptions = (t) => [
 const getInitialRotate = (rotate, isEdit, t) => {
   const dataRotate = rotateOptions(t);
 
-  if (!isEdit || rotate === undefined) return dataRotate[0];
+  if (!isEdit) return dataRotate[0];
 
   const item = dataRotate.find((item) => {
     return item.key === rotate;
@@ -113,7 +113,8 @@ const ViewerInfoWatermark = ({
   isEdit,
 
   setWatermarks,
-  watermarksSettings,
+
+  initialWatermarksSettings,
 }) => {
   const { t } = useTranslation(["CreateEditRoomDialog", "Common"]);
 
@@ -124,10 +125,9 @@ const ViewerInfoWatermark = ({
     initialInfo.current = {
       dataRotate: rotateOptions(t),
       dataTabs: tabsOptions(t),
-      rotate: getInitialRotate(watermarksSettings?.rotate, isEdit, t),
-      tabs: getInitialTabs(watermarksSettings?.additions, isEdit, t),
-      text: getInitialText(watermarksSettings?.text, isEdit),
-      additions: watermarksSettings?.additions || WatermarkAdditions.UserName,
+      tabs: getInitialTabs(initialWatermarksSettings?.additions, isEdit, t),
+      rotate: getInitialRotate(initialWatermarksSettings?.rotate, isEdit, t),
+      text: getInitialText(initialWatermarksSettings?.text, isEdit),
     };
 
     elements.current = getInitialState(initialInfo.current.tabs);
@@ -136,15 +136,20 @@ const ViewerInfoWatermark = ({
   const initialInfoRef = initialInfo.current;
 
   useEffect(() => {
-    if (!isEdit)
-      setWatermarks(
-        {
-          rotate: initialInfoRef.rotate.key,
-          text: initialInfoRef.text,
-          additions: initialInfoRef.additions,
-        },
-        true,
-      );
+    setWatermarks(
+      {
+        rotate: initialInfoRef.rotate.key,
+        text: initialInfoRef.text,
+        additions:
+          initialWatermarksSettings?.additions || WatermarkAdditions.UserName,
+        isImage: false,
+        enabled: true,
+        imageWidth: 0,
+        imageHeight: 0,
+        imageScale: 0,
+      },
+      true,
+    );
   }, []);
 
   const [selectedPosition, setSelectedPosition] = useState(
@@ -167,7 +172,7 @@ const ViewerInfoWatermark = ({
         flagsCount += WatermarkAdditions[key];
       }
     }
-    setWatermarks({ additions: flagsCount }); 
+    setWatermarks({ additions: flagsCount });
   };
 
   const onPositionChange = (item) => {
@@ -221,9 +226,10 @@ const ViewerInfoWatermark = ({
 };
 
 export default inject(({ createEditRoomStore }) => {
-  const { setWatermarks, watermarksSettings } = createEditRoomStore;
+  const { setWatermarks, initialWatermarksSettings } = createEditRoomStore;
   return {
     setWatermarks,
-    watermarksSettings,
+
+    initialWatermarksSettings,
   };
 })(observer(ViewerInfoWatermark));

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/WatermarkBlock.js

@@ -60,21 +60,26 @@ const WatermarkBlock = ({
   setWatermarks,
   isEdit = false,
   isWatermarks = false,
+  initialWatermarksSettings,
   t,
 }) => {
   useEffect(() => {
-    console.log("!!!!watermarksChecked", watermarksChecked);
-    if (!isEdit) setWatermarks({ enabled: watermarksChecked }, true);
+    setWatermarks(
+      isEdit ? initialWatermarksSettings : { enabled: watermarksChecked },
+      true,
+    );
   }, []);
 
   const [watermarksChecked, setWatermarksChecked] = useState(
     isWatermarks && isEdit,
   );
+
   const onChangeAddWatermarksToDocuments = () => {
     setWatermarksChecked(!watermarksChecked);
 
     setWatermarks({ enabled: !watermarksChecked });
   };
+
   return (
     <BlockComponent
       headerText={t("AddWatermarksToDocuments")}
@@ -89,10 +94,10 @@ const WatermarkBlock = ({
 };
 
 export default inject(({ createEditRoomStore }) => {
-  const { setWatermarks, watermarksSettings } = createEditRoomStore;
+  const { setWatermarks, initialWatermarksSettings } = createEditRoomStore;
   return {
     setWatermarks,
-
-    isWatermarks: watermarksSettings?.enabled,
+    isWatermarks: initialWatermarksSettings?.enabled,
+    initialWatermarksSettings,
   };
 })(observer(WatermarkBlock));

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js

@@ -55,26 +55,21 @@ const getOptionType = (additions, isEdit) => {
 
   return viewerInfoWatermark;
 };
-const Watermarks = ({
-  isEdit,
-  watermarksSettings,
-  isImageType,
-  setIsImageWatermarkType,
-}) => {
+const Watermarks = ({ isEdit, setWatermarks, initialWatermarksSettings }) => {
   const { t } = useTranslation(["CreateEditRoomDialog", "Common"]);
   const [type, setType] = useState(
-    getOptionType(watermarksSettings?.additions, isEdit),
+    getOptionType(initialWatermarksSettings?.additions, isEdit),
   );
 
   useEffect(() => {
-    setIsImageWatermarkType(type === imageWatermark, true);
+    !isEdit && setWatermarks({ isImage: type === imageWatermark });
   }, []);
 
   const onSelectType = (e) => {
     const { value } = e.target;
 
     setType(value);
-    setIsImageWatermarkType(value === imageWatermark);
+    setWatermarks({ isImage: type === imageWatermark });
   };
 
   const typeOptions = options(t);
@@ -91,7 +86,7 @@ const Watermarks = ({
         onClick={onSelectType}
       />
 
-      {isImageType ? (
+      {type === imageWatermark ? (
         <ImageWatermark isEdit={isEdit} />
       ) : (
         <ViewerInfoWatermark isEdit={isEdit} />
@@ -101,11 +96,9 @@ const Watermarks = ({
 };
 
 export default inject(({ createEditRoomStore }) => {
-  const { watermarksSettings, setIsImageWatermarkType, isImageType } =
-    createEditRoomStore;
+  const { setWatermarks, initialWatermarksSettings } = createEditRoomStore;
   return {
-    watermarksSettings,
-    isImageType,
-    setIsImageWatermarkType,
+    setWatermarks,
+    initialWatermarksSettings,
   };
 })(observer(Watermarks));

packages/client/src/store/CreateEditRoomStore.js

@@ -96,9 +96,21 @@ class CreateEditRoomStore {
     this.onClose = onClose;
   };
 
-  setWatermarks = (watermarksSettings, isInit = false) => {
-    if (isInit) {
-      this.initialWatermarksSettings = watermarksSettings;
+  setInitialWatermarks = (watermarksSettings) => {
+    if (!watermarksSettings) {
+      this.initialWatermarksSettings = { enabled: false };
+
+      return;
+    }
+
+    this.initialWatermarksSettings = watermarksSettings;
+    this.initialWatermarksSettings.isImage = !!watermarksSettings.imageUrl;
+  };
+
+  setWatermarks = (watermarksSettings, isReplacing) => {
+    if (isReplacing) {
+      this.watermarksSettings = watermarksSettings;
+      return;
     }
 
     this.watermarksSettings = {
@@ -107,57 +119,62 @@ class CreateEditRoomStore {
     };
   };
 
-  setIsImageWatermarkType = (isImageType, isInit) => {
-    if (isInit) {
-      this.initialIsImageType = isImageType;
-    }
-
-    this.isImageType = isImageType;
-  };
-
   isEqualWatermarkChanges = () => {
-    if (this.isImageType !== this.initialIsImageType) return false;
-
     return isEqual(this.watermarksSettings, this.initialWatermarksSettings);
   };
 
   isNotWatermarkSet = () => {
-    if (this.isImageType && !this.watermarksSettings.image) return true;
+    if (this.watermarksSettings.isImage && !this.watermarksSettings.image)
+      return true;
 
-    if (!this.isImageType && this.watermarksSettings.additions === 0)
+    if (
+      !this.watermarksSettings.isImage &&
+      this.watermarksSettings.additions === 0
+    )
       return true;
 
     return false;
   };
+
   getWatermarkRequest = async (room) => {
     if (!this.watermarksSettings.image) {
-      return setWatermarkSettings(room.id, this.watermarksSettings);
+      return setWatermarkSettings(room.id, {
+        enabled: this.watermarksSettings.enabled,
+        rotate: this.watermarksSettings.rotate,
+        text: this.watermarksSettings.text,
+        additions: this.watermarksSettings.additions,
+      });
     }
 
-    const { uploadRoomLogo } = this.filesStore;
+    const getMeta = (url, onSetInfo) => {
+      const img = new Image();
 
-    const watermarkImage = this.watermarksSettings.image;
-    const uploadWatermarkData = new FormData();
-    uploadWatermarkData.append(0, watermarkImage);
+      img.onload = () => onSetInfo(null, img);
+      img.onerror = (err) => onSetInfo(err);
+      img.src = url;
+    };
 
-    const response = await uploadRoomLogo(uploadWatermarkData);
+    //TODO: Return the decision when it will be possible to upload images.
+    //const { uploadRoomLogo } = this.filesStore;
+    //  const watermarkImage = this.watermarksSettings.image;
+    //  const uploadWatermarkData = new FormData();
+    //  uploadWatermarkData.append(0, watermarkImage);
+    //  const response = await uploadRoomLogo(uploadWatermarkData);
 
-    let newImage = new Image();
-    newImage.src = URL.createObjectURL(watermarkImage);
+    const imageInfo = this.watermarksSettings.image;
 
-    newImage.onload = () => {
-      let width = newImage.width;
-      let height = newImage.height;
+    getMeta(imageInfo.viewUrl, (err, img) => {
+      if (err) return;
 
-      return setWatermarkSettings(room.id, {
-        enabled: true,
+      setWatermarkSettings(room.id, {
+        enabled: this.watermarksSettings.enabled,
         imageScale: this.watermarksSettings.imageScale,
         rotate: this.watermarksSettings.rotate,
-        imageUrl: response.data,
-        imageWidth: width,
-        imageHeight: height,
+        imageId: imageInfo.id,
+        imageWidth: img.naturalWidth,
+        imageHeight: img.naturalHeight,
       });
-    };
+    });
   };
 
   onCreateRoom = async (withConfirm = false, t) => {