refactoring code

new-version-refactoring.tsx

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();
}

new.tsx

/* eslint-disable react/display-name */
import useUal from "@/hooks/useUal";
import { ButtonStyled } from "./ButtonStyled";
import { AssetsActionProps } from "@/typings/shared";
import { useCallback, useEffect, useState } from "react";

const ButtonDefaultParams = {
	size: "large",
	type: "primary",
	shape: "round",
	block: true,
};

const ButtonsComponent = {
	NOT_LOGGED: ({ action, label }: Omit<Mode, "key">) => (
		<ButtonStyled onClick={action[0]}>{label[0]}</ButtonStyled>
	),
	ON_AUCTION: ({ action, label }: Omit<Mode, "key">) => (
		<ButtonStyled onClick={action[0]} {...{ ButtonDefaultParams }}>
			{label[0]}
		</ButtonStyled>
	),
	ON_SALE: ({ action, label }: Omit<Mode, "key">) => (
		<ButtonStyled onClick={action[0]} {...{ ButtonDefaultParams }}>
			{label[0]}
		</ButtonStyled>
	),
	PUT_ON_SALE_OR_AUCTION: ({ action, label }: Omit<Mode, "key">) => (
		<>
			<ButtonStyled onClick={action[0]} {...{ ButtonDefaultParams }}>
				{label[0]}
			</ButtonStyled>

			<ButtonStyled onClick={action[1]} marginTop {...{ ButtonDefaultParams }}>
				{label[1]}
			</ButtonStyled>
		</>
	),
	NOT_ON_SALE: ({ label }: Omit<Mode, "key">) => (
		<ButtonStyled disabled size="large" type="primary" shape="round" block>
			<span>{label}</span>
		</ButtonStyled>
	),
};

type ButtonsKeys = keyof typeof ButtonsComponent;

interface Mode {
	key: ButtonsKeys;
	label: string[];
	action?: VoidFunction[];
}

export default function AssetsAction({
	onAuction,
	onClick,
	onSale,
	item,
	onCreateAuction,
}: AssetsActionProps) {
	const { loggedIn, accountName, login } = useUal();
	const owner = item?.owner;

	const [mode, setMode] = useState<Mode>();

	const whichButtonRender = useCallback(() => {
		if (!loggedIn) {
			setMode(() => ({
				key: "NOT_LOGGED",
				action: [login],
				label: ["Login to Buy/Sell"],
			}));
			return;
		}

		if (onAuction) {
			setMode({
				key: "ON_AUCTION",
				action: [onClick],
				label: [owner === accountName ? "Cancel Bid" : "Place a Bid"],
			});
			return;
		}

		if (onSale) {
			setMode({
				key: "ON_SALE",
				action: [onClick],
				label: [owner === accountName ? "Cancel Sale" : "Purchase Now"],
			});
			return;
		} else if (owner === accountName) {
			setMode({
				key: "PUT_ON_SALE_OR_AUCTION",
				action: [onClick, onCreateAuction],
				label: ["Put on Sale", "Put on Auction"],
			});
			return;
		} else {
			setMode({
				key: "NOT_ON_SALE",
				label: ["This asset is not on sale"],
			});
			return;
		}
	}, [
		loggedIn,
		owner,
		accountName,
		onClick,
		onSale,
		onAuction,
		onCreateAuction,
	]);

	useEffect(() => {
		whichButtonRender();
	}, [
		loggedIn,
		owner,
		accountName,
		onClick,
		onSale,
		onAuction,
		onCreateAuction,
	]);

	return mode?.key
		? ButtonsComponent[mode.key]({
				action: mode.action,
				label: mode.label,
		  })
		: null;
}

old.tsx

import useUal from "../../hooks/useUal";
import { ButtonStyled } from "./ButtonStyled";
import { AssetsActionProps } from "../../typings/shared";

export default function AssetsAction({
	onAuction,
	onClick,
	onSale,
	item,
	onCreateAuction,
}: AssetsActionProps) {
	const { loggedIn, accountName, login } = useUal();
	const owner = item?.owner;

	if (loggedIn) {
		if (onAuction) {
			return (
				<ButtonStyled
					onClick={onClick}
					size="large"
					type="primary"
					shape="round"
					block
				>
					{owner === accountName ? "Cancel Bid" : "Place a Bid"}
				</ButtonStyled>
			);
		} else if (onSale) {
			return (
				<ButtonStyled
					onClick={onClick}
					size="large"
					type="primary"
					shape="round"
					block
				>
					{owner === accountName ? "Cancel Sale" : "Purchase Now"}
				</ButtonStyled>
			);
		} else if (owner === accountName) {
			return (
				<>
					<ButtonStyled
						onClick={onClick}
						size="large"
						type="primary"
						shape="round"
						block
					>
						Put on Sale
					</ButtonStyled>

					<ButtonStyled
						onClick={onCreateAuction}
						size="large"
						marginTop
						type="primary"
						shape="round"
						block
					>
						Put on Auction
					</ButtonStyled>
				</>
			);
		} else {
			return (
				<ButtonStyled disabled size="large" type="primary" shape="round" block>
					<span>This asset is not on sale</span>
				</ButtonStyled>
			);
		}
	} else {
		return (
			<ButtonStyled
				onClick={login}
				size="large"
				type="primary"
				shape="round"
				block
			>
				Login to Buy/Sell
			</ButtonStyled>
		);
	}
}