From c458108b06a094d64736a1ca504542a3575882a1 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Fri, 28 Apr 2023 11:28:06 +0530 Subject: [PATCH] Linting Somethin --- .../SiteTypeSetup/PrimarySite/index.js | 98 +++++------- .../SiteTypeSetup/PrimarySite/stylesheet.scss | 9 +- .../SiteTypeSetup/SecondarySite/index.js | 141 +++++++++--------- .../SecondarySite/stylesheet.scss | 27 ++-- .../GetStarted/SiteTypeSetup/content.json | 8 - .../GetStarted/SiteTypeSetup/contents.js | 31 ++++ .../utils/api/site-classifications.js | 6 +- 7 files changed, 159 insertions(+), 161 deletions(-) delete mode 100644 src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/content.json create mode 100644 src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/contents.js diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js index d3c159939..703980463 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js @@ -1,18 +1,16 @@ -import { __, sprintf } from '@wordpress/i18n'; import CommonLayout from '../../../../../components/Layouts/Common'; import NewfoldLargeCard from '../../../../../components/NewfoldLargeCard'; import { SIDEBAR_LEARN_MORE, VIEW_NAV_GET_STARTED, } from '../../../../../../constants'; +import getContents from '../contents'; import { store as nfdOnboardingStore } from '../../../../../store'; import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useEffect } from '@wordpress/element'; import CardHeader from '../../../../../components/CardHeader'; import NavCardButton from '../../../../../components/Button/NavCardButton'; import NeedHelpTag from '../../../../../components/NeedHelpTag'; -import content from '../content.json'; -import { translations } from '../../../../../utils/locales/translations'; import Animate from '../../../../../components/Animate'; import { getSiteClassifications } from '../../../../../utils/api/site-classifications'; @@ -25,9 +23,9 @@ const StepPrimarySetup = () => { setCurrentOnboardingData, } = useDispatch( nfdOnboardingStore ); - const { currentStep, currentData } = useSelect( ( select ) => { + const contents = getContents(); + const { currentData } = useSelect( ( select ) => { return { - currentStep: select( nfdOnboardingStore ).getCurrentStep(), currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), }; @@ -41,24 +39,21 @@ const StepPrimarySetup = () => { getSiteClassificationsData(); }, [] ); - const [ siteClassData, setSiteClassData ] = useState( ); - const [ primaryCategory, changePrimaryCategory ] = useState( "" ); + const [ siteClassData, setSiteClassData ] = useState(); + const [ primaryCategory, changePrimaryCategory ] = useState( '' ); const [ inputFieldValue, setInputFieldValue ] = useState( '' ); - const selectedPrimaryCategoryInStore = currentData?.data?.siteType?.primary; - /** * Function which fetches the Site Classifications * - * @param input */ - const getSiteClassificationsData = async ( ) => { + const getSiteClassificationsData = async () => { const siteClassificationsData = await getSiteClassifications(); - setSiteClassData(siteClassificationsData?.body); - changePrimaryCategory( currentData?.data?.siteType?.primary ?? "" ); + setSiteClassData( siteClassificationsData?.body ); + changePrimaryCategory( currentData?.data?.siteType?.primary ?? '' ); - if(currentData?.data?.siteType?.label === 'custom'){ - changePrimaryCategory(""); + if ( currentData?.data?.siteType?.label === 'custom' ) { + changePrimaryCategory( '' ); setInputFieldValue( currentData?.data?.siteType?.primary ); } }; @@ -66,13 +61,13 @@ const StepPrimarySetup = () => { /** * Function which saves data in redux when category name is selected via chips * - * @param input + * @param {string} primType */ const handleCategoryClick = ( primType ) => { changePrimaryCategory( primType ); setInputFieldValue( '' ); const currentDataCopy = currentData; - currentDataCopy.data.siteType.label = ""; + currentDataCopy.data.siteType.label = ''; currentDataCopy.data.siteType.primary = primType; setCurrentOnboardingData( currentDataCopy ); }; @@ -80,80 +75,69 @@ const StepPrimarySetup = () => { /** * Function which saves data in redux when category name is put-in via input box * - * @param input + * @param {string} input */ const categoryInput = ( input ) => { - changePrimaryCategory( "" ); + changePrimaryCategory( '' ); setInputFieldValue( input?.target?.value ); const currentDataCopy = currentData; - currentDataCopy.data.siteType.label = "custom"; + currentDataCopy.data.siteType.label = 'custom'; currentDataCopy.data.siteType.primary = input?.target?.value; setCurrentOnboardingData( currentDataCopy ); }; const primarySiteTypeChips = () => { - let primaryChipList = []; - - let types = siteClassData?.types; - for ( let typeKey in types ) { + const primaryChipList = []; + + const types = siteClassData?.types; + for ( const typeKey in types ) { primaryChipList.push( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions
- handleCategoryClick( types[typeKey].slug ) + onClick={ () => + handleCategoryClick( types[ typeKey ].slug ) } + onKeyDown={ () => {} } >
- { types[typeKey]?.label } + { types[ typeKey ]?.label }
- ) + ); } return primaryChipList; - } + }; return (
- +
{ siteClassData && primarySiteTypeChips() }
@@ -164,21 +148,17 @@ const StepPrimarySetup = () => { type="search" onChange={ ( e ) => categoryInput( e ) } className="tellus-input" - placeholder={ sprintf( - __( - content.placeholderSiteTypeInput, - 'wp-module-onboarding' - ), - translations( 'site' ) - ) } + placeholder={ + contents.placeholderSiteTypeInput + } value={ inputFieldValue } /> diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss index b3753cc67..f43a80306 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss @@ -1,4 +1,5 @@ .nfd-setup-primary { + &-categories { margin-top: 3rem; margin-bottom: 1rem; @@ -51,7 +52,7 @@ background-size: 24px 24px; background-repeat: no-repeat; background-position: center; - + &-selected { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(162deg) brightness(103%) contrast(101%); } @@ -71,7 +72,7 @@ } .tellus { - + &-text { color: var(--nfd-onboarding-black); font-size: 1rem; @@ -87,11 +88,11 @@ font-weight: 300; margin: 0 1rem 1.5rem 1rem; padding: 8px 16px !important; - + &::placeholder { font-size: 15px; } - + @media (max-width: #{($break-medium - 1)}) { width: 40vw; } diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js index f64690dd4..6581437d3 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js @@ -1,18 +1,16 @@ -import { __, sprintf } from '@wordpress/i18n'; import CommonLayout from '../../../../../components/Layouts/Common'; import NewfoldLargeCard from '../../../../../components/NewfoldLargeCard'; import { SIDEBAR_LEARN_MORE, VIEW_NAV_GET_STARTED, } from '../../../../../../constants'; +import getContents from '../contents'; import { store as nfdOnboardingStore } from '../../../../../store'; import { useDispatch, useSelect } from '@wordpress/data'; import { useEffect, useState } from '@wordpress/element'; import CardHeader from '../../../../../components/CardHeader'; import NavCardButton from '../../../../../components/Button/NavCardButton'; import NeedHelpTag from '../../../../../components/NeedHelpTag'; -import content from '../content.json'; -import { translations } from '../../../../../utils/locales/translations'; import Animate from '../../../../../components/Animate'; import { getSiteClassifications } from '../../../../../utils/api/site-classifications'; @@ -33,15 +31,15 @@ const StepPrimarySetup = () => { getSiteClassificationsData(); }, [] ); - const defaultPrimaryType = "business"; - const [ siteClassData, setSiteClassData ] = useState( ); + const contents = getContents(); + const defaultPrimaryType = 'business'; + const [ siteClassData, setSiteClassData ] = useState(); const [ primaryType, changePrimaryType ] = useState( defaultPrimaryType ); - const [ secondaryType, changeSecondaryType ] = useState( "" ); + const [ secondaryType, changeSecondaryType ] = useState( '' ); const [ inputCategVal, changeInputCateg ] = useState( '' ); - const { currentStep, currentData } = useSelect( ( select ) => { + const { currentData } = useSelect( ( select ) => { return { - currentStep: select( nfdOnboardingStore ).getCurrentStep(), currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), }; @@ -50,19 +48,18 @@ const StepPrimarySetup = () => { /** * Function which fetches the Site Classifications * - * @param input */ - const getSiteClassificationsData = async ( ) => { + const getSiteClassificationsData = async () => { const siteClassificationsData = await getSiteClassifications(); - setSiteClassData(siteClassificationsData?.body); + setSiteClassData( siteClassificationsData?.body ); - if( currentData?.data?.siteType?.primary !== "") + if ( currentData?.data?.siteType?.primary !== '' ) changePrimaryType( currentData?.data?.siteType?.primary ); - changeSecondaryType( currentData?.data?.siteType?.secondary ?? "" ); + changeSecondaryType( currentData?.data?.siteType?.secondary ?? '' ); - if(currentData?.data?.siteType?.label === 'custom'){ - changePrimaryType(defaultPrimaryType); - changeSecondaryType(""); + if ( currentData?.data?.siteType?.label === 'custom' ) { + changePrimaryType( defaultPrimaryType ); + changeSecondaryType( '' ); changeInputCateg( currentData?.data?.siteType?.secondary ); } }; @@ -70,13 +67,13 @@ const StepPrimarySetup = () => { /** * Function which saves data in redux when category name is put-in via input box * - * @param input + * @param {string} input */ const categoryInput = ( input ) => { - changeSecondaryType( "" ); + changeSecondaryType( '' ); changeInputCateg( input?.target?.value ); const currentDataCopy = currentData; - currentDataCopy.data.siteType.label = "custom"; + currentDataCopy.data.siteType.label = 'custom'; currentDataCopy.data.siteType.secondary = input?.target?.value; setCurrentOnboardingData( currentDataCopy ); }; @@ -84,95 +81,100 @@ const StepPrimarySetup = () => { /** * Function which saves data in redux when category name is chosen via categories displayed * - * @param idxOfElm + * @param {string} secType */ const handleCategoryClick = ( secType ) => { changeSecondaryType( secType ); changeInputCateg( '' ); const currentDataCopy = currentData; - currentDataCopy.data.siteType.label = ""; + currentDataCopy.data.siteType.label = ''; currentDataCopy.data.siteType.primary = primaryType; currentDataCopy.data.siteType.secondary = secType; setCurrentOnboardingData( currentDataCopy ); }; const secondarySiteTypeChips = () => { - let secondaryChipList = []; - - let types = siteClassData?.types[primaryType]?.secondaryTypes; - for ( let typeKey in types ) { + const secondaryChipList = []; + + const types = siteClassData?.types[ primaryType ]?.secondaryTypes; + for ( const typeKey in types ) { secondaryChipList.push( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions
- handleCategoryClick( types[typeKey].slug ) + onClick={ () => + handleCategoryClick( types[ typeKey ].slug ) } + onKeyDown={ () => {} } > - { types[typeKey]?.label } + { types[ typeKey ]?.label }
- ) + ); } return secondaryChipList; - } - + }; return (
- +
- { - siteClassData &&
+ { siteClassData && ( +
- {}} - style={{ backgroundImage: "var(--chevron-left-icon)" }} /> + {} } + style={ { + backgroundImage: + 'var(--chevron-left-icon)', + } } + />
-

{siteClassData?.types[ primaryType ]?.label}

+

+ { ' ' } + { + siteClassData?.types[ + primaryType + ]?.label + } +

- {}} - style={{ backgroundImage: "var(--chevron-right-icon)" }} /> + {} } + style={ { + backgroundImage: + 'var(--chevron-right-icon)', + } } + />
- } + ) }
@@ -183,29 +185,22 @@ const StepPrimarySetup = () => {
- { __( - content.tellusHereText, - 'wp-module-onboarding' - ) } + { contents.tellusHereText }
categoryInput( e ) } className="tellus-input" - placeholder={ sprintf( - __( - content.placeholderSiteTypeInput, - 'wp-module-onboarding' - ), - translations( 'site' ) - ) } + placeholder={ + contents.placeholderSiteTypeInput + } value={ inputCategVal } />
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss index ee59e304d..3abbc6f75 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss @@ -1,13 +1,14 @@ .nfd-setup-secondary { + &-categories { - width: 40vw; - margin-top: 2.5rem; - text-align: center; - margin-bottom: 1rem; + width: 40vw; + margin-top: 2.5rem; + text-align: center; + margin-bottom: 1rem; - button { - display: inline-block; - } + button { + display: inline-block; + } } &-second { @@ -93,18 +94,18 @@ background-size: 28px 28px; background-repeat: no-repeat; background-position: center; - - @media (max-width:500px) { - display: none; + + @media (max-width: 500px) { + display: none; } } &-text { display: inline-block; - color: black; + color: var(--nfd-onboarding-dark); font-size: 0.85rem; font-weight: 400; - margin: 0 ; + margin: 0; text-transform: uppercase; } } @@ -121,4 +122,4 @@ background-repeat: no-repeat; } } -} \ No newline at end of file +} diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/content.json b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/content.json deleted file mode 100644 index 45ead103d..000000000 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/content.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "cardHeading": "Help us tailor this setup to your site", - "subHeading": "ABOUT YOUR %s", - "question": "What type of %s is it?", - "buttonText": "Continue Setup", - "placeholderSiteTypeInput": "Enter to search your %s type", - "tellusHereText": "or tell us here:" -} diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/contents.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/contents.js new file mode 100644 index 000000000..343c43159 --- /dev/null +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/contents.js @@ -0,0 +1,31 @@ +import { __, sprintf } from '@wordpress/i18n'; + +import { translations } from '../../../../utils/locales/translations'; + +const getContents = () => { + return { + cardHeading: __( + 'Help us tailor this setup to your site', + 'wp-module-onboarding' + ), + subHeading: sprintf( + /* translators: 1: site */ + __( 'ABOUT YOUR %s', 'wp-module-onboarding' ), + translations( 'SITE' ) + ), + question: sprintf( + /* translators: 1: site */ + __( 'What type of %s is it?', 'wp-module-onboarding' ), + translations( 'site' ) + ), + buttonText: __( 'Continue Setup', 'wp-module-onboarding' ), + placeholderSiteTypeInput: sprintf( + /* translators: 1: site */ + __( 'Enter to search your %s type', 'wp-module-onboarding' ), + translations( 'site' ) + ), + tellusHereText: __( 'or tell us here:', 'wp-module-onboarding' ), + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/utils/api/site-classifications.js b/src/OnboardingSPA/utils/api/site-classifications.js index 09ad173d9..335fb9520 100644 --- a/src/OnboardingSPA/utils/api/site-classifications.js +++ b/src/OnboardingSPA/utils/api/site-classifications.js @@ -3,12 +3,10 @@ import { onboardingRestURL } from './common'; import apiFetch from '@wordpress/api-fetch'; -export async function getSiteClassifications( ) { +export async function getSiteClassifications() { return await resolve( apiFetch( { - url: onboardingRestURL( - `site-classification` - ), + url: onboardingRestURL( `site-classification` ), } ).then() ); }