Feature/Editing survey

Author: Ryczko

lib/axiosConfig.ts

@@ -19,13 +19,23 @@ export const postFetch = (url: string, data = {}) => {
     data,
   }).then((response) => response.data);
 };
+
 export const patchFetch = (url: string, data = {}) => {
   return instance({
     method: 'PATCH',
     url,
     data,
   }).then((response) => response.data);
 };
+
+export const putFetch = (url: string, data = {}) => {
+  return instance({
+    method: 'PUT',
+    url,
+    data,
+  }).then((response) => response.data);
+};
+
 export const deleteFetch = (url: string) => {
   return instance({
     method: 'DELETE',

locales/en/surveyCreate.json

@@ -2,7 +2,12 @@
   "title": "Create Survey",
   "content": "Create Survey - FormsLab",
   "heading": "Create new survey",
+  "editHeading": "Edit survey",
   "buttonCreate": "Create Survey",
+  "editNote": "Some action like adding and removing questions or changing answers are not available in edit mode.",
+  "editNoteTitle": "Note",
+  "buttonSave": "Save changes",
+  "discardChanges": "Discard changes",
   "surveyTitleLable": "Survey Title",
   "surveyTitlePlaceholder": "Survey Title...",
   "questionPlaceholder": "Question...",

prisma/schema.prisma

@@ -71,8 +71,8 @@ model Survey {
   description String?
   questions   Question[]
   answers     Answer[]
-  oneQuestionPerStep Boolean?
-  displayTitle Boolean?
+  oneQuestionPerStep Boolean
+  displayTitle Boolean
 
   user User @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
@@ -86,6 +86,7 @@ model Question {
   type        QuestionType
   isRequired  Boolean
   options     String[]
+  order       Int
 
   survey Survey @relation(fields: [surveyId], references: [id], onDelete: Cascade)
 }

public/images/creator.webp

@@ -14,7 +14,7 @@ interface AddQuestionButtonProps {
 export const AddQuestionButton = ({ onClick }: AddQuestionButtonProps) => {
   const { closeModal, isModalOpen, openModal } = useModal();
   return (
-    <div className="mt-4">
+    <div className="mb-2">
       <Button
         onClick={openModal}
         variant={ButtonVariant.OUTLINE}

src/features/surveys/components/AddQuestionButton/AddQuestionButton.tsx

@@ -33,6 +33,7 @@ interface QuestionBlockFactoryProps {
   dragHandleProps: DraggableProvidedDragHandleProps | null | undefined;
   expanded: boolean;
   expandQuestion: (questionIndex: number) => void;
+  isEditMode: boolean;
 }
 
 export default function QuestionBlockFactory({
@@ -53,6 +54,7 @@ export default function QuestionBlockFactory({
   dragHandleProps,
   expanded,
   expandQuestion,
+  isEditMode,
 }: QuestionBlockFactoryProps) {
   return (
     <QuestionBlockWrapper
@@ -69,6 +71,7 @@ export default function QuestionBlockFactory({
       expanded={expanded}
       expandQuestion={expandQuestion}
       type={type}
+      isEditMode={isEditMode}
     >
       {type === QuestionType.RATE && <RateQuestionBlock />}
       {type === QuestionType.INPUT && <InputQuestionBlock />}

src/features/surveys/components/QuestionBlocks/QuestionBlockFactory.tsx

@@ -27,6 +27,7 @@ interface QuestionBlockWrapperProps {
   expanded: boolean;
   expandQuestion: (questionIndex: number) => void;
   type: QuestionType;
+  isEditMode: boolean;
 }
 
 export default function QuestionBlockWrapper({
@@ -44,6 +45,7 @@ export default function QuestionBlockWrapper({
   expanded,
   expandQuestion,
   type,
+  isEditMode,
 }: PropsWithChildren<QuestionBlockWrapperProps>) {
   const { t } = useTranslation('surveyCreate');
 
@@ -122,8 +124,9 @@ export default function QuestionBlockWrapper({
               {isRemovingPossible && (
                 <button
                   onClick={removeQuestion}
+                  disabled={isEditMode}
                   data-test-id={`remove-question-${index}`}
-                  className="cursor-pointer rounded-md border bg-white p-[13px] shadow-sm hover:scale-95"
+                  className="cursor-pointer rounded-md border bg-white p-[13px] shadow-sm hover:scale-95 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:scale-100"
                 >
                   <TrashIcon className="w-[15px] text-red-700" />
                 </button>
@@ -135,7 +138,15 @@ export default function QuestionBlockWrapper({
 
       {expanded && (
         <div className="mb-4 px-3">
-          {children}
+          {isEditMode ? (
+            <div className="relative opacity-50">
+              <div className="absolute z-50 h-full w-full cursor-not-allowed"></div>
+
+              {children}
+            </div>
+          ) : (
+            children
+          )}
 
           <div className="mt-2 flex justify-end border-t">
             <Toggle

src/features/surveys/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx

@@ -33,7 +33,7 @@ export default function ShareSurveyModal({
       content={
         <>
           <div className="mt-4">
-            <span className="scrollbar-hide block w-full select-all overflow-x-auto rounded-md border border-gray-300 px-3 py-2 text-center text-sm focus:outline-none">
+            <span className="scrollbar-hide block w-full select-all overflow-x-auto whitespace-nowrap rounded-md border border-gray-300 px-3 py-2 text-center text-sm focus:outline-none">
               {link}
             </span>
           </div>

src/features/surveys/components/ShareSurveryModal/ShareSurveyModal.tsx

@@ -46,7 +46,7 @@ export default function SurveyRow({
   return (
     <div className="mb-4 flex w-full flex-col md:flex-row">
       <div className="flex w-full items-center justify-between rounded-md bg-white px-4 py-3 shadow-sm">
-        <div title={question} className="w-40 truncate text-left">
+        <div title={question} className="w-40 truncate text-left md:w-60">
           {question}
         </div>
         <div className="hidden items-center space-x-2 text-sm xsm:flex">

src/features/surveys/components/SurveyRow/SurveyRow.tsx

@@ -4,9 +4,11 @@ import toast from 'react-hot-toast';
 import useCopyToClipboard from 'shared/hooks/useCopyToClipboard';
 import useTranslation from 'next-translate/useTranslation';
 import { QuestionType } from '@prisma/client';
-import { postFetch } from '../../../../lib/axiosConfig';
+import { postFetch, putFetch } from '../../../../lib/axiosConfig';
 import { defaultQuestions } from 'shared/constants/surveysConfig';
 import { DRAFT_SURVEY_SESSION_STORAGE } from 'shared/constants/app';
+import { SurveyWithQuestions } from 'types/SurveyWithQuestions';
+import { Question as QuestionDto } from '@prisma/client';
 
 export interface Question {
   id: string;
@@ -22,19 +24,32 @@ export interface SurveyOptions {
   displayTitle: boolean;
 }
 
-export const useCreateSurveyManager = () => {
-  const [title, setTitle] = useState('');
-  const [questions, setQuestions] = useState<Question[]>(defaultQuestions);
+export const useCreateSurveyManager = (initialData?: SurveyWithQuestions) => {
+  const [isEditMode] = useState(!!initialData);
+
+  const [title, setTitle] = useState(initialData?.title ?? '');
+
+  const mapQuestionsWithExpanded = (questions?: QuestionDto[]) => {
+    return questions?.map((question) => ({
+      ...question,
+      expanded: false,
+    }));
+  };
+
+  const [questions, setQuestions] = useState<Question[]>(
+    mapQuestionsWithExpanded(initialData?.questions) ?? defaultQuestions
+  );
+  const [surveyOptions, setSurveyOptions] = useState<SurveyOptions>({
+    oneQuestionPerStep: initialData?.oneQuestionPerStep ?? true,
+    displayTitle: initialData?.displayTitle ?? true,
+  });
+
   const [error, setError] = useState('');
   const [isCreating, setIsCreating] = useState(false);
   const [isSubmitted, setIsSubmitted] = useState(false);
   const router = useRouter();
   const { copy } = useCopyToClipboard();
   const { t } = useTranslation('surveyCreate');
-  const [surveyOptions, setSurveyOptions] = useState<SurveyOptions>({
-    oneQuestionPerStep: true,
-    displayTitle: true,
-  });
 
   const signInToCreateSurvey = () => {
     router.push('/login');
@@ -249,6 +264,40 @@ export const useCreateSurveyManager = () => {
     setIsCreating(false);
   };
 
+  const confirmEditSurvey = async () => {
+    if (!isSurveyValid() || !initialData) return;
+
+    setIsCreating(true);
+
+    try {
+      const newSurvey = await putFetch(`/api/survey/${initialData.id}`, {
+        title,
+        oneQuestionPerStep: surveyOptions.oneQuestionPerStep,
+        displayTitle: surveyOptions.displayTitle,
+        questions: questions.map((question) => ({
+          id: question.id,
+          title: question.title,
+          options: question.options,
+          type: question.type,
+          isRequired: question.isRequired,
+        })),
+      });
+
+      await router.push(`/survey/answer/${newSurvey.id}`, undefined, {
+        scroll: false,
+      });
+    } catch (error) {
+      toast.error(t('surveyCreationFailed'));
+    }
+    setIsCreating(false);
+  };
+
+  const discardChanges = () => {
+    router.push(`/survey/answer/${initialData?.id}`, undefined, {
+      scroll: false,
+    });
+  };
+
   const reorderQuestion = (startIndex: number, endIndex: number) => {
     const newOrderedQuestions = Array.from(questions);
 
@@ -288,5 +337,8 @@ export const useCreateSurveyManager = () => {
     surveyOptions,
     updateSurveyOptions,
     signInToCreateSurvey,
+    isEditMode,
+    confirmEditSurvey,
+    discardChanges,
   };
 };