Profile Fixed 🤡

src/Contexts/GlobalStateProvider.jsx

@@ -44,6 +44,10 @@ const GlobalStateProvider = ({ children }) => {
   const [isAuthenticate, setIsAuthenticate] = useState(false);
 
 
+
+  const [image, setImage] = useState("https://bit.ly/dan-abramov");
+
+
   const [reportsHistory, setReportsHistory] = useState([
     {
       "id": 1,
@@ -319,7 +323,7 @@ const GlobalStateProvider = ({ children }) => {
         reportsHistory,
         setReportsHistory,
         requestsTable,
-        setRequestTable
+        setRequestTable,image, setImage
       }}
     >
       {children}

src/Pages/Profile/DisplayProfile.jsx

@@ -0,0 +1,60 @@
+import { Icon } from "@chakra-ui/icon";
+import { Image } from "@chakra-ui/image";
+import { Input } from "@chakra-ui/input";
+import { Box, HStack, Text } from "@chakra-ui/layout";
+import React, { useContext, useRef, useState } from "react";
+import { BiCloudUpload } from "react-icons/bi";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+
+const DisplayProfile = () => {
+  const inputRef = useRef();
+  const { image, setImage } = useContext(GlobalStateContext);
+
+
+    // Trigger the hidden file input
+    const handleFileUploadClick = () => {
+        inputRef.current.click();
+    };
+
+  const handleFileChange = (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setImage(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+  return (
+    <Box>
+      <Image
+        borderRadius="full"
+        boxSize="200px"
+        src={image}
+        alt="Profile Picture"
+        objectFit={"cover"}
+      />
+
+      <Input
+        type="file"
+        ref={inputRef}
+        display="none"
+        onChange={handleFileChange}
+      />
+      <HStack
+        justify={"center"}
+        mt={4}
+        cursor="pointer"
+        onClick={handleFileUploadClick}
+      >
+        <Icon as={BiCloudUpload} color={"#6311CB"} boxSize={6} />
+        <Text color={"#6311CB"} fontSize={"sm"} fontWeight={"600"} mb={0}>
+          Upload
+        </Text>
+      </HStack>
+    </Box>
+  );
+};
+
+export default DisplayProfile;

src/Pages/Profile/EditProfile.jsx

@@ -5,6 +5,7 @@ import { OPACITY_ON_LOAD } from '../../Layout/animations';
 import { BiCloudUpload } from "react-icons/bi";
 import PrimaryButton from '../../Components/Buttons/PrimaryButton';
 import SecondaryButton from '../../Components/Buttons/SecondaryButton';
+import DisplayProfile from './DisplayProfile';
 
 const EditProfile = () => {
     const inputRef = useRef();
@@ -35,26 +36,8 @@ const EditProfile = () => {
             >
                 <HStack gap={12} alignItems={"flex-start"} flexWrap={"wrap"}>
                     {/* Profile Picture and Upload */}
-                    <Box>
-                        <Image
-                            borderRadius='full'
-                            boxSize='200px'
-                            src='https://bit.ly/dan-abramov'
-                            alt='Profile Picture'
-                        />
-
-                        <Input
-                            type="file"
-                            ref={inputRef}
-                            display="none"
-                        />
-                        <HStack justify={"center"} mt={4} cursor="pointer" onClick={handleFileUploadClick}>
-                            <Icon as={BiCloudUpload} color={"#6311CB"} boxSize={6} />
-                            <Text color={"#6311CB"} fontSize={"sm"} fontWeight={"600"} mb={0}>
-                                Upload
-                            </Text>
-                        </HStack>
-                    </Box>
+                    
+                    <DisplayProfile/>
 
                     {/* Editable Profile Information */}
                     <Box flex={1}>

src/Pages/Profile/Profile.jsx

@@ -1,5 +1,5 @@
 import { Box, Text, HStack, Image, Input, Icon } from '@chakra-ui/react';
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';  
 import MiniHeader from '../../Components/MiniHeader';
 import { OPACITY_ON_LOAD } from '../../Layout/animations';
@@ -8,21 +8,20 @@ import { BiCloudUpload } from "react-icons/bi";
 import { RxLockClosed } from "react-icons/rx";
 import { RiArrowRightSLine } from "react-icons/ri";
 import { GoArrowSwitch } from "react-icons/go";
+import DisplayProfile from './DisplayProfile';
 
 const Profile = () => {
-    const inputRef = useRef();
     const navigate = useNavigate(); 
 
-    // Trigger the hidden file input
-    const handleFileUploadClick = () => {
-        inputRef.current.click();
-    };
 
     // Handle navigation to edit profile page
     const handleEditProfile = () => {
         navigate('/profile/edit-profile'); 
     };
 
+
+
+
     return (
         <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
             <MiniHeader
@@ -42,8 +41,8 @@ const Profile = () => {
                         rounded={'md'}
                         _hover={{ bg: "gray.100" }}
                         transition={'0.5s'}
-                        py={3}
-                        px={8}
+                        py={1}
+                        px={3}
                         border={"1px solid rgba(99, 17, 203, 0.25)"}
                         onClick={handleEditProfile}  // Call handleEditProfile on click
                     >
@@ -61,26 +60,7 @@ const Profile = () => {
                 </Box>
 
                 <HStack gap={12} alignItems={"flex-start"} flexWrap={"wrap"}>
-                    <Box>
-                        <Image
-                            borderRadius='full'
-                            boxSize='200px'
-                            src='https://bit.ly/dan-abramov'
-                            alt='Profile Picture'
-                        />
-
-                        <Input
-                            type="file"
-                            ref={inputRef}
-                            display="none"
-                        />
-                        <HStack justify={"center"} mt={4} cursor="pointer" onClick={handleFileUploadClick}>
-                            <Icon as={BiCloudUpload} color={"#6311CB"} boxSize={6} />
-                            <Text color={"#6311CB"} fontSize={"sm"} fontWeight={"600"} mb={0}>
-                                Upload
-                            </Text>
-                        </HStack>
-                    </Box>
+                    <DisplayProfile/>
 
                     <Box>
                         <ProfileInfo label="Name" value="Kartikey Gautam" />