From 8bac9a7e0bcf23d715d8dc0d606c6dbad84eb3b7 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Fri, 3 May 2024 13:35:29 +0300
Subject: [PATCH] Client: Components: Refactoring.

---
 .../sub-components/Watermarks/ViewerInfo.js   | 68 ++++++++-----------
 .../sub-components/Watermarks/index.js        | 43 ++++++++++--
 2 files changed, 68 insertions(+), 43 deletions(-)

diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js
index 1776646313..b51273936f 100644
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.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 } from "react";
+import { useState, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { TabsContainer } from "@docspace/shared/components/tabs-container";
 import { TextInput } from "@docspace/shared/components/text-input";
@@ -34,56 +34,45 @@ import { ComboBox } from "@docspace/shared/components/combobox";
 import { StyledWatermark } from "./StyledComponent";
 import { WatermarkAdditions } from "@docspace/shared/enums";
 
-const options = (t) => [
-  {
-    key: "UserName",
-    title: t("UserName"),
-  },
-  {
-    key: "UserEmail",
-    title: t("UserEmail"),
-  },
-  {
-    key: "UserIpAdress",
-    title: t("UserIPAddress"),
-  },
-  {
-    key: "CurrentDate",
-    title: t("Common:CurrentDate"),
-  },
-  {
-    key: "RoomName",
-    title: t("Common:RoomName"),
-  },
-];
-
-const ViewerInfoWatermark = ({ setParams, initialPosition, dataPosition }) => {
-  const { t } = useTranslation(["CreateEditRoomDialog", "Common"]);
-
-  const dataTabs = options(t);
-
-  const [elements, setElements] = useState({
+const getInitialState = (initialTab) => {
+  const state = {
     UserName: false,
     UserEmail: false,
     UserIpAdress: false,
     CurrentDate: false,
     RoomName: false,
+  };
+
+  initialTab.map((item) => {
+    state[item.key] = true;
   });
+
+  return state;
+};
+
+const ViewerInfoWatermark = ({
+  setParams,
+  initialPosition,
+  dataPosition,
+  dataTabs,
+  initialTab,
+}) => {
+  const { t } = useTranslation(["CreateEditRoomDialog", "Common"]);
+  const elements = useRef(getInitialState(initialTab));
+
   const [selectedPosition, setSelectedPosition] = useState(initialPosition);
   const [textValue, setTextValue] = useState("");
 
   const onSelect = (item) => {
-    const updatedElem = elements[item.key];
-    const key = item.key;
-
-    const updatedState = { ...elements, [key]: !updatedElem };
-
-    setElements(updatedState);
-
+    let elementsData = elements.current;
     let flagsCount = 0;
 
-    for (const key in updatedState) {
-      const value = updatedState[key];
+    const key = item.key;
+
+    elementsData[key] = !elementsData[item.key];
+
+    for (const key in elementsData) {
+      const value = elementsData[key];
 
       if (value) {
         flagsCount += WatermarkAdditions[key];
@@ -114,6 +103,7 @@ const ViewerInfoWatermark = ({ setParams, initialPosition, dataPosition }) => {
       <TabsContainer
         elements={dataTabs}
         onSelect={onSelect}
+        selectedItem={initialTab.map((item) => item.index)}
         multiple
         withBorder
       />
diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js
index ae1df0ad59..81a534c86e 100644
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js
@@ -31,9 +31,9 @@ import { RadioButtonGroup } from "@docspace/shared/components/radio-button-group
 
 import ViewerInfoWatermark from "./ViewerInfo";
 import { StyledBody } from "./StyledComponent";
+import { WatermarkAdditions } from "@docspace/shared/enums";
 
-const textWatermark = "text",
-  imageWatermark = "image",
+const imageWatermark = "image",
   viewerInfoWatermark = "viewerInfo";
 
 const options = (t) => [
@@ -51,6 +51,34 @@ const positionOptions = (t) => [
   { key: -45, label: t("Diagonal") },
   { key: 0, label: t("Horizontal") },
 ];
+
+const elementsOptions = (t) => [
+  {
+    key: "UserName",
+    title: t("UserName"),
+    index: 0,
+  },
+  {
+    key: "UserEmail",
+    title: t("UserEmail"),
+    index: 1,
+  },
+  {
+    key: "UserIpAdress",
+    title: t("UserIPAddress"),
+    index: 2,
+  },
+  {
+    key: "CurrentDate",
+    title: t("Common:CurrentDate"),
+    index: 3,
+  },
+  {
+    key: "RoomName",
+    title: t("Common:RoomName"),
+    index: 4,
+  },
+];
 const Watermarks = ({ setRoomParams }) => {
   const { t } = useTranslation(["CreateEditRoomDialog", "Common"]);
   const [type, setType] = useState(viewerInfoWatermark);
@@ -58,14 +86,20 @@ const Watermarks = ({ setRoomParams }) => {
   const dataPosition = positionOptions(t);
   const initialPosition = dataPosition[0];
 
+  const dataTabs = elementsOptions(t);
+  const initialTab = [dataTabs[0]];
+
   useEffect(() => {
+    let additions = 0;
+    initialTab.map((item) => (additions += WatermarkAdditions[item.key]));
+
     setRoomParams((prevState) => ({
       ...prevState,
       watermarks: {
         enabled: true,
         rotate: initialPosition.key,
         text: "",
-        additions: 0,
+        additions,
       },
     }));
   }, []);
@@ -77,7 +111,6 @@ const Watermarks = ({ setRoomParams }) => {
   };
 
   const setParams = (info) => {
- 
     setRoomParams((prevState) => ({
       ...prevState,
       watermarks: { ...prevState.watermarks, ...info },
@@ -102,6 +135,8 @@ const Watermarks = ({ setRoomParams }) => {
           setParams={setParams}
           initialPosition={initialPosition}
           dataPosition={dataPosition}
+          dataTabs={dataTabs}
+          initialTab={initialTab}
         />
       )}
     </StyledBody>