docs: improved feedback component (#3026)

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"
   },

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">

www/docs/yarn.lock

@@ -5528,6 +5528,7 @@ __metadata:
     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
   languageName: unknown
@@ -9892,6 +9893,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-uuid@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "react-uuid@npm:2.0.0"
+  checksum: 91f35c83911a2072f181eee0092b45f9ea3590d22268cf8418721756d53205dd9029a873b36a00913807651a0ea5548cc0fc60bad8c4f09bcd7cb03e6ae39ecf
+  languageName: node
+  linkType: hard
+
 "react@npm:^17.0.1":
   version: 17.0.2
   resolution: "react@npm:17.0.2"