updated user details page

VenketeshRushi · Oct 27, 2023 · de9888d · de9888d
1 parent 977709a
commit de9888d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 16 deletions.
diff --git a/src/components/Content/AccountSettings.jsx b/src/components/Content/AccountSettings.jsx
@@ -1,51 +1,55 @@
 import { FormControl, FormLabel, Grid, Input, Select } from '@chakra-ui/react'
+import { useSelector } from 'react-redux';
 
 function AccountSettings() {
+  const user = useSelector((state) => state.auth.user);
   return (
     <Grid
       templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
       gap={6}
     >
       <FormControl id="firstName">
         <FormLabel>First Name</FormLabel>
-        <Input focusBorderColor="brand.blue" type="text" placeholder="Enter Your First Name" />
+        <Input focusBorderColor="brand.blue" type="text" placeholder={user.firstName ? user.firstName : "Enter Your First Name"} readOnly />
       </FormControl>
       <FormControl id="lastName">
         <FormLabel>Last Name</FormLabel>
-        <Input focusBorderColor="brand.blue" type="text" placeholder="Enter Your Last Name" />
+        <Input focusBorderColor="brand.blue" type="text" placeholder={user.lastName ? user.lastName : "Enter Your Last Name"} readOnly />
       </FormControl>
       <FormControl id="phoneNumber">
         <FormLabel>Phone Number</FormLabel>
         <Input
           focusBorderColor="brand.blue"
           type="tel"
-          placeholder="Enter Your Phone Number"
+          placeholder="+91 XXXXXXXXXX"
+          readOnly
         />
       </FormControl>
       <FormControl id="emailAddress">
         <FormLabel>Email Address</FormLabel>
         <Input
           focusBorderColor="brand.blue"
           type="email"
-          placeholder="Enter Your Email"
+          placeholder={user.email ? user.email : "Enter Your Email"}
+          readOnly
         />
       </FormControl>
       <FormControl id="city">
         <FormLabel>City</FormLabel>
-        <Select focusBorderColor="brand.blue" placeholder="Select city">
-          <option value="pune" selected>Pune</option>
+        <Select focusBorderColor="brand.blue" placeholder="Select city" isReadOnly={true}>
+          <option value="pune" defaultValue>Pune</option>
           <option value="mumbai">Mumbai</option>
-          <option value="delhi">New Delhi</option>
+          <option value="hyderabad">Hyderabad</option>
           <option value="bangalore">Bangalore</option>
+          <option value="delhi">New Delhi</option>
           <option value="chennai">Chennai</option>
           <option value="kolkata">Kolkata</option>
-          <option value="hyderabad">Hyderabad</option>
         </Select>
       </FormControl>
       <FormControl id="country">
         <FormLabel>Country</FormLabel>
-        <Select focusBorderColor="brand.blue" placeholder="Select country">
-          <option value="india" selected>
+        <Select focusBorderColor="brand.blue" placeholder="Select country" isReadOnly={true}>
+          <option value="india" defaultValue>
             India
           </option>
         </Select>

diff --git a/src/components/Content/Content.jsx b/src/components/Content/Content.jsx
@@ -7,6 +7,7 @@ import OrderStaus from './OrderStaus'
 
 export default function Content() {
   const tabs = ['Account Settings', 'Orders Placed', 'Notifications']
+  let selecteTab = useColorModeValue("brand.dark", "white")
 
   return (
     <Box
@@ -34,7 +35,7 @@ export default function Content() {
               color="brand.cadet"
               borderBottomWidth={1}
               _active={{ bg: 'transparent' }}
-              _selected={{ color: useColorModeValue("brand.dark", "white"), borderColor: 'brand.blue' }}
+              _selected={{ color: selecteTab, borderColor: 'brand.blue' }}
             >
               {tab}
             </Tab>

diff --git a/src/pages/Allorders.jsx b/src/pages/Allorders.jsx
@@ -60,7 +60,7 @@ export default function Allorders() {
       {data?.map((item) => {
         const { date, time } = dateFormater(item.createdAt);
         return (
-          <OrderSection date={date} time={time}>
+          <OrderSection date={date} time={time} key={item.id}>
             {" "}
             <Box key={item.id}>
               <Grid
@@ -75,7 +75,7 @@ export default function Allorders() {
                   <Divider mb={"20px"} />
                   {item.cartProducts.map((product) => (
                     <Grid
-                      key={product.price}
+                      key={product.id}
                       templateColumns={"100px 60%"}
                       p={"5px"}
                     >
@@ -92,8 +92,8 @@ export default function Allorders() {
                     </Grid>
                   ))}
                 </Box>
-                {item.ShippingDetails.map((ele) => (
-                  <Box py={"15px"} px={"25px"}>
+                {item.ShippingDetails.map((ele, index) => (
+                  <Box key={ele.name} py={"15px"} px={"25px"}>
                     <Text textAlign={"left"} fontSize={"20px"} fontWeight={600}>
                       Shipping Address
                     </Text>

diff --git a/src/pages/LoginCard.jsx b/src/pages/LoginCard.jsx
@@ -49,8 +49,9 @@ export default function LoginCard() {
       return setToast(toast, "Please Fill All The Fields", "error");
     }
     try {
-      const res = await dispatch(getLoginSuccess(signUpcreds)).unwrap();
+      const response = await dispatch(getLoginSuccess(signUpcreds)).unwrap();
       setToast(toast, "Login successfully", "success");
+      console.log(location)
       if (location.state && location.state.from) {
         navigate(location.state.from, { replace: true });
       } else {