ronantakizawa/codereview-bench huggingface dataset:
Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/Donation/multi-tier-donation-form.tsx (TypeScript)

Code before:

type MultiTierDonationFormProps = {
  setShowHeaderAndFooter?: (show: boolean) => void;
  handleProcessing?: () => void;
  paymentContext: PaymentContext;
  isMinimalForm?: boolean;
  defaultTheme?: LocalStorageThemes;
  isAnimationEnabled?: boolean;
};
function SelectionTabs({
  donationAmount,
  setDonationAmount,
  setShowDonateForm,
  isAnimationEnabled
}: {
  donationAmount: DonationAmount;
  setDonationAmount: React.Dispatch<React.SetStateAction<DonationAmount>>;
  setShowDonateForm: React.Dispatch<React.SetStateAction<boolean>>;
  isAnimationEnabled?: boolean;
}) {
  const { t } = useTranslation();
  const switchTab = (value: string): void => {
    setDonationAmount(Number(value) as DonationAmount);
  };
  useFeature('aa-test-in-component');
  const handleAmountConformationClick = () => {
    callGA({
      event: 'donation_related',
      action: `Amount Confirmation Clicked`
    });
    setShowDonateForm(true);
  };

  const selectAmountTabClick = (value: DonationAmount) => {
    callGA({
      event: 'donation_related',
      action: `Select Amount Tab Clicked`,
      amount: value
    });
    setDonationAmount(value);
  };

  return (
    <Row
      className={'donate-btn-group donation-tier-selection'}
      data-playwright-test-label='donation-tier-selector'
    >
      <Col xs={12}>
        <b>
          {t('donate.confirm-monthly', {
            usd: formattedAmountLabel(donationAmount)

Review comment (suggestion):
Just a real small typo here 😄 

```suggestion
  const handleAmountConfirmationClick = () => {
```

Code after:

type MultiTierDonationFormProps = {
  setShowHeaderAndFooter?: (show: boolean) => void;
  handleProcessing?: () => void;
  paymentContext: PaymentContext;
  isMinimalForm?: boolean;
  defaultTheme?: LocalStorageThemes;
  isAnimationEnabled?: boolean;
};
function SelectionTabs({
  donationAmount,
  setDonationAmount,
  setShowDonateForm,
  isAnimationEnabled
}: {
  donationAmount: DonationAmount;
  setDonationAmount: React.Dispatch<React.SetStateAction<DonationAmount>>;
  setShowDonateForm: React.Dispatch<React.SetStateAction<boolean>>;
  isAnimationEnabled?: boolean;
}) {
  const { t } = useTranslation();
  const switchTab = (value: string): void => {
    setDonationAmount(Number(value) as DonationAmount);
  };
  useFeature('aa-test-in-component');
  const handleAmountConfirmationClick = () => {
    callGA({
      event: 'donation_related',
      action: `Amount Confirmation Clicked`
    });
    setShowDonateForm(true);
  };

  const selectAmountTabClick = (value: DonationAmount) => {
    callGA({
      event: 'donation_related',
      action: `Select Amount Tab Clicked`,
      amount: value
    });
    setDonationAmount(value);
  };

  return (
    <Row
      className={'donate-btn-group donation-tier-selection'}
      data-playwright-test-label='donation-tier-selector'
    >
      <Col xs={12}>
        <b>
          {t('donate.confirm-monthly', {
            usd: formattedAmountLabel(donationAmount)
Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/Donation/multi-tier-donation-form.tsx (TypeScript)

Code before:
            ))}
          </TabsList>
          <Spacer size='xs' />
          {subscriptionAmounts.map(value => {
            const usd = formattedAmountLabel(donationAmount);
            const hours = convertToTimeContributed(donationAmount);
            const donationDescription = t('donate.your-donation-2', {
              usd,
              hours
            });

            return (
              <TabsContent
                key={value}
                className='tab-content'
                value={value.toString()}
              >
                <p>{donationDescription}</p>
              </TabsContent>
            );
          })}
        </Tabs>
        <button
          className='text-center confirm-donation-btn donate-btn-group'
          type='submit'
          onClick={handleAmountConformationClick}
        >
          {isAnimationEnabled
            ? t('buttons.confirm-amount')
            : t('buttons.donate')}
        </button>
        <Spacer size='m' />
      </Col>
    </Row>
  );
}

function DonationFormRow({
  handleProcessing,
  isMinimalForm,
  setShowDonateForm,
  donationAmount,
  paymentContext
}: {
  handleProcessing?: () => void;
  isMinimalForm?: boolean;
  setShowDonateForm: React.Dispatch<React.SetStateAction<boolean>>;
  donationAmount: DonationAmount;
  paymentContext: PaymentContext;
}) {
  const editAmountClick = () => {

Review comment (suggestion):
```suggestion
          onClick={handleAmountConfirmationClick}
```

Code after:
            ))}
          </TabsList>
          <Spacer size='xs' />
          {subscriptionAmounts.map(value => {
            const usd = formattedAmountLabel(donationAmount);
            const hours = convertToTimeContributed(donationAmount);
            const donationDescription = t('donate.your-donation-2', {
              usd,
              hours
            });

            return (
              <TabsContent
                key={value}
                className='tab-content'
                value={value.toString()}
              >
                <p>{donationDescription}</p>
              </TabsContent>
            );
          })}
        </Tabs>
        <button
          className='text-center confirm-donation-btn donate-btn-group'
          type='submit'
          onClick={handleAmountConfirmationClick}
        >
          {isAnimationEnabled
            ? t('buttons.confirm-amount')
            : t('buttons.donate')}
        </button>
        <Spacer size='m' />
      </Col>
    </Row>
  );
}

function DonationFormRow({
  handleProcessing,
  isMinimalForm,
  setShowDonateForm,
  donationAmount,
  paymentContext
}: {
  handleProcessing?: () => void;
  isMinimalForm?: boolean;
  setShowDonateForm: React.Dispatch<React.SetStateAction<boolean>>;
  donationAmount: DonationAmount;
  paymentContext: PaymentContext;
}) {
  const editAmountClick = () => {
Repository: freeCodeCamp/freeCodeCamp
File: api/src/routes/public/certificate.test.ts (TypeScript)

Code before:
            },
            isJsAlgoDataStructCert: true,
            completedChallenges: [
              {
                id: '561abd10cb81ac38a17513bc', // Cert ID
                completedDate: DATE_NOW
              }
            ]
          }
        });

        const response = await superRequest(
          '/certificate/showCert/foobar/javascript-algorithms-and-data-structures',
          {
            method: 'GET'
          }
        );

        expect(response.body).toEqual({
          certSlug: 'javascript-algorithms-and-data-structures',
          certTitle: 'Legacy JavaScript Algorithms and Data Structures',
          username: 'foobar',
          name: 'foobar',
          date: DATE_NOW,
          completionTime: 300
        });
        expect(response.status).toBe(200);
      });

      test('should return cert-not-found if there is no cert with that slug', async () => {
        const response = await superRequest(
          '/certificate/showCert/foobar/not-a-valid-cert-slug',
          {
            method: 'GET'
          }
        );
        expect(response.body).toEqual({
          messages: [
            {
              type: 'info',
              message: 'flash.cert-not-found',
              variables: { certSlug: 'not-a-valid-cert-slug' }
            }
          ]
        });
        expect(response.status).toBe(404);
      });
    });
  });
});


Review comment (suggestion):
```suggestion
        expect(response.body).toHaveProperty('name', 'foobar');
```

Code after:
                id: '561abd10cb81ac38a17513bc', // Cert ID
                completedDate: DATE_NOW
              }
            ]
          }
        });

        const response = await superRequest(
          '/certificate/showCert/foobar/javascript-algorithms-and-data-structures',
          {
            method: 'GET'
          }
        );

        expect(response.body).toHaveProperty('name', 'foobar');
        expect(response.status).toBe(200);
      });

      test('should return cert-not-found if there is no cert with that slug', async () => {
        const response = await superRequest(
          '/certificate/showCert/foobar/not-a-valid-cert-slug',
          {
            method: 'GET'
          }
        );
        expect(response.body).toEqual({
          messages: [
            {
              type: 'info',
              message: 'flash.cert-not-found',
              variables: { certSlug: 'not-a-valid-cert-slug' }
            }
          ]
        });
        expect(response.status).toBe(404);
      });
    });
  });
});

const fullStackChallenges = [
  {
    completedDate: 1585210952511,
    id: '5a553ca864b52e1d8bceea14'
  },
  {
    completedDate: 1585210952511,
    id: '561add10cb82ac38a17513bc'
  },
  {
    completedDate: 1588665778679,
Repository: freeCodeCamp/freeCodeCamp
File: tools/challenge-editor/client/src/components/editor/editor.tsx (TypeScript)

Code before:
      </span>
      <CodeMirror
        value={stepContent}
        onChange={handleChange}
        options={{
          mode: {
            name: 'markdown',
            highlightFormatting: true
          },
          theme: 'material',
          lineNumbers: true,
          lineWrapping: true
        }}
      />
      <SaveChallenge
        superblock={superblock || ''}
        block={block || ''}
        challenge={challenge}
        content={stepContent}
      />
      <p>
        <Link to={`/${superblock || ''}/${block || ''}`}>Return to Block</Link>
      </p>
      <p>
        <Link
          to={`localhost:8000/learn/${superBlockNameMap[superblock || '']}/${block || ''}/${items.name.replace(/[\s]+/g, '-').toLowerCase() || ''}`}
          target='_blank'
        >
          View Live Version of the Challenge in your running development
          environment
        </Link>
      </p>
    </div>
  );
};

export default Editor;


Review comment (bug):
I could be wrong, but I believe `HOME_LOCATION` is available in Gitpod. If so, we should use that since localhost won't work.

Code after:
      </span>
      <CodeMirror
        value={stepContent}
        onChange={handleChange}
        options={{
          mode: {
            name: 'markdown',
            highlightFormatting: true
          },
          theme: 'material',
          lineNumbers: true,
          lineWrapping: true
        }}
      />
      <SaveChallenge
        superblock={superblock || ''}
        block={block || ''}
        challenge={challenge}
        content={stepContent}
      />
      <p>
        <Link to={`/${superblock || ''}/${block || ''}`}>Return to Block</Link>
      </p>
      <p>
        <Link
          to={`${import.meta.env.CHALLENGE_EDITOR_LEARN_CLIENT_LOCATION}/learn/${superBlockNameMap[superblock || '']}/${block || ''}/${items.name.replace(/[\s]+/g, '-').toLowerCase() || ''}`}
          target='_blank'
        >
          View Live Version of the Challenge in your running development
          environment
        </Link>
      </p>
    </div>
  );
};

export default Editor;
Repository: freeCodeCamp/freeCodeCamp
File: tools/challenge-editor/client/src/components/editor/editor.tsx (TypeScript)

Code before:
      </span>
      <CodeMirror
        value={stepContent}
        onChange={handleChange}
        options={{
          mode: {
            name: 'markdown',
            highlightFormatting: true
          },
          theme: 'material',
          lineNumbers: true,
          lineWrapping: true
        }}
      />
      <SaveChallenge
        superblock={superblock || ''}
        block={block || ''}
        challenge={challenge}
        content={stepContent}
      />
      <p>
        <Link to={`/${superblock || ''}/${block || ''}`}>Return to Block</Link>
      </p>
      <p>
        <Link
          to={`${import.meta.env.CHALLENGE_EDITOR_LEARN_CLIENT_LOCATION || 'http://localhost:8000'}/learn/${superBlockNameMap[superblock || '']}/${block || ''}/${items.name.replace(/[\s]+/g, '-').toLowerCase() || ''}`}
          target='_blank'
        >
          View Live Version of the Challenge in your running development
          environment
        </Link>
      </p>
    </div>
  );
};

export default Editor;


Review comment (suggestion):
```suggestion
          to={`${import.meta.env.CHALLENGE_EDITOR_LEARN_CLIENT_LOCATION}/learn/${superBlockNameMap[superblock || '']}/${block || ''}/${items.name.replace(/[\s]+/g, '-').toLowerCase() || ''}`}
```
Nit: we don't need to provide the same default twice.

Code after:
      </span>
      <CodeMirror
        value={stepContent}
        onChange={handleChange}
        options={{
          mode: {
            name: 'markdown',
            highlightFormatting: true
          },
          theme: 'material',
          lineNumbers: true,
          lineWrapping: true
        }}
      />
      <SaveChallenge
        superblock={superblock || ''}
        block={block || ''}
        challenge={challenge}
        content={stepContent}
      />
      <p>
        <Link to={`/${superblock || ''}/${block || ''}`}>Return to Block</Link>
      </p>
      <p>
        <Link
          to={`${import.meta.env.CHALLENGE_EDITOR_LEARN_CLIENT_LOCATION}/learn/${superBlockNameMap[superblock || '']}/${block || ''}/${items.name.replace(/[\s]+/g, '-').toLowerCase() || ''}`}
          target='_blank'
        >
          View Live Version of the Challenge in your running development
          environment
        </Link>
      </p>
    </div>
  );
};

export default Editor;
Repository: freeCodeCamp/freeCodeCamp
File: api/src/routes/public/status.ts (TypeScript)

Code before:
import { type FastifyPluginCallbackTypebox } from '@fastify/type-provider-typebox';

/**
 * Plugin for the health check endpoint.
 *
 * @param fastify The Fastify instance.
 * @param _options Options passed to the plugin via `fastify.register(plugin,
 * options)`.
 * @param done The callback to signal that the plugin is ready.
 */
export const statusRoute: FastifyPluginCallbackTypebox = (
  fastify,
  _options,
  done
) => {
  fastify.get('/status/ping', async (req, _reply) => {
    const url = req.url || 'URL not found';
    const reqId = req.id || 'REQ_ID not found';
    const headers = req.headers || 'HEADERS not found';
    const ip =
      req.headers['x-forwarded-for'] ||
      req.headers['x-real-ip'] ||
      req.ip ||
      'IP not found';
    const params = req.params || 'PARAMS not found';

    fastify.log
      .child({
        URL: url,
        REQ_ID: reqId,
        HEADERS: headers,
        IP: ip,
        PARAMS: params
      })
      .debug('returning a ping');
    return { msg: 'pong' };
  });

  done();
};


Review comment (suggestion):
```suggestion
    const headers = isEmpty(req.headers) ? 'HEADERS not found' : req.headers;
```
`req.headers` is an object, so if you want to see the message, this is necessary. If you just want to display `"PARAMS":{}`, we can use `req.headers` directly, but I assume you don't.

`isEmpty` comes from lodash.

Code after:
import { type FastifyPluginCallbackTypebox } from '@fastify/type-provider-typebox';
import { isEmpty } from 'lodash';

/**
 * Plugin for the health check endpoint.
 *
 * @param fastify The Fastify instance.
 * @param _options Options passed to the plugin via `fastify.register(plugin,
 * options)`.
 * @param done The callback to signal that the plugin is ready.
 */
export const statusRoute: FastifyPluginCallbackTypebox = (
  fastify,
  _options,
  done
) => {
  fastify.get('/status/ping', async (req, _reply) => {
    const url = req.url || 'URL not found';
    const reqId = req.id || 'REQ_ID not found';
    const headers = isEmpty(req.headers) ? 'HEADERS not found' : req.headers;
    const ip =
      req.headers['x-forwarded-for'] ||
      req.headers['x-real-ip'] ||
      req.ip ||
      'IP not found';
    const params = isEmpty(req.params) ? 'PARAMS not found' : req.params;

    fastify.log
      .child({
        URL: url,
        REQ_ID: reqId,
        HEADERS: headers,
        IP: ip,
        PARAMS: params
      })
      .debug('returning a ping');
    return { msg: 'pong' };
  });

  done();
};
Repository: freeCodeCamp/freeCodeCamp
File: api/src/routes/public/status.ts (TypeScript)

Code before:
import { type FastifyPluginCallbackTypebox } from '@fastify/type-provider-typebox';

/**
 * Plugin for the health check endpoint.
 *
 * @param fastify The Fastify instance.
 * @param _options Options passed to the plugin via `fastify.register(plugin,
 * options)`.
 * @param done The callback to signal that the plugin is ready.
 */
export const statusRoute: FastifyPluginCallbackTypebox = (
  fastify,
  _options,
  done
) => {
  fastify.get('/status/ping', async (req, _reply) => {
    const url = req.url || 'URL not found';
    const reqId = req.id || 'REQ_ID not found';
    const headers = req.headers || 'HEADERS not found';
    const ip =
      req.headers['x-forwarded-for'] ||
      req.headers['x-real-ip'] ||
      req.ip ||
      'IP not found';
    const params = req.params || 'PARAMS not found';

    fastify.log
      .child({
        URL: url,
        REQ_ID: reqId,
        HEADERS: headers,
        IP: ip,
        PARAMS: params
      })
      .debug('returning a ping');
    return { msg: 'pong' };
  });

  done();
};


Review comment (suggestion):
```suggestion
    const params = isEmpty(req.params) ? 'PARAMS not found' : req.params;
```
Same argument as above.

Code after:
import { type FastifyPluginCallbackTypebox } from '@fastify/type-provider-typebox';
import { isEmpty } from 'lodash';

/**
 * Plugin for the health check endpoint.
 *
 * @param fastify The Fastify instance.
 * @param _options Options passed to the plugin via `fastify.register(plugin,
 * options)`.
 * @param done The callback to signal that the plugin is ready.
 */
export const statusRoute: FastifyPluginCallbackTypebox = (
  fastify,
  _options,
  done
) => {
  fastify.get('/status/ping', async (req, _reply) => {
    const url = req.url || 'URL not found';
    const reqId = req.id || 'REQ_ID not found';
    const headers = isEmpty(req.headers) ? 'HEADERS not found' : req.headers;
    const ip =
      req.headers['x-forwarded-for'] ||
      req.headers['x-real-ip'] ||
      req.ip ||
      'IP not found';
    const params = isEmpty(req.params) ? 'PARAMS not found' : req.params;

    fastify.log
      .child({
        URL: url,
        REQ_ID: reqId,
        HEADERS: headers,
        IP: ip,
        PARAMS: params
      })
      .debug('returning a ping');
    return { msg: 'pong' };
  });

  done();
};
Repository: freeCodeCamp/freeCodeCamp
File: api/src/server.ts (TypeScript)

Code before:
// We need to use the triple-slash directive to ensure that ts-node uses the
// reset.d.ts file. It's not possible to import the file directly because it
// is not included in the build (it's a dev dependency).
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path="./reset.d.ts" />
import { randomBytes } from 'crypto';
import { FastifyRequest } from 'fastify';
import { build } from './app';
import {
  FREECODECAMP_NODE_ENV,
  FCC_API_LOG_LEVEL,
  HOST,
  PORT
} from './utils/env';

const requestSerializer = (request: FastifyRequest) => ({
  method: request.method,
  url: request.url,
  ip: request.headers['x-forwarded-for']?.toString() || request.ip,
  hostname: request.hostname,
  remoteAddress: request.headers['x-forwarded-for']?.toString() || request.ip,
  remotePort: request.socket.remotePort
});

const envToLogger = {
  development: {
    transport: {
      target: 'pino-pretty',
      options: {
        singleLine: true,
        translateTime: 'HH:MM:ss Z',
        ignore: 'pid,hostname'
      }
    },
    level: FCC_API_LOG_LEVEL || 'info',
    serializers: {
      req: requestSerializer
    }
  },
  production: {
    level: FCC_API_LOG_LEVEL || 'info',
    serializers: {
      req: requestSerializer
    }

Review comment (suggestion):
```suggestion
  ip: request.headers['x-forwarded-for'] || request.ip,
```
It's `undefined` or a string, so if it's truthy we can use it as is. 

Code after:
// We need to use the triple-slash directive to ensure that ts-node uses the
// reset.d.ts file. It's not possible to import the file directly because it
// is not included in the build (it's a dev dependency).
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path="./reset.d.ts" />
import { randomBytes } from 'crypto';
import { FastifyRequest } from 'fastify';
import { build } from './app';
import {
  FREECODECAMP_NODE_ENV,
  FCC_API_LOG_LEVEL,
  HOST,
  PORT
} from './utils/env';

const requestSerializer = (request: FastifyRequest) => ({
  method: request.method,
  url: request.url,
  ip: request.headers['x-forwarded-for'] || request.ip,
  hostname: request.hostname,
  remoteAddress: Array.isArray(request.headers['x-forwarded-for'])
    ? request.headers['x-forwarded-for'][0]
    : request.headers['x-forwarded-for'] || request.ip,
  remotePort: request.socket.remotePort
});

const envToLogger = {
  development: {
    transport: {
      target: 'pino-pretty',
      options: {
        singleLine: true,
        translateTime: 'HH:MM:ss Z',
        ignore: 'pid,hostname'
      }
    },
    level: FCC_API_LOG_LEVEL || 'info',
    serializers: {
      req: requestSerializer
    }
  },
  production: {
    level: FCC_API_LOG_LEVEL || 'info',
    serializers: {