diff --git a/src/components/HelpCenter.js b/src/components/HelpCenter.js index 904f147..67b83b2 100644 --- a/src/components/HelpCenter.js +++ b/src/components/HelpCenter.js @@ -7,6 +7,10 @@ import { LocalStorageUtils, Analytics, MultiSearchAPI, + formatPostContent, + getResultMatches, + scrollToBottom, + adjustPadding, } from '../utils'; import HelpCenterIntro from './HelpCenterIntro'; import SearchInput from './SearchInput'; @@ -74,18 +78,19 @@ const HelpCenter = ( props ) => { useEffect( () => { if ( initComplete ) { - adjustPadding(); - scroll(); + adjustPadding( wrapper, suggestionsRef, showSuggestions ); + scrollToBottom( wrapper, introRef, resultsContainer ); } }, [ initComplete ] ); useEffect( () => { - adjustPadding(); + adjustPadding( wrapper, suggestionsRef, showSuggestions ); }, [ showSuggestions ] ); const populateSearchResult = ( postContent, postId, postTitle ) => { - const resultContentFormatted = - postContent && postContent.replace( /\n/g, '
' ); + const resultContentFormatted = postContent + ? formatPostContent( postContent ) + : ''; // Retrieve existing results from local storage and using the updated persistResult method to store the result LocalStorageUtils.persistResult( resultContentFormatted, @@ -224,43 +229,6 @@ const HelpCenter = ( props ) => { } }; - const adjustPadding = () => { - let paddingBottom = 0; - if ( showSuggestions && suggestionsRef.current ) { - const suggestionsHeight = - suggestionsRef.current.getBoundingClientRect().height; - paddingBottom = `${ suggestionsHeight }px`; - } - if ( wrapper && wrapper.current ) { - wrapper.current.style.paddingBottom = paddingBottom; - } - }; - - const scroll = () => { - const scrollDistance = wrapper.current.scrollHeight; - wrapper.current.scrollBy( { - top: scrollDistance, - left: 0, - behavior: 'auto', - } ); - - setTimeout( () => { - introRef.current.style.visibility = 'visible'; - resultsContainer.current.style.visibility = 'visible'; - }, 100 ); - }; - - const getResultMatches = ( query, tokensMatched, fieldsMatched ) => { - const clearedQuery = query - .replace( /[^\w\s]|_/g, '' ) - .replace( /\s{2,}/g, ' ' ) - .trim(); - - const tokensPerQuery = - tokensMatched / clearedQuery.split( /\s+/ ).length; - return fieldsMatched >= 1 && tokensPerQuery >= 0.99; - }; - const checkAndPopulateResult = ( hits ) => { if ( hits?.length > 0 ) { const resultMatches = getResultMatches( diff --git a/src/utils.js b/src/utils.js index 1e43ef3..9531730 100644 --- a/src/utils.js +++ b/src/utils.js @@ -202,3 +202,50 @@ export const isValidJSON = ( json ) => { return false; } }; + +export function formatPostContent( postContent = '' ) { + return postContent.replace( /\n/g, '
' ); +} + +export function getResultMatches( query, tokensMatched, fieldsMatched ) { + const clearedQuery = query + .replace( /[^\w\s]|_/g, '' ) + .replace( /\s{2,}/g, ' ' ) + .trim(); + + const tokensPerQuery = tokensMatched / clearedQuery.split( /\s+/ ).length; + return fieldsMatched >= 1 && tokensPerQuery >= 0.99; +} + +export function scrollToBottom( wrapperRef, introRef, resultsContainerRef ) { + if ( ! wrapperRef?.current ) return; + const scrollDistance = wrapperRef.current.scrollHeight; + + wrapperRef.current.scrollBy( { + top: scrollDistance, + left: 0, + behavior: 'auto', + } ); + + setTimeout( () => { + if ( introRef?.current ) { + introRef.current.style.visibility = 'visible'; + } + if ( resultsContainerRef?.current ) { + resultsContainerRef.current.style.visibility = 'visible'; + } + }, 100 ); +} + +export function adjustPadding( wrapperRef, suggestionsRef, showSuggestions ) { + let paddingBottom = 0; + if ( showSuggestions && suggestionsRef?.current ) { + const suggestionsHeight = + suggestionsRef.current.getBoundingClientRect().height; + paddingBottom = `${ suggestionsHeight }px`; + } + + if ( wrapperRef?.current ) { + wrapperRef.current.style.paddingBottom = paddingBottom; + } +} diff --git a/styles.scss b/styles.scss index 02a777c..7b82461 100644 --- a/styles.scss +++ b/styles.scss @@ -419,7 +419,7 @@ body:is(.page, .post-php, .post-new-php) { .nfd-hc-modal__footer{ position: absolute; z-index: 10; - bottom: 0px; + bottom: 15px; .helpcenter-supportinfo__wrapper { padding: 8px 12px 8px 12px;