From 4ed4c9e8a3bcee46a17fcd2de02ef7507600117f Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 27 Dec 2023 13:57:01 +0530 Subject: [PATCH 01/10] Basic Input Analysis Checks --- .../TextInput/TextInputSiteGen/index.js | 26 ++++++++++++++----- .../steps/SiteGen/SiteDetails/analyser.js | 4 +++ .../steps/SiteGen/SiteDetails/index.js | 7 ++--- 3 files changed, 27 insertions(+), 10 deletions(-) create mode 100644 src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js index c213f45ec..c3d58d03c 100644 --- a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js +++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js @@ -1,33 +1,45 @@ import classNames from 'classnames'; import { useRef, useEffect, useState, memo } from '@wordpress/element'; +import { calculateAnalysisScore } from '../../../steps/SiteGen/SiteDetails/analyser'; const TextInputSiteGen = ( { hint, height, placeholder, customerInput, + setIsValidInput, setCustomerInput, } ) => { const textareaRef = useRef( null ); + const [ analysisScore, setAnalysisScore ] = useState( 0 ); const [ inputText, setInputText ] = useState( 'nfd-sg-input-box__field' ); useEffect( () => { textareaRef.current.style.height = height; const scrollHeight = textareaRef.current.scrollHeight; textareaRef.current.style.height = scrollHeight + 'px'; + const analysisResult = calculateAnalysisScore( customerInput ); + setAnalysisScore( analysisResult ); + setIsValidInput( analysisResult >= 2 ); }, [ customerInput ] ); - const calculateDetail = ( num ) => { + const addInputScoreSyling = ( num ) => { const selectedButton = 'nfd-sg-input-box__info-icon--selected'; switch ( num ) { case 1: - if ( customerInput?.length > 30 ) return selectedButton; + if ( num <= analysisScore ) { + return selectedButton; + } break; case 2: - if ( customerInput?.length > 60 ) return selectedButton; + if ( num <= analysisScore ) { + return selectedButton; + } break; case 3: - if ( customerInput?.length > 100 ) return selectedButton; + if ( num <= analysisScore ) { + return selectedButton; + } } }; @@ -59,19 +71,19 @@ const TextInputSiteGen = ( {
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js new file mode 100644 index 000000000..9d0adb79b --- /dev/null +++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js @@ -0,0 +1,4 @@ +export const calculateAnalysisScore = ( input ) => { + // TODO Do Analysis + console.log( input ); +}; diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js index 6a0d1d46b..2d48a63b1 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js @@ -15,6 +15,7 @@ const SiteGenSiteDetails = () => { const content = getContents(); const isLargeViewport = useViewportMatch( 'small' ); const [ customerInput, setCustomerInput ] = useState(); + const [ isValidInput, setIsValidInput ] = useState( false ); const { currentData } = useSelect( ( select ) => { return { @@ -45,7 +46,7 @@ const SiteGenSiteDetails = () => { }, [] ); useEffect( () => { - setFooterNavEnabled( customerInput !== '' ); + setFooterNavEnabled( isValidInput ); currentData.sitegen.siteDetails.prompt = customerInput; setCurrentOnboardingData( currentData ); }, [ customerInput ] ); @@ -60,6 +61,7 @@ const SiteGenSiteDetails = () => { hint={ content.inputHint } height={ '40px' } customerInput={ customerInput } + setIsValidInput={ setIsValidInput } setCustomerInput={ setCustomerInput } /> { isLargeViewport && ( @@ -68,8 +70,7 @@ const SiteGenSiteDetails = () => { className={ 'nfd-sg-site-details--next-btn' } text={ content.buttonText } disabled={ - customerInput === undefined || - customerInput === '' + ! isValidInput } />
From fbc2c96e1c5338bf839afa424ff6b6b858b213b0 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 27 Dec 2023 14:16:01 +0530 Subject: [PATCH 02/10] Update analyser.js --- .../steps/SiteGen/SiteDetails/analyser.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js index 9d0adb79b..9d072a5d4 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js @@ -1,4 +1,18 @@ export const calculateAnalysisScore = ( input ) => { - // TODO Do Analysis - console.log( input ); + if ( ! input ) { + return 0; + } + + const characterCount = input.length; + const nouns = /\w*ment\b|\w*ness\b|\w*tion\b|\w*ity\b/gm; + const verbs = /\w*ing\b|\w*ed\b|\w*en\b|\w*ize\b|\w*fy\b/gm; + const adjectives = /\w*y\b|\w*ful\b|\w*ive\b|\w*able\b|\w*ible\b/gm; + const nounsRegex = new RegExp( nouns ); + const verbsRegex = new RegExp( verbs ); + const adjectivesRegex = new RegExp( adjectives ); + + console.log( 'Character Count', characterCount ); + console.log( 'Nouns', input.match( nounsRegex ) ); + console.log( 'Verbs', input.match( verbsRegex ) ); + console.log( 'Adjectives', input.match( adjectivesRegex ) ); }; From 00decb0f6493c3f7698858887dd605838777e1db Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 27 Dec 2023 17:47:32 +0530 Subject: [PATCH 03/10] Final Analyser Piece --- .../steps/SiteGen/SiteDetails/analyser.js | 44 +++++++++++++++---- 1 file changed, 36 insertions(+), 8 deletions(-) diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js index 9d072a5d4..74e49d2a3 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js @@ -1,18 +1,46 @@ +const scoreCalculator = ( count ) => { + switch ( count ) { + case 0: + return 0; + case 1: + return 1; + case 2: + return 2; + default: + return 3; + } +}; + export const calculateAnalysisScore = ( input ) => { - if ( ! input ) { + // If Input not present or less than 50 Characters + if ( ! input || input.length < 50 ) { return 0; } + /* Number of Characters in the input + * Count < 100 => 0 + * 100 < Count <= 150 => 1 + * 150 < Count <= 200 => 2 + * 200 < Count => 3 + */ const characterCount = input.length; + // eslint-disable-next-line no-nested-ternary + const characterScore = characterCount > 200 ? 3 : characterCount > 150 ? 2 : characterCount > 100 ? 1 : 0; + + // Nouns often end in suffixes like "-ment," "-ness," "-tion," "-ity," etc. const nouns = /\w*ment\b|\w*ness\b|\w*tion\b|\w*ity\b/gm; + const nounCount = input.match( new RegExp( nouns ) )?.length ?? 0; + const nounsScore = scoreCalculator( nounCount ); + + // Verbs often end in suffixes like "-ing," "-ed," "-en," "-ize," "-fy," etc. const verbs = /\w*ing\b|\w*ed\b|\w*en\b|\w*ize\b|\w*fy\b/gm; + const verbsCount = input.match( new RegExp( verbs ) )?.length ?? 0; + const verbsScore = scoreCalculator( verbsCount ); + + // Adjectives often end in suffixes like "-y," "-ful," "-ive," "-able," "-ible," etc. const adjectives = /\w*y\b|\w*ful\b|\w*ive\b|\w*able\b|\w*ible\b/gm; - const nounsRegex = new RegExp( nouns ); - const verbsRegex = new RegExp( verbs ); - const adjectivesRegex = new RegExp( adjectives ); + const adjectiveCount = input.match( new RegExp( adjectives ) )?.length ?? 0; + const adjectivesScore = scoreCalculator( adjectiveCount ); - console.log( 'Character Count', characterCount ); - console.log( 'Nouns', input.match( nounsRegex ) ); - console.log( 'Verbs', input.match( verbsRegex ) ); - console.log( 'Adjectives', input.match( adjectivesRegex ) ); + return Math.min( characterScore, nounsScore, verbsScore, adjectivesScore ); }; From a775299a37d495707a98f4bb0c2864d73e727f49 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 27 Dec 2023 17:49:27 +0530 Subject: [PATCH 04/10] Update analyser.js --- src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js index 74e49d2a3..37fe10d79 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js @@ -18,10 +18,10 @@ export const calculateAnalysisScore = ( input ) => { } /* Number of Characters in the input - * Count < 100 => 0 - * 100 < Count <= 150 => 1 - * 150 < Count <= 200 => 2 - * 200 < Count => 3 + * Count < 100 => 0 + * 100 < Count <= 150 => 1 + * 150 < Count <= 200 => 2 + * 200 < Count => 3 */ const characterCount = input.length; // eslint-disable-next-line no-nested-ternary From 342a693e03bd07474412f645a80df63b0e4e4b03 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 27 Dec 2023 17:51:03 +0530 Subject: [PATCH 05/10] Update analyser.js --- src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js index 37fe10d79..647e105a7 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js @@ -25,7 +25,14 @@ export const calculateAnalysisScore = ( input ) => { */ const characterCount = input.length; // eslint-disable-next-line no-nested-ternary - const characterScore = characterCount > 200 ? 3 : characterCount > 150 ? 2 : characterCount > 100 ? 1 : 0; + const characterScore = + characterCount > 200 + ? 3 + : characterCount > 150 + ? 2 + : characterCount > 100 + ? 1 + : 0; // Nouns often end in suffixes like "-ment," "-ness," "-tion," "-ity," etc. const nouns = /\w*ment\b|\w*ness\b|\w*tion\b|\w*ity\b/gm; From e2b2a675cd2c99527825964e296903cb2b7afafd Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 27 Dec 2023 17:55:15 +0530 Subject: [PATCH 06/10] Update analyser.js --- .../steps/SiteGen/SiteDetails/analyser.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js index 647e105a7..d4d6453a8 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js @@ -22,17 +22,17 @@ export const calculateAnalysisScore = ( input ) => { * 100 < Count <= 150 => 1 * 150 < Count <= 200 => 2 * 200 < Count => 3 - */ + */ const characterCount = input.length; // eslint-disable-next-line no-nested-ternary - const characterScore = - characterCount > 200 - ? 3 - : characterCount > 150 - ? 2 - : characterCount > 100 - ? 1 - : 0; + let characterScore = 0; + if ( characterCount > 200 ) { + characterScore = 3; + } else if ( characterCount > 150 ) { + characterScore = 2; + } else if ( characterCount > 100 ) { + characterScore = 1; + } // Nouns often end in suffixes like "-ment," "-ness," "-tion," "-ity," etc. const nouns = /\w*ment\b|\w*ness\b|\w*tion\b|\w*ity\b/gm; From 481b1cd095664438ef80d99c905118df11c4ab87 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 27 Dec 2023 17:55:24 +0530 Subject: [PATCH 07/10] Update analyser.js --- src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js index d4d6453a8..f68ca7aba 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js @@ -24,7 +24,6 @@ export const calculateAnalysisScore = ( input ) => { * 200 < Count => 3 */ const characterCount = input.length; - // eslint-disable-next-line no-nested-ternary let characterScore = 0; if ( characterCount > 200 ) { characterScore = 3; From 87130efa9d514fe14c2f514f6bb4142c5973c253 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 27 Dec 2023 17:58:02 +0530 Subject: [PATCH 08/10] Lintzy --- src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js index 2d48a63b1..d8dfa9cdd 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js @@ -69,9 +69,7 @@ const SiteGenSiteDetails = () => {
) } From 695f879ff7503c22ab9fe39f451e087934a41169 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Thu, 4 Jan 2024 10:59:06 +0530 Subject: [PATCH 09/10] Optimize Code --- .../TextInput/TextInputSiteGen/index.js | 72 ++++++++++--------- .../steps/SiteGen/SiteDetails/analyser.js | 52 -------------- 2 files changed, 38 insertions(+), 86 deletions(-) delete mode 100644 src/OnboardingSPA/steps/SiteGen/SiteDetails/analyser.js diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js index c3d58d03c..3ed0c66b5 100644 --- a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js +++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js @@ -1,6 +1,5 @@ import classNames from 'classnames'; import { useRef, useEffect, useState, memo } from '@wordpress/element'; -import { calculateAnalysisScore } from '../../../steps/SiteGen/SiteDetails/analyser'; const TextInputSiteGen = ( { hint, @@ -23,23 +22,30 @@ const TextInputSiteGen = ( { setIsValidInput( analysisResult >= 2 ); }, [ customerInput ] ); + const calculateAnalysisScore = ( input ) => { + /* Number of Characters in the input + * Count < 100 => 0 + * 100 < Count <= 150 => 1 + * 150 < Count <= 200 => 2 + * 200 < Count => 3 + */ + const characterCount = input?.length; + let characterScore = 0; + if ( characterCount > 200 ) { + characterScore = 3; + } else if ( characterCount > 150 ) { + characterScore = 2; + } else if ( characterCount > 100 ) { + characterScore = 1; + } + + return characterScore; + }; + const addInputScoreSyling = ( num ) => { const selectedButton = 'nfd-sg-input-box__info-icon--selected'; - switch ( num ) { - case 1: - if ( num <= analysisScore ) { - return selectedButton; - } - break; - case 2: - if ( num <= analysisScore ) { - return selectedButton; - } - break; - case 3: - if ( num <= analysisScore ) { - return selectedButton; - } + if ( num <= analysisScore ) { + return selectedButton; } }; @@ -49,6 +55,21 @@ const TextInputSiteGen = ( { setInputText( 'nfd-sg-input-box__field' ); }; + const renderDetails = ( ) => { + const buttons = []; + for ( let i = 1; i <= 3; i++ ) { + buttons.push( +
+ ); + } + return buttons; + }; + return (