public render()

in fronts-client/src/components/FrontsEdit/FrontSection/FrontSection.tsx [174:297]
121 lines of code
11 McCabe index (conditional complexity)

	public render() {
		const { frontId, isOverviewOpen, isEditions, shouldUseCODELinks } =
			this.props;
		const title = this.getTitle();

		const { frontNameValue, editingFrontName } = this.state;
		const isSpecial = this.props.selectedFront
			? this.props.selectedFront.isSpecial
			: false;

		const isHidden = this.props.selectedFront
			? this.props.selectedFront.isHidden
			: false;

		return (
			<SingleFrontContainer
				key={frontId}
				id={createFrontId(frontId)}
				isOverviewOpen={isOverviewOpen}
			>
				<FrontContainer>
					<FrontHeader greyHeader={true} className="front-header">
						{editingFrontName ? (
							<FrontsHeaderInput
								data-testid="rename-front-input"
								value={frontNameValue}
								autoFocus
								onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
									this.setState({ frontNameValue: e.target.value })
								}
								onKeyDown={(e: React.KeyboardEvent) => {
									if (e.key === 'Enter') {
										this.setName();
									}
								}}
								onBlur={this.setName}
							/>
						) : (
							<FrontsHeaderText title={title} data-testid="front-name">
								{title}
							</FrontsHeaderText>
						)}
						<FrontHeaderMeta>
							<EditModeVisibility visibleMode="fronts">
								<LinkButtons>
									<Link
										href={`${
											shouldUseCODELinks
												? urls.previewUrlCODE
												: urls.previewUrlPROD
										}${this.props.frontId}`}
										target="preview"
									>
										<FrontHeaderButton>
											<PreviewEyeIcon size="xl" />
											<LinkButtonText className="visible-based-on-front-header-width">
												Preview
											</LinkButtonText>
										</FrontHeaderButton>
									</Link>
									<Link
										href={`${
											shouldUseCODELinks ? urls.liveUrlCODE : urls.liveUrlPROD
										}${this.props.frontId}`}
										target="live"
									>
										<FrontHeaderButton priority="transparent">
											<GuardianRoundel size="xl" />
											<LinkButtonText className="visible-based-on-front-header-width">
												See live
											</LinkButtonText>
										</FrontHeaderButton>
									</Link>
								</LinkButtons>
								<StageSelectButtons>
									<RadioGroup>
										{Object.keys(frontStages).map((key) => (
											<RadioButton
												inline
												key={key}
												name={`${this.props.frontId} - frontStages`}
												checked={frontStages[key] === this.state.collectionSet}
												onChange={() => this.handleCollectionSetSelect(key)}
												label={toTitleCase(frontStages[key])}
											/>
										))}
									</RadioGroup>
								</StageSelectButtons>
							</EditModeVisibility>
							{isSpecial && (
								<>
									<FrontHeaderButton
										data-testid="toggle-hidden-front-button"
										onClick={() => this.setFrontHiddenState(!isHidden)}
									>
										{isHidden ? 'Unhide' : 'Hide'}
									</FrontHeaderButton>
								</>
							)}
							{isEditions && (
								<FrontHeaderButton
									data-testid="rename-front-button"
									onClick={this.renameFront}
								>
									Rename
								</FrontHeaderButton>
							)}
							<FrontHeaderButton onClick={this.handleRemoveFront}>
								<ClearIcon size="xl" />
							</FrontHeaderButton>
						</FrontHeaderMeta>
					</FrontHeader>
					<FrontSectionContent direction="column">
						{this.props.selectedFront && (
							<FrontsContainer
								id={this.props.frontId}
								browsingStage={this.state.collectionSet}
							/>
						)}
					</FrontSectionContent>
				</FrontContainer>
			</SingleFrontContainer>
		);
	}