Fix incomplete submit

[marcellinuselbert]

Revision of #10
bug:
Users can submit without a long URL is filled.

request feature:
Add toast to handle disabled button is clicked

old behavior :

Submit button isn't disabled and users can submit without a long URL, when users trying to click the disabled button there's no toast pop up

new behavior :

• Submit button is disabled, also users can't submit without long URL is filled.

• There's toast when users trying to click the disabled button based on missing values such as, Please enter long URL and short URL, etc.

You can try to submit without long URL and short URL, short URL only, long URL only on RISTEK-LINK-PREVIEW

Thanks 😀

[jonathanfilbert]

Hey Marcel, thank you for submitting the new PR. Can I have the new deploy preview for this PR?

[jonathanfilbert]

Great work! However, there are a few things that could be improved. I've reviewed the code, please submit your revisions if you're done.

[jonathanfilbert]

can we refactor this? the if statements are quite confusing and it's not readable. One thing to consider is to use a variable for each condition for example:

if (alias === ''){}

to

const isAliasEmpty = alias === ''

and then you can refactor the ifs into a more elegant way like:

if (isAliasEmpty){
toast({title: "Alias Empty"})
}

[jonathanfilbert]

Refactor these boolean conditions into a more readable variable e.g. urlValid

[jonathanfilbert]

why would we need gzip in our dependency? If this is unused, please remove.

[marcellinuselbert]

Hello! I've redeployed this preview on Ristek Preview. I've submitted the revision too, please kindly check my commit. @jonathanfilbert

[jonathanfilbert]

This toast function is a bit redundant. It's the same toast function but used multiple of times in this file. Is there any way we can make this simpler? Maybe wrap the toast function in a reusable component called Toast with props like:

ToastProps = {
title: String,
description: String,
isError?: Boolean, // this one defaults to false
}

the duration and isClosable don't need to be exported into props because they're default behavior.

So everytime we want to call the Toast, all we have to do is just:

<Toast isError title="Long URL empty" description="Please enter long url" />