feat(ui): define combo input to show just when click on save button

mateusfg7 · Sep 30, 2023 · 9f37c01 · 9f37c01
1 parent 819fd39
commit 9f37c01
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/src/components/save-combo-button/index.tsx b/src/components/save-combo-button/index.tsx
@@ -16,11 +16,18 @@ export function SaveComboButton() {
 
   const [comboName, setComboName] = useState('')
   const [showSuccess, setShowSuccess] = useState(false)
+  const [showInput, setShowInput] = useState(false)
 
   function save() {
-    if (!comboName) return
     if (!sounds.some(sound => sound.active)) return
 
+    if (!showInput) {
+      setShowInput(true)
+      return
+    }
+
+    if (!comboName) return
+
     const activeSounds = sounds.filter(sound => sound.active)
 
     saveCombo({
@@ -30,6 +37,7 @@ export function SaveComboButton() {
     })
 
     setComboName('')
+    setShowInput(false)
     setShowSuccess(true)
 
     setTimeout(() => setShowSuccess(false), 2000)
@@ -39,7 +47,7 @@ export function SaveComboButton() {
 
   return (
     <div className="flex gap-1">
-      {sounds.some(sound => sound.active) && (
+      {showInput && (
         <input
           disabled={disabled}
           type="text"