From a621ebcc2d7d30fbcce7564b3017a365a9d304b6 Mon Sep 17 00:00:00 2001
From: Christa <dushime@sas.upenn.edu>
Date: Tue, 2 Jul 2024 11:25:27 -0400
Subject: [PATCH] fixed bugs related editTreatment

---
 src/app/editor/components/EditElement.tsx | 205 ++++++++++------------
 src/app/editor/components/EditStage.tsx   | 134 +++++++-------
 src/app/editor/components/ElementCard.tsx |  67 ++++---
 src/app/editor/components/StageCard.tsx   | 121 ++++++-------
 src/app/editor/components/Timeline.tsx    |   2 +-
 5 files changed, 256 insertions(+), 273 deletions(-)

diff --git a/src/app/editor/components/EditElement.tsx b/src/app/editor/components/EditElement.tsx
index 925b116..560973a 100644
--- a/src/app/editor/components/EditElement.tsx
+++ b/src/app/editor/components/EditElement.tsx
@@ -1,12 +1,12 @@
-import React, { useState } from "react";
-import { useForm } from "react-hook-form";
+import React, { useState } from 'react'
+import { useForm } from 'react-hook-form'
 import {
   TreatmentType,
   ElementType,
   elementSchema,
-} from "@/../deliberation-empirica/server/src/preFlight/validateTreatmentFile";
-import { zodResolver } from "@hookform/resolvers/zod";
-import * as zod from "zod";
+} from '@/../deliberation-empirica/server/src/preFlight/validateTreatmentFile'
+import { zodResolver } from '@hookform/resolvers/zod'
+import * as zod from 'zod'
 
 export function EditElement({
   treatment,
@@ -14,14 +14,11 @@ export function EditElement({
   stageIndex,
   elementIndex,
 }: {
-  treatment: TreatmentType;
-  editTreatment: (treatment : TreatmentType) => void;
-  stageIndex: number;
-  elementIndex: number;
+  treatment: TreatmentType
+  editTreatment: (treatment: TreatmentType) => void
+  stageIndex: number
+  elementIndex: number
 }) {
-  //const [isValid, setIsValid] = useState(true)
-  //var element: ElementType = treatment.gameStages[stageIndex].elements[elementIndex];  // if elementIndex is undefine, is the whole thing undefined? or does it error?
-
   const {
     register,
     watch,
@@ -32,97 +29,73 @@ export function EditElement({
     elementIndex !== undefined
       ? {
           defaultValues: {
-            name: treatment.gameStages[stageIndex]?.elements?.[elementIndex]?.name,
-            type: treatment.gameStages[stageIndex]?.elements?.[elementIndex]?.type,
-            file: treatment.gameStages[stageIndex]?.elements?.[elementIndex]?.file,
+            name: treatment.gameStages[stageIndex]?.elements?.[elementIndex]
+              ?.name,
+            type: treatment.gameStages[stageIndex]?.elements?.[elementIndex]
+              ?.type,
+            file: treatment.gameStages[stageIndex]?.elements?.[elementIndex]
+              ?.file,
           },
           resolver: zodResolver(elementSchema),
-          mode: "onChange",
+          mode: 'onChange',
         }
       : {}
-  );
-
+  )
 
-  console.log(typeof editTreatment); // Here it's a function 
   function saveEdits() {
-    //console.log(typeof editTreatment); // here it's undefined 
     try {
-      const updatedTreatment = JSON.parse(JSON.stringify(treatment)); // deep copy
-      if (isValid) {
-        //console.log("HEEERREEE")
-        if (stageIndex === undefined) {
-          throw new Error("No stage index given");
-        }
-        if (elementIndex === undefined) {
-          updatedTreatment.gameStages[stageIndex].elements.push({
-            name: watch("name"),
-            type: watch("type"),
-            file: watch("file"),
-            //TODO: to add more fields here
-          });
-        } else {
-          updatedTreatment.gameStages[stageIndex].elements[elementIndex].name =
-            watch("name");
-          updatedTreatment.gameStages[stageIndex].elements[elementIndex].type =
-            watch("type");
-          updatedTreatment.gameStages[stageIndex].elements[elementIndex].file =
-            watch("file");
-          // TODO: add more fields here
-        }
-        console.log(typeof editTreatment);
-      editTreatment(updatedTreatment);
+      const updatedTreatment = JSON.parse(JSON.stringify(treatment)) // deep copy
+
+      if (stageIndex === undefined) {
+        throw new Error('No stage index given')
+      }
+
+      if (elementIndex === undefined) {
+        updatedTreatment.gameStages[stageIndex].elements.push({
+          name: watch('name'),
+          type: watch('type'),
+          file: watch('file'),
+          //TODO: to add more fields here
+        })
       } else {
-        throw new Error("Form is not valid");
+        updatedTreatment.gameStages[stageIndex].elements[elementIndex].name =
+          watch('name')
+        updatedTreatment.gameStages[stageIndex].elements[elementIndex].type =
+          watch('type')
+        updatedTreatment.gameStages[stageIndex].elements[elementIndex].file =
+          watch('file')
+        // TODO: add more fields here
       }
+      editTreatment(updatedTreatment)
     } catch (error) {
-      console.error(error);
+      console.error(error)
     }
   }
 
-    // const parseResult = elementSchema.safeParse({
-    //     name: watch("name"),
-    //     type: watch("type"),
-    //     file: watch("file"),
-    //     url: watch("url"),
-    //     params: watch("params"),
-    //     style: watch("style"),
-    //     buttonText: watch("buttonText"),
-    //     startTime: watch("startTime"),
-    //     endTime: watch("endTime")
-    //   })
-    // if (!parseResult.success) {
-    // console.log(parseResult.error)
-    // window.alert( parseResult.error )
-    // setIsValid(false);
-    // return;
-    // }
-
-    //setIsValid(true);
-
   function deleteElement() {
     const confirm = window.confirm(
-      "Are you sure you want to delete the element?"
-    );
+      'Are you sure you want to delete the element?'
+    )
     if (confirm) {
-      const updatedTreatment = JSON.parse(JSON.stringify(treatment)); // deep copy
-      updatedTreatment.gameStages[stageIndex].elements.splice(elementIndex, 1); // delete in place
-      editTreatment(updatedTreatment);
+      const updatedTreatment = JSON.parse(JSON.stringify(treatment)) // deep copy
+      updatedTreatment.gameStages[stageIndex].elements.splice(elementIndex, 1) // delete in place
+      editTreatment(updatedTreatment)
     }
   }
 
   // FORM QUESTIONS
-  const htmlElements = [];
+  const htmlElements = []
   htmlElements.push(
-    <form onSubmit={handleSubmit(saveEdits())}>
+    <form onSubmit={handleSubmit(saveEdits)}>
       <div>
         <label className="form-control w-full max-w-xs">
           <div className="label">
-            <span className="label-text">{"Name"}</span>
+            <span className="label-text">{'Name'}</span>
           </div>
           <input
-            {...register("name", { required: true })}
+            {...register('name', { required: true })}
             data-cy={`edit-element-name-stage${stageIndex}-element${
-              elementIndex || "new"
+              elementIndex || 'new'
             }`}
             placeholder="Enter text here."
             className="input input-bordered w-full max-w-xs"
@@ -136,12 +109,12 @@ export function EditElement({
       <div>
         <label className="form-control w-full max-w-xs">
           <div className="label">
-            <span className="label-text">{"Type"}</span>
+            <span className="label-text">{'Type'}</span>
           </div>
           <select
-            {...register("type", { required: true })}
+            {...register('type', { required: true })}
             data-cy={`edit-element-type-stage${stageIndex}-element${
-              elementIndex || "new"
+              elementIndex || 'new'
             }`}
             className="select select-bordered"
           >
@@ -158,16 +131,16 @@ export function EditElement({
         </label>
       </div>
 
-      {(watch("type") === "prompt" || watch("type") === "audioElement") && (
+      {(watch('type') === 'prompt' || watch('type') === 'audioElement') && (
         <div>
           <label className="form-control w-full max-w-xs">
             <div className="label">
-              <span className="label-text">{"File Address"}</span>
+              <span className="label-text">{'File Address'}</span>
             </div>
             <input
-              {...register("file", { required: true })}
+              {...register('file', { required: true })}
               data-cy={`edit-element-file-stage${stageIndex}-element${
-                elementIndex || "new"
+                elementIndex || 'new'
               }`}
               placeholder="Enter number here."
               className="input input-bordered w-full max-w-xs"
@@ -179,17 +152,17 @@ export function EditElement({
         </div>
       )}
 
-      {watch("selectedOption") === "kitchenTimer" && (
+      {watch('selectedOption') === 'kitchenTimer' && (
         <div>
           <div>
             <label className="form-control w-full max-w-xs">
               <div className="label">
-                <span className="label-text">{"Start Time"}</span>
+                <span className="label-text">{'Start Time'}</span>
               </div>
               <input
-                {...register("startTime", { required: true })}
+                {...register('startTime', { required: true })}
                 data-cy={`edit-element-start-time-stage${stageIndex}-element${
-                  elementIndex || "new"
+                  elementIndex || 'new'
                 }`}
                 placeholder="Enter text here."
                 className="input input-bordered w-full max-w-xs"
@@ -199,12 +172,12 @@ export function EditElement({
           <div>
             <label className="form-control w-full max-w-xs">
               <div className="label">
-                <span className="label-text">{"End Time"}</span>
+                <span className="label-text">{'End Time'}</span>
               </div>
               <input
-                {...register("endTime", { required: true })}
+                {...register('endTime', { required: true })}
                 data-cy={`edit-element-end-time-stage${stageIndex}-element${
-                  elementIndex || "new"
+                  elementIndex || 'new'
                 }`}
                 placeholder="Enter text here."
                 className="input input-bordered w-full max-w-xs"
@@ -214,17 +187,17 @@ export function EditElement({
         </div>
       )}
 
-      {(watch("selectedOption") === "qualtrics" ||
-        watch("selectedOption") === "trainingVideo") && (
+      {(watch('selectedOption') === 'qualtrics' ||
+        watch('selectedOption') === 'trainingVideo') && (
         <div>
           <label className="form-control w-full max-w-xs">
             <div className="label">
-              <span className="label-text">{"URL"}</span>
+              <span className="label-text">{'URL'}</span>
             </div>
             <input
-              {...register("url", { required: true })}
+              {...register('url', { required: true })}
               data-cy={`edit-element-url-stage${stageIndex}-element${
-                elementIndex || "new"
+                elementIndex || 'new'
               }`}
               placeholder="Enter text here."
               className="input input-bordered w-full max-w-xs"
@@ -233,16 +206,16 @@ export function EditElement({
         </div>
       )}
 
-      {watch("selectedOption") === "qualtrics" && (
+      {watch('selectedOption') === 'qualtrics' && (
         <div>
           <label className="form-control w-full max-w-xs">
             <div className="label">
-              <span className="label-text">{"Parameters"}</span>
+              <span className="label-text">{'Parameters'}</span>
             </div>
             <input
-              {...register("params", { required: true })}
+              {...register('params', { required: true })}
               data-cy={`edit-element-params-stage${stageIndex}-element${
-                elementIndex || "new"
+                elementIndex || 'new'
               }`}
               placeholder="Enter text here."
               className="input input-bordered w-full max-w-xs"
@@ -251,16 +224,16 @@ export function EditElement({
         </div>
       )}
 
-      {watch("selectedOption") === "separator" && (
+      {watch('selectedOption') === 'separator' && (
         <div>
           <label className="form-control w-full max-w-xs">
             <div className="label">
-              <span className="label-text">{"Style"}</span>
+              <span className="label-text">{'Style'}</span>
             </div>
             <input
-              {...register("style", { required: true })}
+              {...register('style', { required: true })}
               data-cy={`edit-element-style-stage${stageIndex}-element${
-                elementIndex || "new"
+                elementIndex || 'new'
               }`}
               placeholder="Enter text here."
               className="input input-bordered w-full max-w-xs"
@@ -269,16 +242,16 @@ export function EditElement({
         </div>
       )}
 
-      {watch("selectedOption") === "submitButton" && (
+      {watch('selectedOption') === 'submitButton' && (
         <div>
           <label className="form-control w-full max-w-xs">
             <div className="label">
-              <span className="label-text">{"Button Text"}</span>
+              <span className="label-text">{'Button Text'}</span>
             </div>
             <input
-              {...register("buttonText", { required: true })}
+              {...register('buttonText', { required: true })}
               data-cy={`edit-element-button-text-stage${stageIndex}-element${
-                elementIndex || "new"
+                elementIndex || 'new'
               }`}
               placeholder="Enter text here."
               className="input input-bordered w-full max-w-xs"
@@ -287,19 +260,19 @@ export function EditElement({
         </div>
       )}
     </form>
-  );
+  )
 
   return (
     <div>
-      <h1>{elementIndex !== undefined ? "Edit Element" : "Add Element"}</h1>
+      <h1>{elementIndex !== undefined ? 'Edit Element' : 'Add Element'}</h1>
       {htmlElements}
       <button
         data-cy={`save-edits-stage-${stageIndex}-element-${
-          elementIndex || "new"
+          elementIndex || 'new'
         }`}
         className="btn btn-primary"
-        style={{ margin: "10px" }}
-        onClick={saveEdits()}
+        style={{ margin: '10px' }}
+        onClick={saveEdits}
         disabled={!isValid}
       >
         Save
@@ -308,14 +281,14 @@ export function EditElement({
       {/* Todo: Do we want to hide the delete button when creating a new element? */}
       <button
         data-cy={`delete-element-stage-${stageIndex}-element-${
-          elementIndex || "new"
+          elementIndex || 'new'
         }`}
         className="btn btn-secondary"
-        style={{ margin: "10px" }}
+        style={{ margin: '10px' }}
         onClick={deleteElement}
       >
-        {"Delete"}
+        {'Delete'}
       </button>
     </div>
-  );
+  )
 }
diff --git a/src/app/editor/components/EditStage.tsx b/src/app/editor/components/EditStage.tsx
index 0bf15ef..773c213 100644
--- a/src/app/editor/components/EditStage.tsx
+++ b/src/app/editor/components/EditStage.tsx
@@ -1,138 +1,150 @@
-import React from "react";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { TreatmentType, stageSchema, StageType} from "@/../deliberation-empirica/server/src/preFlight/validateTreatmentFile";
-import { zodResolver } from '@hookform/resolvers/zod';
-import * as zod from 'zod'; 
+import React from 'react'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import {
+  TreatmentType,
+  stageSchema,
+  StageType,
+} from '@/../deliberation-empirica/server/src/preFlight/validateTreatmentFile'
+import { zodResolver } from '@hookform/resolvers/zod'
+import * as zod from 'zod'
 
 export function EditStage({
   treatment,
   editTreatment,
   stageIndex, // a number if the stage already exists, otherwise undefined
 }: {
-  treatment: TreatmentType;
-  editTreatment: (treatment : TreatmentType) => void;
-  stageIndex: number;
+  treatment: TreatmentType
+  editTreatment: (treatment: TreatmentType) => void
+  stageIndex: number
 }) {
-
-  const { register, watch, handleSubmit, setValue, formState: {isValid, errors} } = useForm<StageType>(
+  const {
+    register,
+    watch,
+    handleSubmit,
+    setValue,
+    formState: { isValid, errors },
+  } = useForm<StageType>(
     stageIndex !== undefined
       ? {
           defaultValues: {
             name: treatment.gameStages[stageIndex].name,
             duration: treatment.gameStages[stageIndex].duration,
           },
-          resolver: zodResolver(stageSchema),
-          mode: "onChange"
+          resolver: zodResolver<StageType>(stageSchema),
+          mode: 'onChange',
         }
       : {}
-  );
+  )
 
-  console.log(typeof editTreatment);
   async function saveEdits() {
     try {
-    const updatedTreatment = JSON.parse(JSON.stringify(treatment)); // deep copy
-    console.log("Hereeee");
-    console.log(typeof editTreatment);
-    if (isValid){
-      console.log("Form is valid");
-      if (stageIndex === undefined) { // create new stage
-      updatedTreatment?.gameStages?.push({
-        name: watch("name"),
-        duration: watch("duration"),
-        // todo: add discussion component
-        elements: [],
-      });
-      } else { // modify existing stage
-      updatedTreatment.gameStages[stageIndex].name = watch("name");
-      updatedTreatment.gameStages[stageIndex].duration = watch("duration");
-      // todo: add discussion component
+      const updatedTreatment = JSON.parse(JSON.stringify(treatment)) // deep copy
+      if (isValid) {
+        console.log('Form is valid')
+        if (stageIndex === undefined) {
+          // create new stage
+          updatedTreatment?.gameStages?.push({
+            name: watch('name'),
+            duration: watch('duration'),
+            // todo: add discussion component
+            elements: [],
+          })
+        } else {
+          // modify existing stage
+          updatedTreatment.gameStages[stageIndex].name = watch('name')
+          updatedTreatment.gameStages[stageIndex].duration = watch('duration')
+          // todo: add discussion component
+        }
+        console.log(typeof editTreatment)
+        editTreatment(updatedTreatment)
+      } else {
+        throw new Error('Form is not valid')
       }
-      console.log(typeof editTreatment);
-    editTreatment(updatedTreatment);
-    } else {
-    throw new Error("Form is not valid");
+    } catch (error) {
+      console.error(error)
     }
-  } catch (error) {
-    console.error(error);  
   }
-}
 
   function deleteStage() {
     const confirm = window.confirm(
-      "Are you sure you want to delete the stage and all its contents"
-    );
+      'Are you sure you want to delete the stage and all its contents'
+    )
     if (confirm) {
-      const updatedTreatment = JSON.parse(JSON.stringify(treatment)); // deep copy
-      updatedTreatment.gameStages.splice(stageIndex, 1); // delete in place
-      editTreatment(updatedTreatment);
+      const updatedTreatment = JSON.parse(JSON.stringify(treatment)) // deep copy
+      updatedTreatment.gameStages.splice(stageIndex, 1) // delete in place
+      editTreatment(updatedTreatment)
     }
   }
 
   // ----------- Form Questions -----------------
 
-  const htmlElements = [];
+  const htmlElements = []
   htmlElements.push(
     <form onSubmit={handleSubmit(saveEdits)}>
       <div>
         <label className="form-control w-full max-w-xs">
           <div className="label">
-            <span className="label-text">{"Name"}</span>
+            <span className="label-text">{'Name'}</span>
           </div>
           <input
-            {...register("name", { required: true })}
-            data-cy={`edit-stage-name-${stageIndex || "new"}`}
+            {...register('name', { required: true })}
+            data-cy={`edit-stage-name-${stageIndex || 'new'}`}
             placeholder="Enter text here."
             className="input input-bordered w-full max-w-xs"
           />
-          {errors.name && <span className="text-red-500">{errors.name.message}</span>}
+          {errors.name && (
+            <span className="text-red-500">{errors.name.message}</span>
+          )}
         </label>
       </div>
 
       <div>
         <label className="form-control w-full max-w-xs">
           <div className="label">
-            <span className="label-text">{"Duration"}</span>
+            <span className="label-text">{'Duration'}</span>
           </div>
           <input
-            {...register("duration", { required: true, valueAsNumber: true })}
-            data-cy={`edit-stage-duration-${stageIndex || "new"}`}
+            {...register('duration', { required: true, valueAsNumber: true })}
+            data-cy={`edit-stage-duration-${stageIndex || 'new'}`}
             placeholder="Enter number here."
             className="input input-bordered w-full max-w-xs"
             type="number"
           />
-          {errors.duration && <span className="text-red-500">{errors.duration.message}</span>}
+          {errors.duration && (
+            <span className="text-red-500">{errors.duration.message}</span>
+          )}
         </label>
       </div>
     </form>
-  );
+  )
 
   //console.log(watch()); // WATCH ALL INPUTS
 
   return (
     <div>
-      <h1>{stageIndex !== undefined ? "Edit Stage": "Add Stage" }</h1>
+      <h1>{stageIndex !== undefined ? 'Edit Stage' : 'Add Stage'}</h1>
       {htmlElements}
 
       <button
-        data-cy={`save-edits-stage-${stageIndex || "new"}`}
+        data-cy={`save-edits-stage-${stageIndex || 'new'}`}
         className="btn btn-primary"
-        style={{ margin: "10px" }}
+        style={{ margin: '10px' }}
         onClick={saveEdits}
-        disabled={watch("duration") === 0|| watch("name") === ""}
+        disabled={watch('duration') === 0 || watch('name') === ''}
       >
         Save
       </button>
 
-{/* Todo: Do we want to hide the delete button when creating a new stage? */}
+      {/* Todo: Do we want to hide the delete button when creating a new stage? */}
       <button
-        data-cy={`delete-stage-${stageIndex || "new"}`}
+        data-cy={`delete-stage-${stageIndex || 'new'}`}
         className="btn btn-secondary"
-        style={{ margin: "10px" }}
+        style={{ margin: '10px' }}
         onClick={deleteStage}
       >
         Delete
       </button>
     </div>
-  );
+  )
 }
diff --git a/src/app/editor/components/ElementCard.tsx b/src/app/editor/components/ElementCard.tsx
index 295491e..2cd5352 100644
--- a/src/app/editor/components/ElementCard.tsx
+++ b/src/app/editor/components/ElementCard.tsx
@@ -1,9 +1,9 @@
-import React, {useState} from "react";
-import { Element } from "./Element";
-import AddPopup from "./AddPopup";
-import { Modal } from "./Modal"
-import { EditElement } from "./EditElement"
-import { TreatmentType } from "@/../deliberation-empirica/server/src/preFlight/validateTreatmentFile";
+import React, { useState } from 'react'
+import { Element } from './Element'
+import AddPopup from './AddPopup'
+import { Modal } from './Modal'
+import { EditElement } from './EditElement'
+import { TreatmentType } from '@/../deliberation-empirica/server/src/preFlight/validateTreatmentFile'
 
 export function ElementCard({
   element,
@@ -16,52 +16,49 @@ export function ElementCard({
   editTreatment,
   elementOptions,
 }: {
-  element: any;
-  scale: number;
-  stageDuration: number;
-  onSubmit: any;
-  stageIndex: number;
-  elementIndex: number;
-  treatment: any;
-  editTreatment: (treatment : TreatmentType) => void;
-  elementOptions: any;
+  element: any
+  scale: number
+  stageDuration: number
+  onSubmit: any
+  stageIndex: number
+  elementIndex: number
+  treatment: any
+  editTreatment: (treatment: TreatmentType) => void
+  elementOptions: any
 }) {
-  const startTime = element.displayTime || 0;
-  const endTime = element.hideTime || stageDuration;
-  const [modalOpen, setModalOpen] = useState(false);
-
+  const startTime = element.displayTime || 0
+  const endTime = element.hideTime || stageDuration
+  const [modalOpen, setModalOpen] = useState(false)
 
   const editModalId = `modal-stage${stageIndex}-element-${elementIndex}`
   return (
     <div
       className="card bg-base-200 shadow-md min-h-12 min-w-[10px] justify-center px-5"
       style={{ left: startTime * scale, width: scale * (endTime - startTime) }}
-      data-cy={"element-" + stageIndex + "-" + elementIndex}
+      data-cy={'element-' + stageIndex + '-' + elementIndex}
     >
       <Element element={element} />
       <button
-        data-cy={"edit-element-button-" + stageIndex + "-" + elementIndex}
+        data-cy={'edit-element-button-' + stageIndex + '-' + elementIndex}
         className="btn h-5 flex bg-gray-300"
-        style={{ minHeight: "unset" }}
+        style={{ minHeight: 'unset' }}
         onClick={() =>
           (
-            document.getElementById(editModalId
-            ) as HTMLDialogElement | null
+            document.getElementById(editModalId) as HTMLDialogElement | null
           )?.showModal()
         }
       >
         Edit
       </button>
-      
-        <Modal id={editModalId}>
-          <EditElement
-            treatment={treatment}
-            editTreatment={editTreatment}
-            stageIndex={stageIndex}
-            elementIndex={elementIndex}
-            />
-        </Modal>
-      
+
+      <Modal id={editModalId}>
+        <EditElement
+          treatment={treatment}
+          editTreatment={editTreatment}
+          stageIndex={stageIndex}
+          elementIndex={elementIndex}
+        />
+      </Modal>
     </div>
-  );
+  )
 }
diff --git a/src/app/editor/components/StageCard.tsx b/src/app/editor/components/StageCard.tsx
index faa3da3..0df35f8 100644
--- a/src/app/editor/components/StageCard.tsx
+++ b/src/app/editor/components/StageCard.tsx
@@ -1,14 +1,17 @@
-"use client";
-import AddPopup from "./AddPopup";
-import React, { useState } from "react";
-import { ElementCard } from "./ElementCard";
-import { cn } from "@/app/components/utils";
-import { Modal } from "./Modal";
-import { EditStage } from "./EditStage";
-import { EditElement } from "./EditElement";
-import { TreatmentType, DurationType} from "../../../../deliberation-empirica/server/src/preFlight/validateTreatmentFile";
+'use client'
+import AddPopup from './AddPopup'
+import React, { useState } from 'react'
+import { ElementCard } from './ElementCard'
+import { cn } from '@/app/components/utils'
+import { Modal } from './Modal'
+import { EditStage } from './EditStage'
+import { EditElement } from './EditElement'
+import {
+  TreatmentType,
+  DurationType,
+} from '../../../../deliberation-empirica/server/src/preFlight/validateTreatmentFile'
 
-export function StageCard({ 
+export function StageCard({
   title,
   elements,
   duration,
@@ -20,41 +23,41 @@ export function StageCard({
   stageIndex,
   setRenderPanelStage,
 }: {
-  title: string;
-  elements: any[];
-  duration: DurationType;
-  scale: number;
-  treatment: any;
-  setTreatment: any;
-  editTreatment: (treatment: TreatmentType) => void;
-  sequence: string;
-  stageIndex: number;
-  setRenderPanelStage: any;
+  title: string
+  elements: any[]
+  duration: DurationType
+  scale: number
+  treatment: any
+  setTreatment: any
+  editTreatment: (treatment: TreatmentType) => void
+  sequence: string
+  stageIndex: number
+  setRenderPanelStage: any
 }) {
   const addElementOptions = [
-    { question: "Name", responseType: "text" },
+    { question: 'Name', responseType: 'text' },
     {
-      question: "Type",
-      responseType: "dropdown",
+      question: 'Type',
+      responseType: 'dropdown',
       options: [
-        "prompt",
-        "survey",
-        "audioElement",
-        "kitchenTimer",
-        "qualtrics",
-        "separator",
-        "submitButton",
-        "trainingVideo",
+        'prompt',
+        'survey',
+        'audioElement',
+        'kitchenTimer',
+        'qualtrics',
+        'separator',
+        'submitButton',
+        'trainingVideo',
       ],
     },
-  ];
+  ]
   const addStageOptions = [
-    { question: "Name", responseType: "text" },
-    { question: "Duration", responseType: "number"},
-    { question: "Discussion", responseType: "text" },
-  ];
+    { question: 'Name', responseType: 'text' },
+    { question: 'Duration', responseType: 'number' },
+    { question: 'Discussion', responseType: 'text' },
+  ]
 
-  const width = duration ? scale * duration : "auto";
+  const width = duration ? scale * duration : 'auto'
 
   function handleStageClick() {
     setRenderPanelStage({
@@ -62,7 +65,7 @@ export function StageCard({
       elements: elements,
       duration: duration,
       stageIndex: stageIndex,
-    });
+    })
   }
 
   const newElementModalId = `modal-stage${stageIndex}-element-new`
@@ -72,27 +75,27 @@ export function StageCard({
     <div
       id={`timelineCard ${stageIndex}`}
       className={cn(
-        "card grow-0 shrink-0",
-        sequence === "gameStage" ? "bg-slate-300" : "bg-red-300"
+        'card grow-0 shrink-0',
+        sequence === 'gameStage' ? 'bg-slate-300' : 'bg-red-300'
       )}
       style={{ width: scale * duration }}
       onClick={handleStageClick}
-      data-cy={"stage-" + stageIndex}
+      data-cy={'stage-' + stageIndex}
     >
-      <div style={{ display: "flex", justifyContent: "space-between" }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
         <h3 className="mx-3 my-2">{title}</h3>
         <button
-          data-cy={"edit-stage-button-" + stageIndex}
+          data-cy={'edit-stage-button-' + stageIndex}
           className="my-3 mx-3 btn h-5 bg-gray-300"
-          style={{ minHeight: "unset" }}
-          onClick={() => document.getElementById("modal-stage" + stageIndex)?.showModal()}
+          style={{ minHeight: 'unset' }}
+          onClick={() =>
+            document.getElementById('modal-stage' + stageIndex)?.showModal()
+          }
         >
           Edit
         </button>
 
-        <Modal
-          id={"modal-stage" + stageIndex}
-        >
+        <Modal id={'modal-stage' + stageIndex}>
           <EditStage
             treatment={treatment}
             editTreatment={editTreatment}
@@ -131,15 +134,15 @@ export function StageCard({
               stageIndex={stageIndex}
               elementIndex={index}
               treatment={treatment}
-              setTreatment={setTreatment}
+              editTreatment={editTreatment}
               elementOptions={addElementOptions}
-              onSubmit={""}
+              onSubmit={''}
             />
           ))}
         {/* Add Element Button*/}
         <div className="card bg-slate-100 opacity-50 shadow-md m-1 min-h-12 flex items-center">
           <button
-            data-cy={"add-element-button-" + stageIndex}
+            data-cy={'add-element-button-' + stageIndex}
             className="btn h-full w-full"
             onClick={() =>
               (
@@ -152,9 +155,7 @@ export function StageCard({
             +
           </button>
 
-          <Modal
-            id={"modal-stage" + stageIndex}
-          >
+          <Modal id={'modal-stage' + stageIndex}>
             <EditStage
               treatment={treatment}
               editTreatment={editTreatment}
@@ -163,12 +164,12 @@ export function StageCard({
           </Modal>
 
           <Modal id={newElementModalId}>
-          <EditElement
-            treatment={treatment}
-            editTreatment={editTreatment}
-            stageIndex={stageIndex}
+            <EditElement
+              treatment={treatment}
+              editTreatment={editTreatment}
+              stageIndex={stageIndex}
             />
-        </Modal>
+          </Modal>
 
           {/* <dialog id={"stage" + stageIndex} className="modal">
             <div className="modal-box">
@@ -191,5 +192,5 @@ export function StageCard({
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/src/app/editor/components/Timeline.tsx b/src/app/editor/components/Timeline.tsx
index cd2309b..4837e7f 100644
--- a/src/app/editor/components/Timeline.tsx
+++ b/src/app/editor/components/Timeline.tsx
@@ -2,7 +2,7 @@
 import React, { useEffect, useState } from "react";
 import { parse } from "yaml";
 import { StageCard } from "./StageCard";
-import AddPopup from "./AddPopup";
+import AddPopup from "./AddPopup"; 
 import TimelineTools from "./TimelineTools";
 import TimePicker from "./TimePicker";
 import { stringify } from "yaml";