merge christa's edits

src/app/editor/components/EditElement.tsx

@@ -20,13 +20,6 @@ export function EditElement({
  stageIndex: number
  elementIndex: number
 }) {
- /*var currComponent: ElementType | undefined
- if (elementIndex !== -1) {
- currComponent = treatment.gameStages[stageIndex].elements[elementIndex]
- } else {
- currComponent = undefined
- }*/
-
  const {
  register,
  watch,
@@ -351,7 +344,7 @@ export function EditElement({
  className="btn btn-primary"
  style={{ margin: '10px' }}
  onClick={saveEdits}
- disabled={watch('name') === ''}
+ disabled={watch('name') === ''} // || watch('selectedOption') === 'Pick one' (pick one isnt in element type?)
  >
  Save
  </button>

src/app/editor/components/EditStage.tsx

@@ -5,6 +5,7 @@ import {
  TreatmentType,
  stageSchema,
  StageType,
+ ElementType,
 } from '@/../deliberation-empirica/server/src/preFlight/validateTreatmentFile'
 import { zodResolver } from '@hookform/resolvers/zod'
 import * as zod from 'zod'
@@ -18,63 +19,68 @@ export function EditStage({
  editTreatment: (treatment: TreatmentType) => void
  stageIndex: number
 }) {
- var currComponent: StageType | undefined
- if (stageIndex !== -1) {
- currComponent = treatment.gameStages[stageIndex]
- } else {
- currComponent = undefined
- }
-
  const {
  register,
  watch,
  handleSubmit,
  setValue,
- formState: { isValid, errors },
+ formState: { errors },
  } = useForm<StageType>({
- defaultValues:
- stageIndex !== undefined
- ? {
- name: treatment?.gameStages[stageIndex]?.name || '',
- duration: treatment?.gameStages[stageIndex]?.duration || 0,
- elements: treatment?.gameStages[stageIndex]?.elements || [],
- }
- : {
- name: '',
- duration: 0,
- elements: [],
- },
+ defaultValues: {
+ name: treatment?.gameStages[stageIndex]?.name || '',
+ duration: treatment?.gameStages[stageIndex]?.duration || 0,
+ elements: treatment?.gameStages[stageIndex]?.elements || [],
+ // desc: "",
+ // discussion: {
+ // chatType: "text",
+ // showNickname: true,
+ // showTitle: false,
+ // },
+ },
  resolver: zodResolver(stageSchema),
  mode: 'onChange',
  })
 
  async function saveEdits() {
- try {
- const updatedTreatment = JSON.parse(JSON.stringify(treatment)) // deep copy
- if (isValid) {
- console.log('Form is valid')
- if (stageIndex === -1) {
- // 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)
+ const updatedTreatment = JSON.parse(JSON.stringify(treatment)) // deep copy
+
+ const inputs: { name: any; duration: any; elements: ElementType[] } = {
+ name: watch('name'),
+ duration: watch('duration'),
+ elements: [],
+ // discussion: undefined,
+ // desc: watch('desc'),
+ }
+
+ // if (watch('discussion') !== null) inputs.discussion = watch('discussion')
+ // if (watch('desc') !== "") inputs.desc = watch('desc')
+ // if (watch('elements') !== null) inputs.elements = watch('elements')
+
+ const result = stageSchema.safeParse(inputs)
+ if (!result.success) {
+ const parsedError = result.error.errors
+ if (
+ parsedError[0].message === 'Array must contain at least 1 element(s)' &&
+ stageIndex === -1
+ ) {
+ // do nothing --> ignore the error
  } else {
- throw new Error('Form is not valid')
+ console.error('Error described below:')
+ console.error(result.error.errors)
+ return
  }
- } catch (error) {
- console.error(error)
  }
+
+ if (stageIndex === -1) {
+ // create new stage
+ updatedTreatment?.gameStages?.push(inputs)
+ } else {
+ // modify existing stage
+ updatedTreatment.gameStages[stageIndex].name = watch('name')
+ updatedTreatment.gameStages[stageIndex].duration = watch('duration')
+ // todo: add discussion component
+ }
+ editTreatment(updatedTreatment)
  }
 
  function deleteStage() {

src/app/editor/components/RenderDelibElement.tsx

@@ -33,7 +33,7 @@ export default function RenderDelibElement(
  // TODO: Set necessary stuff in player, game, and stage
 
  return (
- <div className=" max-w-100 max-h-100">
+ <div className=" max-w-100 max-h-100 ">
  <Element
  // @ts-ignore
  element={element.element as any}

src/app/editor/components/RenderPanel.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from "react";
-import TimePicker from "./TimePicker";
-// import { Element } from "./../../../.././deliberation-empirica/client/src/elements/Element.jsx";
-import RenderDelibElement from "./RenderDelibElement";
+import React, { useEffect, useState } from 'react'
+import TimePicker from './TimePicker'
+import { Stage } from './../../../.././deliberation-empirica/client/src/Stage.jsx'
+import RenderDelibElement from './RenderDelibElement'
 export function RenderPanel({ renderPanelStage }: { renderPanelStage: any }) {
- const [time, setTime] = useState(0);
- const elements = renderPanelStage.elements;
- const stageName = renderPanelStage.title;
- const stageDuration = renderPanelStage.duration;
+ const [time, setTime] = useState(0)
+ const elements = renderPanelStage.elements
+ const stageName = renderPanelStage.title
+ const stageDuration = renderPanelStage.duration
 
  return (
  <div className="flex">
@@ -19,14 +19,14 @@ export function RenderPanel({ renderPanelStage }: { renderPanelStage: any }) {
  <div>
  <h1>Preview of {stageName} </h1>
  <TimePicker
- value={time + " s"}
+ value={time + ' s'}
  setValue={setTime}
  maxValue={stageDuration}
  />
  </div>
  )}
  {stageName && <div className="divider divider-horizontal"></div>}
- <div>
+ {/* <div>
  {elements !== undefined &&
  elements.map(
  (element: any, index: any) =>
@@ -38,7 +38,11 @@ export function RenderPanel({ renderPanelStage }: { renderPanelStage: any }) {
  </div>
  )
  )}
+ </div> */}
+ <div className="page-display-container">
+ {stageName && <Stage />}{' '}
+ {/* Replace custom rendering logic with Stage component */}
  </div>
  </div>
- );
+ )
 }

src/app/editor/components/StageCard.tsx

@@ -16,7 +16,6 @@ export function StageCard({
  duration,
  scale,
  treatment,
- setTreatment, //Todo: get rid of this entirely
  editTreatment,
  sequence,
  stageIndex,