ronantakizawa/codereview-bench huggingface dataset:
Repository: freeCodeCamp/freeCodeCamp
File: client/src/redux/fetch-user-saga.js (JavaScript)

Code before:
import { call, put, takeEvery } from 'redux-saga/effects';
import store from 'store';
import { getSessionUser, getUserProfile } from '../utils/ajax';
import {
  fetchProfileForUserComplete,
  fetchProfileForUserError,
  fetchUserComplete,
  fetchUserError
} from './actions';
import { jwt } from './cookie-values';

function* fetchSessionUser() {
  if (!jwt) {
    yield put(fetchUserComplete({ user: {}, username: '' }));
    return;
  }
  try {
    const {
      data: { user = {}, result = '' }
    } = yield call(getSessionUser);
    const appUser = user[result] || {};
    const sound = store.get('fcc-sound') ?? false;
    store.set('fcc-sound', sound);

    yield put(fetchUserComplete({ user: appUser, username: result }));
  } catch (e) {
    console.log('failed to fetch user', e);
    yield put(fetchUserError(e));
  }
}

function* fetchOtherUser({ payload: maybeUser = '' }) {
  try {
    const maybeUserLC = maybeUser.toLowerCase();

    const {
      data: { entities: { user = {} } = {}, result = '' }
    } = yield call(getUserProfile, maybeUserLC);
    const otherUser = user[result] || {};
    yield put(
      fetchProfileForUserComplete({ user: otherUser, username: result })
    );
  } catch (e) {
    yield put(fetchProfileForUserError(e));
  }
}

export function createFetchUserSaga(types) {

Review comment (suggestion):
```suggestion
```

I don't think we need to set it here anymore, since we're not pulling it from the user record.

Code after:
import { call, put, takeEvery } from 'redux-saga/effects';
import { getSessionUser, getUserProfile } from '../utils/ajax';
import {
  fetchProfileForUserComplete,
  fetchProfileForUserError,
  fetchUserComplete,
  fetchUserError
} from './actions';
import { jwt } from './cookie-values';

function* fetchSessionUser() {
  if (!jwt) {
    yield put(fetchUserComplete({ user: {}, username: '' }));
    return;
  }
  try {
    const {
      data: { user = {}, result = '' }
    } = yield call(getSessionUser);
    const appUser = user[result] || {};

    yield put(fetchUserComplete({ user: appUser, username: result }));
  } catch (e) {
    console.log('failed to fetch user', e);
    yield put(fetchUserError(e));
  }
}

function* fetchOtherUser({ payload: maybeUser = '' }) {
  try {
    const maybeUserLC = maybeUser.toLowerCase();

    const {
      data: { entities: { user = {} } = {}, result = '' }
    } = yield call(getUserProfile, maybeUserLC);
    const otherUser = user[result] || {};
    yield put(
      fetchProfileForUserComplete({ user: otherUser, username: result })
    );
  } catch (e) {
    yield put(fetchProfileForUserError(e));
  }
}

export function createFetchUserSaga(types) {
  return [
    takeEvery(types.fetchUser, fetchSessionUser),
    takeEvery(types.fetchProfileForUser, fetchOtherUser)
Repository: freeCodeCamp/freeCodeCamp
File: client/src/client-only-routes/show-settings.tsx (TypeScript)

Code before:
      githubProfile,
      linkedin,
      twitter,
      website,
      portfolio
    },
    navigate,
    showLoading,
    updateQuincyEmail,
    updateSocials,
    updatePortfolio,
    updateIsHonest,
    verifyCert,
    userToken
  } = props;
  const isSignedInRef = useRef(isSignedIn);

  if (showLoading) {
    return <Loader fullScreen={true} />;
  }

  if (!isSignedInRef.current) {
    navigate(`${apiLocation}/signin`);
    return <Loader fullScreen={true} />;
  }
  const sound = store.get('fcc-sound') as boolean;
  return (
    <>
      <Helmet title={`${t('buttons.settings')} | freeCodeCamp.org`} />
      <Container>
        <main>
          <Spacer size='large' />
          <h1
            id='content-start'
            className='text-center'
            style={{ overflowWrap: 'break-word' }}
          >
            {t('settings.for', { username: username })}
          </h1>
          <About
            about={about}
            currentTheme={theme}
            location={location}
            name={name}
            picture={picture}
            sound={sound}
            keyboardShortcuts={keyboardShortcuts}
            submitNewAbout={submitNewAbout}
            toggleNightMode={toggleNightMode}
            toggleSoundMode={toggleSoundMode}
            toggleKeyboardShortcuts={toggleKeyboardShortcuts}

Review comment (suggestion):
```suggestion
  const sound = store.get('fcc-sound') ?? false;
```

Rather than asserting, we should probably coalesce. 

Code after:
      name,
      githubProfile,
      linkedin,
      twitter,
      website,
      portfolio
    },
    navigate,
    showLoading,
    updateQuincyEmail,
    updateSocials,
    updatePortfolio,
    updateIsHonest,
    verifyCert,
    userToken
  } = props;
  const isSignedInRef = useRef(isSignedIn);

  if (showLoading) {
    return <Loader fullScreen={true} />;
  }

  if (!isSignedInRef.current) {
    navigate(`${apiLocation}/signin`);
    return <Loader fullScreen={true} />;
  }
  const sound = (store.get('fcc-sound') as boolean) ?? false;
  return (
    <>
      <Helmet title={`${t('buttons.settings')} | freeCodeCamp.org`} />
      <Container>
        <main>
          <Spacer size='large' />
          <h1
            id='content-start'
            className='text-center'
            style={{ overflowWrap: 'break-word' }}
          >
            {t('settings.for', { username: username })}
          </h1>
          <About
            about={about}
            currentTheme={theme}
            location={location}
            name={name}
            picture={picture}
            sound={sound}
            keyboardShortcuts={keyboardShortcuts}
            submitNewAbout={submitNewAbout}
            toggleNightMode={toggleNightMode}
            toggleSoundMode={toggleSoundMode}
Repository: freeCodeCamp/freeCodeCamp
File: cypress/e2e/default/learn/challenges/c-sharp.ts (TypeScript)

Code before:
const cSharpLocations = {
  challenge:
    '/learn/foundational-c-sharp-with-microsoft/write-your-first-code-using-c-sharp/write-your-first-c-sharp-code',
  trophy:
    '/learn/foundational-c-sharp-with-microsoft/write-your-first-code-using-c-sharp/trophy-write-your-first-code-using-c-sharp'
};

describe('C Sharp Challenges', () => {
  before(() => {
    cy.visit(cSharpLocations.challenge);
  });

  it('renders the correct buttons', () => {
    cy.get('.btn-primary').should('have.length', 2);
    cy.contains('.btn-primary', 'Check your answer').should('exist');
    cy.contains('.btn-primary', 'Ask for Help').should('exist');
  });
});

describe('C Sharp Trophy Challenges', () => {
  before(() => {
    cy.login();
    cy.visit(cSharpLocations.trophy);
  });

  it('renders the correct buttons', () => {
    cy.get('.btn-primary').should('have.length', 3);
    cy.contains('.btn-primary', 'Link Account').should('exist');
    cy.contains('.btn-primary', 'Verify Trophy').should('exist');
    cy.contains('.btn-primary', 'Ask for Help').should('exist');
  });
});


Review comment (suggestion):
```suggestion
    cy.contains('.btn-primary', 'Check your answer').should('be.visible');
    cy.contains('.btn-primary', 'Ask for Help').should('be.visible');
```
`contains` already checks if the thing exists, so you can either leave it at that or check it's visible (which is a higher bar than existence)

Code after:
const cSharpLocations = {
  challenge:
    '/learn/foundational-c-sharp-with-microsoft/write-your-first-code-using-c-sharp/write-your-first-c-sharp-code',
  trophy:
    '/learn/foundational-c-sharp-with-microsoft/write-your-first-code-using-c-sharp/trophy-write-your-first-code-using-c-sharp'
};

describe('C Sharp Challenges', () => {
  before(() => {
    cy.visit(cSharpLocations.challenge);
  });

  it('renders the correct buttons', () => {
    cy.get('.btn-primary').should('have.length', 2);
    cy.contains('.btn-primary', 'Check your answer').should('be.visible');
    cy.contains('.btn-primary', 'Ask for Help').should('be.visible');
  });
});

describe('C Sharp Trophy Challenges', () => {
  before(() => {
    cy.login();
    cy.visit(cSharpLocations.trophy);
  });

  it('renders the correct buttons', () => {
    cy.get('.btn-primary').should('have.length', 3);
    cy.contains('.btn-primary', 'Link Account').should('be.visible');
    cy.contains('.btn-primary', 'Verify Trophy').should('be.visible');
    cy.contains('.btn-primary', 'Ask for Help').should('be.visible');
  });
});
Repository: freeCodeCamp/freeCodeCamp
File: cypress/e2e/default/learn/challenges/c-sharp.ts (TypeScript)

Code before:
    '/learn/foundational-c-sharp-with-microsoft/write-your-first-code-using-c-sharp/trophy-write-your-first-code-using-c-sharp'
};

describe('C Sharp Challenges', () => {
  before(() => {
    cy.visit(cSharpLocations.challenge);
  });

  it('renders the correct buttons', () => {
    cy.get('.btn-primary').should('have.length', 2);
    cy.contains('.btn-primary', 'Check your answer').should('exist');
    cy.contains('.btn-primary', 'Ask for Help').should('exist');
  });
});

describe('C Sharp Trophy Challenges', () => {
  before(() => {
    cy.login();
    cy.visit(cSharpLocations.trophy);
  });

  it('renders the correct buttons', () => {
    cy.get('.btn-primary').should('have.length', 3);
    cy.contains('.btn-primary', 'Link Account').should('exist');
    cy.contains('.btn-primary', 'Verify Trophy').should('exist');
    cy.contains('.btn-primary', 'Ask for Help').should('exist');
  });
});


Review comment (suggestion):
```suggestion
    cy.contains('.btn-primary', 'Link Account').should('be.visible');
    cy.contains('.btn-primary', 'Verify Trophy').should('be.visible');
    cy.contains('.btn-primary', 'Ask for Help').should('be.visible');
```

Code after:
    '/learn/foundational-c-sharp-with-microsoft/write-your-first-code-using-c-sharp/trophy-write-your-first-code-using-c-sharp'
};

describe('C Sharp Challenges', () => {
  before(() => {
    cy.visit(cSharpLocations.challenge);
  });

  it('renders the correct buttons', () => {
    cy.get('.btn-primary').should('have.length', 2);
    cy.contains('.btn-primary', 'Check your answer').should('be.visible');
    cy.contains('.btn-primary', 'Ask for Help').should('be.visible');
  });
});

describe('C Sharp Trophy Challenges', () => {
  before(() => {
    cy.login();
    cy.visit(cSharpLocations.trophy);
  });

  it('renders the correct buttons', () => {
    cy.get('.btn-primary').should('have.length', 3);
    cy.contains('.btn-primary', 'Link Account').should('be.visible');
    cy.contains('.btn-primary', 'Verify Trophy').should('be.visible');
    cy.contains('.btn-primary', 'Ask for Help').should('be.visible');
  });
});
Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/layouts/default.tsx (TypeScript)

Code before:
  showCodeAllySelector,
  userFetchStateSelector
} from '../../redux/selectors';

import {
  UserFetchState,
  User,
  AllChallengeNode,
  CertificateNode
} from '../../redux/prop-types';
import BreadCrumb from '../../templates/Challenges/components/bread-crumb';
import Flash from '../Flash';
import { flashMessageSelector, removeFlashMessage } from '../Flash/redux';
import SignoutModal from '../signout-modal';
import Footer from '../Footer';
import Header from '../Header';
import OfflineWarning from '../OfflineWarning';
import { Loader } from '../helpers';
import envData from '../../../../config/env.json';

// preload common fonts
import './fonts.css';
import './global.css';
import './variables.css';
import './rtl-layout.css';
import StagingWarningModal from '../StagingWarningModal';

const mapStateToProps = createSelector(
  isSignedInSelector,
  examInProgressSelector,
  flashMessageSelector,
  isOnlineSelector,
  isServerOnlineSelector,
  userFetchStateSelector,
  showCodeAllySelector,
  userSelector,
  (
    isSignedIn,
    examInProgress: boolean,
    flashMessage,
    isOnline: boolean,
    isServerOnline: boolean,
    fetchState: UserFetchState,
    showCodeAlly: boolean,
    user: User
  ) => ({
    isSignedIn,
    examInProgress,
    flashMessage,
    hasMessage: !!flashMessage.message,
    isOnline,

Review comment (suggestion):
This should be imported with the other modules, rather than the css. Next to signout-modal makes the most sense.

Code after:
  showCodeAllySelector,
  userFetchStateSelector
} from '../../redux/selectors';

import {
  UserFetchState,
  User,
  AllChallengeNode,
  CertificateNode
} from '../../redux/prop-types';
import BreadCrumb from '../../templates/Challenges/components/bread-crumb';
import Flash from '../Flash';
import { flashMessageSelector, removeFlashMessage } from '../Flash/redux';
import SignoutModal from '../signout-modal';
import StagingWarningModal from '../staging-warning-modal';
import Footer from '../Footer';
import Header from '../Header';
import OfflineWarning from '../OfflineWarning';
import { Loader } from '../helpers';
import envData from '../../../../config/env.json';

// preload common fonts
import './fonts.css';
import './global.css';
import './variables.css';
import './rtl-layout.css';

const mapStateToProps = createSelector(
  isSignedInSelector,
  examInProgressSelector,
  flashMessageSelector,
  isOnlineSelector,
  isServerOnlineSelector,
  userFetchStateSelector,
  showCodeAllySelector,
  userSelector,
  (
    isSignedIn,
    examInProgress: boolean,
    flashMessage,
    isOnline: boolean,
    isServerOnline: boolean,
    fetchState: UserFetchState,
    showCodeAlly: boolean,
    user: User
  ) => ({
    isSignedIn,
    examInProgress,
    flashMessage,
    hasMessage: !!flashMessage.message,
    isOnline,
Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/Map/index.tsx (TypeScript)

Code before:
        ))}
      </ul>
      <Spacer size='medium' />
      <h1 className={forLanding ? 'big-heading' : ''}>
        {t('landing.professional-certs-heading')}
      </h1>
      <ul>
        {superBlockOrder[SuperBlockStages.Professional].map((superBlock, i) => (
          <MapLi key={i} superBlock={superBlock} landing={forLanding} />
        ))}
      </ul>
      <Spacer size='medium' />
      <h1 className={forLanding ? 'big-heading' : ''}>
        {t('landing.interview-prep-heading')}
      </h1>
      <ul>
        {superBlockOrder[SuperBlockStages.Extra].map((superBlock, i) => (
          <MapLi key={i} superBlock={superBlock} landing={forLanding} />
        ))}
      </ul>
    </div>
  );
}

Map.displayName = 'Map';

export default Map;


Review comment (suggestion):
this should be `h2`, the page has multiple `h1`.

```suggestion
          <h2 className={forLanding ? 'big-heading' : ''}>
            {t('landing.upcoming-heading')}
          </h2>
```

Code after:
        ))}
      </ul>
      <Spacer size='medium' />
      <h1 className={forLanding ? 'big-heading' : ''}>
        {t('landing.professional-certs-heading')}
      </h1>
      <ul>
        {superBlockOrder[SuperBlockStages.Professional].map((superBlock, i) => (
          <MapLi key={i} superBlock={superBlock} landing={forLanding} />
        ))}
      </ul>
      <Spacer size='medium' />
      <h1 className={forLanding ? 'big-heading' : ''}>
        {t('landing.interview-prep-heading')}
      </h1>
      <ul>
        {superBlockOrder[SuperBlockStages.Extra].map((superBlock, i) => (
          <MapLi key={i} superBlock={superBlock} landing={forLanding} />
        ))}
      </ul>
      {showUpcomingChanges && (
        <>
          <Spacer size='medium' />
          <h1 className={forLanding ? 'big-heading' : ''}>
            {t('landing.upcoming-heading')}
          </h1>
          <ul>
            {superBlockOrder[SuperBlockStages.Upcoming].map((superBlock, i) => (
              <MapLi key={i} superBlock={superBlock} landing={forLanding} />
            ))}
          </ul>
        </>
      )}
    </div>
  );
}

Map.displayName = 'Map';

export default Map;
Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/Donation/donation-modal.tsx (TypeScript)

Code before:
  return recentlyClaimedBlock ? (
    <BearBlockCompletion className='donation-icon' />
  ) : (
    <BearProgressModal className='donation-icon' />
  );
};

function getctaNumberBetween1To10() {
  const min = 1;
  const max = 10;
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function DonateModal({
  show,
  closeDonationModal,
  executeGA,
  location,
  recentlyClaimedBlock
}: DonateModalProps): JSX.Element {
  const [closeLabel, setCloseLabel] = useState(false);
  const [ctaNumber, setCtaNumber] = useState(0);
  const [isDisabled, setIsDisabled] = useState(true);
  const [showSkipButton, setShowSkipButton] = useState(false);
  const [showDonateForm, setShowDonateForm] = useState(true);
  const [donationAmount, setDonationAmount] = useState<DonationAmount>(
    defaultDonation.donationAmount
  );
  const loadElementsIndividually = useFeature('load_elements_individually').on;
  const showMultiTier = useFeature('multi-tier').on;
  const { t } = useTranslation();

  // test wheather the conversions are being distributed properly
  useFeature('aa-test-in-component');

  const handleProcessing = () => {
    setCloseLabel(true);
  };

  useEffect(() => {
    if (loadElementsIndividually) {
      const timer = setTimeout(() => {
        setIsDisabled(false);
        setShowSkipButton(true);
      }, 4000);
      return () => clearTimeout(timer);
    } else {
      setIsDisabled(false);
      setShowSkipButton(true);
    }
  }, [loadElementsIndividually]);

Review comment (suggestion):
```suggestion
  const [donationAmount, setDonationAmount] = useState(
```
It's inferred.

Code after:
    <BearBlockCompletion className='donation-icon' />
  ) : (
    <BearProgressModal className='donation-icon' />
  );
};

function getctaNumberBetween1To10() {
  const min = 1;
  const max = 10;
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function DonateModal({
  show,
  closeDonationModal,
  executeGA,
  location,
  recentlyClaimedBlock
}: DonateModalProps): JSX.Element {
  const [closeLabel, setCloseLabel] = useState(false);
  const [ctaNumber, setCtaNumber] = useState(0);
  const [isDisabled, setIsDisabled] = useState(true);
  const [showSkipButton, setShowSkipButton] = useState(false);
  const [showDonateForm, setShowDonateForm] = useState(true);
  const [donationAmount, setDonationAmount] = useState(
    defaultDonation.donationAmount
  );
  const loadElementsIndividually = useFeature('load_elements_individually').on;
  const showMultiTier = useFeature('multi-tier').on;
  const { t } = useTranslation();

  // test wheather the conversions are being distributed properly
  useFeature('aa-test-in-component');

  const handleProcessing = () => {
    setCloseLabel(true);
  };

  useEffect(() => {
    if (loadElementsIndividually) {
      const timer = setTimeout(() => {
        setIsDisabled(false);
        setShowSkipButton(true);
      }, 4000);
      return () => clearTimeout(timer);
    } else {
      setIsDisabled(false);
      setShowSkipButton(true);
    }
  }, [loadElementsIndividually]);
Repository: freeCodeCamp/freeCodeCamp
File: client/src/client-only-routes/show-project-links.tsx (TypeScript)

Code before:
      ] as const;

      return (
        <>
          {certs.map((cert, ind) => {
            const projects = certsToProjects[cert.title];
            const { certSlug } = projects[0];
            const certLocation = `/certification/${username}/${certSlug}`;
            return (
              <tr key={ind}>
                <td>
                  <Link className='project-link' to={certLocation} external>
                    {t(`certification.title.${cert.title}`, cert.title)}
                  </Link>
                </td>
              </tr>
            );
          })}
        </>
      );
    }

    const project = certsToProjects[certName];
    return (
      <>
        {project.map(({ link, title, id }) => (
          <tr key={id}>
            <td>
              <Link to={link}>
                {t(`certification.project.title.${title}`, title)}
              </Link>
            </td>
            <td colSpan={2}>{getProjectSolution(id, title)}</td>
          </tr>
        ))}
      </>
    );
  };

  const {
    certName,
    name,
    user: { username }
  } = props;
  const { completedChallenge, showCode, projectTitle } = solutionState;
  const examResults = completedChallenge?.examResults;

  const challengeData: CompletedChallenge | null = completedChallenge
    ? {
        ...completedChallenge,
        // // eslint-disable-next-line @typescript-eslint/no-unsafe-argument

Review comment (suggestion):
```suggestion
    const projects = certsToProjects[certName];
    return (
      <>
        {projects.map(({ link, title, id }) => (
```

Code after:
      ] as const;

      return (
        <>
          {certs.map((cert, ind) => {
            const projects = certsToProjects[cert.title];
            const { certSlug } = projects[0];
            const certLocation = `/certification/${username}/${certSlug}`;
            return (
              <tr key={ind}>
                <td>
                  <Link className='project-link' to={certLocation} external>
                    {t(`certification.title.${cert.title}`, cert.title)}
                  </Link>
                </td>
              </tr>
            );
          })}
        </>
      );
    }

    const projects = certsToProjects[certName];
    return (
      <>
        {projects.map(({ link, title, id }) => (
          <tr key={id}>
            <td>
              <Link to={link}>
                {t(`certification.projects.title.${title}`, title)}
              </Link>
            </td>
            <td colSpan={2}>{getProjectSolution(id, title)}</td>
          </tr>
        ))}
      </>
    );
  };

  const {
    certName,
    name,
    user: { username }
  } = props;
  const { completedChallenge, showCode, projectTitle } = solutionState;
  const examResults = completedChallenge?.examResults;

  const challengeData: CompletedChallenge | null = completedChallenge
    ? {
        ...completedChallenge,
        // // eslint-disable-next-line @typescript-eslint/no-unsafe-argument