public render()

in fronts-client/src/components/FrontsEdit/CollectionComponents/Collection.tsx [199:376]
174 lines of code
16 McCabe index (conditional complexity)

	public render() {
		const {
			id,
			frontId,
			children,
			alsoOn,
			groups,
			previousGroup: previousGroup,
			browsingStage,
			hasUnpublishedChanges,
			canPublish = true,
			displayEditWarning,
			isCollectionLocked,
			isOpen,
			onChangeOpenState,
			hasMultipleFrontsOpen,
			discardDraftChangesToCollection: discardDraftChanges,
			hasPrefill,
			isHidden,
			targetedRegions,
			hasContent,
			hasOpenForms,
			isFeast,
		} = this.props;

		const { isPreviouslyOpen, isLaunching } = this.state;

		const isUneditable = isCollectionLocked || browsingStage !== cardSets.draft;

		const groupIds = groups.map((group) => group.uuid);

		return (
			<>
				<CollectionDisplay
					frontId={frontId}
					id={id}
					browsingStage={browsingStage}
					isUneditable={isUneditable}
					isLocked={isCollectionLocked}
					isOpen={isOpen}
					hasMultipleFrontsOpen={hasMultipleFrontsOpen}
					onChangeOpenState={() => onChangeOpenState(id, isOpen)}
					headlineContent={
						hasUnpublishedChanges &&
						canPublish && (
							<Fragment>
								<EditModeVisibility visibleMode="editions">
									{!isFeast && (
										<HeadlineContentButton
											priority="default"
											onClick={() => this.props.setHidden(id, !isHidden)}
											title="Toggle the visibility of this container in this issue."
										>
											{isHidden ? 'Unhide' : 'Hide'}
										</HeadlineContentButton>
									)}
									{isFeast && (
										<>
											{targetedRegions?.length > 0 ? '🇺🇸 ' : ''}{' '}
											<MoveButtonsContainer>
												<ButtonCircularCaret
													small
													openDir="up"
													disabled={!this.props.canMoveUp}
													onClick={() =>
														this.props.moveFrontCollection(
															this.props.frontId,
															this.props.id,
															'up',
														)
													}
												/>
												<ButtonCircularCaret
													small
													disabled={!this.props.canMoveDown}
													onClick={() =>
														this.props.moveFrontCollection(
															this.props.frontId,
															this.props.id,
															'down',
														)
													}
												/>
											</MoveButtonsContainer>
										</>
									)}
									{hasPrefill && (
										<HeadlineContentButton
											data-testid="prefill-button"
											priority="default"
											onClick={() => this.props.fetchPrefill(id)}
											title="Get suggested articles for this collection"
										>
											Suggest
										</HeadlineContentButton>
									)}
								</EditModeVisibility>
								<ActionButtonsContainer
									onMouseEnter={this.showOpenFormsWarning}
									onMouseLeave={this.hideOpenFormsWarning}
								>
									{hasOpenForms && this.state.showOpenFormsWarning && (
										<OpenFormsWarningContainer>
											<OpenFormsWarning collectionId={id} frontId={frontId} />
										</OpenFormsWarningContainer>
									)}
									<EditModeVisibility visibleMode="fronts">
										<Button
											size="l"
											priority="default"
											onClick={() => discardDraftChanges(id)}
											tabIndex={-1}
											data-testid="collection-discard-button"
										>
											Discard
										</Button>
										<Button
											size="l"
											priority="primary"
											onClick={() => this.startPublish(id, frontId)}
											tabIndex={-1}
											disabled={isLaunching}
											data-testid="collection-launch-button"
										>
											{isLaunching ? (
												<LoadingImageBox>
													<img src={LoadingGif} />
												</LoadingImageBox>
											) : (
												'Launch'
											)}
										</Button>
									</EditModeVisibility>
								</ActionButtonsContainer>
							</Fragment>
						)
					}
					metaContent={
						alsoOn[id].fronts.length || displayEditWarning ? (
							<CollectionNotification
								displayEditWarning={displayEditWarning}
								alsoOn={alsoOn[id]}
							/>
						) : null
					}
				>
					{groups.map((group) =>
						children(group, isUneditable, groupIds, groups, true),
					)}
					{hasContent && (
						<EditModeVisibility visibleMode="fronts">
							<PreviouslyCollectionContainer data-testid="previously">
								<PreviouslyCollectionToggle
									onClick={this.togglePreviouslyOpen}
									data-testid="previously-toggle"
								>
									Recently removed from launched front
									<PreviouslyCircularCaret active={isPreviouslyOpen} />
								</PreviouslyCollectionToggle>
								{isPreviouslyOpen && (
									<>
										<PreviouslyCollectionInfo>
											This contains the 5 most recently deleted articles from
											the live front. If the deleted articles were never
											launched they will not appear here.
										</PreviouslyCollectionInfo>
										<PreviouslyGroupsWrapper>
											{children(previousGroup, true, groupIds, groups, false)}
										</PreviouslyGroupsWrapper>
									</>
								)}
							</PreviouslyCollectionContainer>
						</EditModeVisibility>
					)}
				</CollectionDisplay>
			</>
		);
	}