Feedback UI fixes (#82)

* Add feedback widget with gtag event

* Add index file that I forgot :)

* Change star rating to thumbs up/down instead.

* Update feedback to thumbs up/thumbs down approach

Author: PoojaB26

src/components/Feedback/index.js

@@ -1,35 +1,126 @@
-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 [submitted, setSubmitted] = useState(false);
 
-    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,
             });
         }
+        setSubmitted(true);
+    };
+
+    const handleSubmit = () => {
+        sendFeedback(feedback, textBoxContent);
+        setShowTextBox(false);
+        setTextBoxContent('');
     };
 
     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' }}>
+            {!submitted ? (
+                <>
+                    <p style={{ fontWeight: 'bold' }}>Was this article helpful?</p>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                        <button
+                            onClick={() => handleFeedback('thumbs_up')}
+                            style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                cursor: 'pointer',
+                                color: feedback === 'thumbs_up' ? 'var(--ifm-color-primary)' : 'gray',
+                                backgroundColor: '#f0f0f0',
+                                border: '1px #f0f0f0',
+                                borderRadius: '8px',
+                                padding: '10px 20px',
+                                fontSize: '16px',
+                                fontFamily: 'var(--ifm-font-family-base)',
+                                gap: '5px',
+                            }}
+                        >
+                            👍 Yes
+                        </button>
+                        <button
+                            onClick={() => handleFeedback('thumbs_down')}
+                            style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                cursor: 'pointer',
+                                color: feedback === 'thumbs_down' ? 'var(--ifm-color-primary)' : 'gray',
+                                backgroundColor: '#f0f0f0',
+                                border: '1px #f0f0f0',
+                                borderRadius: '8px',
+                                padding: '10px 20px',
+                                fontSize: '16px',
+                                fontFamily: 'var(--ifm-font-family-base)',
+                                gap: '5px',
+                            }}
+                        >
+                            👎 No
+                        </button>
+                    </div>
+                    {showTextBox && (
+                        <div style={{ marginTop: '20px' }}>
+                            <textarea
+                                value={textBoxContent}
+                                onChange={handleTextBoxChange}
+                                placeholder="How can we make it better?"
+                                style={{
+                                    width: '100%',
+                                    height: '100px',
+                                    padding: '10px',
+                                    borderColor: 'lightgray',
+                                    borderRadius: '8px',
+                                    fontFamily: 'var(--ifm-font-family-base)',
+                                }}
+                            />
+                            <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',
+                                }}
+                            >
+                                Submit Feedback
+                            </button>
+                        </div>
+                    )}
+                </>
+            ) : (
+                <p style={{ fontWeight: 'bold', color: 'var(--ifm-color-primary)' }}>
+                    Thank you for your feedback!
+                </p>
+            )}
         </div>
     );
 };