update view profile

nmewada01 · Jan 2, 2023 · a05cdd4 · a05cdd4
1 parent 3fbb7ac
commit a05cdd4
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 11 deletions.
diff --git a/src/Components/Profile.jsx b/src/Components/Profile.jsx
@@ -3,6 +3,7 @@ import { Avatar, Box, Button, Flex, Text } from "@chakra-ui/react";
 import { useDispatch, useSelector } from "react-redux";
 import { profile } from "../Redux/AuthReducer/action";
 import { getLocalData } from "../utils/localStorage";
+import { ProfileModal } from "../Modals/profileModal";
 
 // const Profile = () => {
 //   const dispatch = useDispatch();
@@ -21,7 +22,6 @@ import { getLocalData } from "../utils/localStorage";
 
 const Profile = () => {
   const dispatch = useDispatch();
-
   const profileData = useSelector((state) => state?.AuthReducer?.profileData);
   useEffect(() => {
     if (profileData?.length === 0) {
@@ -56,9 +56,7 @@ const Profile = () => {
         </Flex>
       </Flex>
       <Box textAlign="right" paddingRight="0.5rem">
-        <Button color="navy" variant="link">
-          View profile
-        </Button>
+        <ProfileModal profileData={profileData} />
       </Box>
     </Box>
   );

diff --git a/src/Components/Sidebar.jsx b/src/Components/Sidebar.jsx
@@ -1,14 +1,16 @@
-import { Box, Button, Flex, Text } from "@chakra-ui/react";
+import { Box, Button, Flex, Text, useDisclosure } from "@chakra-ui/react";
 import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { getTagsList } from "../Redux/AppReducer/action";
 import Profile from "./Profile";
+import CreateTask from "../Modals/CreateTask";
 
 const Sidebar = () => {
   const dispatch = useDispatch();
   const tagLists = useSelector((state) => state.AppReducer.tags);
   const tasks = useSelector((state) => state.AppReducer.tasks);
+  const { isOpen, onOpen, onClose } = useDisclosure();
   const [searchParams, setSearchParams] = useSearchParams();
   const [selectedTags, setSelectedTags] = useState(
     searchParams.getAll("tags") || []
@@ -65,7 +67,12 @@ const Sidebar = () => {
         </Box>
         <Flex justify="center" margin="0.25rem 0">
           <Button color="navy" width="100%">
-            Create New Task
+            <Box m="1rem">
+              <Button color="navy" onClick={onOpen}>
+                Create New Task
+              </Button>
+            </Box>
+            <CreateTask isOpen={isOpen} onClose={onClose} />
           </Button>
         </Flex>
         <Box minHeight="70%" overflow="auto">

diff --git a/src/Modals/profileModal.jsx b/src/Modals/profileModal.jsx
@@ -0,0 +1,56 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+  Button,
+  Flex,
+  Image,
+  Text,
+} from "@chakra-ui/react";
+
+export function ProfileModal({ profileData }) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  return (
+    <>
+      <Button color="navy" variant="link" onClick={onOpen}>
+        View Profile
+      </Button>
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>
+            <Text>
+              Name :{profileData.length !== 0 ? profileData.name : ""}
+            </Text>
+            <Text>
+              UserName :{profileData.length !== 0 ? profileData.username : ""}
+            </Text>
+            <Text>
+              Email :{profileData.length !== 0 ? profileData.email : ""}
+            </Text>
+            <Text>
+              Mobile No :{profileData.length !== 0 ? profileData.mobile : ""}
+            </Text>
+          </ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Flex>
+              <Image
+                src={
+                  profileData?.length !== 0
+                    ? profileData.description
+                    : "https://img.icons8.com/fluency/2x/microsoft-todo-2019.png"
+                }
+              />
+            </Flex>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
diff --git a/src/Pages/Editpage.jsx b/src/Pages/Editpage.jsx
@@ -167,7 +167,7 @@ const Editpage = () => {
   }, [id, tasks]);
 
   return (
-    <Box width="100%" paddingTop="1rem" color="white" bg={"#436c89"}>
+    <Box width="100%" paddingTop="1rem" color="white" bg={"#899a8e"}>
       <Flex justifyContent="space-around">
         {/* Task title */}
         <Flex

diff --git a/src/Pages/Login.jsx b/src/Pages/Login.jsx
@@ -57,7 +57,7 @@ const Login = () => {
         px={6}
         color={"white"}
         borderRadius={"2rem"}
-        bg={"#436c89"}
+        bg={"#4e4b58"}
       >
         <Stack align={"center"}>
           <Heading fontSize={"4xl"}>Sign in to your account</Heading>

diff --git a/src/Pages/Signup.jsx b/src/Pages/Signup.jsx
@@ -119,7 +119,7 @@ const Signup = () => {
           p={8}
           color={"white"}
           borderRadius={"2rem"}
-          bg={"#436c89"}
+          bg={"#4e4b58"}
         >
           <Stack align={"center"}>
             <Heading fontSize={"4xl"} textAlign={"center"}>
@@ -194,8 +194,11 @@ const Signup = () => {
               </FormControl>
             </Box>
             <Box>
-              <FormLabel >Image</FormLabel >
-              <Editable placeholder="Paste Link Here..." border={'2px solid white'}>
+              <FormLabel>Image</FormLabel>
+              <Editable
+                placeholder="Paste Link Here..."
+                border={"2px solid white"}
+              >
                 <EditablePreview />
                 <EditableTextarea
                   value={state.description}