MyAddress.jsx

import React, { useState, useEffect } from "react";
import { Grid, StepLabel, Card } from "@material-ui/core";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import DeleteIcon from "@material-ui/icons/Delete";
import IconButton from "@material-ui/core/IconButton";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import cn from "classnames";
import { sha256 } from "js-sha256";
import { useSelector } from "react-redux";

import {
  getAddressList,
  deleteAddress,
  resetDeleteAddress,
} from "../../redux/actions/marketPlaceAction";
import val from "../../getThemeDetails";
import AddressLayout from "../../components/Wrappers/AddressLayout";
import Skeleton from "../../components/Skeleton/Skeleton";
import BackDrop from "../../components/BackDrop/BackDrop";
import { swalWithBootstrapButtons } from "../../utils/sweetalert";

const options = [
  {
    name: "Delivery Address",
    icon: (
      <i
        className="fa fa-map-marker mr-2"
        aria-hidden="true"
        style={{ color: "#0095de" }}
      />
    ),
  },
  {
    name: "Delete",
    icon: (
      <i
        class="fas fa-trash-alt mr-2"
        aria-hidden="true"
        style={{ color: "#0095de" }}
      />
    ),
  },
];

function MyAddress({ login, dispatch, addressList, saveAddressDetail }) {
  const [showCheckIcon, setShowCheckIcon] = useState("");
  const [showDeleteIcon, setShowDeleteIcon] = useState({});

  const deleteAddressState = useSelector(({ deleteAddress }) => deleteAddress);

  const getReq = () => {
    const { secKey, customerId } = login.data;
    const { walletOwnerId } = val;
    const verificationHash = sha256(secKey + customerId);
    return {
      verificationHash,
      customerId,
      walletOwnerId,
    };
  };

  useEffect(() => {
    dispatch(getAddressList(getReq()));
  }, []);

  useEffect(() => {
    const { success, failed, invalidRequest, status } = deleteAddressState;
    if (success || failed || invalidRequest) {
      swalWithBootstrapButtons.fire({
        type: success ? "success" : "error",
        title: success ? "Success!" : "Sorry!",
        text: status,
        onClose: () => dispatch(resetDeleteAddress()),
      });
    }
  }, [deleteAddressState]);

  useEffect(() => {
    if (saveAddressDetail.success) dispatch(getAddressList(getReq()));
  }, [saveAddressDetail]);


  const handleDeleteAddress = (e, id) => {
    e.stopPropagation();
    setShowDeleteIcon((state) => ({ ...state, [id]: !state[id] }));
  };

  // const handleActiveAddress = (e) => {
  //   e.stopPropagation();
  //   setShowCheckIcon("");
  // };

  const [anchorEl, setAnchorEl] = useState(false);
  const open = Boolean(anchorEl);

  const handleClick = (event) => {
    event.stopPropagation();
    setAnchorEl(event.currentTarget);
    setShowCheckIcon({});
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const handleMenuItem = (e, name, addr) => {
    e.stopPropagation();
    setAnchorEl(null);

    console.log(addr);

    if (name === "Delete") {
      e.stopPropagation();
      const { customerId, secKey } = login.data;
      const { walletOwnerId } = val;
      const {
        addrCity,
        addrState,
        addrAddress,
        addrPincode,
        addrCountry,
        addrId,
      } = addr;
      const verificationHash = sha256(secKey + customerId + addrId);
      const req = {
        customerId,
        walletOwnerId,
        addrId,
        verificationHash,
        postalCode: addrPincode,
        countryISO: addrCountry,
        address: addrAddress,
        city: addrCity,
        state: addrState,
      };

      dispatch(deleteAddress(req));
    } else {
      setShowCheckIcon((state) => ({ ...state, [addr.addrId]: true }));
      // setShowCheckIcon(addr.addrId);
    }
  };

  console.log(showCheckIcon);

  if (addressList.isLoading) {
    return (
      <AddressLayout>
        <Grid container spacing={1}>
          {Array(3)
            .fill()
            .map((i) => (
              <Grid item sm={4} key={i}>
                <Skeleton width="90%" height={150} />
              </Grid>
            ))}
        </Grid>
      </AddressLayout>
    );
  }

  if (addressList.notFound || !addressList.address.length) {
    return (
      <AddressLayout className="my-address-notfound">
        <Grid container spacing={1}>
          <Grid item sm={6}>
            <StepLabel className="text-left p-3">
              <i className="fa fa-map-marker mr-2" aria-hidden="true" />
              No address found
            </StepLabel>
          </Grid>
        </Grid>
      </AddressLayout>
    );
  }

  return (
    <AddressLayout className="my-address">
      <BackDrop isBackdropVisible={deleteAddressState.isLoading} />
      <Grid container spacing={1}>
        {Object.values(addressList.address).length &&
          addressList.address.map((a) => (
            <Grid item sm={4} key={a.addrId}>
              <Card>
                {showCheckIcon[a.addrId] ? (
                  <IconButton className="my-address-checked">
                    <CheckCircleIcon />
                  </IconButton>
                ) : (
                  <React.Fragment>
                    <IconButton
                      aria-label="more"
                      aria-controls="long-menu"
                      aria-haspopup="true"
                      onClick={handleClick}
                      className="my-address-verticon"
                    >
                      <MoreVertIcon />
                    </IconButton>
                    <Menu
                      id="long-menu"
                      anchorEl={anchorEl}
                      keepMounted
                      open={open}
                      onClose={handleClose}
                    >
                      {options.map((option) => {
                        console.log(a);
                        return (
                          <MenuItem
                            key={option.name}
                            onClick={(e) => handleMenuItem(e, option.name, a)}
                          >
                            {option.icon}
                            {option.name}
                          </MenuItem>
                        );
                      })}
                    </Menu>
                  </React.Fragment>
                )}

                <StepLabel className="text-left">
                  <h4>{a.addrCustName}</h4>
                  <p>{a.addrAddress}</p>
                  <p>{`${a.addrCity}, ${a.addrPincode}`}</p>
                  <p>{`${a.addrState}, ${a.addrCountry}`}</p>
                  <p>{a.addrCustPhone}</p>
                </StepLabel>
              </Card>
            </Grid>
          ))}
      </Grid>
    </AddressLayout>
  );
}

export default MyAddress;