Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/formHelpers/form-validators.tsx (TypeScript)

Code before:

function isPathRoot(urlString: string): boolean {
  try {
    return new URL(urlString).pathname !== '/';
  } catch {
    return false;
  }
}

type Validator = (value: string) => React.ReactElement | null;

// example link: https://learn.microsoft.com/en-us/training/achievements/learn.wwl.get-started-c-sharp-part-1.trophy?username=moT01&sharingId=E2EF453C1F9208B8
export const isMicrosoftLearnLink = (value: string): boolean => {
  let url;
  try {
    url = new URL(value);
  } catch {
    return false;
  }

  const correctDomain = url.hostname === 'learn.microsoft.com';
  const correctPath = !!url.pathname.match(
    /^\/[^/]+\/training\/achievements\//
  );
  const hasSharingId = !!url.searchParams.get('sharingId');
  const hasUsername = !!url.searchParams.get('username');
  return correctDomain && correctPath && hasSharingId && hasUsername;
};

export const microsoftValidator: Validator = value =>
  !isMicrosoftLearnLink(value) ? <Trans>validation.ms-learn-link</Trans> : null;

export const editorValidator: Validator = value =>
  editorRegex.test(value) ? <Trans>validation.editor-url</Trans> : null;

export const fCCValidator: Validator = value =>
  fCCRegex.test(value) ? <Trans>validation.own-work-url</Trans> : null;

export const localhostValidator: Validator = value =>
  localhostRegex.test(value) ? (
    <Trans>validation.publicly-visible-url</Trans>
  ) : null;

export const httpValidator: Validator = value =>
  httpRegex.test(value) ? <Trans>validation.http-url</Trans> : null;

export const pathValidator: Validator = value =>
  isPathRoot(value) ? <Trans>validation.path-url</Trans> : null;

export function composeValidators(...validators: Validator[]) {
  return (value: string): ReturnType<Validator> | null =>

Review comment (suggestion):
I'm fine with this how it is, but these two could potentially have a little more of a check - maybe `username.length > 0 && sharingId.length === 16` - Course, we don't know if all `sharingId`'s will be length 16, so maybe just > 0. We can leave it for now.

Code after:

function isPathRoot(urlString: string): boolean {
  try {
    return new URL(urlString).pathname !== '/';
  } catch {
    return false;
  }
}

type Validator = (value: string) => React.ReactElement | null;

// example link: https://learn.microsoft.com/en-us/training/achievements/learn.wwl.get-started-c-sharp-part-1.trophy?username=moT01&sharingId=E2EF453C1F9208B8
export const isMicrosoftLearnLink = (value: string): boolean => {
  let url;
  try {
    url = new URL(value);
  } catch {
    return false;
  }

  const correctDomain = url.hostname === 'learn.microsoft.com';
  const correctPath = !!url.pathname.match(
    /^\/[^/]+\/training\/achievements\/learn\.wwl\.get-started-c-sharp-part-\d\.trophy$/
  );
  const hasSharingId = !!url.searchParams.get('sharingId');
  const hasUsername = !!url.searchParams.get('username');
  return correctDomain && correctPath && hasSharingId && hasUsername;
};

export const microsoftValidator: Validator = value =>
  !isMicrosoftLearnLink(value) ? <Trans>validation.ms-learn-link</Trans> : null;

export const editorValidator: Validator = value =>
  editorRegex.test(value) ? <Trans>validation.editor-url</Trans> : null;

export const fCCValidator: Validator = value =>
  fCCRegex.test(value) ? <Trans>validation.own-work-url</Trans> : null;

export const localhostValidator: Validator = value =>
  localhostRegex.test(value) ? (
    <Trans>validation.publicly-visible-url</Trans>
  ) : null;

export const httpValidator: Validator = value =>
  httpRegex.test(value) ? <Trans>validation.http-url</Trans> : null;

export const pathValidator: Validator = value =>
  isPathRoot(value) ? <Trans>validation.path-url</Trans> : null;

export function composeValidators(...validators: Validator[]) {
  return (value: string): ReturnType<Validator> | null =>