diff --git a/beta/.env.development b/beta/.env.development index f5c2b140..e69de29b 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 bde7a418..2278f7e2 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/Feedback.tsx b/beta/src/components/Layout/Feedback.tsx new file mode 100644 index 00000000..789774e1 --- /dev/null +++ b/beta/src/components/Layout/Feedback.tsx @@ -0,0 +1,89 @@ +/* + * 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 ; +} + +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 a8b36753..a5099cc1 100644 --- a/beta/src/components/Layout/Nav/Nav.tsx +++ b/beta/src/components/Layout/Nav/Nav.tsx @@ -13,6 +13,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 { @@ -24,24 +25,23 @@ declare global { const feedbackIcon = ( - - - - - - - - + width="28" + height="28" + viewBox="0 0 28 28" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + + ); @@ -99,18 +99,34 @@ 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); + const feedbackPopupRef = React.useRef(null); - 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'; + React.useEffect(() => { + if (!showFeedback) { + return; } + function handleDocumentClickCapture(e: MouseEvent) { + if (!feedbackPopupRef.current!.contains(e.target as any)) { + e.stopPropagation(); + e.preventDefault(); + setShowFeedback(false); + } + } + document.addEventListener('click', handleDocumentClickCapture, { + capture: true, + }); + return () => + document.removeEventListener('click', handleDocumentClickCapture, { + capture: true, + }); + }, [showFeedback]); + + function handleFeedback() { + clearTimeout(feedbackAutohideRef.current); + setShowFeedback(!showFeedback); } return ( @@ -170,12 +186,17 @@ export default function Nav() { API -
+
@@ -190,6 +211,21 @@ export default function Nav() { {darkIcon}
+
+ { + clearTimeout(feedbackAutohideRef.current); + feedbackAutohideRef.current = setTimeout(() => { + setShowFeedback(false); + }, 1000); + }} + /> +
+
+
); diff --git a/beta/src/pages/_app.tsx b/beta/src/pages/_app.tsx index 9d8d1f45..894f49bd 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 243584d7..00000000 --- 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='); -}