feat: fix and add recall from previous questions with recall string

2026-04-20 19:30:41 -05:00 · 2023-11-23 18:49:59 +05:30
parent f4f55481d6
commit 41e56c0651
11 changed files with 55 additions and 17 deletions
@@ -38,6 +38,7 @@ export default function CTAQuestionForm({
        question={question}
        questionIdx={questionIdx}
        updateQuestion={updateQuestion}
+        localSurvey={localSurvey}
      />

      <div className="mt-3">
@@ -34,6 +34,7 @@ export default function ConsentQuestionForm({
        question={question}
        questionIdx={questionIdx}
        updateQuestion={updateQuestion}
+        localSurvey={localSurvey}
      />

      <div className="mt-3">
@@ -170,6 +170,7 @@ export default function MultipleChoiceMultiForm({
        question={question}
        questionIdx={questionIdx}
        updateQuestion={updateQuestion}
+        localSurvey={localSurvey}
      />

      <div className="mt-3">
@@ -170,6 +170,7 @@ export default function MultipleChoiceSingleForm({
        question={question}
        questionIdx={questionIdx}
        updateQuestion={updateQuestion}
+        localSurvey={localSurvey}
      />

      <div className="mt-3">
@@ -36,6 +36,7 @@ export default function NPSQuestionForm({
        question={question}
        questionIdx={questionIdx}
        updateQuestion={updateQuestion}
+        localSurvey={localSurvey}
      />

      <div className="mt-3">
@@ -59,6 +59,7 @@ export default function OpenQuestionForm({
        question={question}
        questionIdx={questionIdx}
        updateQuestion={updateQuestion}
+        localSurvey={localSurvey}
      />

      <div className="mt-3">
@@ -38,6 +38,7 @@ export default function PictureSelectionForm({
        question={question}
        questionIdx={questionIdx}
        updateQuestion={updateQuestion}
+        localSurvey={localSurvey}
      />
      <div className="mt-3">
        {showSubheader && (
@@ -1,11 +1,11 @@
 "use client";

-import { TSurveyQuestion } from "@formbricks/types/surveys";
+import { TSurveyQuestion, TSurvey } from "@formbricks/types/surveys";
 import FileInput from "@formbricks/ui/FileInput";
 // import { Input } from "@formbricks/ui/Input";
 import { Label } from "@formbricks/ui/Label";
 import { ImagePlusIcon } from "lucide-react";
-import { RefObject, useState } from "react";
+import { RefObject, useEffect, useState } from "react";
 import { MentionsInput, Mention } from "react-mentions";

 interface QuestionFormInputProps {
@@ -15,25 +15,45 @@ interface QuestionFormInputProps {
  isInValid: boolean;
  environmentId: string;
  ref?: RefObject<HTMLInputElement>;
+  localSurvey: TSurvey;
 }

 const QuestionFormInput = ({
  question,
+  localSurvey,
  questionIdx,
  updateQuestion,
-  isInValid,
+  // isInValid,
  environmentId,
-  ref,
-}: QuestionFormInputProps) => {
+}: // ref,
+QuestionFormInputProps) => {
  const [showImageUploader, setShowImageUploader] = useState<boolean>(!!question.imageUrl);
+  const [mentionDisplayString, setMentionDisplayString] = useState<string>(question.headline);
+  const [prevHeadline, setPreviousHeadline] = useState<string>("");
+  const [data, setData] = useState<
+    {
+      id: string;
+      display: string;
+    }[]
+  >();

-  const data = [
-    { id: "question 1", display: "question 1" },
-    { id: "question 2", display: "question 2" },
-    { id: "question 3", display: "question 3" },
-    { id: "question 4", display: "question 4" },
-    { id: "question 5", display: "question 5" },
-  ];
+  useEffect(() => {
+    setData(
+      localSurvey.questions.map((q) => {
+        if (question.id !== q.id)
+          return {
+            id: q.id,
+            display: q.headline,
+          };
+        else {
+          return {
+            id: "",
+            display: "",
+          };
+        }
+      })
+    );
+  }, [localSurvey, question]);

  return (
    <div className="mt-3">
@@ -65,11 +85,13 @@ const QuestionFormInput = ({
            // ref={ref}
            id="headline"
            name="headline"
-            value={question.headline}
-            onChange={(event) => {
+            value={mentionDisplayString}
+            onChange={(event, _, newPlainTextValue) => {
+              setPreviousHeadline(question.headline);
              updateQuestion(questionIdx, {
-                headline: event.target.value,
+                headline: newPlainTextValue,
              });
+              setMentionDisplayString(event.target.value);
            }}
            style={{
              width: "100%",
@@ -93,11 +115,16 @@ const QuestionFormInput = ({
              },
            }}>
            <Mention
-              data={data}
+              data={data || []}
              trigger="@"
              appendSpaceOnAdd
              markup="[__display__]"
              displayTransform={(_, display: string) => display}
+              onAdd={(id: string) => {
+                updateQuestion(questionIdx, {
+                  recallString: prevHeadline + "recall:" + id,
+                });
+              }}
              style={{
                backgroundColor: "#cee4e5",
                padding: "0.2rem",
@@ -182,6 +182,8 @@ export default function QuestionsView({
    setLocalSurvey(updatedSurvey);
  };

+  console.log(localSurvey.questions);
+
  return (
    <div className="mt-12 px-5 py-4">
      <div className="mb-5 flex flex-col gap-5">
@@ -1,4 +1,4 @@
-import { TSurvey, TSurveyRatingQuestion } from "@formbricks/types/surveys";
+import { TSurvey, TSurveyRatingQuestion, TSurveyQuestions } from "@formbricks/types/surveys";
 import QuestionFormInput from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionFormInput";
 import { Button } from "@formbricks/ui/Button";
 import { Input } from "@formbricks/ui/Input";
@@ -36,6 +36,7 @@ export default function RatingQuestionForm({
        question={question}
        questionIdx={questionIdx}
        updateQuestion={updateQuestion}
+        localSurvey={localSurvey}
      />

      <div className="mt-3">
@@ -204,6 +204,7 @@ const ZSurveyQuestionBase = z.object({
  range: z.union([z.literal(5), z.literal(3), z.literal(4), z.literal(7), z.literal(10)]).optional(),
  logic: z.array(ZSurveyLogic).optional(),
  isDraft: z.boolean().optional(),
+  recallString: z.string().optional(),
 });

 export const ZSurveyOpenTextQuestionInputType = z.enum(["text", "email", "url", "number", "phone"]);