Refactoring.

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

@@ -58,9 +58,8 @@ import { inject, observer } from "mobx-react";
 import { StyledWatermark } from "./StyledComponent";
 
 import { DropDownItem } from "@docspace/shared/components/drop-down-item";
-
-import FilesSelectorInput from "SRC_DIR/components/FilesSelectorInput";
-import { FilesSelectorFilterTypes } from "@docspace/shared/enums";
+import { FileInput } from "@docspace/shared/components/file-input";
+import { imageProcessing } from "@docspace/shared/utils/common";
 
 const scaleOptions = [
   { key: 100, label: "100" },
@@ -108,49 +107,42 @@ const ImageWatermark = ({
     initialInfo.current = {
       rotate: getInitialRotate(initialWatermarksSettings?.rotate, isEdit),
       scale: getInitialScale(initialWatermarksSettings?.imageScale, isEdit),
-      url: initialWatermarksSettings?.imageUrl ?? "",
     };
   }
 
   const initialInfoRef = initialInfo.current;
 
   useEffect(() => {
-    setWatermarks(
-      {
+    if (!isEdit) return;
+
+    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);
 
@@ -197,19 +189,20 @@ const ImageWatermark = ({
     return <div style={{ display: "contents" }}>{items}</div>;
   };
 
-  const onSelectFile = (fileInfo) => {
-    setWatermarks({ image: fileInfo });
-  };
+  // const onSelectFile = (fileInfo) => {
+  //   setWatermarks({ image: fileInfo });
+  // };
 
   return (
     <StyledWatermark>
-      {/* <FileInput accept={["image/png", "image/jpeg"]} onInput={onInput} scale /> */}
-      <FilesSelectorInput
+      <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">
@@ -251,6 +244,7 @@ const ImageWatermark = ({
 
 export default inject(({ createEditRoomStore }) => {
   const { setWatermarks, initialWatermarksSettings } = createEditRoomStore;
+
   return {
     setWatermarks,
     initialWatermarksSettings,

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

@@ -136,20 +136,18 @@ const ViewerInfoWatermark = ({
   const initialInfoRef = initialInfo.current;
 
   useEffect(() => {
-    setWatermarks(
-      {
+    if (!isEdit) return;
+
+    setWatermarks({
       rotate: initialInfoRef.rotate.key,
-        text: initialInfoRef.text,
-        additions:
-          initialWatermarksSettings?.additions || WatermarkAdditions.UserName,
+      additions: WatermarkAdditions.UserName,
       isImage: false,
       enabled: true,
+      image: "",
       imageWidth: 0,
       imageHeight: 0,
       imageScale: 0,
-      },
-      true,
-    );
+    });
   }, []);
 
   const [selectedPosition, setSelectedPosition] = useState(
@@ -227,9 +225,9 @@ const ViewerInfoWatermark = ({
 
 export default inject(({ createEditRoomStore }) => {
   const { setWatermarks, initialWatermarksSettings } = createEditRoomStore;
+
   return {
     setWatermarks,
-
     initialWatermarksSettings,
   };
 })(observer(ViewerInfoWatermark));

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

@@ -60,14 +60,11 @@ const WatermarkBlock = ({
   setWatermarks,
   isEdit = false,
   isWatermarks = false,
-  initialWatermarksSettings,
+  resetWatermarks,
   t,
 }) => {
   useEffect(() => {
-    setWatermarks(
-      isEdit ? initialWatermarksSettings : { enabled: watermarksChecked },
-      true,
-    );
+    return () => resetWatermarks();
   }, []);
 
   const [watermarksChecked, setWatermarksChecked] = useState(
@@ -94,10 +91,12 @@ const WatermarkBlock = ({
 };
 
 export default inject(({ createEditRoomStore }) => {
-  const { setWatermarks, initialWatermarksSettings } = createEditRoomStore;
+  const { setWatermarks, initialWatermarksSettings, resetWatermarks } =
+    createEditRoomStore;
+
   return {
     setWatermarks,
     isWatermarks: initialWatermarksSettings?.enabled,
-    initialWatermarksSettings,
+    resetWatermarks,
   };
 })(observer(WatermarkBlock));

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

@@ -24,7 +24,7 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 
@@ -61,10 +61,6 @@ const Watermarks = ({ isEdit, setWatermarks, initialWatermarksSettings }) => {
     getOptionType(initialWatermarksSettings?.additions, isEdit),
   );
 
-  useEffect(() => {
-    !isEdit && setWatermarks({ isImage: type === imageWatermark });
-  }, []);
-
   const onSelectType = (e) => {
     const { value } = e.target;
 

packages/client/src/store/CreateEditRoomStore.js

@@ -49,7 +49,8 @@ class CreateEditRoomStore {
   settingsStore = null;
   infoPanelStore = null;
   currentQuotaStore = null;
-  watermarksSettings = null;
+  watermarksSettings = {};
+  initialWatermarksSettings = null;
   isImageType = false;
 
   constructor(
@@ -97,26 +98,24 @@ class CreateEditRoomStore {
   };
 
   setInitialWatermarks = (watermarksSettings) => {
-    if (!watermarksSettings) {
-      this.initialWatermarksSettings = { enabled: false };
+    this.initialWatermarksSettings = !watermarksSettings
+      ? { enabled: false }
+      : watermarksSettings;
 
-      return;
-    }
+    this.initialWatermarksSettings.isImage =
+      !!this.initialWatermarksSettings.imageUrl;
 
-    this.initialWatermarksSettings = watermarksSettings;
-    this.initialWatermarksSettings.isImage = !!watermarksSettings.imageUrl;
+    this.setWatermarks(this.initialWatermarksSettings);
   };
 
-  setWatermarks = (watermarksSettings, isReplacing) => {
-    if (isReplacing) {
-      this.watermarksSettings = watermarksSettings;
-      return;
+  setWatermarks = (object) => {
+    for (const [key, value] of Object.entries(object)) {
+      this.watermarksSettings[key] = value;
     }
-
-    this.watermarksSettings = {
-      ...this.watermarksSettings,
-      ...watermarksSettings,
   };
+
+  resetWatermarks = () => {
+    this.watermarksSettings = {};
   };
 
   isEqualWatermarkChanges = () => {
@@ -146,31 +145,40 @@ class CreateEditRoomStore {
       });
     }
 
+    const watermarkImage = this.watermarksSettings.image;
     const getMeta = (url, onSetInfo) => {
+      //url for this.watermarksSettings.image.viewUrl
       const img = new Image();
+      const imgUrl = url ?? URL.createObjectURL(watermarkImage);
+      img.src = imgUrl;
 
-      img.onload = () => onSetInfo(null, img);
-      img.onerror = (err) => onSetInfo(err);
-      img.src = url;
+      img.onload = () => {
+        URL.revokeObjectURL(imgUrl);
+        onSetInfo(null, img);
       };
 
-    //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);
+      img.onerror = (err) => onSetInfo(err);
+    };
 
-    const imageInfo = this.watermarksSettings.image;
+    const { uploadRoomLogo } = this.filesStore;
 
-    getMeta(imageInfo.viewUrl, (err, img) => {
-      if (err) return;
+    const uploadWatermarkData = new FormData();
+    uploadWatermarkData.append(0, watermarkImage);
 
-      setWatermarkSettings(room.id, {
+    const response = await uploadRoomLogo(uploadWatermarkData);
+
+    getMeta(null, (err, img) => {
+      if (err) {
+        toastr.error(err);
+        return;
+      }
+
+      return setWatermarkSettings(room.id, {
         enabled: this.watermarksSettings.enabled,
         imageScale: this.watermarksSettings.imageScale,
         rotate: this.watermarksSettings.rotate,
-        imageId: imageInfo.id,
+        imageUrl: response.data,
+        // imageId: this.watermarksSettings.image.id,
         imageWidth: img.naturalWidth,
         imageHeight: img.naturalHeight,
       });