refactor into utils

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, '<br />' );
+		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(

src/utils.js

@@ -202,3 +202,50 @@ export const isValidJSON = ( json ) => {
 		return false;
 	}
 };
+
+export function formatPostContent( postContent = '' ) {
+	return postContent.replace( /\n/g, '<br />' );
+}
+
+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;
+	}
+}

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;