Change star rating to thumbs up/down instead.

Author: PoojaB26

package-lock.json

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

package.json

@@ -1,35 +1,97 @@
-import React, { useState, useEffect } from 'react';
-import { Rating } from 'react-simple-star-rating';
+import React, { useState } from 'react';
 
 const Feedback = () => {
-    const [rating, setRating] = useState(0);
+    const [feedback, setFeedback] = useState(null);
+    const [showTextBox, setShowTextBox] = useState(false);
+    const [textBoxContent, setTextBoxContent] = useState('');
 
-    const handleRating = (rate) => {
-        setRating(rate);
-        console.log(window.location.pathname.toString())
+    const handleFeedback = (type) => {
+        setFeedback(type);
+        if (type === 'thumbs_down') {
+            setShowTextBox(true);
+        } else {
+            setShowTextBox(false);
+            sendFeedback(type, '');
+        }
+    };
+
+    const handleTextBoxChange = (event) => {
+        setTextBoxContent(event.target.value);
+    };
 
+    const sendFeedback = (type, text) => {
         if (window.gtag) {
-            window.gtag('event', 'rating', {
+            window.gtag('event', 'feedback', {
                 event_category: 'Feedback',
                 event_label: window.location.pathname,
-                value: rate,
+                feedback_type: type,
+                feedback_text: text,
             });
         }
     };
 
+    const handleSubmit = () => {
+        sendFeedback(feedback, textBoxContent);
+        setShowTextBox(false);
+        setTextBoxContent('');
+        alert('Thank you for your feedback!');
+    };
+
     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 style={{ textAlign: 'left', marginBottom: '2vh' }}>
+            <div style={{fontSize: '12px'}}>Was the content helpful?</div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                <div
+                    onClick={() => handleFeedback('thumbs_up')}
+                    style={{
+                        cursor: 'pointer',
+                        color: feedback === 'thumbs_up' ? 'green' : 'gray',
+                        fontSize: '24px',
+                    }}
+                >
+                    👍
+                </div>
+                <div
+                    onClick={() => handleFeedback('thumbs_down')}
+                    style={{
+                        cursor: 'pointer',
+                        color: feedback === 'thumbs_down' ? 'red' : 'gray',
+                        fontSize: '24px',
+                    }}
+                >
+                    👎
+                </div>
+            </div>
+            {showTextBox && (
+                <div style={{ marginTop: '20px' }}>
+                    <textarea
+                        value={textBoxContent}
+                        onChange={handleTextBoxChange}
+                        placeholder="Please let us know why you didn't find the content helpful."
+                        style={{
+                            width: '100%',
+                            height: '100px',
+                            padding: '10px',
+                            borderColor: 'lightgray',
+                        }}
+                    />
+                    <button
+                        onClick={handleSubmit}
+                        style={{
+                            marginTop: '10px',
+                            padding: '10px 20px',
+                            backgroundColor: 'var(--ifm-color-primary)',
+                            color: 'white',
+                            border: 'none',
+                            cursor: 'pointer',
+                            fontFamily: 'var(--ifm-font-family-base)',
+                            borderRadius: '8px', // Rounded edges
+                        }}
+                    >
+                        Send
+                    </button>
+                </div>
+            )}
         </div>
     );
 };

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@>=18.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":
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -7052,12 +7052,7 @@ react-router@^5.3.4, react-router@>=5, [email protected]:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.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:
+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:
   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==