ronantakizawa/codereview-bench huggingface dataset:
Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Challenges/components/scene/scene-helpers.ts (TypeScript)

Code before:
import { SceneCommand } from '../../../../redux/prop-types';

export const buildTranscript = (commands: SceneCommand[]): string => {
  let transcriptText = '';
  commands.forEach(command => {
    if (command.character && command.dialogue && command.startTime) {
      transcriptText =
        transcriptText +
        '\n' +
        '<strong>' +
        command.character +
        '</strong>:' +
        ' ' +
        command.dialogue.text +
        '\n';
    }
  });

  return transcriptText;
};


Review comment (suggestion):
```suggestion
import { type SceneCommand } from '../../../../redux/prop-types';
```

Code after:
import { type SceneCommand } from '../../../../redux/prop-types';

export const buildTranscript = (commands: SceneCommand[]): string => {
  let transcriptText = '';
  commands.forEach(command => {
    if (command.character && command.dialogue && command.startTime) {
      transcriptText =
        transcriptText +
        '\n' +
        '<strong>' +
        command.character +
        '</strong>:' +
        ' ' +
        command.dialogue.text +
        '\n';
    }
  });

  return transcriptText;
};
Repository: freeCodeCamp/freeCodeCamp
File: api/src/utils/redirection.ts (TypeScript)

Code before:
  const url = req.headers['referer'];
  return getParamsFromUrl(url, _normalizeParams);
}

/**
 * Get the redirect parameters after sign in flow.
 *
 * @param req - A fastify Request.
 * @param req.cookies - The request cookies.
 * @param req.unsignCookie - The function to unsign the cookie.
 * @param _normalizeParams - The function to normalize the parameters.
 * @returns The redirect parameters.
 */
export function getLoginRedirectParams(
  req: {
    cookies: Record<string, string | undefined>;
    unsignCookie: (rawValue: string) => { value: string | null };
  },
  _normalizeParams = normalizeParams
): RedirectParams {
  const signedUrl = req.cookies['login-returnto'];
  const url = signedUrl ? req.unsignCookie(signedUrl).value : null;
  const params = getParamsFromUrl(url, _normalizeParams);

  if (haveSamePath(params.origin, params.returnTo)) {
    const prefixSegment = params.pathPrefix ? `/${params.pathPrefix}` : '';
    params.returnTo = `${params.origin}${prefixSegment}/learn`;
  }

  return params;
}

/**
 * Check if the redirect base and return URL have the same path.
 *
 * @param redirectBase - The redirect base URL.
 * @param returnUrl - The return URL.
 * @returns A boolean indicating whether the paths are the same.
 */
export function haveSamePath(
  redirectBase: string | URL,
  returnUrl: string | URL
) {
  const base = new URL(redirectBase);
  const url = new URL(returnUrl);
  return base.pathname === url.pathname;
}


Review comment (suggestion):
prefixSegment is not necessary here.
params.returnTo = `${params.origin}/learn`; should be sufficient. 

Code after:
  const url = req.headers['referer'];
  return getParamsFromUrl(url, _normalizeParams);
}

/**
 * Get the redirect parameters after sign in flow.
 *
 * @param req - A fastify Request.
 * @param req.cookies - The request cookies.
 * @param req.unsignCookie - The function to unsign the cookie.
 * @param _normalizeParams - The function to normalize the parameters.
 * @returns The redirect parameters.
 */
export function getLoginRedirectParams(
  req: {
    cookies: Record<string, string | undefined>;
    unsignCookie: (rawValue: string) => { value: string | null };
  },
  _normalizeParams = normalizeParams
): RedirectParams {
  const signedUrl = req.cookies['login-returnto'];
  const url = signedUrl ? req.unsignCookie(signedUrl).value : null;
  return getParamsFromUrl(url, _normalizeParams);
}

/**
 * Check if the redirect base and return URL have the same path.
 *
 * @param redirectBase - The redirect base URL.
 * @param returnUrl - The return URL.
 * @returns A boolean indicating whether the paths are the same.
 */
export function haveSamePath(
  redirectBase: string | URL,
  returnUrl: string | URL
) {
  const base = new URL(redirectBase);
  const url = new URL(returnUrl);
  return base.pathname === url.pathname;
}
Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Introduction/components/challenges.tsx (TypeScript)

Code before:
  return (
    <ul className={`map-challenges-ul`}>
      {challenges.map(challenge => (
        <li
          className={'map-challenge-title map-challenge-wrap'}
          id={challenge.dashedName}
          key={'map-challenge' + challenge.fields.slug}
        >
          <ListChallenge
            challenge={challenge}
            onChallengeClick={onChallengeClick}
          />
        </li>
      ))}
    </ul>
  );
}
// Step or Task challenge
const GridChallenge = ({
  challenge,
  isTask = false,
  onChallengeClick
}: {
  challenge: ChallengeInfo;
  isTask?: boolean;
  onChallengeClick?: () => void;
}) => {
  const { t } = useTranslation();

  return (
    <Link
      to={challenge.fields.slug}
      onClick={onChallengeClick}
      className={`map-grid-item ${
        challenge.isCompleted ? 'challenge-completed' : ''
      }`}
    >
      <span className='sr-only'>
        {isTask ? t('aria.task') : t('aria.step')}
      </span>
      <span>{challenge.stepNumber}</span>
      <span className='sr-only'>
        {challenge.isCompleted ? t('icons.passed') : t('icons.not-passed')}
      </span>
    </Link>
  );
};

const LinkToFirstIncompleteChallenge = ({
  challenges,
  blockTitle

Review comment (suggestion):
This should be a required prop.

```suggestion
  onChallengeClick: () => void;
```

Code after:
  return (
    <ul className={`map-challenges-ul`}>
      {challenges.map(challenge => (
        <li
          className={'map-challenge-title map-challenge-wrap'}
          id={challenge.dashedName}
          key={'map-challenge' + challenge.fields.slug}
        >
          <ListChallenge
            challenge={challenge}
            onChallengeClick={onChallengeClick}
          />
        </li>
      ))}
    </ul>
  );
}
// Step or Task challenge
const GridChallenge = ({
  challenge,
  isTask = false,
  onChallengeClick
}: {
  challenge: ChallengeInfo;
  isTask?: boolean;
  onChallengeClick: () => void;
}) => {
  const { t } = useTranslation();

  return (
    <Link
      to={challenge.fields.slug}
      onClick={onChallengeClick}
      className={`map-grid-item ${
        challenge.isCompleted ? 'challenge-completed' : ''
      }`}
    >
      <span className='sr-only'>
        {isTask ? t('aria.task') : t('aria.step')}
      </span>
      <span>{challenge.stepNumber}</span>
      <span className='sr-only'>
        {challenge.isCompleted ? t('icons.passed') : t('icons.not-passed')}
      </span>
    </Link>
  );
};

const LinkToFirstIncompleteChallenge = ({
  challenges,
  blockTitle,
Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Introduction/components/challenges.tsx (TypeScript)

Code before:
interface ChallengesProps {
  challenges: ChallengeInfo[];
  onChallengeClick?: () => void;
}

interface JumpLinkProps {
  jumpLink?: boolean;
}

interface BlockTitleProps {
  blockTitle: string;
}

interface IsProjectBlockProps {
  isProjectBlock: boolean;
}

const CheckMark = ({ isCompleted }: { isCompleted: boolean }) =>
  isCompleted ? <GreenPass /> : <GreenNotCompleted />;

const ListChallenge = ({
  challenge,
  onChallengeClick
}: {
  challenge: ChallengeInfo;
  onChallengeClick?: () => void;
}) => {
  return (
    <Link to={challenge.fields.slug} onClick={onChallengeClick}>
      <span>
        <CheckMark isCompleted={challenge.isCompleted} />
      </span>
      {challenge.title}
    </Link>
  );
};

const CertChallenge = ({
  challenge,
  onChallengeClick
}: {
  challenge: ChallengeInfo;
  onChallengeClick?: () => void;
}) => {
  return (
    <Link to={challenge.fields.slug} onClick={onChallengeClick}>
      {challenge.title}
      <span className='map-project-checkmark'>
        <CheckMark isCompleted={challenge.isCompleted} />
      </span>
    </Link>

Review comment (suggestion):
This should be a required prop.

```suggestion
  onChallengeClick: () => void;
```

Code after:
interface ChallengesProps {
  challenges: ChallengeInfo[];
  onChallengeClick: () => void;
}

interface JumpLinkProps {
  jumpLink?: boolean;
}

interface BlockTitleProps {
  blockTitle: string;
}

interface IsProjectBlockProps {
  isProjectBlock: boolean;
}

const CheckMark = ({ isCompleted }: { isCompleted: boolean }) =>
  isCompleted ? <GreenPass /> : <GreenNotCompleted />;

const ListChallenge = ({
  challenge,
  onChallengeClick
}: {
  challenge: ChallengeInfo;
  onChallengeClick: () => void;
}) => {
  return (
    <Link to={challenge.fields.slug} onClick={onChallengeClick}>
      <span>
        <CheckMark isCompleted={challenge.isCompleted} />
      </span>
      {challenge.title}
    </Link>
  );
};

const CertChallenge = ({
  challenge,
  onChallengeClick
}: {
  challenge: ChallengeInfo;
  onChallengeClick: () => void;
}) => {
  return (
    <Link to={challenge.fields.slug} onClick={onChallengeClick}>
      {challenge.title}
      <span className='map-project-checkmark'>
        <CheckMark isCompleted={challenge.isCompleted} />
      </span>
    </Link>
Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Introduction/components/challenges.tsx (TypeScript)

Code before:
const CheckMark = ({ isCompleted }: { isCompleted: boolean }) =>
  isCompleted ? <GreenPass /> : <GreenNotCompleted />;

const ListChallenge = ({
  challenge,
  onChallengeClick
}: {
  challenge: ChallengeInfo;
  onChallengeClick?: () => void;
}) => {
  return (
    <Link to={challenge.fields.slug} onClick={onChallengeClick}>
      <span>
        <CheckMark isCompleted={challenge.isCompleted} />
      </span>
      {challenge.title}
    </Link>
  );
};

const CertChallenge = ({
  challenge,
  onChallengeClick
}: {
  challenge: ChallengeInfo;
  onChallengeClick?: () => void;
}) => {
  return (
    <Link to={challenge.fields.slug} onClick={onChallengeClick}>
      {challenge.title}
      <span className='map-project-checkmark'>
        <CheckMark isCompleted={challenge.isCompleted} />
      </span>
    </Link>
  );
};

export function ChallengesList({
  challenges,
  onChallengeClick
}: ChallengesProps): JSX.Element {
  return (
    <ul className={`map-challenges-ul`}>
      {challenges.map(challenge => (
        <li
          className={'map-challenge-title map-challenge-wrap'}
          id={challenge.dashedName}
          key={'map-challenge' + challenge.fields.slug}
        >
          <ListChallenge
            challenge={challenge}

Review comment (suggestion):
This should be a required prop.

```suggestion
  onChallengeClick: () => void;
```

Code after:
const CheckMark = ({ isCompleted }: { isCompleted: boolean }) =>
  isCompleted ? <GreenPass /> : <GreenNotCompleted />;

const ListChallenge = ({
  challenge,
  onChallengeClick
}: {
  challenge: ChallengeInfo;
  onChallengeClick: () => void;
}) => {
  return (
    <Link to={challenge.fields.slug} onClick={onChallengeClick}>
      <span>
        <CheckMark isCompleted={challenge.isCompleted} />
      </span>
      {challenge.title}
    </Link>
  );
};

const CertChallenge = ({
  challenge,
  onChallengeClick
}: {
  challenge: ChallengeInfo;
  onChallengeClick: () => void;
}) => {
  return (
    <Link to={challenge.fields.slug} onClick={onChallengeClick}>
      {challenge.title}
      <span className='map-project-checkmark'>
        <CheckMark isCompleted={challenge.isCompleted} />
      </span>
    </Link>
  );
};

export function ChallengesList({
  challenges,
  onChallengeClick
}: ChallengesProps): JSX.Element {
  return (
    <ul className={`map-challenges-ul`}>
      {challenges.map(challenge => (
        <li
          className={'map-challenge-title map-challenge-wrap'}
          id={challenge.dashedName}
          key={'map-challenge' + challenge.fields.slug}
        >
          <ListChallenge
            challenge={challenge}
Repository: freeCodeCamp/freeCodeCamp
File: client/src/utils/error-messages.ts (TypeScript)

Code before:
export const standardErrorMessage = {
  type: 'danger',
  message: FlashMessages.WentWrong
};

export const reallyWeirdErrorMessage = {
  type: 'danger',
  message: FlashMessages.ReallyWeird
};

export const reportedErrorMessage = {
  type: 'danger',
  message: FlashMessages.GenericError
};

export const certificateMissingErrorMessage = {
  type: 'danger',
  message: FlashMessages.CertificateMissing
};

export const msTrophyVerified = {
  type: 'success',
  message: FlashMessages.MsTrophyVerified
};

export const accessServerErrorMessage = {
  type: 'danger',
  message: FlashMessages.AccessServerError
};


Review comment (suggestion):
```suggestion
export const networkErrorMessage = {
```

Code after:
export const standardErrorMessage = {
  type: 'danger',
  message: FlashMessages.WentWrong
};

export const reallyWeirdErrorMessage = {
  type: 'danger',
  message: FlashMessages.ReallyWeird
};

export const reportedErrorMessage = {
  type: 'danger',
  message: FlashMessages.GenericError
};

export const certificateMissingErrorMessage = {
  type: 'danger',
  message: FlashMessages.CertificateMissing
};

export const msTrophyVerified = {
  type: 'success',
  message: FlashMessages.MsTrophyVerified
};

export const UserFetchErrorMessage = {
  type: 'danger',
  message: FlashMessages.UserFetchError
};
Repository: freeCodeCamp/freeCodeCamp
File: client/src/utils/error-messages.ts (TypeScript)

Code before:
  message: FlashMessages.WentWrong
};

export const reallyWeirdErrorMessage = {
  type: 'danger',
  message: FlashMessages.ReallyWeird
};

export const reportedErrorMessage = {
  type: 'danger',
  message: FlashMessages.GenericError
};

export const certificateMissingErrorMessage = {
  type: 'danger',
  message: FlashMessages.CertificateMissing
};

export const msTrophyVerified = {
  type: 'success',
  message: FlashMessages.MsTrophyVerified
};

export const accessServerErrorMessage = {
  type: 'danger',
  message: FlashMessages.AccessServerError
};


Review comment (suggestion):
```suggestion
  message: FlashMessages.NetworkError
```

Code after:
  message: FlashMessages.WentWrong
};

export const reallyWeirdErrorMessage = {
  type: 'danger',
  message: FlashMessages.ReallyWeird
};

export const reportedErrorMessage = {
  type: 'danger',
  message: FlashMessages.GenericError
};

export const certificateMissingErrorMessage = {
  type: 'danger',
  message: FlashMessages.CertificateMissing
};

export const msTrophyVerified = {
  type: 'success',
  message: FlashMessages.MsTrophyVerified
};

export const UserFetchErrorMessage = {
  type: 'danger',
  message: FlashMessages.UserFetchError
};
Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Challenges/components/pinyin-to-hanzi-input.tsx (TypeScript)

Code before:
        // Remove characters from raw input
        const charsToRemove = prevLength - inputLength;
        newRawInput = rawInput.slice(0, -charsToRemove);
      }
    } else {
      // Mid-string edit - update new raw input directly
      newRawInput = inputValue;
    }

    setRawInput(newRawInput);
    const newDisplayValue = convertToHanzi(newRawInput, expectedAnswer);
    setDisplayValue(newDisplayValue);
    onChange(index, newDisplayValue);
  };

  return (
    <input
      type='text'
      value={displayValue}
      onChange={handleChange}
      className={className}
      maxLength={maxLength}
      size={size}
      autoComplete='off'
      aria-label={ariaLabel}
      aria-describedby={`pinyin-description-${index}`}
      {...(isCorrect === false ? { 'aria-invalid': 'true' } : {})}
    />
  );
}

PinyinToHanziInput.displayName = 'PinyinToHanziInput';

export default PinyinToHanziInput;


Review comment (suggestion):
Since all of the inputs look the same, I initially wanted to give each of them a description so screen reader users can tell which is which. But the description was quite long, so I ended up rendering it with a standalone `p` instead.

This attribute should have been cleaned up in #63986.

Code after:
        // Remove characters from raw input
        const charsToRemove = prevLength - inputLength;
        newRawInput = rawInput.slice(0, -charsToRemove);
      }
    } else {
      // Mid-string edit - update new raw input directly
      newRawInput = inputValue;
    }

    setRawInput(newRawInput);
    const newDisplayValue = convertToHanzi(newRawInput, expectedAnswer);
    setDisplayValue(newDisplayValue);
    onChange(index, newDisplayValue);
  };

  return (
    <input
      type='text'
      value={displayValue}
      onChange={handleChange}
      className={className}
      maxLength={maxLength}
      size={size}
      autoComplete='off'
      aria-label={ariaLabel}
      {...(isCorrect === false ? { 'aria-invalid': 'true' } : {})}
    />
  );
}

PinyinToHanziInput.displayName = 'PinyinToHanziInput';

export default PinyinToHanziInput;
Repository: freeCodeCamp/freeCodeCamp
File: e2e/independent-lower-jaw.spec.ts (TypeScript)

Code before:
    </main>
  </body>
</html>`;

test.use({
  viewport: { width: 1080, height: 720 }
});

test('Displays independent lower jaw controls', async ({ page }) => {
  await page.goto(workshopChallengeUrl);

  await expect(page.getByTestId('independentLowerJaw-container')).toBeVisible();
  await expect(
    page.getByTestId('independentLowerJaw-check-button')
  ).toBeVisible();
  await expect(
    page.getByTestId('independentLowerJaw-reset-button')
  ).toBeVisible();
  await expect(
    page.getByTestId('independentLowerJaw-help-button')
  ).toBeVisible();
  await expect(
    page.getByTestId('independentLowerJaw-submit-button')
  ).toHaveCount(0);
});

test('Clicking "Check Your Code" reveals failing feedback', async ({
  page
}) => {
  await page.goto(workshopChallengeUrl);

  await page.getByTestId('independentLowerJaw-check-button').click();

  await expect(
    page.getByTestId('independentLowerJaw-failing-hint')
  ).toBeVisible();
});

test('Reset button opens and closes the reset modal', async ({ page }) => {
  await page.goto(workshopChallengeUrl);

  await page.getByTestId('independentLowerJaw-reset-button').click();

  const resetModal = page.getByRole('dialog', { name: 'Reset this lesson?' });
  await expect(resetModal).toBeVisible();

  await page.getByRole('button', { name: /close/i }).click();
  await expect(resetModal).not.toBeVisible();
});

test('Checks hotkeys when instruction is focused', async ({

Review comment (suggestion):
```suggestion
```
Let's keep the e2e tests focused on behaviour. Things like "is the button in the page" are better checked incidentally while testing the button's functionality.

Code after:
    </main>
  </body>
</html>`;

test.use({
  viewport: { width: 1080, height: 720 }
});

test('Clicking "Check Your Code" reveals failing feedback', async ({
  page
}) => {
  await page.goto(workshopChallengeUrl);

  await page.getByTestId('independentLowerJaw-check-button').click();

  await expect(
    page.getByTestId('independentLowerJaw-failing-hint')
  ).toBeVisible();
});

test('Reset button opens and closes the reset modal', async ({ page }) => {
  await page.goto(workshopChallengeUrl);

  await page.getByTestId('independentLowerJaw-reset-button').click();

  const resetModal = page.getByRole('dialog', { name: 'Reset this lesson?' });
  await expect(resetModal).toBeVisible();

  await page.getByRole('button', { name: /close/i }).click();
  await expect(resetModal).not.toBeVisible();
});

test('Checks hotkeys when instruction is focused', async ({
  page,
  browserName
}) => {
  await page.goto(workshopChallengeUrl);

  const editor = getEditors(page);
  const description = page.locator('#description');
  await focusEditor({ page, isMobile: false });
  await clearEditor({ page, browserName, isMobile: false });
  await editor.fill(workshopPassingSolution);
  await description.click();

  if (browserName === 'webkit') {
    await page.keyboard.press('Meta+Enter');
  } else {
    await page.keyboard.press('Control+Enter');
  }
Repository: freeCodeCamp/freeCodeCamp
File: client/src/assets/chapter-icon.tsx (TypeScript)

Code before:
import React from 'react';
import {
  EsA1SpanishChapters,
  FsdChapters,
  ZhA1ChineseChapters
} from '../../../shared-dist/config/chapters';
import DatabaseIcon from './icons/database';
import JavaScriptIcon from './icons/javascript';
import ReactIcon from './icons/react';
import ResponsiveDesign from './icons/responsive-design';
import FreeCodeCampIcon from './icons/freecodecamp';
import Html from './icons/html';
import Css from './icons/css';
import NodeIcon from './icons/node';
import Python from './icons/python';
import Graduation from './icons/graduation';
import {
  faComments,
  faCubes,
  faDoorOpen,
  faHands,
  faIdCard,
  faPeopleGroup
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const iconMap = {
  [FsdChapters.Welcome]: FreeCodeCampIcon,

Review comment (suggestion):
Nit 😄 

`Es` is equivalent to Spanish, and `Zh` is equivalent to Chinese, so we just need one.

```suggestion
  A1SpanishChapters,
```

Code after:
import React from 'react';
import {
  A1SpanishChapters,
  FsdChapters,
  A1ChineseChapters
} from '../../../shared-dist/config/chapters';
import DatabaseIcon from './icons/database';
import JavaScriptIcon from './icons/javascript';
import ReactIcon from './icons/react';
import ResponsiveDesign from './icons/responsive-design';
import FreeCodeCampIcon from './icons/freecodecamp';
import Html from './icons/html';
import Css from './icons/css';
import NodeIcon from './icons/node';
import Python from './icons/python';
import Graduation from './icons/graduation';
import {
  faComments,
  faCubes,
  faDoorOpen,
  faHands,
  faIdCard,
  faPeopleGroup
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const iconMap = {
  [FsdChapters.Welcome]: FreeCodeCampIcon,