emit tag classname as lowercase on userpage

[ericscheid]

Tags can be entered when enditing a brew as <tag-type>:<tag-name>, where <tag-type> is a limited enumerated set of values. That tag data-entry UI also enforces lowercase for <tag-type>.

It is possible however to circumvent that UI (e.g. edit the google-doc source).

The <tag-type> is emitted on the userpage by setting the className of the tag display element: <span class="system">C&C</span>. This is so different tag-types can be styled differently (e.g. "system" tags in blue, untyped tags as yellow).

However, css classnames are case sensitive. We should enforce the schema design constraint not only in the data-entry UI, but also in the emitting of tags onto the userpage. (Postel's Law)

The relevant code to fix is on line 132 here:

homebrewery/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx

Lines 127 to 134 in be72b02

	{brew.tags?.length ? <>
	<div className='brewTags' title={`Tags:\n${brew.tags.join('\n')}`}>
	<i className='fas fa-tags'/>
	{brew.tags.map((tag, idx)=>{
	const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
	return <span key={idx} className={matches[1]}>{matches[2]}</span>;
	})}
	</div>

[ericscheid]

Philosophically, there should also be an intervention in some middleware to "correct" data errors on saving/loading. That's more complicated though.

[G-Ambatte]

return <span key={idx} className={matches[1]?.toLowerCase()} onClick={()=>{this.updateFilter('tag', tag);}}>{matches[2]}</span>;

[5e-Cleric]

Another point is that tags are not trimmed before being set, so a !== a

[ericscheid]

While stray spaces on tags do cause problems elswhere, they don't cause a problem with class names as class=" system" is == to class=" system" as far as html/css cares.

[5e-Cleric]

While stray spaces on tags do cause problems elswhere, they don't cause a problem with class names as class=" system" is == to class=" system" as far as html/css cares.

I know, just saying we should trim when inputing tags