From 390f274d06806eaf32f660c170ff672e40fd82b6 Mon Sep 17 00:00:00 2001
From: CorreyL <correylim@gmail.com>
Date: Thu, 18 Jan 2024 19:42:24 -0800
Subject: [PATCH] Dialogs that accept keywords, track pending inputs

In every dialog component that allows the input of Keyword, instantiate
a pendingKeyword State to track if the BadgeIput element has a pending
input
---
 .../builder/sidebars/left/dialogs/custom-section.tsx |  6 +++++-
 .../builder/sidebars/left/dialogs/interests.tsx      | 12 ++++++++++--
 .../pages/builder/sidebars/left/dialogs/projects.tsx | 12 ++++++++++--
 .../pages/builder/sidebars/left/dialogs/skills.tsx   | 12 ++++++++++--
 4 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/pages/builder/sidebars/left/dialogs/custom-section.tsx b/apps/client/src/pages/builder/sidebars/left/dialogs/custom-section.tsx
index 26c74016..c683c2ea 100644
--- a/apps/client/src/pages/builder/sidebars/left/dialogs/custom-section.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/dialogs/custom-section.tsx
@@ -15,6 +15,7 @@ import {
   RichInput,
 } from "@reactive-resume/ui";
 import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -36,6 +37,8 @@ export const CustomSectionDialog = () => {
     resolver: zodResolver(formSchema),
   });
 
+  const [pendingKeyword, setPendingKeyword] = useState("");
+
   if (!payload) return null;
 
   return (
@@ -43,6 +46,7 @@ export const CustomSectionDialog = () => {
       form={form}
       id={payload.id as DialogName}
       defaultValues={defaultCustomSection}
+      pendingKeyword={pendingKeyword}
     >
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         <FormField
@@ -144,7 +148,7 @@ export const CustomSectionDialog = () => {
               <FormItem>
                 <FormLabel>{t`Keywords`}</FormLabel>
                 <FormControl>
-                  <BadgeInput {...field} />
+                  <BadgeInput {...field} setPendingKeyword={setPendingKeyword} />
                 </FormControl>
                 <FormDescription>
                   {t`You can add multiple keywords by separating them with a comma or pressing enter.`}
diff --git a/apps/client/src/pages/builder/sidebars/left/dialogs/interests.tsx b/apps/client/src/pages/builder/sidebars/left/dialogs/interests.tsx
index 1486f259..d2bd09c7 100644
--- a/apps/client/src/pages/builder/sidebars/left/dialogs/interests.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/dialogs/interests.tsx
@@ -14,6 +14,7 @@ import {
   Input,
 } from "@reactive-resume/ui";
 import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -29,8 +30,15 @@ export const InterestsDialog = () => {
     resolver: zodResolver(formSchema),
   });
 
+  const [pendingKeyword, setPendingKeyword] = useState("");
+
   return (
-    <SectionDialog<FormValues> id="interests" form={form} defaultValues={defaultInterest}>
+    <SectionDialog<FormValues>
+      id="interests"
+      form={form}
+      defaultValues={defaultInterest}
+      pendingKeyword={pendingKeyword}
+    >
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         <FormField
           name="name"
@@ -54,7 +62,7 @@ export const InterestsDialog = () => {
               <FormItem>
                 <FormLabel>{t`Keywords`}</FormLabel>
                 <FormControl>
-                  <BadgeInput {...field} />
+                  <BadgeInput {...field} setPendingKeyword={setPendingKeyword} />
                 </FormControl>
                 <FormDescription>
                   {t`You can add multiple keywords by separating them with a comma or pressing enter.`}
diff --git a/apps/client/src/pages/builder/sidebars/left/dialogs/projects.tsx b/apps/client/src/pages/builder/sidebars/left/dialogs/projects.tsx
index 706ba7f0..08349492 100644
--- a/apps/client/src/pages/builder/sidebars/left/dialogs/projects.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/dialogs/projects.tsx
@@ -15,6 +15,7 @@ import {
   RichInput,
 } from "@reactive-resume/ui";
 import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -33,8 +34,15 @@ export const ProjectsDialog = () => {
     resolver: zodResolver(formSchema),
   });
 
+  const [pendingKeyword, setPendingKeyword] = useState("");
+
   return (
-    <SectionDialog<FormValues> id="projects" form={form} defaultValues={defaultProject}>
+    <SectionDialog<FormValues>
+      id="projects"
+      form={form}
+      defaultValues={defaultProject}
+      pendingKeyword={pendingKeyword}
+    >
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         <FormField
           name="name"
@@ -121,7 +129,7 @@ export const ProjectsDialog = () => {
               <FormItem>
                 <FormLabel>{t`Keywords`}</FormLabel>
                 <FormControl>
-                  <BadgeInput {...field} />
+                  <BadgeInput {...field} setPendingKeyword={setPendingKeyword} />
                 </FormControl>
                 <FormDescription>
                   {t`You can add multiple keywords by separating them with a comma or pressing enter.`}
diff --git a/apps/client/src/pages/builder/sidebars/left/dialogs/skills.tsx b/apps/client/src/pages/builder/sidebars/left/dialogs/skills.tsx
index 439a5dc9..70405b3e 100644
--- a/apps/client/src/pages/builder/sidebars/left/dialogs/skills.tsx
+++ b/apps/client/src/pages/builder/sidebars/left/dialogs/skills.tsx
@@ -15,6 +15,7 @@ import {
   Slider,
 } from "@reactive-resume/ui";
 import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -30,8 +31,15 @@ export const SkillsDialog = () => {
     resolver: zodResolver(formSchema),
   });
 
+  const [pendingKeyword, setPendingKeyword] = useState("");
+
   return (
-    <SectionDialog<FormValues> id="skills" form={form} defaultValues={defaultSkill}>
+    <SectionDialog<FormValues>
+      id="skills"
+      form={form}
+      defaultValues={defaultSkill}
+      pendingKeyword={pendingKeyword}
+    >
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         <FormField
           name="name"
@@ -98,7 +106,7 @@ export const SkillsDialog = () => {
               <FormItem>
                 <FormLabel>{t`Keywords`}</FormLabel>
                 <FormControl>
-                  <BadgeInput {...field} />
+                  <BadgeInput {...field} setPendingKeyword={setPendingKeyword} />
                 </FormControl>
                 <FormDescription>
                   {t`You can add multiple keywords by separating them with a comma or pressing enter.`}