diff --git a/www/docs/package.json b/www/docs/package.json index 0b5f31f235..5f35efa9f1 100644 --- a/www/docs/package.json +++ b/www/docs/package.json @@ -32,6 +32,7 @@ "react": "^17.0.1", "react-dom": "^17.0.1", "react-transition-group": "^4.4.5", + "react-uuid": "^2.0.0", "redocusaurus": "^1.4.0", "url-loader": "^4.1.1" }, diff --git a/www/docs/src/components/Feedback/index.js b/www/docs/src/components/Feedback/index.js index d1b13ccb6a..ead2a3c2b5 100644 --- a/www/docs/src/components/Feedback/index.js +++ b/www/docs/src/components/Feedback/index.js @@ -1,9 +1,10 @@ -import React, { useRef, useState } from 'react'; +import React, { useRef, useState, useEffect } from 'react'; import { CSSTransition, SwitchTransition } from 'react-transition-group'; import './index.css'; import useIsBrowser from '@docusaurus/useIsBrowser'; import {useLocation} from '@docusaurus/router'; +import uuid from 'react-uuid'; export default function Feedback ({ event, @@ -21,46 +22,69 @@ export default function Feedback ({ const inlineFeedbackRef = useRef(null); const inlineQuestionRef = useRef(null); const inlineMessageRef = useRef(null) - const [positiveFeedback, setPositiveFeedbac] = useState(false); + const [positiveFeedback, setPositiveFeedback] = useState(false); const [message, setMessage] = useState(""); + const [id, setId] = useState(null) const nodeRef = submittedFeedback ? inlineMessageRef : (showForm ? inlineQuestionRef : inlineFeedbackRef); const isBrowser = useIsBrowser(); const location = useLocation(); function handleFeedback (e) { - submitFeedback() - setPositiveFeedbac(e.target.classList.contains('positive')); + const feedback = e.target.classList.contains('positive'); + submitFeedback(e, feedback) + setPositiveFeedback(feedback); setShowForm(true); } - function submitFeedback () { + function submitFeedback (e, feedback = null) { + console.log(id, feedback, (feedback !== null && feedback) || (feedback === null && positiveFeedback) ? 'yes' : 'no') if (isBrowser) { + console.log("here1"); if (window.analytics) { + console.log("here3"); if (showForm) { setLoading(true); } + console.log("here4"); window.analytics.track(event, { url: location.pathname, label: document.title, - feedback: positiveFeedback ? 'yes' : 'no', - message + feedback: (feedback !== null && feedback) || (feedback === null && positiveFeedback) ? 'yes' : 'no', + message, + uuid: id }, function () { + console.log("here5"); if (showForm) { setLoading(false); - setShowForm(false); - setSubmittedFeedback(true); + console.log("here6"); + resetForm(); } }) } else { + console.log("here7"); if (showForm) { - setShowForm(false); - setSubmittedFeedback(true); + console.log("here8"); + resetForm(); } } } } + function resetForm () { + setShowForm(false); + setSubmittedFeedback(true); + if (message) { + setId(null); + } + } + + useEffect(() => { + if (!id) { + setId(uuid()) + } + }, [id]) + return (