Merge pull request #2851 from rambey-coder/feat/rambey-branch

My PR Fixes FRO-205 - change organization time zone
zurichat · Dec 29, 2022 · ff709bf · ff709bf
2 parents 1581914 + 8fd86bb
commit ff709bf
Show file tree

Hide file tree

Showing 9 changed files with 15,879 additions and 15,027 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,6 @@
     "type": "git",
     "url": "https://github.com/zurichat/zc_main"
   },
-
   "bugs": {
     "url": "https://github.com/zurichat/zc_main/issues"
   },
@@ -46,6 +45,5 @@
     "pretty-quick": "^3.1.1",
     "rimraf": "^3.0.2",
     "serve": "^12.0.0"
-  },
-  "dependencies": {}
+  }
 }
diff --git a/packages/main/src/components/language/Language.jsx b/packages/main/src/components/language/Language.jsx
@@ -1,34 +1,102 @@
-import React from "react";
+import axios from "axios";
+import { React, useState, useEffect } from "react";
+import { BASE_API_URL } from "@zuri/utilities";
+import { toast, ToastContainer, Zoom } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import Languages from "../constants/Language";
 import styles from "../language/SettingsTab.module.css";
 
 const Language = () => {
+  const [selectLanguage, setSelectLanguage] = useState([]);
+  const [user, setUser] = useState(null);
+
+  let organization_id = JSON.parse(sessionStorage.organisations)[0].id;
+  let user_member_id = JSON.parse(sessionStorage.organisations)[0].member_id;
+
+  useEffect(() => {
+    const user = JSON.parse(sessionStorage.getItem("user"));
+    if (user) {
+      setUser(user);
+    }
+  }, []);
+
+  const handleSelect = e => {
+    setSelectLanguage(e.target.value);
+  };
+
+  const handleSubmt = e => {
+    e.preventDefault();
+
+    axios
+      .patch(
+        `${BASE_API_URL}/organizations/${organization_id}/members/${user_member_id}/settings`,
+
+        {
+          languages_and_regions: {
+            language: selectLanguage
+          }
+        },
+
+        {
+          headers: {
+            Authorization: "Bearer " + user.token
+          }
+        }
+      )
+      .then(res => {
+        if (res) {
+          toast.success("Language changed Sucessfully", {
+            className: styles.sucess_toast_style,
+            draggable: true,
+            autoClose: 3000,
+            transition: Zoom
+          });
+        }
+        const orgLanguage = JSON.parse(localStorage.getItem("userData"));
+
+        orgLanguage.user.settings.languages_and_regions.language =
+          selectLanguage;
+
+        localStorage.setItem("userData", JSON.stringify(orgLanguage));
+      })
+      .catch(error => {
+        if (error) {
+          toast.error("Unable to update language", {
+            className: styles.error_toast_style,
+            draggable: true,
+            autoClose: 3000,
+            transition: Zoom
+          });
+        }
+      });
+  };
+
   return (
-    <div className={styles.passwordsection}>
-      <form className="row d-flex flex-column">
-        <div className="col-md-5 mt-2">
-          <select
-            className="form-select"
-            style={{ height: "40px", fontSize: "16px" }}
-            required
-          >
-            <option disabled defaultValue>
-              Choose language
-            </option>
-            {Languages.map((item, index) => {
-              return (
-                <option key={index} value={item}>
-                  {item}
-                </option>
-              );
-            })}
-          </select>
-        </div>
-        <div className="col-md-4 mb-3 mt-2">
-          <button className="btn">Save Locale</button>
-        </div>
-      </form>
-    </div>
+    <>
+      <ToastContainer />
+      <div className={styles.passwordsection}>
+        <form className="row d-flex flex-column" onSubmit={handleSubmt}>
+          <div className="col-md-5 mt-2">
+            <select className="form-select" required onChange={handleSelect}>
+              <option disabled defaultValue>
+                Choose language
+              </option>
+              {Languages.map((item, index) => {
+                return (
+                  <option key={index} value={item}>
+                    {item}
+                  </option>
+                );
+              })}
+            </select>
+          </div>
+          <div className="col-md-4 mb-3 mt-2">
+            <button className="btn">Save Locale</button>
+          </div>
+        </form>
+      </div>
+    </>
+
   );
 };
 

diff --git a/packages/main/src/components/language/SettingsTab.module.css b/packages/main/src/components/language/SettingsTab.module.css
@@ -88,6 +88,38 @@
   padding: 10px 0;
 }
 
+/* TOAST STYLE */
+.sucess_toast_style  {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  max-width: 240px;
+  background: #00b87c;
+  font-size: 13px;
+  color: #fff;
+  padding: 10px;
+  border-radius: 8px;
+}
+
+.sucess_toast_style > button, .error_toast_style > button {
+  background: transparent;
+  border: 0;
+  color: #dedede;
+}
+
+.error_toast_style  {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  max-width: 220px;
+  background: rgba(244, 66, 66, 0.852);
+  font-size: 13px;
+  color: #fff;
+  padding: 10px;
+  border-radius: 8px;
+}
+
+
 /* THE SECTION OF THE PASSWORD */
 
 .passwordsection {

diff --git a/packages/main/src/components/settings-tab/SettingsTab.jsx b/packages/main/src/components/settings-tab/SettingsTab.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { NavLink, Link } from "react-router-dom";
 import styles from "../settings-tab/SettingsTab.module.css";
 import TimeZone from "../time-zone/TimeZone";
@@ -9,11 +9,12 @@ import TwoFactor from "../two-factor/TwoFactor";
 import ChangeEmail from "../change-email/ChangeEmail";
 import Language from "../language/Language";
 import UserName from "../user-name/UserName";
-import { getUser } from "../settings-tab/utils/Common";
+import { getUser, getLanguage } from "../settings-tab/utils/Common";
 import { useTranslation } from "react-i18next";
 
 const SettingsTab = () => {
   const userData = getUser();
+  const lang = getLanguage();
   const { t } = useTranslation();
   const handleSignOut = () => {};
   return (
@@ -65,7 +66,9 @@ const SettingsTab = () => {
       <AnimateSharedLayout>
         <PreferenceWrapper
           title={t("lang_settings_tab")}
-          text={t("chooselang_settings_tab")}
+          text={`${t("chooselang_settings_tab")}  ${
+            lang.user.settings.languages_and_regions.language
+          }.`}
           btnText={t("expand_settings_tab")}
         >
           {/* Language input field goes under here */}

diff --git a/packages/main/src/components/settings-tab/utils/Common.jsx b/packages/main/src/components/settings-tab/utils/Common.jsx
@@ -8,6 +8,10 @@ export const getUser = () => {
   return result;
 };
 
+export const getLanguage = () => {
+  return JSON.parse(localStorage.getItem("userData"));
+};
+
 // remove the token and user from the session storage
 export const removeUserSession = () => {
   sessionStorage.removeItem("token");

diff --git a/packages/main/src/components/time-zone/SettingsTab.module.css b/packages/main/src/components/time-zone/SettingsTab.module.css
@@ -154,6 +154,37 @@
   width: 130%;
 }
 
+/* TOAST STYLE */
+.sucess_toast_style  {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  max-width: 240px;
+  background: #00b87c;
+  font-size: 13px;
+  color: #fff;
+  padding: 10px;
+  border-radius: 8px;
+}
+
+.sucess_toast_style > button, .error_toast_style > button {
+  background: transparent;
+  border: 0;
+  color: #dedede;
+}
+
+.error_toast_style  {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  max-width: 220px;
+  background: rgba(244, 66, 66, 0.852);
+  font-size: 13px;
+  color: #fff;
+  padding: 10px;
+  border-radius: 8px;
+}
+
 /* THE SECTION OF THE TWO FACTOR */
 
 .two_factor p {

diff --git a/packages/main/src/components/time-zone/TimeZone.jsx b/packages/main/src/components/time-zone/TimeZone.jsx
@@ -1,26 +1,96 @@
-import React from "react";
+import { React, useState, useEffect } from "react";
 import styles from "../time-zone/SettingsTab.module.css";
 import TimeZones from "../constants/TimeZone";
+import axios from "axios";
+import { BASE_API_URL } from "@zuri/utilities";
+import { toast, ToastContainer, Zoom } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
 const TimeZone = () => {
+  const [selectTimezone, setSelectTimezone] = useState([]);
+  const [user, setUser] = useState(null);
+
+  const handleSelect = e => {
+    setSelectTimezone(e.target.value);
+  };
+
+  let organization_id = JSON.parse(sessionStorage.organisations)[0].id;
+  let user_member_id = JSON.parse(sessionStorage.organisations)[0].member_id;
+
+  useEffect(() => {
+    const user = JSON.parse(sessionStorage.getItem("user"));
+    if (user) {
+      setUser(user);
+    }
+  }, []);
+
+  const handleTimezone = e => {
+    e.preventDefault();
+
+    axios
+      .patch(
+        `${BASE_API_URL}/organizations/${organization_id}/members/${user_member_id}/settings`,
+
+        {
+          languages_and_regions: {
+            time_zone: selectTimezone
+          }
+        },
+        {
+          headers: {
+            Authorization: "Bearer " + user.token
+          }
+        }
+      )
+      .then(res => {
+        if (res) {
+          toast.success("Timezone changed Sucessfully", {
+            className: styles.sucess_toast_style,
+            draggable: true,
+            autoClose: 3000,
+            transition: Zoom
+          });
+        }
+        const userTimeZone = JSON.parse(sessionStorage.getItem("user"));
+
+        userTimeZone.time_zone = selectTimezone;
+
+        sessionStorage.setItem("user", JSON.stringify(userTimeZone));
+      })
+      .catch(err => {
+        if (err) {
+          toast.error("Unable to update timezone", {
+            className: styles.error_toast_style,
+            draggable: true,
+            autoClose: 3000,
+            transition: Zoom
+          });
+        }
+      });
+  };
+
   return (
-    <div className={styles.passwordsection}>
-      <form className="row d-flex flex-column">
-        <div className="col-md-5 mt-2">
-          <select className="form-select" required>
-            {TimeZones.map((item, index) => {
-              return (
-                <option key={index} value={item}>
-                  {item}
-                </option>
-              );
-            })}
-          </select>
-        </div>
-        <div className="col-md-4 mb-3 mt-2">
-          <button className="btn">Save Time Zone</button>
-        </div>
-      </form>
-    </div>
+    <>
+      <ToastContainer draggable={false} />
+      <div className={styles.passwordsection}>
+        <form className="row d-flex flex-column" onSubmit={handleTimezone}>
+          <div className="col-md-5 mt-2">
+            <select className="form-select" required onChange={handleSelect}>
+              {TimeZones.map((item, index) => {
+                return (
+                  <option key={index} value={item}>
+                    {item}
+                  </option>
+                );
+              })}
+            </select>
+          </div>
+          <div className="col-md-4 mb-3 mt-2">
+            <button className="btn">Save Time Zone</button>
+          </div>
+        </form>
+      </div>
+    </>
   );
 };