Revize c057279b

AnnotationContext added

webapp/contexts/AnnotationContext.tsx

@@ +1 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { TagInstanceInfo } from '../api';
+import { Occurrence, Tag } from '../components/models/tag';
+
+interface IAnnotationContextProvider {
+    tags: TagInstanceInfo[] | null;
+    setTags: (newTags: TagInstanceInfo[] | null) => void;
+    addOccurrence: () => void;
+    changeVisibility: (tag: Tag) => void;
+    deleteOccurrence: (occurrence: Occurrence) => void;
+    changePosition: (occurrence: Occurrence, newValue: number) => void;
+    changeLength: (occurrence: Occurrence, newValue: number) => void;
+}
+
+export const AnnotationContext = createContext<IAnnotationContextProvider>({
+    tags: null,
+    setTags: (v) => {
+        return;
+    },
+    addOccurrence: () => {
+        return;
+    },
+    changeVisibility: (tag: Tag) => {
+        return;
+    },
+    deleteOccurrence: (occurrence: Occurrence) => {
+        return;
+    },
+    changePosition: (occurrence: Occurrence, newValue: number) => {
+        return;
+    },
+    changeLength: (occurrence: Occurrence, newValue: number) => {
+        return;
+    },
+});
+
+const AnnotationProvider = (props: { children: React.ReactNode }) => {
+    const [tags, setTags] = useState<TagInstanceInfo[] | null>(null);
+    const addOccurrence = () => {};
+    const changeVisibility = (tag: Tag) => {};
+    const deleteOccurrence = (occurrence: Occurrence) => {};
+    const changePosition = (occurrence: Occurrence, newValue: number) => {};
+    const changeLength = (occurrence: Occurrence, newValue: number) => {};
+
+    useEffect(() => {
+        // on context init
+    }, []);
+
+    return (
+        <AnnotationContext.Provider
+            value={{
+                tags,
+                setTags,
+                addOccurrence,
+                changeVisibility,
+                deleteOccurrence,
+                changeLength,
+                changePosition,
+            }}
+        >
+            {props.children}
+        </AnnotationContext.Provider>
+    );
+};
+
+export default AnnotationProvider;

webapp/pages/annotation/index.tsx

@@ -5 +5 @@
 import 'antd/dist/antd.css';
 import styles from '/styles/annotation.module.scss';
 import { Occurrence, Tag } from '../../components/models/tag';
+import AnnotationProvider from '../../contexts/AnnotationContext';
 
 /**
  * Creates an annotation screen.
@@ -43 +44 @@
     const changeLength = (occurrence: Occurrence, newValue: number) => {};
 
     return (
-        <MainLayout>
-            <div className={styles.layoutwrapper}>
-                <div className={styles.tags}>
-                    <TagPanel />
+        <AnnotationProvider>
+            <MainLayout>
+                <div className={styles.layoutwrapper}>
+                    <div className={styles.tags}>
+                        <TagPanel />
+                    </div>
+                    <div className={styles.document}>
+                        <DocumentAnnotationView />
+                    </div>
+                    <div className={styles.annotations}>
+                        <AnnotationPanel
+                            tags={tags}
+                            onAddOccurrence={addOccurrence}
+                            onChangeVisibility={changeVisibility}
+                            onDeleteOccurrence={deleteOccurrence}
+                            onChangePosition={changePosition}
+                            onChangeLength={changeLength}
+                        />
+                    </div>
                 </div>
-                <div className={styles.document}>
-                    <DocumentAnnotationView />
-                </div>
-                <div className={styles.annotations}>
-                    <AnnotationPanel
-                        tags={tags}
-                        onAddOccurrence={addOccurrence}
-                        onChangeVisibility={changeVisibility}
-                        onDeleteOccurrence={deleteOccurrence}
-                        onChangePosition={changePosition}
-                        onChangeLength={changeLength}
-                    />
-                </div>
-            </div>
-        </MainLayout>
+            </MainLayout>
+        </AnnotationProvider>
     );
 }