Improve url form validation #117
Conversation
…n be validated separately
|
In the "after" view it wasn't immediately clear to me which problem pertained to which URL, and I think it might be worse for red/green colourblind users. Maybe put a divider line between each URL field, so that any problem reporting appears adjacent to the URL it pertains to, with a line between that text and the following URL? |
How about this? Can make the line more obvious.... |
|
Tiny bit wider! |
|
Oh, while you're tweaking this text can you use "URL" rather than "Url"? In both the widget label and on the Add Url button |
| @@ -108,12 +121,26 @@ const updateFileStatus = ( | |||
| }; | |||
| }; | |||
|
|
|||
| const checkUrlValid = (url: string) => { | |||
| const checkUrlInputValid = (input: MediaUrlInput): MediaUrlInput => { | |||
There was a problem hiding this comment.
does this parameter need to change? it seems like the function is simpler if it continues to accept the url string to validate.
| setMediaUrlInputs( | ||
| mediaUrlInputs.map((input, i) => | ||
| i === index | ||
| ? checkUrlInputValid({ | ||
| ...input, | ||
| value: e.target.value, | ||
| }) | ||
| : input, | ||
| ), | ||
| ); |
There was a problem hiding this comment.
Seems like this could be a bit simpler if we called a helper function that indexed into mediaUrlInputs rather than mapping
const setMediaUrlInput = (index: number, value: string) => {
const newInputs = [...mediaUrlInputs];
newInputs[index] = checkUrlInputValid(value);
setMediaUrlInputs(newInputs);
};I think this is just a matter of personal preference though. Your way we avoid allocating a new array.
There was a problem hiding this comment.
I decided to do it inline but otherwise think this is a sensible improvement. I tend to try and keep things functional as if writing scala but it doesn't make sense given that I'm mutating stuff all over the place elsewhere!
What does this change?
It would be helpful to perform some client side validation on urls being added to the upload form so that we can, e.g. prevent people submitting invalid urls, or urls to youtube search results (as yt-dlp will then try download everything on the page).
This PR introduces this, by breaking up the existing 'textarea' into individual input elements, as suggested by @zekehuntergreen ages ago.
Before:
After:
How to test
You can run just the API and the client locally to test this - though hopefully screenshots make it fairly clear what's going on. I've not tested on CODE yet as I'm waiting for #115 to go out.