docs: improved feedback component (#3026)

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 (
     <div className='feedback-container'>
       <SwitchTransition mode="out-in">