public render()

in fronts-client/src/components/card/Card.tsx [141:389]
244 lines of code
22 McCabe index (conditional complexity)

	public render() {
		const {
			uuid,
			isSelected,
			isSupporting = false,
			children,
			getNodeProps,
			onSelect,
			type,
			size = 'default',
			textSize,
			isUneditable,
			numSupportingArticles,
			clearCardSelection,
			parentId,
			showMeta,
			frontId,
			collectionId,
			canDragImage,
			canShowPageViewData = false,
			isLive,
			pillarId,
			collectionType,
			groupSizeId,
			updateCardMeta,
		} = this.props;

		const getSublinks = (
			<Sublinks
				numSupportingArticles={numSupportingArticles}
				toggleShowArticleSublinks={this.toggleShowArticleSublinks}
				showArticleSublinks={this.state.showCardSublinks}
				parentId={parentId}
			/>
		);

		const getCard = () => {
			switch (type) {
				case CardTypesMap.ARTICLE:
					return (
						<Article
							frontId={frontId}
							collectionId={collectionId}
							id={uuid}
							isUneditable={isUneditable}
							{...getNodeProps()}
							onDelete={this.onDelete}
							onAddToClipboard={this.handleAddToClipboard}
							onClick={isUneditable ? undefined : () => onSelect(uuid)}
							size={size}
							textSize={textSize}
							showMeta={showMeta}
							onImageDrop={this.handleImageDrop}
							canDragImage={canDragImage}
							canShowPageViewData={canShowPageViewData}
							imageCriteria={this.determineCardCriteria()}
							collectionType={collectionType}
							groupIndex={groupSizeId}
						>
							<EditModeVisibility visibleMode="fronts">
								{getSublinks}
								{/* If there are no supporting articles, the children still need to be rendered, because the dropzone is a child  */}
								{numSupportingArticles === 0
									? children
									: this.state.showCardSublinks && children}
							</EditModeVisibility>
						</Article>
					);
				case CardTypesMap.SNAP_LINK:
					return (
						<>
							<SnapLink
								frontId={frontId}
								collectionId={collectionId}
								id={uuid}
								isUneditable={isUneditable}
								{...getNodeProps()}
								onDelete={this.onDelete}
								onAddToClipboard={this.handleAddToClipboard}
								onClick={isUneditable ? undefined : () => onSelect(uuid)}
								size={size}
								textSize={textSize}
								showMeta={showMeta}
								canShowPageViewData={canShowPageViewData}
							/>
							{getSublinks}
							{numSupportingArticles === 0
								? children
								: this.state.showCardSublinks && children}
						</>
					);
				case CardTypesMap.RECIPE:
					return (
						<>
							<RecipeCard
								frontId={frontId}
								collectionId={collectionId}
								id={uuid}
								isUneditable={isUneditable}
								{...getNodeProps()}
								onDelete={this.onDelete}
								onAddToClipboard={this.handleAddToClipboard}
								/* No need for an OnClick here - there are no editable forms */
								size={size}
								textSize={textSize}
								showMeta={showMeta}
							/>
							{getSublinks}
						</>
					);
				case CardTypesMap.CHEF:
					return (
						<>
							<ChefCard
								frontId={frontId}
								collectionId={collectionId}
								id={uuid}
								isUneditable={isUneditable}
								{...getNodeProps()}
								onDelete={this.onDelete}
								onAddToClipboard={this.handleAddToClipboard}
								// Chef has overrides so we need to edit it
								onClick={isUneditable ? undefined : () => onSelect(uuid)}
								size={size}
								textSize={textSize}
								showMeta={showMeta}
							/>
						</>
					);
				case CardTypesMap.FEAST_COLLECTION:
					return (
						<>
							<FeastCollectionCard
								frontId={frontId}
								collectionId={collectionId}
								id={uuid}
								isUneditable={isUneditable}
								{...getNodeProps()}
								onDelete={this.onDelete}
								onAddToClipboard={this.handleAddToClipboard}
								onClick={isUneditable ? undefined : () => onSelect(uuid)}
								size={size}
								textSize={textSize}
								showMeta={showMeta}
							/>
							<Sublinks
								numSupportingArticles={numSupportingArticles}
								toggleShowArticleSublinks={this.toggleShowArticleSublinks}
								showArticleSublinks={this.state.showCardSublinks}
								parentId={parentId}
								sublinkLabel="recipe/chef"
							/>
							{/* If there are no supporting articles, the children still need to be rendered, because the dropzone is a child  */}
							{numSupportingArticles === 0
								? children
								: this.state.showCardSublinks && children}
						</>
					);
				default:
					return (
						<p>
							Item with id {uuid} has unknown card type {type}
						</p>
					);
			}
		};

		const getCardForm = () => {
			switch (type) {
				case CardTypesMap.CHEF:
					return (
						<ChefMetaForm
							cardId={uuid}
							key={uuid}
							form={uuid}
							onSave={(meta) => {
								updateCardMeta(uuid, meta);
								clearCardSelection(uuid);
							}}
							onCancel={() => clearCardSelection(uuid)}
							size={size}
						/>
					);
				case CardTypesMap.FEAST_COLLECTION:
					return (
						<FeastCollectionMetaForm
							cardId={uuid}
							key={uuid}
							form={uuid}
							onSave={(meta) => {
								updateCardMeta(uuid, meta);
								clearCardSelection(uuid);
							}}
							onCancel={() => clearCardSelection(uuid)}
							size={size}
						/>
					);
				default:
					return (
						<ArticleMetaForm
							cardId={uuid}
							isSupporting={isSupporting}
							key={uuid}
							form={uuid}
							frontId={frontId}
							onSave={(meta) => {
								updateCardMeta(uuid, meta);
								clearCardSelection(uuid);
							}}
							onCancel={() => clearCardSelection(uuid)}
							size={size}
							groupSizeId={groupSizeId}
						/>
					);
			}
		};

		const supportsForm = type !== 'recipe';
		const shouldDisplayForm = isSelected && supportsForm;

		return (
			<CardContainer
				id={createCardId(uuid)}
				size={size}
				isLive={isLive}
				pillarId={pillarId}
			>
				{shouldDisplayForm ? (
					<>
						{getCardForm()}
						{getSublinks}
						{numSupportingArticles === 0
							? children
							: this.state.showCardSublinks && children}
					</>
				) : (
					<DragIntentContainer
						filterRegisterEvent={(e) => !dragEventHasImageData(e)}
						onDragIntentStart={() => this.setIsDraggingCardOver(true)}
						onDragIntentEnd={() => this.setIsDraggingCardOver(false)}
					>
						<DropzoneStyling isDraggingCardOver={this.state.isDraggingCardOver}>
							{getCard()}
						</DropzoneStyling>
					</DragIntentContainer>
				)}
			</CardContainer>
		);
	}