status icons for mailing list form including loading icon #125
Conversation
| export default function MailingList() { | ||
| const [address, setAddress] = useState(""); | ||
| const [status, setStatus] = useState(READY_STATUS); | ||
| const [disabled, setDisabled] = useState(false); |
There was a problem hiding this comment.
Disabled state is redundant since it's only ever true when status === LOADING_STATUS
There was a problem hiding this comment.
Can just be like const disabled = status === LOADING_STATUS
| 100% { | ||
| transform: rotate(360deg); | ||
| } | ||
| } |
There was a problem hiding this comment.
Linter says semicolon is missing here. Can't see the github thing for suggesting a specific change.
| ) : status === SUCCESS_STATUS ? ( | ||
| <FontAwesomeIcon icon={["fas", "check"]} /> | ||
| ) : ( | ||
| <FontAwesomeIcon icon={["fas", "times"]} /> |
There was a problem hiding this comment.
I think a restart icon would be more effective in telling the user to try resubmitting.
| }) | ||
| }); | ||
| const statusToTitle = {}; | ||
| statusToTitle[READY_STATUS] = "Send"; |
There was a problem hiding this comment.
I think this part would be better if it was an object like {title: "Send", icon: "paper-plane"} to avoid that nasty nested ternary. Alternatively, move the setting of the icon to a variable and use switch instead.
| e.preventDefault(); | ||
| setResult(null); | ||
| const READY_STATUS = "ready"; | ||
| const LOADING_STATUS = "loading"; |
There was a problem hiding this comment.
It's more idiomatic to use an object mapping to strings for enums.
const Status = {
READY: "READY"
...
}| ); | ||
| return ( | ||
| <EmailForm onSubmit={addEmailToList}> | ||
| <EmailInputBox |
There was a problem hiding this comment.
It could use a Toast message to indicate completeness or to spit out the error message from the server.
No description provided.