Annotation can be saved but some data are undefined

src/AnnotationCreation.js

@@ -108,6 +108,7 @@ function AnnotationCreation(props) {
       tstart,
       valueTime: [0, 1],
       valuetextTime: '',
+      textBody: '',
     };
   });
 
@@ -316,41 +317,41 @@ function AnnotationCreation(props) {
       receiveAnnotation,
       config,
     } = props;
-    const svg = <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle fill="red" cx="50" cy="50" r="50"/></svg>
-
-    const dummyAnnot = {
-      title: 'dummyTitle',
-      textBody:'dummyTextBody',
-      image:{
+    const svg = <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle fill="red" cx="50" cy="50" r="50" /></svg>;
+
+    // const dummyAnnot = {
+    //   title: 'dummyTitle',
+    //   textBody:'dummyTextBody',
+    //   image:{
+    //     id: null,
+    //     svg: svg
+    //   },
+    //   tags: null,
+    //   xywh:"220,470,450,50",
+    //   tstart: 1880,
+    //   tend:1905,
+    //   textEditorStateBustingKey:0,
+    //   konvaThing: ['SOME KONVA THING', 'AND ANOTHER KONVA THING', {thirdKonvaThing:'Third Konva thing here'}]
+    // }
+    // const title = dummyAnnot.title
+    const dumbIimage = {
       id: null,
-        svg: svg
-      },
-      tags: null,
-      xywh:"220,470,450,50",
-      tstart: 1880,
-      tend:1905,
-      textEditorStateBustingKey:0,
-      konvaThing: ['SOME KONVA THING', 'AND ANOTHER KONVA THING', {thirdKonvaThing:'Third Konva thing here'}]
-    }
-    const title = dummyAnnot.title
-    const textBody = dummyAnnot.textBody
-    const image = dummyAnnot.image;
-    const tags = dummyAnnot.tags;
-    const xywh = dummyAnnot.xywh;
-    const tstart = dummyAnnot.tstart;
-    const tend = dummyAnnot.tend;
-    const textEditorStateBustingKey = dummyAnnot.textEditorStateBustingKey;
-    const konvaThing = dummyAnnot.konvaThing;
-    // const {
-    //   title,
-    //   textBody,
-    //   image,
-    //   tags,
-    //   xywh,
-    //   tstart,
-    //   tend,
-    //   textEditorStateBustingKey,
-    // } = state;
+      svg,
+    };
+    //
+    // const konvaThing = dummyAnnot.konvaThing;
+    state.image = dumbIimage;
+    state.konvaThing = ['SOME KONVA THING', 'AND ANOTHER KONVA THING', { thirdKonvaThing: 'Third Konva thing here' }];
+
+    const {
+      textBody,
+      tags,
+      xywh,
+      tstart,
+      tend,
+        image,
+        konvaThing,
+    } = state;
     // TODO rename variable for better comprenhension
     // const svg = await getSvg();
 
@@ -371,7 +372,6 @@ function AnnotationCreation(props) {
         manifestId: canvas.options.resource.id,
         svg,
         tags,
-        title,
         konvaThing,
       }).toJson();
       if (annotation) {
@@ -389,7 +389,7 @@ function AnnotationCreation(props) {
     props.closeCompanionWindow('annotationCreation', {
       id,
       position: 'right',
-  })
+    });
     // TODO this create a re-render too soon for react and crash the app
     setState({
       image: { id: null },
@@ -397,7 +397,6 @@ function AnnotationCreation(props) {
       tend: 0,
       textBody: '',
       textEditorStateBustingKey: textEditorStateBustingKey + 1,
-      title: '',
       tstart: 0,
       xywh: null,
     });

src/WebAnnotation.js

@@ -2,9 +2,8 @@
 export default class WebAnnotation {
   /** */
   constructor({
-    canvasId, id, fragsel, image, body, tags, svg, manifestId, title, konvaThing
+    canvasId, id, fragsel, image, body, tags, svg, manifestId, konvaThing
   }) {
-    this.title = title,
     this.id = id;
     this.canvasId = canvasId;
     this.fragsel = fragsel;
@@ -46,13 +45,6 @@ export default class WebAnnotation {
       };
       bodies.push(imgBody);
     }
-    if(this.title){
-      const title={
-        type: 'AnnotationTitle',
-        value: this.title,
-      }
-      bodies.push(title)
-    }
 
     if(this.konvaThing){
       const konvaThing={
@@ -61,7 +53,6 @@ export default class WebAnnotation {
       }
       bodies.push(konvaThing)
     }
-
     if (this.tags) {
       bodies = bodies.concat(this.tags.map((tag) => ({
         purpose: 'tagging',