commit 5593c10bc16e5a48eaaac6e12c11b52f6d9c8267
Author: Dominik Poch <dpoch@email.cz>
Date:   Sat Apr 16 22:37:13 2022 +0200

    Connected tag panel to server

diff --git a/webapp/components/annotation/SubTagItem.tsx b/webapp/components/annotation/SubTagItem.tsx
index 82fad06..47b0b88 100644
--- a/webapp/components/annotation/SubTagItem.tsx
+++ b/webapp/components/annotation/SubTagItem.tsx
@@ -1,22 +1,28 @@
-import { SubTagInfo } from '../../api';
+import { SubTagInfo, TagInfo } from '../../api';
 import { Container, Row } from 'react-bootstrap';
 import { Button } from 'antd';
+import { useContext } from 'react';
+import { TagCategoryContext } from '../../contexts/TagCategoryContext';
 
 /**
  * Creates a single tag item in a tag panel.
  * @param props Properties should contain the tag.
  * @returns The item that represents the tag.
  */
-export function SubTagItem(props: { subTag: SubTagInfo }) {
+export function SubTagItem(props: { tag: TagInfo; subTag: SubTagInfo }) {
+    const { selectTag } = useContext(TagCategoryContext);
+
     /**
      * Selects the sub tag.
      */
-    const selectSubTag = () => {};
+    const onSelectSubTag = () => {
+        selectTag(props.tag, props.subTag);
+    };
 
     return (
         <Container>
             <Row>
-                <Button type="text" onClick={selectSubTag} className="w-100 text-start">
+                <Button type="text" onClick={onSelectSubTag} className="w-100 text-start">
                     {props.subTag.name}
                 </Button>
             </Row>
diff --git a/webapp/components/annotation/TagItem.tsx b/webapp/components/annotation/TagItem.tsx
index 075cf8e..7abe8db 100644
--- a/webapp/components/annotation/TagItem.tsx
+++ b/webapp/components/annotation/TagItem.tsx
@@ -2,8 +2,9 @@ import { Col, Container, Row, Stack } from 'react-bootstrap';
 import { TagInfo } from '../../api';
 import { Button } from 'antd';
 import { DownOutlined, TagOutlined } from '@ant-design/icons';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { SubTagItem } from './SubTagItem';
+import { TagCategoryContext } from '../../contexts/TagCategoryContext';
 
 /**
  * Creates a single tag item in a tag panel.
@@ -16,6 +17,8 @@ export function TagItem(props: { tag: TagInfo }) {
      */
     const [visibleSubTags, setVisibleSubTags] = useState(false);
 
+    const { selectTag } = useContext(TagCategoryContext);
+
     /**
      * Changes visibility of sub tags.
      */
@@ -26,7 +29,9 @@ export function TagItem(props: { tag: TagInfo }) {
     /**
      * Selects the tag.
      */
-    const selectTag = () => {};
+    const onSelectTag = () => {
+        selectTag(props.tag, null);
+    };
 
     return (
         <Container>
@@ -45,7 +50,7 @@ export function TagItem(props: { tag: TagInfo }) {
                     {!props.tag.subTags && (
                         <Button
                             type="text"
-                            onClick={selectTag}
+                            onClick={onSelectTag}
                             className="w-100 text-start"
                         >
                             {props.tag.name}
@@ -59,7 +64,7 @@ export function TagItem(props: { tag: TagInfo }) {
             {props.tag.subTags && visibleSubTags && (
                 <Stack>
                     {props.tag.subTags?.map((subTag, index) => (
-                        <SubTagItem subTag={subTag} key={index} />
+                        <SubTagItem tag={props.tag} subTag={subTag} key={index} />
                     ))}
                 </Stack>
             )}
diff --git a/webapp/components/annotation/TagPanel.tsx b/webapp/components/annotation/TagPanel.tsx
index 1b4a7ae..4dac6cc 100644
--- a/webapp/components/annotation/TagPanel.tsx
+++ b/webapp/components/annotation/TagPanel.tsx
@@ -1,36 +1,20 @@
 import { CategoryItem } from './CategoryItem';
 import { TagCategoryInfo } from '../../api';
 import { Stack } from 'react-bootstrap';
+import { useContext } from 'react';
+import { TagCategoryContext } from '../../contexts/TagCategoryContext';
 
 /**
  * Creates a panel in the annotation screen that contains a list of tag.
  * @returns Panel with a list of tags.
  */
 export function TagPanel() {
-    const tags: TagCategoryInfo[] = [
-        {
-            name: 'kategorie 1',
-            color: '#FF0000',
-            tags: [
-                {
-                    name: 'tag 1',
-                    color: '#CD5C5C',
-                    subTags: [{ name: 'subTag 1' }, { name: 'subTag 2' }],
-                },
-                { name: 'tag 2', color: '#F08080' },
-            ],
-        },
-        {
-            name: 'kategorie 2',
-            color: '#0000FF',
-            tags: [{ name: 'tag 3', color: '#3498DB' }],
-        },
-    ];
+    const { tagCategories } = useContext(TagCategoryContext);
 
     return (
         <div>
             <Stack>
-                {tags.map((category, index) => (
+                {tagCategories?.map((category, index) => (
                     <CategoryItem category={category} key={index} />
                 ))}
             </Stack>
