Client: Components: Refactoring.

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

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>