Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Challenges/generic/show.tsx (TypeScript)

Code before:
  // video
  const [videoIsLoaded, setVideoIsLoaded] = useState(false);

  const handleVideoIsLoaded = () => {
    setVideoIsLoaded(true);
  };

  // assignments
  const [allAssignmentsCompleted, setAllAssignmentsCompleted] = useState(false);
  const [assignmentsCompleted, setAssignmentsCompleted] = useState(0);

  const handleAssignmentChange = (
    event: React.ChangeEvent<HTMLInputElement>,
    totalAssignments: number
  ) => {
    const newAssignmentsCompleted = event.target.checked
      ? assignmentsCompleted + 1
      : assignmentsCompleted - 1;

    setAssignmentsCompleted(newAssignmentsCompleted);
    setAllAssignmentsCompleted(totalAssignments === newAssignmentsCompleted);
  };

  // submit
  const handleSubmit = () => {
    if (assignments.length > 0 && allAssignmentsCompleted) {
      openCompletionModal();
    }
  };

  return (
    <Hotkeys
      executeChallenge={handleSubmit}
      containerRef={container}
      nextChallengePath={nextChallengePath}
      prevChallengePath={prevChallengePath}
    >
      <LearnLayout>
        <Helmet
          title={`${blockNameTitle} | ${t('learn.learn')} | freeCodeCamp.org`}
        />
        <Container>
          <Row>
            <Spacer size='medium' />
            <ChallengeTitle
              isCompleted={isChallengeCompleted}
              translationPending={translationPending}
            >
              {title}
            </ChallengeTitle>


Review comment (suggestion):
Are assignments optional? If so:
```suggestion
    if (assignments.length == 0 || allAssignmentsCompleted) {
```
otherwise it's impossible to open the completion modal when there are no assignments.

Code after:
  const allAssignmentsCompleted = assignmentsCompleted === assignments.length;

  const handleAssignmentChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    const isCompleted = event.target.checked; // extract value before target is nullified
    setAssignmentsCompleted(a => (isCompleted ? a + 1 : a - 1));
  };

  // submit
  const handleSubmit = () => {
    if (assignments.length == 0 || allAssignmentsCompleted) {
      openCompletionModal();
    }
  };

  return (
    <Hotkeys
      executeChallenge={handleSubmit}
      containerRef={container}
      nextChallengePath={nextChallengePath}
      prevChallengePath={prevChallengePath}
    >
      <LearnLayout>
        <Helmet
          title={`${blockNameTitle} | ${t('learn.learn')} | freeCodeCamp.org`}
        />
        <Container>
          <Row>
            <Spacer size='medium' />
            <ChallengeTitle
              isCompleted={isChallengeCompleted}
              translationPending={translationPending}
            >
              {title}
            </ChallengeTitle>

            <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
              {description && (
                <ChallengeDescription description={description} />
              )}
            </Col>

            <Col lg={10} lgOffset={1} md={10} mdOffset={1}>
              {videoId && (
                <VideoPlayer
                  bilibiliIds={bilibiliIds}
                  onVideoLoad={handleVideoIsLoaded}
                  title={title}
                  videoId={videoId}
                  videoIsLoaded={videoIsLoaded}