Created
July 7, 2020 20:52
-
-
Save TedSean/70751f0aa537d5949c188002173ea178 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment