ronantakizawa/codereview-bench huggingface dataset:
Repository: freeCodeCamp/freeCodeCamp
File: client/src/pages/unsubscribed.tsx (TypeScript)

Code before:
import { Router } from '@reach/router';
import { withPrefix } from 'gatsby';
import React from 'react';

import ShowUnsubscribed from '../client-only-routes/show-unsubscribed';
import RedirectHome from '../components/redirect-home';

function Unsubscribed(): JSX.Element {
  return (
    <Router>
      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
      {/* @ts-ignore */}
      <ShowUnsubscribed path={withPrefix('/unsubscribed/:unsubscribeId')} />
      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
      {/* @ts-ignore */}
      <ShowUnsubscribed path={withPrefix('/unsubscribed')} />

      <RedirectHome />
    </Router>
  );
}

Unsubscribed.displayName = 'Unsubscribed';

export default Unsubscribed;


Review comment (suggestion):
```suggestion
      <RedirectHome default />
```

Code after:
import { Router } from '@reach/router';
import { withPrefix } from 'gatsby';
import React from 'react';

import ShowUnsubscribed from '../client-only-routes/show-unsubscribed';
import RedirectHome from '../components/redirect-home';

function Unsubscribed(): JSX.Element {
  return (
    <Router>
      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
      {/* @ts-ignore */}
      <ShowUnsubscribed path={withPrefix('/unsubscribed/:unsubscribeId')} />
      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
      {/* @ts-ignore */}
      <ShowUnsubscribed path={withPrefix('/unsubscribed')} />

      <RedirectHome default />
    </Router>
  );
}

Unsubscribed.displayName = 'Unsubscribed';

export default Unsubscribed;
Repository: freeCodeCamp/freeCodeCamp
File: client/src/pages/user.tsx (TypeScript)

Code before:
import { Router } from '@reach/router';
import { withPrefix } from 'gatsby';
import React from 'react';

import ShowUser from '../client-only-routes/show-user';
import RedirectHome from '../components/redirect-home';

function User(): JSX.Element {
  return (
    <Router>
      {/* @ts-expect-error Adding path property breaks username typing */}
      <ShowUser path={withPrefix('/user/:username/report-user')} />

      <RedirectHome />
    </Router>
  );
}

User.displayName = 'User';

export default User;


Review comment (suggestion):
```suggestion
      <RedirectHome default />
```

Code after:
import { Router } from '@reach/router';
import { withPrefix } from 'gatsby';
import React from 'react';

import ShowUser from '../client-only-routes/show-user';
import RedirectHome from '../components/redirect-home';

function User(): JSX.Element {
  return (
    <Router>
      {/* @ts-expect-error Adding path property breaks username typing */}
      <ShowUser path={withPrefix('/user/:username/report-user')} />

      <RedirectHome default />
    </Router>
  );
}

User.displayName = 'User';

export default User;
Repository: freeCodeCamp/freeCodeCamp
File: client/src/pages/unsubscribed.tsx (TypeScript)

Code before:
import { Router } from '@reach/router';
import React from 'react';

import ShowUnsubscribed from '../client-only-routes/show-unsubscribed';
import RedirectHome from '../components/redirect-home';

function Unsubscribed(): JSX.Element {
  return (
    <Router>
      <ShowUnsubscribed />

      <ShowUnsubscribed />
      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
      {/* @ts-ignore */}
      <RedirectHome default={true} />
    </Router>
  );
}

Unsubscribed.displayName = 'Unsubscribed';

export default Unsubscribed;


Review comment (suggestion):
I haven't tested the change locally, but I have a feeling we still need to pass the `path` prop in, similar to https://github.com/freeCodeCamp/freeCodeCamp/pull/50809 and https://github.com/freeCodeCamp/freeCodeCamp/pull/50810.

And it seems to me we should remove one of these, but I'm not sure which. @ojeytonwilliams might know.

Code after:
import { Router } from '@reach/router';
import { withPrefix } from 'gatsby';
import React from 'react';

import ShowUnsubscribed from '../client-only-routes/show-unsubscribed';
import RedirectHome from '../components/redirect-home';

function Unsubscribed(): JSX.Element {
  return (
    <Router>
      <ShowUnsubscribed path={withPrefix('/unsubscribed/:unsubscribeId')} />

      <ShowUnsubscribed path={withPrefix('/unsubscribed')} />
      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
      {/* @ts-ignore */}
      <RedirectHome default={true} />
    </Router>
  );
}

Unsubscribed.displayName = 'Unsubscribed';

export default Unsubscribed;
Repository: freeCodeCamp/freeCodeCamp
File: client/src/client-only-routes/show-unsubscribed.tsx (TypeScript)

Code before:
import { Grid, Panel, Button } from '@freecodecamp/react-bootstrap';
import { RouteComponentProps } from '@reach/router';
import React from 'react';
import Helmet from 'react-helmet';
import { useTranslation } from 'react-i18next';

import envData from '../../../config/env.json';
import { Spacer } from '../components/helpers';
import FullWidthRow from '../components/helpers/full-width-row';

const { apiLocation } = envData;

type ShowUnsubscribedProps = Pick<RouteComponentProps, 'path'> & {
  unsubscribeId?: string;
};

function ShowUnsubscribed({
  unsubscribeId
}: ShowUnsubscribedProps): JSX.Element {
  const { t } = useTranslation();
  return (
    <>
      <Helmet>
        <title>{t('metaTags:youre-unsubscribed')} | freeCodeCamp.org</title>
      </Helmet>
      <Grid>
        <main>

Review comment (suggestion):
a nitpick, you can use the keyword type to indicate that it's a type for readability.

```suggestion
import type { RouteComponentProps } from '@reach/router';
```

Code after:
import { Grid, Panel, Button } from '@freecodecamp/react-bootstrap';
import type { RouteComponentProps } from '@reach/router';
import React from 'react';
import Helmet from 'react-helmet';
import { useTranslation } from 'react-i18next';

import envData from '../../../config/env.json';
import { Spacer } from '../components/helpers';
import FullWidthRow from '../components/helpers/full-width-row';

const { apiLocation } = envData;

type ShowUnsubscribedProps = Pick<RouteComponentProps, 'path'> & {
  unsubscribeId?: string;
};

function ShowUnsubscribed({
  unsubscribeId
}: ShowUnsubscribedProps): JSX.Element {
  const { t } = useTranslation();
  return (
    <>
      <Helmet>
        <title>{t('metaTags:youre-unsubscribed')} | freeCodeCamp.org</title>
      </Helmet>
      <Grid>
        <main>
Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/settings/certification.tsx (TypeScript)

Code before:
            completedProject?.challengeFiles?.map(regeneratePathAndHistory) ??
            null
        }
      : null;

    const showProjectPreview = () => {
      setProjectTitle(projectTitle);
      setChallengeData(challengeData);
      openModal('projectPreview');
    };

    return (
      <SolutionDisplayWidget
        completedChallenge={completedProject}
        dataCy={projectTitle}
        projectTitle={projectTitle}
        showUserCode={showUserCode}
        showProjectPreview={showProjectPreview}
        displayContext='settings'
      ></SolutionDisplayWidget>
    );
  };

  type CertName = keyof ProjectMap | keyof LegacyProjectMap;
  const Certification = ({ certName }: { certName: CertName }) => {
    const { t } = useTranslation();
    const { certSlug } = fullProjectMap[certName][0];
    return (
      <FullWidthRow>
        <Spacer size='medium' />
        <h3 className='text-center' id={`cert-${certSlug}`}>
          {t(`certification.title.${certName}`, certName)}
        </h3>
        <Table>
          <thead>
            <tr>
              <th>{t('settings.labels.project-name')}</th>
              <th>{t('settings.labels.solution')}</th>
            </tr>
          </thead>
          <tbody>
            {renderProjectsFor({
              certName,
              isCert: getUserIsCertMap()[certName]
            })}
          </tbody>
        </Table>
      </FullWidthRow>
    );
  };
  function renderProjectsFor({

Review comment (suggestion):
I'd either use `useTranslation` everywhere (and get rid of `withTranslation`) or pass the `t` function to this. Either is fine, but mixing them is just confusing.

Code after:
            completedProject?.challengeFiles?.map(regeneratePathAndHistory) ??
            null
        }
      : null;

    const showProjectPreview = () => {
      setProjectTitle(projectTitle);
      setChallengeData(challengeData);
      openModal('projectPreview');
    };

    return (
      <SolutionDisplayWidget
        completedChallenge={completedProject}
        dataCy={projectTitle}
        projectTitle={projectTitle}
        showUserCode={showUserCode}
        showProjectPreview={showProjectPreview}
        displayContext='settings'
      ></SolutionDisplayWidget>
    );
  };

  type CertName = keyof ProjectMap | keyof LegacyProjectMap;
  const Certification = ({
    certName,
    t
  }: {
    certName: CertName;
    t: TFunction;
  }) => {
    const { certSlug } = fullProjectMap[certName][0];
    return (
      <FullWidthRow>
        <Spacer size='medium' />
        <h3 className='text-center' id={`cert-${certSlug}`}>
          {t(`certification.title.${certName}`, certName)}
        </h3>
        <Table>
          <thead>
            <tr>
              <th>{t('settings.labels.project-name')}</th>
              <th>{t('settings.labels.solution')}</th>
            </tr>
          </thead>
          <tbody>
            {renderProjectsFor({
              certName,
              isCert: getUserIsCertMap()[certName]
            })}
          </tbody>
Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/profile/components/timeline-buttons.test.js (JavaScript)

Code before:
/* eslint-disable @typescript-eslint/no-unused-vars */
import React from 'react';
import renderer from 'react-test-renderer';
import { Provider } from 'react-redux';

import { createStore } from '../../../redux/create-store';
import completedChallenges from '../../../__mocks__/completed-challenges.json';
import Timeline from './time-line';

Date.prototype.toLocaleString = jest.fn(() => 'Dec 29, 2022');
Date.prototype.toISOString = jest.fn(() => '2016-09-28T20:31:56.730Z');

const t = jest.fn(key => {
  if (
    Object.is(
      key,
      'intro:2022/responsive-web-design.blocks.learn-accessibility-by-building-a-quiz.title'
    )
  )
    return 'Learn Accessibility by Building a Quiz';
  else if (Object.is(key, 'aria.step')) return 'Step';
  else return key;
});

jest.mock('../../../analytics');

jest.mock('gatsby', () => {
  const edges = require('../../../__mocks__/edges.json');
  const React = require('react');
  const gatsby = jest.requireActual('gatsby');
  return {
    ...gatsby,
    useStaticQuery: jest.fn().mockReturnValue({
      allChallengeNode: {
        edges: edges
      }
    }),
    graphql: jest.fn(),
    Link: jest
      .fn()
      .mockImplementation(
        ({
          activeClassName,
          activeStyle,
          getProps,
          innerRef,
          partiallyActive,
          ref,

Review comment (refactor):
I feel like this shouldn't need to be hardcoded. In fact, if I remove this locally (and the t prop down below), the tests pass for me (after updating the snapshot).

Code after:
/* eslint-disable @typescript-eslint/no-unused-vars */
import React from 'react';
import renderer from 'react-test-renderer';
import { Provider } from 'react-redux';

import { createStore } from '../../../redux/create-store';
import completedChallenges from '../../../__mocks__/completed-challenges.json';
import Timeline from './time-line';

Date.prototype.toLocaleString = jest.fn(() => 'Dec 29, 2022');
Date.prototype.toISOString = jest.fn(() => '2016-09-28T20:31:56.730Z');

jest.mock('../../../analytics');

jest.mock('gatsby', () => {
  const edges = require('../../../__mocks__/edges.json');
  const React = require('react');
  const gatsby = jest.requireActual('gatsby');
  return {
    ...gatsby,
    useStaticQuery: jest.fn().mockReturnValue({
      allChallengeNode: {
        edges: edges
      }
    }),
    graphql: jest.fn(),
    Link: jest
      .fn()
      .mockImplementation(
        ({
          activeClassName,
          activeStyle,
          getProps,
          innerRef,
          partiallyActive,
          ref,
          replace,
          to,
          ...rest
        }) =>
          React.createElement('a', {
            ...rest,
            href: to,
            gatsby: 'true'
          })
      )
  };
});
Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/profile/components/time-line.tsx (TypeScript)

Code before:
      <ProjectPreviewModal
        challengeData={challengeData}
        closeText={t('buttons.close')}
        previewTitle={projectTitle}
        showProjectPreview={true}
      />
    </FullWidthRow>
  );
}

/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call*/
function useIdToNameMap(t: TFunction): Map<string, NameMap> {
  const {
    allChallengeNode: { edges }
  } = useStaticQuery(graphql`
    query challengeNodes {
      allChallengeNode {
        edges {
          node {
            challenge {
              fields {
                slug
                blockName
              }
              id
              superBlock
              title
            }
          }
        }
      }
    }
  `);
  const idToNameMap = new Map();
  for (const id of getCertIds()) {
    const certPath = getPathFromID(id);
    const certName = t(`certification.title.${certPath}`);
    idToNameMap.set(id, {
      challengeTitle: certName,
      certPath: certPath
    });
  }
  edges.forEach(
    ({
      node: {
        challenge: {
          // @ts-expect-error Graphql needs typing
          id,
          // @ts-expect-error Graphql needs typing
          superBlock,
          // @ts-expect-error Graphql needs typing

Review comment (suggestion):
```suggestion
              superBlock
              hasEditableBoundaries
```
We should use this to determine if the challenge is step or not.

Code after:
      <ProjectPreviewModal
        challengeData={challengeData}
        closeText={t('buttons.close')}
        previewTitle={projectTitle}
        showProjectPreview={true}
      />
    </FullWidthRow>
  );
}

/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call*/
function useIdToNameMap(t: TFunction): Map<string, NameMap> {
  const {
    allChallengeNode: { edges }
  } = useStaticQuery(graphql`
    query challengeNodes {
      allChallengeNode {
        edges {
          node {
            challenge {
              fields {
                slug
                blockName
              }
              id
              superBlock
              hasEditableBoundaries
              title
            }
          }
        }
      }
    }
  `);
  const idToNameMap = new Map();
  for (const id of getCertIds()) {
    const certPath = getPathFromID(id);
    const certName = t(`certification.title.${certPath}`);
    idToNameMap.set(id, {
      challengeTitle: certName,
      certPath: certPath
    });
  }
  edges.forEach(
    ({
      node: {
        challenge: {
          // @ts-expect-error Graphql needs typing
          id,
          // @ts-expect-error Graphql needs typing
          superBlock,
Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/profile/components/time-line.tsx (TypeScript)

Code before:
          }
        }
      }
    }
  `);
  const idToNameMap = new Map();
  for (const id of getCertIds()) {
    const certPath = getPathFromID(id);
    const certName = t(`certification.title.${certPath}`);
    idToNameMap.set(id, {
      challengeTitle: certName,
      certPath: certPath
    });
  }
  edges.forEach(
    ({
      node: {
        challenge: {
          // @ts-expect-error Graphql needs typing
          id,
          // @ts-expect-error Graphql needs typing
          superBlock,
          // @ts-expect-error Graphql needs typing
          title,
          // @ts-expect-error Graphql needs typing
          fields: { slug, blockName }
        }
      }
    }) => {
      const blockNameTitle = t(`intro:${superBlock}.blocks.${blockName}.title`);
      const step = t(`aria.step`);
      idToNameMap.set(id, {
        challengeTitle: `${
          title.includes(step) ? blockNameTitle + ' - ' : ''
        }${title}`,
        challengePath: slug
      });
    }
  );
  return idToNameMap;
  /* eslint-enable */
}

const Timeline = (props: TimelineProps): JSX.Element => {
  const { completedMap, t } = props;
  const idToNameMap = useIdToNameMap(t);
  // Get the sorted timeline along with total page count.
  const { sortedTimeline, totalPages } = useMemo(() => {
    const sortedTimeline = reverse(
      sortBy(completedMap, ['completedDate']).filter(challenge => {
        return idToNameMap.has(challenge.id);

Review comment (suggestion):
```suggestion
          fields: { slug, blockName },
          // @ts-expect-error Graphql needs typing
          hasEditableBoundaries
```

Code after:
            }
          }
        }
      }
    }
  `);
  const idToNameMap = new Map();
  for (const id of getCertIds()) {
    const certPath = getPathFromID(id);
    const certName = t(`certification.title.${certPath}`);
    idToNameMap.set(id, {
      challengeTitle: certName,
      certPath: certPath
    });
  }
  edges.forEach(
    ({
      node: {
        challenge: {
          // @ts-expect-error Graphql needs typing
          id,
          // @ts-expect-error Graphql needs typing
          superBlock,
          // @ts-expect-error Graphql needs typing
          title,
          // @ts-expect-error Graphql needs typing
          fields: { slug, blockName },
          // @ts-expect-error Graphql needs typing
          hasEditableBoundaries
        }
      }
    }) => {
      const blockNameTitle = t(`intro:${superBlock}.blocks.${blockName}.title`);
      idToNameMap.set(id, {
        challengeTitle: `${
          hasEditableBoundaries ? blockNameTitle + ' - ' : ''
        }${title}`,
        challengePath: slug
      });
    }
  );
  return idToNameMap;
  /* eslint-enable */
}

const Timeline = (props: TimelineProps): JSX.Element => {
  const { completedMap, t } = props;
  const idToNameMap = useIdToNameMap(t);
  // Get the sorted timeline along with total page count.
  const { sortedTimeline, totalPages } = useMemo(() => {
    const sortedTimeline = reverse(
Repository: freeCodeCamp/freeCodeCamp
File: tools/ui-components/src/container/container.test.tsx (TypeScript)

Code before:
import React from 'react';
import { render, screen } from '@testing-library/react';

import { Container } from '.';

describe('<Container />', () => {
  it('remove width when the container is fluid', () => {
    render(
      <Container fluid={true}>Random text to test the element width</Container>
    );
    expect(
      screen.getByText('Random text to test the element width')
    ).toHaveClass('mx-auto px-[15px] ');
  });
  it('should add className to it', () => {
    render(
      <Container className='certificate-outer-wrapper'>
        Random text to test the element width
      </Container>
    );
    expect(
      screen.getByText('Random text to test the element width')
    ).toHaveClass(
      'mx-auto px-[15px] my-0 md:w-[750px] min-[992px]:w-[970px] min-[1200px]:w-[1170px] certificate-outer-wrapper'
    );
  });
});


Review comment (suggestion):
It doesn't look like this tests the width, so I'd just call it 'filler text' or something else equally generic. As it stands it suggests to the reader that the length of the text is meaningful, but it isn't.

Code after:
import React from 'react';
import { render, screen } from '@testing-library/react';

import { Container } from '.';

describe('<Container />', () => {
  it('remove width when the container is fluid', () => {
    render(<Container fluid={true}>Learn to code for free.</Container>);
    expect(screen.getByText('Learn to code for free.')).toHaveClass(
      'mx-auto px-[15px] '
    );
  });
  it('should add className to it', () => {
    render(
      <Container className='certificate-outer-wrapper'>
        Learn to code for free.
      </Container>
    );
    expect(screen.getByText('Learn to code for free.')).toHaveClass(
      'mx-auto px-[15px] my-0 md:w-[750px] min-[992px]:w-[970px] min-[1200px]:w-[1170px] certificate-outer-wrapper'
    );
  });
});
Repository: freeCodeCamp/freeCodeCamp
File: tools/ui-components/src/container/container.tsx (TypeScript)

Code before:
import React from 'react';
import type { ContainerProps } from './types';

export const Container = ({
  children,
  className,
  fluid
}: ContainerProps): JSX.Element => {
  let elementClasses = '';
  if (!fluid) {
    elementClasses = `my-0 md:w-[750px] min-[992px]:w-[970px] min-[1200px]:w-[1170px]`;
  }

  if (!className) {
    className = '';
  }

  return (
    <div className={`mx-auto px-[15px] ${elementClasses} ${className}`}>
      {children}
    </div>
  );
};


Review comment (suggestion):
```suggestion
  const elementClasses = fluid
    ? ''
    : 'my-0 md:w-[750px] min-[992px]:w-[970px] min-[1200px]:w-[1170px]';
```
Bit neater.

Code after:
import React from 'react';
import type { ContainerProps } from './types';

export const Container = ({
  children,
  className,
  fluid
}: ContainerProps): JSX.Element => {
  const elementClasses = fluid
    ? ''
    : 'my-0 md:w-[750px] min-[992px]:w-[970px] min-[1200px]:w-[1170px]';

  return (
    <div className={`mx-auto px-[15px] ${elementClasses} ${className ?? ''}`}>
      {children}
    </div>
  );
};
Repository: freeCodeCamp/freeCodeCamp
File: tools/ui-components/src/container/container.tsx (TypeScript)

Code before:
import React from 'react';
import type { ContainerProps } from './types';

export const Container = ({
  children,
  className,
  fluid
}: ContainerProps): JSX.Element => {
  let elementClasses = '';
  if (!fluid) {
    elementClasses = `my-0 md:w-[750px] min-[992px]:w-[970px] min-[1200px]:w-[1170px]`;
  }

  if (!className) {
    className = '';
  }

  return (
    <div className={`mx-auto px-[15px] ${elementClasses} ${className}`}>
      {children}
    </div>
  );
};


Review comment (suggestion):
```suggestion
    <div className={`mx-auto px-[15px] ${elementClasses} ${className ?? ''}`}>
```

Code after:
import React from 'react';
import type { ContainerProps } from './types';

export const Container = ({
  children,
  className,
  fluid
}: ContainerProps): JSX.Element => {
  const elementClasses = fluid
    ? ''
    : 'my-0 md:w-[750px] min-[992px]:w-[970px] min-[1200px]:w-[1170px]';

  return (
    <div className={`mx-auto px-[15px] ${elementClasses} ${className ?? ''}`}>
      {children}
    </div>
  );
};