diff --git a/packages/help-center/src/components/help-center-article-fetching-content.tsx b/packages/help-center/src/components/help-center-article-fetching-content.tsx index e1e68afe542246..d749e94273c976 100644 --- a/packages/help-center/src/components/help-center-article-fetching-content.tsx +++ b/packages/help-center/src/components/help-center-article-fetching-content.tsx @@ -2,12 +2,9 @@ import { useLocale } from '@automattic/i18n-utils'; import { useEffect } from 'react'; import { SUPPORT_BLOG_ID } from 'calypso/blocks/inline-help/constants'; -import QueryReaderPost from 'calypso/components/data/query-reader-post'; -import QueryReaderSite from 'calypso/components/data/query-reader-site'; import useSupportArticleAlternatesQuery from 'calypso/data/support-article-alternates/use-support-article-alternates-query'; import { usePostByKey } from '../hooks/use-post-by-key'; import ArticleContent from './help-center-article-content'; -// import './style.scss'; import './help-center-article-content.scss'; const getPostKey = ( blogId: number, postId: number ) => ( { blogId, postId } ); @@ -36,17 +33,10 @@ const ArticleFetchingContent = ( { postId, blogId, articleUrl }: ArticleFetching const postKey = useSupportArticleAlternatePostKey( +( blogId ?? SUPPORT_BLOG_ID ), postId ); const post = usePostByKey( postKey ).data; const isLoading = ! post?.content || ! postKey; - const siteId = post?.site_ID; - const shouldQueryReaderPost = ! post && postKey; useEffect( () => { //If a url includes an anchor, let's scroll this into view! - if ( - typeof window !== 'undefined' && - articleUrl && - articleUrl.indexOf( '#' ) !== -1 && - post?.content - ) { + if ( articleUrl && articleUrl.indexOf( '#' ) !== -1 && post?.content ) { setTimeout( () => { const anchorId = articleUrl.split( '#' ).pop(); if ( anchorId ) { @@ -61,8 +51,6 @@ const ArticleFetchingContent = ( { postId, blogId, articleUrl }: ArticleFetching return ( <> - { siteId && } - { shouldQueryReaderPost && } { try { @@ -29,18 +28,10 @@ const getEnvironmentHostname = () => { export const HelpCenterLaunchpad = () => { const { __ } = useI18n(); - const { selectedSiteId, sectionName } = useHelpCenterContext(); + const { sectionName } = useHelpCenterContext(); - const site = useSelect( - ( select ) => { - if ( selectedSiteId ) { - return ( select( SITE_STORE ) as SiteSelect ).getSite( selectedSiteId ); - } - }, - [ selectedSiteId ] - ); - let siteIntent = site && site?.options?.site_intent; - let siteSlug = site && new URL( site.URL ).host; + let siteIntent = useSiteIntent(); + let siteSlug = useSiteSlug(); if ( ! siteIntent || ! siteSlug ) { siteIntent = window?.helpCenterData?.currentSite?.site_intent; diff --git a/packages/help-center/src/components/help-center-search-results.tsx b/packages/help-center/src/components/help-center-search-results.tsx index 4d3c2112cfc42b..233ac5996ee88d 100644 --- a/packages/help-center/src/components/help-center-search-results.tsx +++ b/packages/help-center/src/components/help-center-search-results.tsx @@ -1,4 +1,5 @@ /* eslint-disable no-restricted-imports */ +import { recordTracksEvent } from '@automattic/calypso-analytics'; import page from '@automattic/calypso-router'; import { Gridicon } from '@automattic/components'; import { @@ -22,16 +23,13 @@ import { useRtl } from 'i18n-calypso'; import { debounce } from 'lodash'; import PropTypes from 'prop-types'; import { Fragment, useEffect, useMemo } from 'react'; -import { useDispatch } from 'react-redux'; import { useDebounce } from 'use-debounce'; -import QueryUserPurchases from 'calypso/components/data/query-user-purchases'; import { useHelpSearchQuery } from 'calypso/data/help/use-help-search-query'; import { decodeEntities, preventWidows } from 'calypso/lib/formatting'; -import { recordTracksEvent } from 'calypso/state/analytics/actions'; -import { useSiteOption } from 'calypso/state/sites/hooks'; import { useHelpCenterContext } from '../contexts/HelpCenterContext'; import { useAdminResults } from '../hooks/use-admin-results'; import { useContextBasedSearchMapping } from '../hooks/use-context-based-search-mapping'; +import { useSiteIntent } from '../hooks/use-site-intent'; import PlaceholderLines from './placeholder-lines'; import type { SearchResult } from '../types'; @@ -110,13 +108,12 @@ function HelpSearchResults( { location = 'inline-help-popover', currentRoute, }: HelpSearchResultsProps ) { - const dispatch = useDispatch(); const { hasPurchases, sectionName } = useHelpCenterContext(); const adminResults = useAdminResults( searchQuery ); const isPurchasesSection = [ 'purchases', 'site-purchases' ].includes( sectionName ); - const siteIntent = useSiteOption( 'site_intent' ); + const siteIntent = useSiteIntent(); const rawContextualResults = useMemo( () => getContextResults( sectionName, siteIntent ), [ sectionName, siteIntent ] @@ -176,14 +173,12 @@ function HelpSearchResults( { // check and catch admin section links. if ( type === SUPPORT_TYPE_ADMIN_SECTION && link ) { // record track-event. - dispatch( - recordTracksEvent( 'calypso_inlinehelp_admin_section_visit', { - link: link, - search_term: searchQuery, - location, - section: sectionName, - } ) - ); + recordTracksEvent( 'calypso_inlinehelp_admin_section_visit', { + link: link, + search_term: searchQuery, + location, + section: sectionName, + } ); // push state only if it's internal link. if ( ! /^http/.test( link ) ) { @@ -209,7 +204,7 @@ function HelpSearchResults( { ? 'calypso_inlinehelp_tailored_article_select' : 'calypso_inlinehelp_article_select'; - dispatch( recordTracksEvent( eventName, eventData ) ); + recordTracksEvent( eventName, eventData ); onSelect( event, result ); }; @@ -359,12 +354,7 @@ function HelpSearchResults( { ); }; - return ( - <> - - { renderSearchResults() } - - ); + return renderSearchResults(); } HelpSearchResults.propTypes = { diff --git a/packages/help-center/src/components/index.d.ts b/packages/help-center/src/components/index.d.ts index fc1a0bf85c6311..15832ffa710aee 100644 --- a/packages/help-center/src/components/index.d.ts +++ b/packages/help-center/src/components/index.d.ts @@ -16,23 +16,6 @@ declare module 'calypso/blocks/inline-help/inline-help-search-results' { const InlineHelpSearchResults: FC; export = InlineHelpSearchResults; } - -declare module 'calypso/components/data/query-user-purchases' { - const QueryUserPurchases: () => null; - export const purchases: void; - export = QueryUserPurchases; -} - -declare module 'calypso/components/data/query-reader-post' { - const QueryReaderPost: FC; - export default QueryReaderPost; -} - -declare module 'calypso/components/data/query-reader-site' { - const QueryReaderSite: FC; - export default QueryReaderSite; -} - declare module 'calypso/components/embed-container' { const EmbedContainer: FC; export default EmbedContainer; diff --git a/packages/help-center/src/hooks/use-site-intent.ts b/packages/help-center/src/hooks/use-site-intent.ts new file mode 100644 index 00000000000000..4088f29f2cb264 --- /dev/null +++ b/packages/help-center/src/hooks/use-site-intent.ts @@ -0,0 +1,17 @@ +import { SiteSelect } from '@automattic/data-stores'; +import { useSelect } from '@wordpress/data'; +import { useHelpCenterContext } from '../contexts/HelpCenterContext'; +import { SITE_STORE } from '../stores'; + +export function useSiteIntent() { + const { selectedSiteId } = useHelpCenterContext(); + const site = useSelect( + ( select ) => { + if ( selectedSiteId ) { + return ( select( SITE_STORE ) as SiteSelect ).getSite( selectedSiteId ); + } + }, + [ selectedSiteId ] + ); + return site?.options?.site_intent; +}