render()

in src/amo/pages/Addon/index.js [417:557]

• 108 lines of code
• 19 McCabe index (conditional complexity)

  render() {
    const {
      addon,
      addonsByAuthors,
      clientApp,
      currentVersion,
      errorHandler,
      i18n,
    } = this.props;

    const isThemeType = addon && addon.type === ADDON_TYPE_STATIC_THEME;
    let errorBanner = null;
    if (errorHandler.hasError()) {
      // Show a list of errors at the top of the add-on section.
      errorBanner = errorHandler.renderError();
    }

    const addonType = addon ? addon.type : ADDON_TYPE_EXTENSION;

    const showSummary = !addon || addon.summary?.length;
    const summary = (
      <p className="Addon-summary">{addon ? addon.summary : <LoadingText />}</p>
    );

    const addonPreviews = addon ? addon.previews : [];

    const numberOfAddonsByAuthors = addonsByAuthors
      ? addonsByAuthors.length
      : 0;

    return (
      <Page
        showVPNPromo={Boolean(addon && addon.type === ADDON_TYPE_EXTENSION)}
        errorHandler={errorHandler}
        isAddonInstallPage
        showWrongPlatformWarning={false}
        includeGoogleDisclaimerInFooter={
          clientApp === CLIENT_APP_FIREFOX && !!addon?.isAndroidCompatible
        }
      >
        <div
          className={makeClassName('Addon', `Addon-${addonType}`, {
            'Addon-theme': isThemeType,
            'Addon--has-more-than-0-addons': numberOfAddonsByAuthors > 0,
            'Addon--has-more-than-3-addons': numberOfAddonsByAuthors > 3,
          })}
          data-site-identifier={addon ? addon.id : null}
        >
          <AddonHead addon={addon} />

          {errorBanner}

          {this.renderCategorySuggestions(VARIANT_SHOW_TOP)}

          <div className="Addon-header-wrapper">
            <Card className="Addon-header-info-card" photonStyle>
              <AddonInstallError error={this.props.installError} />

              <AddonCompatibilityError addon={addon} />

              {addon &&
              (addon.status !== STATUS_PUBLIC || addon.is_disabled) ? (
                <Notice type="error" className="Addon-non-public-notice">
                  {i18n.gettext(
                    'This is not a public listing. You are only seeing it because of elevated permissions.',
                  )}
                </Notice>
              ) : null}

              <header className="Addon-header">
                {this.headerImage()}

                <AddonTitle addon={addon} />

                <AddonBadges addon={addon} />

                {addon && <InstallWarning addon={addon} />}

                <div className="Addon-summary-and-install-button-wrapper">
                  {showSummary ? summary : null}

                  <InstallButtonWrapper addon={addon} />
                </div>

                <h2 className="visually-hidden">
                  {i18n.gettext('Extension Metadata')}
                </h2>
              </header>
              {addon ? (
                <WrongPlatformWarning
                  addon={addon}
                  className="Addon-WrongPlatformWarning"
                />
              ) : null}
            </Card>

            <Card className="Addon-header-meta-and-ratings" photonStyle>
              <AddonMeta addon={addon} />
            </Card>
          </div>

          {this.renderCategorySuggestions(VARIANT_SHOW_MIDDLE)}

          <div className="Addon-details">
            <div className="Addon-main-content">
              {this.renderAddonsByAuthorsCard({ isForTheme: true })}

              {addonPreviews.length > 0 && !isThemeType ? (
                <Card
                  className="Addon-screenshots"
                  header={i18n.gettext('Screenshots')}
                >
                  <ScreenShots previews={addonPreviews} />
                </Card>
              ) : null}

              {this.renderShowMoreCard()}

              {this.renderRecommendations()}
            </div>

            {this.renderRatingsCard()}

            <ContributeCard addon={addon} />

            <PermissionsCard version={currentVersion} />

            <AddonMoreInfo addon={addon} />

            <AddAddonToCollection addon={addon} />

            {this.renderVersionReleaseNotes()}

            {this.renderAddonsByAuthorsCard({ isForTheme: false })}
          </div>
        </div>
      </Page>
    );
    // eslint-enable react/no-danger
  }
}