text: import React, { useState, useEffect } from "react";
  import { Table, Form, Button, Row, Col } from "react-bootstrap";
  import { LinkContainer } from "react-router-bootstrap";
  import { useDispatch, useSelector } from "react-redux";
  import Message from "../components/Message";
  import Loader from "../components/Loader";
  import { getUserDetails, updateUserProfile } from "../actions/userActions";
  import { listMyOrders } from "../actions/orderActions";
  
  const ProfileScreen = ({ location, history }) => {
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [message, setMessage] = useState(null);
    const [password, setPassword] = useState("");
    const [confirmPassword, setConfirmPassword] = useState("");
  
    const dispatch = useDispatch();
  
    // Get State from userDetails
    const userDetails = useSelector((state) => state.userDetails);
    // Destruct variables from userDetails
    const { loading, error, user } = userDetails;
  
    // Get State from userLogin
    const userLogin = useSelector((state) => state.userLogin);
    // Destruct userInfo from userLogin
    const { userInfo } = userLogin;
  
    // Get State from userUpdateProfile
    const userUpdateProfile = useSelector((state) => state.userUpdateProfile);
    // Destruct success value from userUpdateProfile for success message
    const { success } = userUpdateProfile;
  
    // Get State from orderListMy
    const orderListMy = useSelector((state) => state.orderListMy);
    // Destruct success value from orderListMy for success message
    const { loading: loadingOrders, error: errorOrders, orders } = orderListMy;
  
    useEffect(() => {
      if (!userInfo) {
        history.push("/login");
      } else {
        if (!user.name) {
          dispatch(getUserDetails("profile"));
          dispatch(listMyOrders());
        } else {
          setName(user.name);
          setEmail(user.email);
        }
      }
    }, [dispatch, history, userInfo, user]);
  
    const submitHandler = (e) => {
      e.preventDefault();
      if (password !== confirmPassword) {
        setMessage("Passwords do not match");
      } else {
        // Dispatch updated profile
        dispatch(updateUserProfile({ id: user._id, name, email, password }));
      }
    };
  
    return (
      <Row>
        <Col md={3}>
          <h2>User Profile</h2>
          {message && <Message variant='danger'>{message}</Message>}
          {error && <Message variant='danger'>{error}</Message>}
          {success && (
            <Message variant='success'>Profile Updated Successfully</Message>
          )}
          {loading && <Loader />}
          <Form onSubmit={submitHandler}>
            <Form.Group controlId='name'>
              <Form.Label>Name</Form.Label>
              <Form.Control
                type='text'
                placeholder='Enter your name'
                value={name}
                onChange={(e) => setName(e.target.value)}
              ></Form.Control>
            </Form.Group>
            <Form.Group controlId='email'>
              <Form.Label>Email Address</Form.Label>
              <Form.Control
                type='email'
                placeholder='Enter email'
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              ></Form.Control>
            </Form.Group>
            <Form.Group controlId='password'>
              <Form.Label>Password</Form.Label>
              <Form.Control
                type='password'
                placeholder='Enter password'
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              ></Form.Control>
            </Form.Group>
            <Form.Group controlId='confirmPassword'>
              <Form.Label>Confirm Password</Form.Label>
              <Form.Control
                type='password'
                placeholder='Confirm password'
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
              ></Form.Control>
            </Form.Group>
            <Button type='submit' variant='primary'>
              Update
            </Button>
          </Form>
        </Col>
        <Col md={9}>
          <h2>My Orders</h2>
          {loadingOrders ? (
            <Loader />
          ) : errorOrders ? (
            <Message variant='danger'>{errorOrders}</Message>
          ) : (
            <Table striped bordered hove responsive className='table-sm'>
              <thead>
                <tr>
                  <th>ID</th>
                  <th>DATE</th>
                  <th>TOTAL</th>
                  <th>PAID</th>
                  <th>DELIVERED</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {orders.map((order) => (
                  <tr key={order._id}>
                    <td>{order._id}</td>
                    <td>{order.createdAt.substring(0, 10)}</td>
                    <td>{order.totalPrice}</td>
                    <td>
                      {order.isPaid ? (
                        order.paidAt.substring(0, 10)
                      ) : (
                        <i className='fas fa-times' style={{ color: "red" }}></i>
                      )}
                    </td>
                    <td>
                      {order.isDelivered ? (
                        order.deliveredAt.substring(0, 10)
                      ) : (
                        <i className='fas fa-times' style={{ color: "red" }}></i>
                      )}
                    </td>
                    <td>
                      <LinkContainer to={`/order/${order._id}`}>
                        <Button variant='light' className='btn-sm'>
                          Details
                        </Button>
                      </LinkContainer>
                    </td>
                  </tr>
                ))}
              </tbody>
            </Table>
          )}
        </Col>
      </Row>
    );
  };
  
  export default ProfileScreen;
  