public render()

in fronts-client/src/components/FrontsEdit/FrontContent.tsx [434:492]


	public render() {
		const { front, collectionsError } = this.props;

		// TODO remove the false bit when we're happy to actually lock users editing
		const isEditingLocked =
			false && (this.state.isCollectionsStale || !!collectionsError);

		return (
			<FrontCollectionsContainer
				onScroll={this.handleScroll}
				ref={(ref: HTMLDivElement | null) =>
					(this.collectionContainerElement = ref)
				}
			>
				<WithDimensions>
					{({ width }) => (
						<DragAndDropRoot id={this.props.id} data-testid={this.props.id}>
							{front.collections.map((collectionId) => (
								<CollectionContainer
									key={collectionId}
									ref={(ref: HTMLDivElement | null) =>
										(this.collectionElements[collectionId] = ref)
									}
								>
									{isEditingLocked && (
										<EditingLockedCollectionsOverlay>
											<h2>Editing Locked</h2>
											<span>
												We couldn't refresh this collection. It may be out of
												date. Please wait or reload.
											</span>
										</EditingLockedCollectionsOverlay>
									)}
									<Collection
										id={collectionId}
										frontId={this.props.id}
										priority={front.priority}
										browsingStage={this.props.browsingStage}
										alsoOn={this.props.alsoOn}
										handleInsert={this.handleInsert}
										handleMove={this.handleMove}
										size={
											width && width > 750
												? 'wide'
												: width && width > 500
													? 'default'
													: 'medium'
										}
										selectCard={this.onSelectCard}
										handleArticleFocus={this.props.handleArticleFocus}
									/>
								</CollectionContainer>
							))}
						</DragAndDropRoot>
					)}
				</WithDimensions>
			</FrontCollectionsContainer>
		);
	}