aswi20220x00-gitlab/webapp/pages/annotation/[id].tsx @ 048b4bc0

import { AnnotationPanel } from '../../components/annotation/AnnotationPanel';
import { DocumentAnnotationView } from '../../components/annotation/DocumentAnnotationView';
import { TagPanel } from '../../components/annotation/TagPanel';
import { MainLayout } from '../../layouts/MainLayout';
import 'antd/dist/antd.css';
import styles from '/styles/Annotation.module.scss';
import AnnotationProvider from '../../contexts/AnnotationContext';
import TagCategoryProvider from '../../contexts/TagCategoryContext';

import { useRouter } from 'next/router';

/**
 * Creates an annotation screen.
 * @returns The annotation screen.
 */
function Annotation() {
    const router = useRouter();
    const { id, final } = router.query;

    console.log(id, final);

    if (!id || typeof id !== 'string' || typeof final !== 'string') {
        /*(async () => {
            await router.push('/documents');
        })(); // TODO*/

        return <p>Načítání...</p>;
    }

    console.log('ok');

    const annotationId: string = Array.isArray(id) ? id[0] : id;
    const isFinal: boolean = final === 'true';

    return (
        <AnnotationProvider annotationId={annotationId} isFinal={isFinal}>
            <TagCategoryProvider>
                <MainLayout>
                    <div className={styles.layoutWrapper}>
                        <div className={styles.tags}>
                            <TagPanel />
                        </div>
                        <div className={styles.document}>
                            <DocumentAnnotationView />
                        </div>
                        <div className={styles.annotations}>
                            <AnnotationPanel />
                        </div>
                    </div>
                </MainLayout>
            </TagCategoryProvider>
        </AnnotationProvider>
    );
}

export default Annotation;