From 6e6bcd30fe64cb7b9a75d673d84ab716a869af03 Mon Sep 17 00:00:00 2001 From: Tony Arcangelini <33258733+arcangelini@users.noreply.github.com> Date: Tue, 23 Jul 2024 11:15:21 +0200 Subject: [PATCH] Help Center: clean-up article component (#92866) --- .../help-center-article-content.scss | 2 +- .../help-center-article-content.tsx | 4 +- .../help-center-article-fetching-content.tsx | 50 ---------------- ...bed-result.tsx => help-center-article.tsx} | 59 ++++++++++++++----- .../components/help-center-contact-form.tsx | 3 - .../src/components/help-center-content.tsx | 4 +- .../src/components/help-center-search.scss | 12 ++-- .../help-center-support-article-header.tsx | 10 ++-- packages/help-center/src/hooks/index.ts | 6 ++ 9 files changed, 65 insertions(+), 85 deletions(-) delete mode 100644 packages/help-center/src/components/help-center-article-fetching-content.tsx rename packages/help-center/src/components/{help-center-embed-result.tsx => help-center-article.tsx} (57%) diff --git a/packages/help-center/src/components/help-center-article-content.scss b/packages/help-center/src/components/help-center-article-content.scss index 2fca0627c3c2b7..120400255dc601 100644 --- a/packages/help-center/src/components/help-center-article-content.scss +++ b/packages/help-center/src/components/help-center-article-content.scss @@ -1,7 +1,7 @@ @import "@automattic/typography/styles/variables"; @import "calypso/assets/stylesheets/shared/mixins/breakpoints"; -.help-center-article-content__story-content { +.help-center-article-content__main { color: var(--color-neutral-70); font-size: $font-body; line-height: 1.7; diff --git a/packages/help-center/src/components/help-center-article-content.tsx b/packages/help-center/src/components/help-center-article-content.tsx index f9f979c58c7eda..b067acdfcafe61 100644 --- a/packages/help-center/src/components/help-center-article-content.tsx +++ b/packages/help-center/src/components/help-center-article-content.tsx @@ -18,7 +18,7 @@ const ArticleContent = ( { }: ArticleContentProps ) => { const post = { title, link }; return ( -
+
{ isLoading || ! post ? ( ) : ( @@ -26,7 +26,7 @@ const ArticleContent = ( {
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 deleted file mode 100644 index b0c1857f8868a3..00000000000000 --- a/packages/help-center/src/components/help-center-article-fetching-content.tsx +++ /dev/null @@ -1,50 +0,0 @@ -/* eslint-disable no-restricted-imports */ -import { useEffect } from 'react'; -import { usePostByKey } from '../hooks/use-post-by-key'; -import { useSupportArticleAlternatePostKey } from '../hooks/use-support-article-alternates-query'; -import ArticleContent from './help-center-article-content'; -import './help-center-article-content.scss'; - -interface ArticleFetchingContentProps { - postId: number; - blogId?: string | undefined; - articleUrl?: string | null; -} - -const ArticleFetchingContent = ( { postId, blogId, articleUrl }: ArticleFetchingContentProps ) => { - const postKey = useSupportArticleAlternatePostKey( blogId, postId ); - const post = usePostByKey( postKey ).data; - const isLoading = ! post?.content || ! postKey; - - useEffect( () => { - //If a url includes an anchor, let's scroll this into view! - if ( articleUrl && articleUrl.indexOf( '#' ) !== -1 && post?.content ) { - setTimeout( () => { - const anchorId = articleUrl.split( '#' ).pop(); - if ( anchorId ) { - const element = document.getElementById( anchorId ); - if ( element ) { - element.scrollIntoView(); - } - } - }, 0 ); - } - }, [ articleUrl, post ] ); - - return ( - <> - - - ); -}; - -export default ArticleFetchingContent; diff --git a/packages/help-center/src/components/help-center-embed-result.tsx b/packages/help-center/src/components/help-center-article.tsx similarity index 57% rename from packages/help-center/src/components/help-center-embed-result.tsx rename to packages/help-center/src/components/help-center-article.tsx index ae8e006181647a..4ec25a858dbae0 100644 --- a/packages/help-center/src/components/help-center-embed-result.tsx +++ b/packages/help-center/src/components/help-center-article.tsx @@ -6,21 +6,39 @@ import { Icon, external } from '@wordpress/icons'; import React from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; import { useHelpCenterContext } from '../contexts/HelpCenterContext'; +import { usePostByKey, useSupportArticleAlternatePostKey } from '../hooks'; import { BackButton } from './back-button'; import { BackToTopButton } from './back-to-top-button'; -import ArticleFetchingContent from './help-center-article-fetching-content'; +import ArticleContent from './help-center-article-content'; -export const HelpCenterEmbedResult: React.FC = () => { - const { search } = useLocation(); +export const HelpCenterArticle: React.FC = () => { + const { search, key } = useLocation(); const navigate = useNavigate(); const { sectionName } = useHelpCenterContext(); const params = new URLSearchParams( search ); - const postId = params.get( 'postId' ); + const postId = Number( params.get( 'postId' ) ); const blogId = params.get( 'blogId' ) ?? undefined; - const canNavigateBack = params.get( 'canNavigateBack' ) === 'true'; - const link = params.get( 'link' ); + const articleUrl = params.get( 'link' ) ?? undefined; const query = params.get( 'query' ); + const postKey = useSupportArticleAlternatePostKey( blogId, postId ); + const post = usePostByKey( postKey ).data; + const isLoading = ! post?.content || ! postKey; + + useEffect( () => { + //If a url includes an anchor, let's scroll this into view! + if ( articleUrl?.includes( '#' ) && post?.content ) { + setTimeout( () => { + const anchorId = articleUrl.split( '#' ).pop(); + if ( anchorId ) { + const element = document.getElementById( anchorId ); + if ( element ) { + element.scrollIntoView(); + } + } + }, 0 ); + } + }, [ articleUrl, post ] ); useEffect( () => { const tracksData = { @@ -28,22 +46,22 @@ export const HelpCenterEmbedResult: React.FC = () => { force_site_id: true, location: 'help-center', section: sectionName, - result_url: link, + result_url: articleUrl, post_id: postId, blog_id: blogId, }; recordTracksEvent( `calypso_inlinehelp_article_open`, tracksData ); - }, [ query, link, sectionName, postId, blogId ] ); + }, [ query, articleUrl, sectionName, postId, blogId ] ); const redirectBack = () => { recordTracksEvent( `calypso_inlinehelp_navigate_back`, { - result_url: link, + result_url: articleUrl, post_id: postId, blog_id: blogId, search_query: query, } ); - if ( canNavigateBack ) { + if ( key === 'default' ) { navigate( -1 ); } else if ( query ) { navigate( `/?query=${ query }` ); @@ -58,7 +76,7 @@ export const HelpCenterEmbedResult: React.FC = () => { force_site_id: true, location: 'help-center', section: sectionName, - result_url: link, + result_url: articleUrl, post_id: postId, blog_id: blogId, }; @@ -68,25 +86,34 @@ export const HelpCenterEmbedResult: React.FC = () => { return ( <> -
+
-
- +
+
diff --git a/packages/help-center/src/components/help-center-contact-form.tsx b/packages/help-center/src/components/help-center-contact-form.tsx index 78986f44e0f505..9423faffa50108 100644 --- a/packages/help-center/src/components/help-center-contact-form.tsx +++ b/packages/help-center/src/components/help-center-contact-form.tsx @@ -189,8 +189,6 @@ export const HelpCenterContactForm = ( props: HelpCenterContactFormProps ) => { ( event: React.MouseEvent< HTMLAnchorElement, MouseEvent >, result: SearchResult ) => { event.preventDefault(); - const navigatingFromGPTResponse = mode === 'FORUM' && showingGPTResponse; - // if result.post_id isn't set then open in a new window if ( ! result.post_id ) { const tracksData = { @@ -211,7 +209,6 @@ export const HelpCenterContactForm = ( props: HelpCenterContactFormProps ) => { postId: String( result.post_id ), query: debouncedMessage || '', title: preventWidows( decodeEntities( result.title ) ), - ...( navigatingFromGPTResponse ? { canNavigateBack: 'true' } : {} ), } ); if ( result.blog_id ) { diff --git a/packages/help-center/src/components/help-center-content.tsx b/packages/help-center/src/components/help-center-content.tsx index 42a11238c2e315..8191a1daca5f0b 100644 --- a/packages/help-center/src/components/help-center-content.tsx +++ b/packages/help-center/src/components/help-center-content.tsx @@ -15,9 +15,9 @@ import { Route, Routes, useLocation, Navigate, useNavigate } from 'react-router- import { useHelpCenterContext } from '../contexts/HelpCenterContext'; import { useShouldUseWapuu } from '../hooks'; import { HELP_CENTER_STORE } from '../stores'; +import { HelpCenterArticle } from './help-center-article'; import { HelpCenterContactForm } from './help-center-contact-form'; import { HelpCenterContactPage } from './help-center-contact-page'; -import { HelpCenterEmbedResult } from './help-center-embed-result'; import { HelpCenterOdie } from './help-center-odie'; import { HelpCenterSearch } from './help-center-search'; import { SuccessScreen } from './ticket-success-screen'; @@ -124,7 +124,7 @@ const HelpCenterContent: React.FC< { isRelative?: boolean; currentRoute?: string ) } /> - } /> + } /> } /> a { + h1.help-center-article-content__header-title > a { text-decoration: none; clear: none; color: var(--color-neutral-70); @@ -436,7 +436,7 @@ border-color: inherit; } - a:not(.support-article-dialog__header-title-link) { + a:not(.help-center-article-content__header-title-link) { text-decoration: none; } @@ -492,7 +492,7 @@ color: var(--studio-yellow-20); } - .support-article-dialog__header { + .help-center-article-content__header { margin-bottom: 0; } diff --git a/packages/help-center/src/components/help-center-support-article-header.tsx b/packages/help-center/src/components/help-center-support-article-header.tsx index 32aec3d936f809..6a7627aaa7c7c4 100644 --- a/packages/help-center/src/components/help-center-support-article-header.tsx +++ b/packages/help-center/src/components/help-center-support-article-header.tsx @@ -8,14 +8,14 @@ export const SupportArticleHeader = ( { isLoading: boolean; } ) => isLoading || ! post ? ( -
-

Post loading…

+
+

Post loading…

) : ( -
-

+
+