From 7696be5d95c576fd2e68f0c0d2817b916c4e2669 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Thu, 3 Nov 2022 22:00:45 -0500 Subject: [PATCH 01/63] first commit --- .../editor/metadataEditor/metadataEditor.jsx | 35 ++++++++++++++++--- 1 file changed, 30 insertions(+), 5 deletions(-) diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx index 25b4daac8..91da62aa0 100644 --- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx +++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx @@ -14,6 +14,17 @@ const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder']; const homebreweryThumbnail = require('../../thumbnail.png'); +const validators = { + thumbnail : [ + (value)=>{ + return value?.length > 5 ? 'Max URL length of 5 characters' : null; + }, + (value)=>{ + return (value ?? '')[0] !== 'W' ? 'URL must start with W' : null; + } + ] +}; + const MetadataEditor = createClass({ displayName : 'MetadataEditor', getDefaultProps : function() { @@ -35,7 +46,8 @@ const MetadataEditor = createClass({ getInitialState : function(){ return { - showThumbnail : true + showThumbnail : true, + validationError : null }; }, @@ -51,11 +63,23 @@ const MetadataEditor = createClass({ }, handleFieldChange : function(name, e){ - this.props.onChange({ - ...this.props.metadata, - [name] : e.target.value - }); + const inputRules = validators[name] ?? []; + const validationErr = inputRules.map((rule)=>rule(e.target.value)).filter(Boolean); + this.setState((prevState)=>({ + validationError : { + ...(prevState.validationError ?? {}), + [name] : validationErr.length > 0 ? validationErr : undefined + } + })); + if(Object.values(this.state.validationError ?? {}).filter(Boolean).length === 0){ + this.props.onChange({ + ...this.props.metadata, + [name] : e.target.value + }); + } + }, + handleSystem : function(system, e){ if(e.target.checked){ this.props.metadata.systems.push(system); @@ -64,6 +88,7 @@ const MetadataEditor = createClass({ } this.props.onChange(this.props.metadata); }, + handleRenderer : function(renderer, e){ if(e.target.checked){ this.props.metadata.renderer = renderer; From 589ec0251a1bd42af27276bf6dd4039dce434cba Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Fri, 4 Nov 2022 15:32:20 -0500 Subject: [PATCH 02/63] move validations into it's own file. --- .../editor/metadataEditor/metadataEditor.jsx | 27 +++++++------------ .../editor/metadataEditor/validations.js | 23 ++++++++++++++++ 2 files changed, 33 insertions(+), 17 deletions(-) create mode 100644 client/homebrew/editor/metadataEditor/validations.js diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx index 91da62aa0..0ae308fc8 100644 --- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx +++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx @@ -9,21 +9,13 @@ const Nav = require('naturalcrit/nav/nav.jsx'); const StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx'); const Themes = require('themes/themes.json'); +const validations = require('./validations.js') const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder']; const homebreweryThumbnail = require('../../thumbnail.png'); -const validators = { - thumbnail : [ - (value)=>{ - return value?.length > 5 ? 'Max URL length of 5 characters' : null; - }, - (value)=>{ - return (value ?? '')[0] !== 'W' ? 'URL must start with W' : null; - } - ] -}; + const MetadataEditor = createClass({ displayName : 'MetadataEditor', @@ -33,6 +25,7 @@ const MetadataEditor = createClass({ editId : null, title : '', description : '', + thumbnail : '', tags : [], published : false, authors : [], @@ -46,8 +39,8 @@ const MetadataEditor = createClass({ getInitialState : function(){ return { - showThumbnail : true, - validationError : null + showThumbnail : true, + errs : null }; }, @@ -63,20 +56,20 @@ const MetadataEditor = createClass({ }, handleFieldChange : function(name, e){ - const inputRules = validators[name] ?? []; + const inputRules = validations[name] ?? []; const validationErr = inputRules.map((rule)=>rule(e.target.value)).filter(Boolean); this.setState((prevState)=>({ - validationError : { - ...(prevState.validationError ?? {}), + errs : { + ...(prevState.errs ?? {}), [name] : validationErr.length > 0 ? validationErr : undefined } })); - if(Object.values(this.state.validationError ?? {}).filter(Boolean).length === 0){ + if(Object.values(this.state.errs ?? {}).filter(Boolean).length === 0){ this.props.onChange({ ...this.props.metadata, [name] : e.target.value }); - } + }; }, diff --git a/client/homebrew/editor/metadataEditor/validations.js b/client/homebrew/editor/metadataEditor/validations.js new file mode 100644 index 000000000..48d037b54 --- /dev/null +++ b/client/homebrew/editor/metadataEditor/validations.js @@ -0,0 +1,23 @@ +module.exports = { + title : [ + (value)=>{ + return value?.length > 10 ? 'Max URL length of 10 characters' : null; + } + ], + description : [ + (value)=>{ + return value?.length > 10 ? 'Max URL length of 10 characters' : null; + } + ], + thumbnail : [ + (value)=>{ + return value?.length > 5 ? 'Max URL length of 5 characters' : null; + }, + (value)=>{ + return (value ?? '')[0] !== 'W' ? 'URL must start with W' : null; + } + ] +}; + + + From 8c52a253dce34427152c3b6757126574093b38e9 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Fri, 4 Nov 2022 20:22:59 -0500 Subject: [PATCH 03/63] log errs correctly, setCustomValidity and reportValidity --- .../editor/metadataEditor/metadataEditor.jsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx index 0ae308fc8..76454e88b 100644 --- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx +++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx @@ -65,10 +65,17 @@ const MetadataEditor = createClass({ } })); if(Object.values(this.state.errs ?? {}).filter(Boolean).length === 0){ + e.target.setCustomValidity(''); this.props.onChange({ ...this.props.metadata, [name] : e.target.value }); + } else { + const errMessage = this.state.errs[name].map((err)=>{ + return `- ${err}`; + }).join('\n'); + e.target.setCustomValidity(errMessage); + e.target.reportValidity(); }; }, @@ -241,25 +248,30 @@ const MetadataEditor = createClass({ ; }, + // renderErrors : function(){ + // if(Object.values(this.state.errs ?? {}).filter(Boolean).length > 0) return; + // return + // }, + render : function(){ return
this.handleFieldChange('title', e)} />
-