Add question duplication feature (#10)

* Add question duplication feature * feat: use push&move apis from tanstack
DevLeonardoCommunity · Apr 29, 2024 · 4fca982 · 4fca982
1 parent 4a7a58d
commit 4fca982
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 1 deletion.
diff --git a/src/components/survey-generator/question-blocks/choice.tsx b/src/components/survey-generator/question-blocks/choice.tsx
@@ -22,6 +22,7 @@ import {
   ChevronDown,
   LucideIcon,
   X,
+  Copy,
 } from "lucide-react";
 import { useState } from "react";
 import {
@@ -65,6 +66,16 @@ const iconClassName = "text-muted-foreground";
 export const ChoiceFormField = ({ questionIndex, form }: Props) => {
   const [isVariantSelectorOpen, setIsVarianSelectorOpen] = useState(false);
 
+  const duplicateQuestion = () => {
+    const question = form.state.values.questions[questionIndex];
+    form.pushFieldValue("questions", { ...question, id: generateId() });
+    form.moveFieldValues(
+      "questions",
+      form.state.values.questions.length - 1,
+      questionIndex + 1
+    );
+  };
+
   return (
     <QuestionCard key={questionIndex}>
       <QuestionCardButtonsBar>
@@ -82,6 +93,10 @@ export const ChoiceFormField = ({ questionIndex, form }: Props) => {
           )}
         />
         <Separator orientation="vertical" />
+        <QuestionCardBarButton
+          onClick={duplicateQuestion}
+          children={<Copy />}
+        />
         <QuestionCardBarButton
           onClick={() => form.removeFieldValue(`questions`, questionIndex)}
           children={<X />}

diff --git a/src/components/survey-generator/question-blocks/text.tsx b/src/components/survey-generator/question-blocks/text.tsx
@@ -4,7 +4,7 @@ import { Switch } from "@/components/ui/switch";
 import { SurveyDefinition } from "@/types/survey";
 import { FormApi } from "@tanstack/react-form";
 import { valibotValidator } from "@tanstack/valibot-form-adapter";
-import { X } from "lucide-react";
+import { Copy, X } from "lucide-react";
 import {
   QuestionCard,
   QuestionCardBarButton,
@@ -14,13 +14,24 @@ import {
   QuestionCardTitle,
 } from "../question-card";
 import { Separator } from "@/components/ui/separator";
+import { generateId } from "@/lib/utils";
 
 type Props = {
   questionIndex: number;
   form: FormApi<SurveyDefinition, typeof valibotValidator>;
 };
 
 export const TextFormField = ({ questionIndex, form }: Props) => {
+  const duplicateQuestion = () => {
+    const question = form.state.values.questions[questionIndex];
+    form.pushFieldValue("questions", { ...question, id: generateId() });
+    form.moveFieldValues(
+      "questions",
+      form.state.values.questions.length - 1,
+      questionIndex + 1
+    );
+  };
+
   return (
     <QuestionCard>
       <QuestionCardButtonsBar>
@@ -38,6 +49,10 @@ export const TextFormField = ({ questionIndex, form }: Props) => {
           )}
         />
         <Separator orientation="vertical" />
+        <QuestionCardBarButton
+          onClick={duplicateQuestion}
+          children={<Copy />}
+        />
         <QuestionCardBarButton
           onClick={() => form.removeFieldValue(`questions`, questionIndex)}
           children={<X />}