From d1686c4c8f7005786af1cc3c29333636405b5186 Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Wed, 18 Sep 2024 21:50:04 -0500
Subject: [PATCH] Add in handlers for TagInput value changes

Now brew metadata is actually updated and preserved across reloads to match updated tag values.  useEffect calls the props.onChange event from the parent component on every change to the valueContext state of this component (right now, after hitting Enter in a tag input).
---
 .../editor/metadataEditor/metadataEditor.jsx       |  5 ++---
 client/homebrew/editor/tagInput/tagInput.jsx       | 14 +++++++++++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index 97b4df2ea..7df2e44b6 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -347,7 +347,7 @@ const MetadataEditor = createClass({
 			<TagInput label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
 				placeholder='add tag' unique={true}
 				values={this.props.metadata.tags}
-				// onChange={(e)=>this.handleFieldChange('tags', e)}
+				onChange={(e)=>this.handleFieldChange('tags', e)}
 				/>
 
 			<div className='field systems'>
@@ -373,9 +373,8 @@ const MetadataEditor = createClass({
 				validators={[(v)=>!this.props.metadata.authors?.includes(v)]}
 				placeholder='invite author' unique={true}
 				values={this.props.metadata.invitedAuthors}
-				values={['cat', 'dog', 'fish']}
 				notes={['Invited author usernames are case sensitive.', 'After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.']}
-				// onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}
+				onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}
 				/>
 
 			<hr/>
diff --git a/client/homebrew/editor/tagInput/tagInput.jsx b/client/homebrew/editor/tagInput/tagInput.jsx
index cfcb2be42..22760896a 100644
--- a/client/homebrew/editor/tagInput/tagInput.jsx
+++ b/client/homebrew/editor/tagInput/tagInput.jsx
@@ -1,16 +1,28 @@
 const React = require('react');
-const { useState } = React;
+const { useState, useEffect } = React;
 
 const TagInput = ({ unique = true, values = [], ...props }) => {
 	const [temporaryValue, setTemporaryValue] = useState('');
 	const [valueContext, setValueContext] = useState(values.map((value) => ({ value, editing: false })));
 
+	useEffect(()=>{
+		handleChange(valueContext.map((context)=>context.value))
+	}, [valueContext])
+
+	const handleChange = (value)=>{
+		props.onChange({
+			target : { value }
+		})
+	};
+
 	const handleInputKeyDown = (evt, value) => {
 		if (evt.key === 'Enter') {
 			submitTag(evt.target.value, value);
 		}
 	};
 
+	
+
 	const submitTag = (newValue, originalValue) => {
 		setValueContext((prevContext) => {
 			return prevContext.map((context) => {