Skip to content

Feedback UI fixes #82

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Aug 1, 2024
Merged

Feedback UI fixes #82

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a2ba195
Add feedback widget with gtag event
PoojaB26 Jul 30, 2024
53a465d
Add index file that I forgot :)
PoojaB26 Jul 30, 2024
455317a
Change star rating to thumbs up/down instead.
PoojaB26 Aug 1, 2024
3546eeb
Merge branch 'refs/heads/main' into pooja/feedback
PoojaB26 Aug 1, 2024
6438524
Update feedback to thumbs up/thumbs down approach
PoojaB26 Aug 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 111 additions & 20 deletions src/components/Feedback/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};
Expand Down