Sign Up Flow does not allow more than one blog URL regardless of instructions

[AmasiaNalbandian]

What happened:
Sign up flow says I can add more than one URL feed by using spaces. I attempt this and there are errors, and I can't validate

What should have happened:
Either we allow two URLs or not. But instructions do not match the validation parameters we have set.

How to reproduce it (as precise as possible):
Sign up flow - > add two urls

Anything else we need to know?:

Environment:

• OS:
• Browser:

[alexsam29]

Hi, I'm still figuring out how Telescope works, but can I try to solve this issue?

I can get multiple blogs validated if I comment out this error check at the top of the validateBlog function in RSSFeeds.tsx. Not sure if that error check is crucial, but it's the only way I found that worked.

const validateBlog = async () => {
      /* if (errors[name]) {
        setFieldValue(selected, [], true); <--- Commenting out allows multiple blogs to be validated.
        return;
      } */
      try {
        setValidating(true);
        controllerRef?.current?.abort();
        controllerRef.current = new AbortController();
        // Allow a list of URLs, separated by spaces
        const urls = (values[name] as string).split(/ +/);
        const response = await fetch(`${feedDiscoveryServiceUrl}`, {
          signal: controllerRef.current?.signal,
          method: 'post',
          headers: {
            Authorization: `bearer ${token}`,
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(urls),
        });
        if (!response.ok) {
          throw new Error(response.statusText);
        }
        const { feedUrls }: DiscoveredFeeds = await response.json();

        if (feedUrls.length === 1) {
          setFieldValue(selected, [feedUrls[0]], true);
        }

        setUrlError('');
        setFieldValue(discovered, feedUrls);
      } catch (err) {
        console.error(err, 'Unable to discover feeds');

        setUrlError('Unable to discover feeds');
        setFieldValue(discovered, []);
      } finally {
        // eslint-disable-next-line require-atomic-updates
        controllerRef.current = null;
        setValidating(false);
      }
    };

The part I'm stuck on now is how to get rid of the error message that still appears in the text box after inputting two URLs.

[AmasiaNalbandian]

@alexsam29
So it's a great lead that you find out that by removing the error check you can actually parse the values properly. However, I think it is important to keep the error check. What I found was that if you look at what errors[name] comes from, you will see it's mainly from formik on L173. I would look further into why there are errors being brought in from formik and go from there.

[alexsam29]

I got it. So I found that formik uses the the third validation schema in FormSchema.tsk on line 56 to validate the URL.

The problem here is that it expects a string with a proper URL format. So obviously when you enter a space, it automatically detects that as an error.

I've tried adjusting the validation to accommodate an array of URL strings, but the main problem with that is that the <TextInput> component on line 251 only returns a string from the TextField component. That's why nothing gets parsed because it's detected as an error here before it can reach the parsing logic.

When I get rid of the URL validation schema, it gets parsed correctly but you obviously need some type of input validation.

I think the solution here is to somehow return an array of string URLs from <TextInput> while also changing the validation schema to something like: [blogUrl.name]: array().of(string().url()).min(1, blogUrl.requiredErrorMsg); and possible some other changes to the SignUpForm type.

I'm currently thinking of ways to implement that potential solution.

[AmasiaNalbandian]

Finding the bug is always about 80% of the work done! Now you just have to figure out how to implement the solution. Nice work! 👍

[alexsam29]

Yep, that last 20% is always the most difficult.

I also noticed that selecting multiple URLs for channels (YouTube/Twitch) has a similar function, but the same bug is not present. I looked at the validating schema here and the channelUrl is not validated as a URL like blogUrl is. It's only validated as a string, that's why it is able to parse multiple URLs unlike the Blog section.

I haven't been able to come up with a implementation to my solution without having to change the way the blog URL is inputted. But if we do that, you lose UI consistency with the other sign-up sections.

So my new solution would be to make the blogUrl validation match the channelUrl so that multiple URLs can be parsed. If it's not a valid URL being passed, then the Http request will fail anyways, so there's still some type of validation involved.

Let me know what you think. I have it working similar to the channel section, so I could make a PR to have it reviewed.