Last active
May 17, 2021 15:09
-
-
Save tgmarinho/a3d8b1765e97ddda8662b159c2589eac 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 useUal from "@/hooks/useUal"; | |
import { ButtonStyled } from "./ButtonStyled"; | |
import { AssetsActionProps } from "@/typings/shared"; | |
import { useCallback, useEffect, useState } from "react"; | |
enum BUTTONS { | |
NOT_LOGGED = "NOT_LOGGED", | |
ON_AUCTION = "ON_AUCTION", | |
ON_SALE = "ON_SALE", | |
PUT_ON_SALE = "PUT_ON_SALE", | |
PUT_ON_AUCTION = "PUT_ON_AUCTION", | |
NOT_ON_SALE = "NOT_ON_SALE", | |
} | |
type ButtonsKeys = keyof typeof BUTTONS; | |
interface Payload { | |
label: string; | |
action?: VoidFunction; | |
} | |
const ButtonDefaultProps = { | |
type: "primary", | |
size: "large", | |
shape: "round", | |
block: true, | |
}; | |
const NotLogged = ({ action, label, ...rest }: Payload) => ( | |
<ButtonStyled onClick={action} {...rest}> | |
{label} | |
</ButtonStyled> | |
); | |
const OnAuction = ({ action, label, ...rest }: Payload) => ( | |
<ButtonStyled onClick={action} {...rest}> | |
{label} | |
</ButtonStyled> | |
); | |
const OnSale = ({ action, label, ...rest }: Payload) => ( | |
<ButtonStyled onClick={action} {...rest}> | |
{label} | |
</ButtonStyled> | |
); | |
const PutOnSale = ({ action, label, ...rest }: Payload) => ( | |
<ButtonStyled onClick={action} {...rest}> | |
{label} | |
</ButtonStyled> | |
); | |
const PutOnAuction = ({ action, label, ...rest }: Payload) => ( | |
<ButtonStyled onClick={action} {...rest}> | |
{label} | |
</ButtonStyled> | |
); | |
const NotOnSale = ({ label, ...rest }: Payload) => ( | |
<ButtonStyled disabled {...rest}> | |
<span>{label}</span> | |
</ButtonStyled> | |
); | |
const getButtonComponent = (key: ButtonsKeys) => { | |
const BUTTON_ACTIONS_BUTTON = { | |
[BUTTONS.NOT_LOGGED]: NotLogged, | |
[BUTTONS.ON_AUCTION]: OnAuction, | |
[BUTTONS.ON_SALE]: OnSale, | |
[BUTTONS.PUT_ON_SALE]: PutOnSale, | |
[BUTTONS.PUT_ON_AUCTION]: PutOnAuction, | |
[BUTTONS.NOT_ON_SALE]: NotOnSale, | |
}; | |
return BUTTON_ACTIONS_BUTTON[key]; | |
}; | |
type Button = { | |
key: ButtonsKeys; | |
params: Payload; | |
}; | |
export default function AssetsAction({ | |
onAuction, | |
onClick, | |
onSale, | |
item, | |
onCreateAuction, | |
}: AssetsActionProps) { | |
const { loggedIn, accountName, login } = useUal(); | |
const owner = item?.owner; | |
const [buttons, setButtons] = useState<Button[]>([]); | |
const whichButtonRender = useCallback(() => { | |
if (!loggedIn) { | |
setButtons([ | |
{ | |
key: "NOT_LOGGED", | |
params: { action: login, label: "Login to Buy/Sell" }, | |
}, | |
]); | |
return; | |
} | |
if (onAuction) { | |
setButtons([ | |
{ | |
key: "ON_AUCTION", | |
params: { | |
action: onClick, | |
label: owner === accountName ? "Cancel Bid" : "Place a Bid", | |
}, | |
}, | |
]); | |
return; | |
} | |
if (onSale) { | |
setButtons([ | |
{ | |
key: "ON_SALE", | |
params: { | |
action: onClick, | |
label: owner === accountName ? "Cancel Sale" : "Purchase Now", | |
}, | |
}, | |
]); | |
return; | |
} else if (owner === accountName) { | |
setButtons([ | |
{ | |
key: "PUT_ON_SALE", | |
params: { action: onClick, label: "Put on Sale" }, | |
}, | |
{ | |
key: "PUT_ON_AUCTION", | |
params: { action: onCreateAuction, label: "Put on Auction" }, | |
}, | |
]); | |
return; | |
} else { | |
setButtons([ | |
{ | |
key: "NOT_ON_SALE", | |
params: { label: "This asset is not on sale" }, | |
}, | |
]); | |
return; | |
} | |
}, [ | |
loggedIn, | |
owner, | |
accountName, | |
onClick, | |
onSale, | |
onAuction, | |
onCreateAuction, | |
]); | |
useEffect(() => { | |
whichButtonRender(); | |
}, [ | |
loggedIn, | |
owner, | |
accountName, | |
onClick, | |
onSale, | |
onAuction, | |
onCreateAuction, | |
]); | |
const renderButtons = () => { | |
const mapButtons = buttons.map(({ key, params }) => { | |
const Button = getButtonComponent(key); | |
return ( | |
<div key={String(key)}> | |
<Button {...{ ...params, ...ButtonDefaultProps }} /> | |
</div> | |
); | |
}); | |
return mapButtons.length !== 0 ? mapButtons : null; | |
}; | |
return renderButtons(); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment