aswi20220x00-gitlab/webapp/contexts/TagCategoryContext.tsx @ 4bc99591

import React, { createContext, useContext, useEffect, useState } from 'react';
import { SubTagInfo, TagCategoryInfo, TagInfo } from '../api';
import { tagController } from '../controllers';
import { LoggedUserContext } from './LoggedUserContext';
import Annotation from '../pages/annotation/[id]';
import { AnnotationContext } from './AnnotationContext';

/**
 * Interface of a tag context provider.
 */
interface ITagCategoryContextProvider {
    /**
     * Categories managed by the context.
     */
    tagCategories: TagCategoryInfo[] | null;

    /**
     * Selected tag managed by the context.
     */
    selectedTag: TagInfo | null;

    /**
     * Selected sub tag managed by the context.
     */
    selectedSubTag: SubTagInfo | null;

    /**
     * Sets new tags.
     * @param newTags An array of new tags.
     */
    setTagCategories: (newTagCategories: TagCategoryInfo[] | null) => void;

    /**
     * Selects a tag.
     * @param tag Tag.
     * @param subTag Sub tag.
     */
    selectTag: (tag: TagInfo, subTag: SubTagInfo | null) => void;
}

/**
 * The tag context that manages available tags.
 */
export const TagCategoryContext = createContext<ITagCategoryContextProvider>({
    /**
     * Default categories.
     */
    tagCategories: null,

    /**
     * Default selected tag.
     */
    selectedTag: null,

    /**
     * Default selected sub tag.
     */
    selectedSubTag: null,

    /**
     * Default implementation of setTags method.
     * @param c Array of new tags.
     */
    setTagCategories: (c) => {
        return;
    },

    /**
     * Default implementation of selectTag.
     * @param t Tag.
     * @param s Sub tag.
     */
    selectTag: (t: TagInfo, s: SubTagInfo | null) => {
        return;
    },
});

/**
 * Provider of the tag context.
 * @param props Children that should have access to the tag context.
 * @returns Prepared html of the provider.
 */
const TagCategoryProvider = (props: { children: React.ReactNode }) => {
    const { markSelectedText } = useContext(AnnotationContext);

    /**
     * Tags managed by the context.
     */
    const [tagCategories, setTagCategories] = useState<TagCategoryInfo[] | null>(null);

    /**
     * Selected tag.
     */
    const [selectedTag, setSelectedTag] = useState<TagInfo | null>(null);

    /**
     * Selected sub tag.
     */
    const [selectedSubTag, setSelectedSubTag] = useState<SubTagInfo | null>(null);

    /**
     * Selects a tag.
     */
    const selectTag = (tag: TagInfo, subTag: SubTagInfo | null) => {
        setSelectedTag(tag);
        setSelectedSubTag(subTag);

        if (!tag.id) {
            console.log('invalid selection');
            return;
        }

        markSelectedText(tag.id, subTag?.id ?? null, null);
    };

    /**
     * Initializes the context.
     */
    useEffect(() => {
        tagController.tagsGet().then((tagTree) => {
            if (typeof tagTree.data.tagCategories != 'undefined') {
                setTagCategories(tagTree.data.tagCategories);
            }
        });
    }, []);

    return (
        <TagCategoryContext.Provider
            value={{
                tagCategories,
                selectedTag,
                selectedSubTag,
                setTagCategories,
                selectTag,
            }}
        >
            {props.children}
        </TagCategoryContext.Provider>
    );
};

export default TagCategoryProvider;