Download button may stay disabled even after logging in

[Niklas20114552]

I was trying to download a song, but the Button was disabled although I was logged in.
As an enhancement it would be good to display why you can't download the song (like the tooltip that says you need to be logged in).

Edit: I thought that the Button was disabled, because my Account has to exist for some amount of time or due to a specific licence. I didn't realized, that the button being disabled is a bug.

[Niklas20114552]

And now the download button is suddenly clickable. As I said, would be good to explain that.

Left: my old tab. Right: my new tab

[tomast1337]

This may be because the state of the DownloadButton is not controlled by React, so a proper re-render when it is enabled does not occur. Here is the DownloadButton's code:

NoteBlockWorld/web/src/modules/song/components/SongPageButtons.tsx

Lines 234 to 273 in 4c9d362

	const DownloadButton = ({
	downloadCount,
	handleClick,
	}: {
	downloadCount: number;
	handleClick: React.MouseEventHandler<HTMLButtonElement>;
	}) => {
	let isLoggedIn = true;
	try {
	getTokenLocal();
	} catch {
	isLoggedIn = false;
	}
	return (
	<div className='flex gap-0.5'>
	<Tooltip>
	<TooltipTrigger asChild>
	<button
	onClick={handleClick}
	className='uppercase px-2 py-1 h-fit rounded-md text-sm bg-green-600 hover:enabled:bg-green-500 disabled:opacity-50'
	disabled={!isLoggedIn}
	>
	<div className='flex flex-row items-center gap-2'>
	<FontAwesomeIcon icon={faDownload} />
	<div>Download</div>
	</div>
	</button>
	</TooltipTrigger>
	{!isLoggedIn && (
	<TooltipContent>
	{'You must sign in to download this song!'}
	</TooltipContent>
	)}
	</Tooltip>
	<CountBalloon count={downloadCount} />
	</div>
	);
	};

By using useState to control the isLoggedIn state, this issue can be resolved. Feel free to send a PR with the solution if you'd like.

[qsef1256]

This issue is still occurring.