Function Map

client/src/components/Map/index.tsx:88–143

({ forLanding = false }: MapProps)

// used on /learn and landing page
function Map({ forLanding = false }: MapProps) {
  const { t } = useTranslation();

  return (
    <div className='map-ui' data-test-label='curriculum-map'>
      {getStageOrder({
        showUpcomingChanges
      })
        // remove legacy superblocks from main maps - shown in archive map only
        .filter(
          stage =>
            stage !== SuperBlockStage.Legacy &&
            stage !== SuperBlockStage.Catalog
        )
        .map(stage => {
          const superblocks = superBlockStages[stage];
          if (superblocks.length === 0) {
            return null;
          }

          return (
            <Fragment key={stage}>
              {
                /* Show the daily coding challenge before the "English" curriculum */
                stage === SuperBlockStage.English && (
                  <>
                    <DailyCodingChallengeWidget forLanding={forLanding} />
                    <Spacer size='m' />
                  </>
                )
              }
              <h2 className={forLanding ? 'big-heading' : ''}>
                {t(superBlockHeadings[stage])}
              </h2>
              <ul key={stage}>
                {superblocks.map(superblock => (
                  <MapLi
                    key={superblock}
                    superBlock={superblock}
                    landing={forLanding}
                  />
                ))}
              </ul>
              <Spacer size='m' />
            </Fragment>
          );
        })}
      <Spacer size='m' />
      <p className='archive-link'>
        <Trans i18nKey='landing.archive-link'>
          <Link to={'/learn/archive'}>placeholder</Link>
        </Trans>
      </p>
    </div>
  );
}

Map.displayName = 'Map';