Add feedback widget with gtag event (#79)

Author: PoojaB26

package-lock.json

@@ -26,7 +26,8 @@
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-simple-star-rating": "^5.1.7"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.1.1",

package.json

@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import { Rating } from 'react-simple-star-rating';
+
+const Feedback = () => {
+    const [rating, setRating] = useState(0);
+
+    const handleRating = (rate) => {
+        setRating(rate);
+        console.log(window.location.pathname.toString())
+
+        if (window.gtag) {
+            window.gtag('event', 'rating', {
+                event_category: 'Feedback',
+                event_label: window.location.pathname,
+                value: rate,
+            });
+        }
+    };
+
+    return (
+        <div style={{ textAlign: 'left', marginTop: '0vh' }}>
+            <Rating
+                onClick={handleRating}
+                ratingValue={rating}
+                size={40}
+                fillColor="orange"
+                emptyColor="lightgray"
+                transition
+            />
+            {/*<div style={{ marginTop: '20px', fontSize: '18px' }}>*/}
+            {/*    Your Rating: {rating / 20} stars*/}
+            {/*</div>*/}
+        </div>
+    );
+};
+
+export default Feedback;

src/components/Feedback/index.js

@@ -6956,7 +6956,7 @@ react-dev-utils@^12.0.1:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-react-dom@*, "react-dom@^16.6.0 || ^17.0.0 || ^18.0.0", react-dom@^18.0.0, "react-dom@>= 16.8.0 < 19.0.0":
+react-dom@*, "react-dom@^16.6.0 || ^17.0.0 || ^18.0.0", react-dom@^18.0.0, "react-dom@>= 16.8.0 < 19.0.0", react-dom@>=18.0.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -7052,7 +7052,12 @@ react-router@^5.3.4, react-router@>=5, [email protected]:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react@*, "react@^16.13.1 || ^17.0.0 || ^18.0.0", "react@^16.6.0 || ^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.3.1, "react@>= 16.8.0 < 19.0.0", react@>=15, react@>=16, react@>=16.0.0:
+react-simple-star-rating@^5.1.7:
+  version "5.1.7"
+  resolved "https://registry.npmjs.org/react-simple-star-rating/-/react-simple-star-rating-5.1.7.tgz"
+  integrity sha512-NTFkW8W3uwvI82Fv7JW5i7gmDjEZKxJmj+Z9vn+BjYIXT6ILdnU9qnSUP2cWrWN/WAUlue81f9SgM4CQcenltQ==
+
+react@*, "react@^16.13.1 || ^17.0.0 || ^18.0.0", "react@^16.6.0 || ^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.3.1, "react@>= 16.8.0 < 19.0.0", react@>=15, react@>=16, react@>=16.0.0, react@>=18.0.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==