function CategoryCodeTable()

in newswires/client/src/WireDetail.tsx [71:149]
65 lines of code
6 McCabe index (conditional complexity)

function CategoryCodeTable({ categoryCodes }: { categoryCodes: string[] }) {
	const { handleEnterQuery, config } = useSearch();

	const isCodeInSearch = (code: string) => {
		const categoryCodesInSearch = config.query.categoryCode ?? [];
		return categoryCodesInSearch.includes(code);
	};

	const categoryCodeTableItems: CategoryCodeTableItem[] = categoryCodes.map(
		(code) => ({
			code: code,
			labels: lookupCatCodesWideSearch(code).join('; '),
			isSelected: isCodeInSearch(code),
		}),
	);

	const handleCategoryClick = (categoryCode: string) => {
		const codes = config.query.categoryCode ?? [];
		handleEnterQuery({
			...config.query,
			categoryCode: codes.includes(categoryCode)
				? codes.filter((s) => s !== categoryCode)
				: [...codes, categoryCode],
		});
	};

	const columns: Array<EuiBasicTableColumn<CategoryCodeTableItem>> = [
		{
			field: 'code',
			name: 'Category code',
		},
		{
			field: 'labels',
			name: 'Category label(s)*',
		},
		{
			field: 'isSelected',
			name: 'Filter by?',
			align: 'right',
			render: (isSelected, item) => (
				<EuiButtonIcon
					color={isSelected ? 'primary' : 'accent'}
					onClick={() => handleCategoryClick(item.code)}
					iconType={isSelected ? 'check' : 'plusInCircle'}
					aria-label="Toggle selection"
				/>
			),
		},
	];

	return (
		<Disclosure title={`Category Codes (${categoryCodeTableItems.length})`}>
			{categoryCodeTableItems.length === 0 ? (
				'No category code information available'
			) : (
				<figure>
					<EuiBasicTable
						items={categoryCodeTableItems}
						columns={columns}
						tableLayout="auto"
					/>
					<EuiSpacer size={'s'} />
					<figcaption>
						<EuiText size={'xs'}>
							<p>
								Category codes associated with this item. Many of these are
								agency-specific.
							</p>
							<p>
								* nb. Category labels are a best approximation, please let us
								know if you spot any that don&apos;t look right!
							</p>
						</EuiText>
					</figcaption>
				</figure>
			)}
		</Disclosure>
	);
}