From d505e4e24c228d94467f5c99d1af90c973670343 Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Tue, 17 Sep 2024 23:16:06 -0500
Subject: [PATCH] Render element for each value from props

Take an array of values from props, load it into valueContext state with an "editing" boolean for each value.  Then, when rendering the component, take each value in the valueContext array and create a div for each --

at this point, if the value is "being edited", it returns a div with text "editing".  If not being edited, it returns a div with the value as text.

Nothing is being edited at this point since that functionality doesn't exist yet.
---
 .../editor/metadataEditor/metadataEditor.jsx  |  7 +++--
 client/homebrew/editor/tagInput/tagInput.jsx  | 28 +++++++++++++------
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index 6ee607eab..97b4df2ea 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -347,7 +347,8 @@ 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'>
 				<label>systems</label>
@@ -372,8 +373,10 @@ 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 289432175..9391b9c16 100644
--- a/client/homebrew/editor/tagInput/tagInput.jsx
+++ b/client/homebrew/editor/tagInput/tagInput.jsx
@@ -1,19 +1,29 @@
 const React = require('react');
-const { useState, useRef, useEffect } = React;
+const { useState } = React;
 const _     = require('lodash');
 
-const TagInput = ({unique, ...props})=>{
+const TagInput = ({unique = true, values = [], ...props})=>{
 
 	const [temporaryValue, setTemporaryValue] = useState('');
+	const [valueContext, setValueContext] = useState(values.map((value)=>({ value: value, editing : false })));
+
+	const tagElement = (value)=>{
+		return (
+			<div className={`badge`}>{value}</div>
+		)
+	}
 
 	return (
-		<div className='field tag-input'>
-			<label>{props.label}
-				<input type='text'
-					className={`value`}
-					placeholder={props.placeholder}
-					value={temporaryValue} />
-			</label>
+		<div className='field'>
+
+			<label>{props.label}</label>
+			{Object.values(valueContext).map((context, i)=>{ return context.editing ? tagElement('editing') : tagElement(context.value) })}
+
+			<input type='text'
+				className={`value`}
+				placeholder={props.placeholder}
+				value={temporaryValue}
+				onChange={(e)=>setTemporaryValue(e.target.value)} />
 		</div>
 	)
 }