Skip to content

Commit

Permalink
remove Feedback popup
Browse files Browse the repository at this point in the history
  • Loading branch information
buddy-web3 committed Apr 8, 2024
1 parent 4aecbf9 commit 6b9867f
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 42 deletions.
8 changes: 0 additions & 8 deletions app/components/Article/FeedbackForm/feedbackForm.css
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,6 @@
display: block;
}

.action-feedback-text {
display: none;
position: absolute;
transform: translate(-1vw, var(--spacing-56));
}
.action-feedback-text.show {
display: block;
}
.composite-button > .feedback-form {
position: absolute;
display: none;
Expand Down
8 changes: 8 additions & 0 deletions app/components/Article/article.css
Original file line number Diff line number Diff line change
Expand Up @@ -164,3 +164,11 @@ article a.see-more.visible:after {
margin: 0;
}
}
.action-feedback-text {
display: none;
position: absolute;
transform: translate(-1vw, var(--spacing-56));
}
.action-feedback-text.show {
display: block;
}
37 changes: 3 additions & 34 deletions app/components/Article/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useState} from 'react'
import {useState} from 'react'
import {Link} from '@remix-run/react'
import KeepGoing from '~/components/Article/KeepGoing'
import CopyIcon from '~/components/icons-generated/Copy'
Expand All @@ -9,38 +9,18 @@ import type {Glossary, Question} from '~/server-utils/stampy'
import {tagUrl} from '~/routesMapper'
import Contents from './Contents'
import './article.css'
import FeedbackForm from '~/components/Article/FeedbackForm'

const isLoading = ({text}: Question) => !text || text === 'Loading...'

const ArticleFooter = (question: Question) => {
const [showFeedback, setShowFeedback] = useState(false)
const [showFeedbackForm, setShowFeedbackForm] = useState(false)
const [isFormFocused, setIsFormFocused] = useState(false)
const date =
question.updatedAt &&
new Date(question.updatedAt).toLocaleDateString('en-GB', {
year: 'numeric',
month: 'short',
})

React.useEffect(() => {
// Hide the form after 10 seconds if the user hasn't interacted with it
const timeoutId = setInterval(() => {
if (!isFormFocused) {
setShowFeedbackForm(false)
}
}, 10000)

// Clear the timeout to prevent it from running if the component unmounts
return () => clearInterval(timeoutId)
}, [showFeedbackForm, isFormFocused])

React.useEffect(() => {
const timeout = setInterval(() => setShowFeedback(false), 6000)
return () => clearInterval(timeout)
}, [showFeedback])

return (
!isLoading(question) && (
<div className="footer-comtainer padding-bottom-40">
Expand All @@ -62,28 +42,17 @@ const ArticleFooter = (question: Question) => {
pageid={question.pageid}
showText={true}
actionType={ActionType.HELPFUL}
onSuccess={() => setShowFeedback(true)}
onClick={() => setShowFeedback(true)}
/>
<Action
pageid={question.pageid}
showText={true}
actionType={ActionType.UNHELPFUL}
onClick={() => setShowFeedbackForm(true)}
onClick={() => setShowFeedback(true)}
/>
<div className={['action-feedback-text', showFeedback ? 'show' : ''].join(' ')}>
Thanks for your feedback!
</div>
<FeedbackForm
pageid={question.pageid}
className={['feedback-form', showFeedbackForm ? 'show' : ''].join(' ')}
onClose={() => {
setShowFeedback(true)
setShowFeedbackForm(false)
}}
onBlur={() => setIsFormFocused(false)}
onFocus={() => setIsFormFocused(true)}
hasOptions={true}
/>
</CompositeButton>
</div>
)
Expand Down

0 comments on commit 6b9867f

Please sign in to comment.