[update]- profile page

2024-12-12 17:28:32 +05:30
parent 471e4f32ab
commit 6a0aa17e2d
4 changed files with 131 additions and 99 deletions
--- a/src/Components/RoleSwitchButton.jsx
+++ b/src/Components/RoleSwitchButton.jsx
@@ -1,6 +1,5 @@
 import { Box, Text } from "@chakra-ui/react";
-import React, { useRef } from "react";
-import audioClick from "../assets/click-151673.mp3";
+import React from "react";

 const RoleSwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {

--- a/src/Constants/Constants.js
+++ b/src/Constants/Constants.js
@@ -1,4 +1,3 @@
-
 import dns from "node:dns"
 import * as XLSX from 'xlsx';
 import CryptoJS from "crypto-js";
@@ -95,7 +94,7 @@ export function debounce(func, delay) {



-async function resolveMx(domain, recordType) {
+async function resolveMx(domain) {
  return new Promise((resolve, reject) => {
    dns.resolveMx(domain, (err, mxRecords) => {
      if (err) {
@@ -110,14 +109,17 @@ async function resolveMx(domain, recordType) {
 // Async function to check email address validity
 export async function checkEmailValidity(email) {
  try {
-    const domain = email?.split("@")[1];
-    const addresses = await resolveMx(domain, "MX");
+    const domain = email?.split('@')[1];
+    const addresses = await resolveMx(domain, 'MX');
+    console.log(addresses);

    if (addresses && addresses?.length > 0) {
      return true;
    }
    return false; // No MX record exists
  } catch (err) {
+    console.log(err);
+    
    return false; // Error occurred
  }
 }
@@ -239,5 +241,5 @@ export const SUPER_ADMIN_ID = Number(import.meta.env.VITE_SUPER_ADMIN_ID) || 1
 export const MAKER_ID = import.meta.env.VITE_MAKER_ID || 1
 export const CHECKER_ID = import.meta.env.VITE_CHECKER_ID || 2

-export const isMaker = () => decryptString(localStorage?.getItem("role")) === import.meta.env.VITE_MAKER;
-export const isChecker = () => decryptString(localStorage?.getItem("role")) === import.meta.env.VITE_CHECKER;
+export const isMaker = (role = decryptString(localStorage?.getItem("role"))) => role === import.meta.env.VITE_MAKER;
+export const isChecker = (role = decryptString(localStorage?.getItem("role"))) => role === import.meta.env.VITE_CHECKER;
--- a/src/Pages/Profile/Profile.jsx
+++ b/src/Pages/Profile/Profile.jsx
@@ -1,26 +1,21 @@
+import { CheckIcon, CloseIcon, InfoIcon } from "@chakra-ui/icons";
 import {
  Avatar,
  Box,
  ButtonGroup,
-  Editable,
-  EditableInput,
-  EditablePreview,
-  EditableTextarea,
-  Flex,
  HStack,
  Heading,
  Icon,
  IconButton,
-  Input,
  Text,
  VStack,
-  useEditableControls,
+  useEditableControls
 } from "@chakra-ui/react";
-import React from "react";
-import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import { CheckIcon, CloseIcon, EditIcon, InfoIcon } from "@chakra-ui/icons";
+import React, { useEffect, useState } from "react";
 import { FaEarthAmericas } from "react-icons/fa6";
 import logoMini from "../../assets/propic.png";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { useAuthProfileQuery } from "../../Services/token.serivce";

 const Profile = () => {
  /* Here's a custom control */
@@ -53,19 +48,56 @@ const Profile = () => {
      )
    );
  }
+  const { data } = useAuthProfileQuery();

-
-    // Array of fields to render
-    const fields = [
-      { name: "firstName", label: "First Name", defaultValue: "Faisal" },
-      { name: "lastName", label: "Last Name", defaultValue: "Aljalahma" },
-      { name: "email", label: "Email Address", defaultValue: "f.aljalahma@tanamicapital.com" },
-      { name: "mobile", label: "Mobile Number", defaultValue: "9898767876" },
-      { name: "role", label: "Role", defaultValue: "Maker" },
-    ];
-
-
-
+  const [fields, setFields] = useState([
+    {
+      name: "firstName",
+      label: "First Name",
+      defaultValue: null,
+    },
+    {
+      name: "lastName",
+      label: "Last Name",
+      defaultValue: null,
+    },
+    {
+      name: "email",
+      label: "Email Address",
+      defaultValue: null,
+    },
+    {
+      name: "mobile",
+      label: "Mobile Number",
+      defaultValue: null,
+    },
+    { name: "role", label: "Role", defaultValue: null },
+  ]);
+  useEffect(() => {
+    setFields([
+      {
+        name: "firstName",
+        label: "First Name",
+        defaultValue: data?.data?.firstName || null,
+      },
+      {
+        name: "lastName",
+        label: "Last Name",
+        defaultValue: data?.data?.lastName || null,
+      },
+      {
+        name: "email",
+        label: "Email Address",
+        defaultValue: data?.data?.emailAddress || null,
+      },
+      {
+        name: "mobile",
+        label: "Mobile Number",
+        defaultValue: data?.data?.mobileNumber || null,
+      },
+      { name: "role", label: "Role", defaultValue: data?.data?.role || null },
+    ]);
+  }, [data]);

  return (
    <VStack
@@ -114,7 +146,7 @@ const Profile = () => {
                color={"gray.700"}
                fontWeight={500}
              >
-                Faisal Aljalahma
+                {data?.data?.firstName + " " + data?.data?.lastName}
              </Text>

              <Text
@@ -123,7 +155,7 @@ const Profile = () => {
                color={"gray.500"}
                fontWeight={400}
              >
-                f.aljalahma@tanamicapital.com
+                {data?.data?.emailAddress}
              </Text>
            </VStack>
          </HStack>
@@ -150,16 +182,16 @@ const Profile = () => {
                fontWeight={500}
              >
                {" "}
-                <Icon as={FaEarthAmericas} /> Maker
+                <Icon as={FaEarthAmericas} /> {data?.data?.role}
              </Text>
            </VStack>
          </HStack>
        </Box>

+        {/* 
        <Heading as="h3" size="sm">
          About you
        </Heading>
-
        <Box
          rounded="md"
          boxShadow="base"
@@ -170,55 +202,56 @@ const Profile = () => {
          alignItems="flex-start"
          p={6}
          gap={0}
-
          pb={6}
        >
-
-{fields?.map((item) => (
-  <VStack alignItems={"flex-start"} w={"100%"} gap={1.5} mb={6} key={item?.label}>
-    <Text
-      as={"span"}
-      fontSize="xs"
-      fontWeight="semibold"
-      color={"gray.500"}
-    >
-      {item?.label}
-    </Text>
-    <Editable
-      position={"relative"}
-      gap={0}
-      defaultValue={item?.defaultValue}
-      w="100%"
-    >
-      <EditablePreview
-      cursor={'pointer'}
-        p={2}
-        rounded={"sm"}
-        w={"100%"}
-        _hover={{
-          bg: "gray.100",
-        }}
-        fontSize="sm"
-        transition={"0.5s"}
-      />
-      <Input
-      as={EditableInput}
-        ps={2}
-        size={'sm'}
-        fontSize="sm"
-        rounded={"sm"}
-        _focus={{
-          borderColor:"blue.500"
-        }}
-      />
-      <EditableControls />
-    </Editable>
-  </VStack>
-))}
-
-
-
-        </Box>
+          {fields?.map((item) => (
+            <VStack
+              alignItems={"flex-start"}
+              w={"100%"}
+              gap={1.5}
+              mb={6}
+              key={item?.label}
+            >
+              <Text
+                as={"span"}
+                fontSize="xs"
+                fontWeight="semibold"
+                color={"gray.500"}
+              >
+                {item?.label}
+              </Text>
+              <Editable
+                position={"relative"}
+                gap={0}
+                defaultValue={item?.defaultValue}
+                w="100%"
+              >
+                <EditablePreview
+                  cursor={"pointer"}
+                  p={2}
+                  rounded={"sm"}
+                  w={"100%"}
+                  _hover={{
+                    bg: "gray.100",
+                  }}
+                  fontSize="sm"
+                  transition={"0.5s"}
+                />
+                <Input
+                  as={EditableInput}
+                  ps={2}
+                  size={"sm"}
+                  fontSize="sm"
+                  rounded={"sm"}
+                  _focus={{
+                    borderColor: "blue.500",
+                  }}
+                />
+                <EditableControls />
+              </Editable>
+            </VStack>
+          ))}
+        </Box> */}
      </VStack>
    </VStack>
  );
--- a/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
+++ b/src/Pages/SubAdmin/SubAdminUpdateCreate.jsx
@@ -10,7 +10,9 @@ import FormInputMain from "../../Components/FormInputMain";
 import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
 import RoleSwitchButton from "../../Components/RoleSwitchButton";
 import ToastBox from "../../Components/ToastBox";
-import { encryptString } from "../../Constants/Constants";
+import {
+  isMaker
+} from "../../Constants/Constants";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
 import {
  useCreateSubAdminMutation,
@@ -18,8 +20,7 @@ import {
  useUpdateSubAdminMutation,
 } from "../../Services/subadmin.service";
 // ======================= [validation] =========================
-
-export const addSubAdmin = yup.object().shape({
+const addSubAdminSchema = yup.object().shape({
  firstName: yup
    .string()
    .required("First Name is required")
@@ -28,13 +29,12 @@ export const addSubAdmin = yup.object().shape({
    .matches(/^[^\d]+$/, "First Name cannot contain numbers"),

  lastName: yup.string().required("Last Name name in arabic is required"),
-  emailAddress: yup.string().email("Invalid email address").notRequired(),
-  //   .test("emailValidity", "Email address is invalid", async function (value) {
-  //     if (!value) {
-  //         return true; // Allow if the field is empty
-  //     }
-  //     return await checkEmailValidity(value);
-  // }),
+  emailAddress: yup
+    .string()
+    .email("Invalid email address")
+    .required()
+    .min(6, "Email address must be at least 6 characters long")
+    .max(255, "Email address can be at most 255 characters long"),
 });

 // ==================== [debounce] ========================
@@ -77,7 +77,8 @@ const SubAdminUpdateCreate = () => {
    formState: { errors },
    reset,
  } = useForm({
-    resolver: yupResolver(addSubAdmin),
+    resolver: yupResolver(addSubAdminSchema),
+    mode: "all",
  });

  // ========================== [useEffect] ================================
@@ -89,10 +90,7 @@ const SubAdminUpdateCreate = () => {
        lastName: subAdminByIdData?.data?.lastName,
        emailAddress: subAdminByIdData?.data?.emailAddress,
      });
-      setIsSwitchOn(
-        subAdminByIdData?.data?.role[0]?.role ===
-          encryptString(import.meta.env.VITE_VITE_MAKER)
-      );
+      setIsSwitchOn(isMaker(subAdminByIdData?.data?.role[0]?.role));
    }
  }, [subAdminByIdData, reset]);

@@ -317,9 +315,9 @@ const SubAdminUpdateCreate = () => {
          />
        )} */}
        <RoleSwitchButton
-            isSwitchOn={isSwitchOn}
-            setIsSwitchOn={setIsSwitchOn}
-          />
+          isSwitchOn={isSwitchOn}
+          setIsSwitchOn={setIsSwitchOn}
+        />
      </Box>

      {/* ====================== [Form Input] ====================== */}