From ebdb109aead894b77db56ac62e8371929e9a56fe Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Wed, 2 Feb 2022 15:59:02 +0000 Subject: [PATCH 1/5] Replace Hotjar with GA buttons --- beta/.env.development | 2 - beta/.env.production | 2 - .../src/components/Layout/Sidebar/Sidebar.tsx | 39 +++++++++++-------- beta/src/pages/_app.tsx | 35 +++++++---------- beta/src/utils/hotjar.js | 22 ----------- 5 files changed, 36 insertions(+), 64 deletions(-) delete mode 100644 beta/src/utils/hotjar.js diff --git a/beta/.env.development b/beta/.env.development index f5c2b14002a..e69de29bb2d 100644 --- a/beta/.env.development +++ b/beta/.env.development @@ -1,2 +0,0 @@ -NEXT_PUBLIC_HJ_SITE_ID = 2411683 -NEXT_PUBLIC_HJ_SITE_V = 6 \ No newline at end of file diff --git a/beta/.env.production b/beta/.env.production index bde7a418c35..2278f7e258a 100644 --- a/beta/.env.production +++ b/beta/.env.production @@ -1,3 +1 @@ -NEXT_PUBLIC_HJ_SITE_ID = 2411651 -NEXT_PUBLIC_HJ_SITE_V = 6 NEXT_PUBLIC_GA_TRACKING_ID = 'G-3918VS75Y6' \ No newline at end of file diff --git a/beta/src/components/Layout/Sidebar/Sidebar.tsx b/beta/src/components/Layout/Sidebar/Sidebar.tsx index 0b03a73a618..95b0a7e50cf 100644 --- a/beta/src/components/Layout/Sidebar/Sidebar.tsx +++ b/beta/src/components/Layout/Sidebar/Sidebar.tsx @@ -25,17 +25,6 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) { routeTree = (routeTree as any).routes[0]; } - function handleFeedback() { - const nodes: any = document.querySelectorAll( - '#_hj_feedback_container button' - ); - if (nodes.length > 0) { - nodes[nodes.length - 1].click(); - } else { - window.location.href = - 'https://github.com/reactjs/reactjs.org/issues/3308'; - } - } const feedbackIcon = ( )} -
- +
+

Is this page useful?

+ +
); diff --git a/beta/src/pages/_app.tsx b/beta/src/pages/_app.tsx index 9d8d1f451cc..894f49bda48 100644 --- a/beta/src/pages/_app.tsx +++ b/beta/src/pages/_app.tsx @@ -12,11 +12,6 @@ import '../styles/sandpack.css'; import '@codesandbox/sandpack-react/dist/index.css'; import Script from 'next/script'; -import {hotjar} from 'utils/hotjar'; -if (typeof window !== 'undefined') { - hotjar(process.env.NEXT_PUBLIC_HJ_SITE_ID, process.env.NEXT_PUBLIC_HJ_SITE_V); -} - const EmptyAppShell: React.FC = ({children}) => <>{children}; export default function MyApp({Component, pageProps}: AppProps) { @@ -31,23 +26,21 @@ export default function MyApp({Component, pageProps}: AppProps) { {process.env.NODE_ENV === 'production' && ( - <> - - + ); } diff --git a/beta/src/utils/hotjar.js b/beta/src/utils/hotjar.js deleted file mode 100644 index 243584d7570..00000000000 --- a/beta/src/utils/hotjar.js +++ /dev/null @@ -1,22 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -export function hotjar(id, sv) { - (function (h, o, t, j, a, r) { - h.hj = - h.hj || - function () { - (h.hj.q = h.hj.q || []).push(arguments); - }; - h._hjSettings = {hjid: id, hjsv: sv}; - h._scriptPath = t + h._hjSettings.hjid + j + h._hjSettings.hjsv; - if (!document.querySelector('script[src*="' + h._scriptPath + '"]')) { - a = o.getElementsByTagName('head')[0]; - r = o.createElement('script'); - r.async = 1; - r.src = h._scriptPath; - a.appendChild(r); - } - })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv='); -} From 6c9f909d08c2b26fa440cdeae4244c4b7777eb04 Mon Sep 17 00:00:00 2001 From: Dan Lebowitz Date: Wed, 2 Feb 2022 17:03:59 -0800 Subject: [PATCH 2/5] initial styles for GA buttons --- .../src/components/Layout/Sidebar/Sidebar.tsx | 37 ++++++++++++++++--- 1 file changed, 32 insertions(+), 5 deletions(-) diff --git a/beta/src/components/Layout/Sidebar/Sidebar.tsx b/beta/src/components/Layout/Sidebar/Sidebar.tsx index 95b0a7e50cf..f8fb864b401 100644 --- a/beta/src/components/Layout/Sidebar/Sidebar.tsx +++ b/beta/src/components/Layout/Sidebar/Sidebar.tsx @@ -62,16 +62,18 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) { role="navigation" ref={menuRef} style={{'--bg-opacity': '.2'} as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything) - className="w-full h-screen lg:h-auto flex-grow pr-0 lg:pr-5 pt-6 pb-44 lg:pb-0 lg:py-6 md:pt-4 lg:pt-4 overflow-y-scroll lg:overflow-y-auto scrolling-touch scrolling-gpu"> + className="w-full h-screen lg:h-auto flex-grow pr-0 lg:pr-5 pt-6 pb-44 lg:pb-0 lg:py-6 md:pt-4 lg:pt-4 overflow-y-scroll lg:overflow-y-auto scrolling-touch scrolling-gpu" + > {isMobileSidebar ? ( ) : ( )} -
-

Is this page useful?

+
+

Is this page useful?

From be20003e3a5c5fae131daa674efccb12d9d143e4 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 17 Feb 2022 00:13:43 +0000 Subject: [PATCH 3/5] Add feedback popover --- beta/src/components/Layout/Feedback.tsx | 79 +++++++++++++++++++ beta/src/components/Layout/Nav/Nav.tsx | 27 ++++--- .../src/components/Layout/Sidebar/Sidebar.tsx | 78 +----------------- 3 files changed, 101 insertions(+), 83 deletions(-) create mode 100644 beta/src/components/Layout/Feedback.tsx diff --git a/beta/src/components/Layout/Feedback.tsx b/beta/src/components/Layout/Feedback.tsx new file mode 100644 index 00000000000..a280d2f2436 --- /dev/null +++ b/beta/src/components/Layout/Feedback.tsx @@ -0,0 +1,79 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import * as React from 'react'; +import {useRouter} from 'next/router'; + +export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) { + const {pathname} = useRouter(); + // Reset on route changes. + return ; +} + +function SendFeedback({onSubmit}: {onSubmit: () => void}) { + const [isSubmitted, setIsSubmitted] = React.useState(false); + return ( +
+

+ {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'} +

+ {!isSubmitted && ( + + )} + {!isSubmitted && ( + + )} +
+ ); +} diff --git a/beta/src/components/Layout/Nav/Nav.tsx b/beta/src/components/Layout/Nav/Nav.tsx index a8b36753405..4d0fa1132ef 100644 --- a/beta/src/components/Layout/Nav/Nav.tsx +++ b/beta/src/components/Layout/Nav/Nav.tsx @@ -3,6 +3,7 @@ */ import * as React from 'react'; +import {createPortal} from 'react-dom'; import cn from 'classnames'; import NextLink from 'next/link'; import {useRouter} from 'next/router'; @@ -13,6 +14,7 @@ import {Search} from 'components/Search'; import {MenuContext} from 'components/useMenu'; import {Logo} from '../../Logo'; +import {Feedback} from '../Feedback'; import NavLink from './NavLink'; declare global { @@ -99,18 +101,13 @@ function inferSection(pathname: string): 'learn' | 'apis' | 'home' { export default function Nav() { const {pathname} = useRouter(); const {isOpen, toggleOpen} = React.useContext(MenuContext); + const [showFeedback, setShowFeedback] = React.useState(false); + const feedbackAutohideRef = React.useRef(null); const section = inferSection(pathname); function handleFeedback() { - const nodes: any = document.querySelectorAll( - '#_hj_feedback_container button' - ); - if (nodes.length > 0) { - nodes[nodes.length - 1].click(); - } else { - window.location.href = - 'https://github.com/reactjs/reactjs.org/issues/3308'; - } + clearTimeout(feedbackAutohideRef.current); + setShowFeedback((s) => !s); } return ( @@ -190,6 +187,18 @@ export default function Nav() { {darkIcon}
+ {showFeedback && ( +
+ { + clearTimeout(feedbackAutohideRef.current); + feedbackAutohideRef.current = setTimeout(() => { + setShowFeedback(false); + }, 1000); + }} + /> +
+ )}
- +
+
); From bae653475b721697d8b7391d30bcd91cf5b80500 Mon Sep 17 00:00:00 2001 From: Dan Lebowitz Date: Thu, 17 Feb 2022 13:00:55 -0800 Subject: [PATCH 4/5] style fixes + adding SVGs --- beta/src/components/Layout/Feedback.tsx | 66 ++++++++++++++----------- beta/src/components/Layout/Nav/Nav.tsx | 44 +++++++++-------- 2 files changed, 62 insertions(+), 48 deletions(-) diff --git a/beta/src/components/Layout/Feedback.tsx b/beta/src/components/Layout/Feedback.tsx index a280d2f2436..789774e1c5d 100644 --- a/beta/src/components/Layout/Feedback.tsx +++ b/beta/src/components/Layout/Feedback.tsx @@ -11,15 +11,48 @@ export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) { return ; } +const thumbsUpIcon = ( + + + +); + +const thumbsDownIcon = ( + + + +); + function SendFeedback({onSubmit}: {onSubmit: () => void}) { const [isSubmitted, setIsSubmitted] = React.useState(false); return ( -
-

+

+

{isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}

{!isSubmitted && ( )} {!isSubmitted && ( )}
diff --git a/beta/src/components/Layout/Nav/Nav.tsx b/beta/src/components/Layout/Nav/Nav.tsx index 4d0fa1132ef..0c78854dfff 100644 --- a/beta/src/components/Layout/Nav/Nav.tsx +++ b/beta/src/components/Layout/Nav/Nav.tsx @@ -26,24 +26,23 @@ declare global { const feedbackIcon = ( - - - - - - - - + width="28" + height="28" + viewBox="0 0 28 28" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + + ); @@ -172,7 +171,12 @@ export default function Nav() { @@ -188,7 +192,7 @@ export default function Nav() {
{showFeedback && ( -
+
{ clearTimeout(feedbackAutohideRef.current); From 25ea21a63c51ecd78ecf8534a68517c981d4daaf Mon Sep 17 00:00:00 2001 From: Dan Lebowitz Date: Thu, 17 Feb 2022 13:03:13 -0800 Subject: [PATCH 5/5] dark mode fix --- beta/src/components/Layout/Nav/Nav.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/beta/src/components/Layout/Nav/Nav.tsx b/beta/src/components/Layout/Nav/Nav.tsx index 0c78854dfff..ca755afb303 100644 --- a/beta/src/components/Layout/Nav/Nav.tsx +++ b/beta/src/components/Layout/Nav/Nav.tsx @@ -166,7 +166,7 @@ export default function Nav() { API
-
+