fixed js css interaction

StampyAI · May 26, 2024 · 9b394ea · 9b394ea
1 parent f38104c
commit 9b394ea
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 19 deletions.
diff --git a/app/components/Feedback/feedback.css b/app/components/Feedback/feedback.css
@@ -37,11 +37,6 @@
   opacity: 1;
 }
 
-.thanks {
-  opacity: 0;
-  transition: opacity 0.25s ease-in-out; /* Transition effect */
-}
-
 .composite-button > .feedback-form {
   position: absolute;
   transform: translate(-9vw, var(--spacing-56));

diff --git a/app/components/Feedback/index.tsx b/app/components/Feedback/index.tsx
@@ -1,4 +1,4 @@
-import {useState, useRef} from 'react'
+import {useEffect, useState, useRef} from 'react'
 import {Action, ActionType} from '~/routes/questions.actions'
 import './feedback.css'
 import FeedbackForm from './Form'
@@ -43,18 +43,14 @@ const Feedback = ({
   formClassName,
   onSubmit,
 }: FeedbackProps) => {
+  const [showThanks, setShowThanks] = useState(false)
   const [showFeedbackForm, setShowFeedbackForm] = useState(false)
   const [voted, setVoted]: any = useState(false)
 
-  const thanksRef = useRef<HTMLDivElement | null>(null)
-
-  function showThanks() {
-    if (thanksRef.current) thanksRef.current.style.opacity = '1'
-    const timeout = setInterval(() => {
-      if (thanksRef.current) thanksRef.current.style.opacity = '0'
-    }, 6000)
+  useEffect(() => {
+    const timeout = setTimeout(() => setShowThanks(false), 6000)
     return () => clearInterval(timeout)
-  }
+  }, [showThanks])
 
   return (
     <div className="flex items-center">
@@ -67,7 +63,7 @@ const Feedback = ({
           hint={upHint}
           setVoted={setVoted}
           onClick={() => {
-            showThanks()
+            setShowThanks(true)
           }}
         />
         <Action
@@ -78,20 +74,25 @@ const Feedback = ({
           disabled={voted}
           setVoted={setVoted}
           onClick={() => {
-            if (!showForm) showThanks()
+            if (!showForm) setShowThanks(true)
             setShowFeedbackForm(!!showForm)
           }}
         />
       </ButtonSecondaryWrapper>
 
-      <div ref={thanksRef} className="thanks ml-2 opacity-0 pointer-events-none">
+      <p
+        className={
+          'transition-opacity duration-200 ease-in-out ml-2 pointer-events-none ' +
+          (showThanks ? 'opacity-100' : 'opacity-0')
+        }
+      >
         Thank you for your feedback!
-      </div>
+      </p>
 
       {showFeedbackForm && (
         <FeedbackForm
           onSubmit={(att) => {
-            showThanks()
+            setShowThanks(true)
             return onSubmit(att)
           }}
           onClose={() => {