How to use link-lib - 10 common examples

it("registers built-in functions", () => {
        // tslint:disable-next-line:no-console
        const Comp: any = console.log;
        Comp.type = defaultNS.ex("TestClass");
        const [ registration ] = register(Comp);

        expect(registration).toHaveProperty("component", Comp);
        expect(registration).toHaveProperty("property", RENDER_CLASS_NAME.sI);
        expect(registration).toHaveProperty("topology", DEFAULT_TOPOLOGY.sI);
        expect(registration).toHaveProperty("type", defaultNS.ex("TestClass").sI);
    });

it("registers built-in functions", () => {
        // tslint:disable-next-line:no-console
        const Comp: any = console.log;
        Comp.type = defaultNS.ex("TestClass");
        const [ registration ] = register(Comp);

        expect(registration).toHaveProperty("component", Comp);
        expect(registration).toHaveProperty("property", RENDER_CLASS_NAME.sI);
        expect(registration).toHaveProperty("topology", DEFAULT_TOPOLOGY.sI);
        expect(registration).toHaveProperty("type", defaultNS.ex("TestClass").sI);
    });

/* eslint no-magic-numbers: 0 */
import { mount } from "enzyme";
import { defaultNS, LinkedRenderStore, RENDER_CLASS_NAME } from "link-lib";
import { BlankNode, Literal, Statement } from "rdflib";
import { createElement } from "react";

import * as ctx from "../../../test/fixtures";
import { LinkedResourceContainer } from "../LinkedResourceContainer";

const id = "resources/5";
const iri = defaultNS.example(id);

const createTestElement = (className = "testComponent") => () => createElement(
    "span",
    { className },
);
const loadLinkedObject = () => undefined;

describe("LinkedResourceContainer component", () => {
    it("renders null when type is not present", () => {
        const opts = ctx.empty(iri);
        const comp = createElement(LinkedResourceContainer, {
            className: "testmarker",
            loadLinkedObject,
            subject: iri,
        });

/* eslint no-magic-numbers: 0 */
import { mount } from "enzyme";
import { defaultNS, LinkedRenderStore } from "link-lib";
import { Literal, NamedNode, Statement } from "rdflib";
import * as React from "react";
import { Component } from "react";

import * as ctx from "../../../test/fixtures";
import { dataPropsToPropMap, link } from "../link";

const id = "resources/5";
const iri = defaultNS.example(id);

class TestComponent extends Component {
    public render() {
        return React.createElement("span", { className: "testComponent" });
    }
}

describe("link", () => {
    describe("dataPropsToPropMap", () => {
        describe("with array mapping", () => {
            it("throws with an empty map", () => {
                expect(() => {
                    dataPropsToPropMap([], {});
                }).toThrowError(TypeError);
            });
        });

it("allows overriding subject", () => {
            const opts = ctx.fullCW();

            const Comp = withLinkCtx(TestComponent, { subject: true, lrs: true });
            const elem = ;
            const tree = mount(opts.wrapComponent(elem));
            const node = tree.find("TestComponent");

            // enzyme-matchers' `toHaveProps` does a slow recursive deep compare
            expect((node.props() as any).lrs).toEqual(opts.lrs);
            expect(node).toHaveProp("subject", defaultNS.ex("override"));
            expect(node).toHaveProp("topology", DEFAULT_TOPOLOGY);

            expect(node).toHaveProp("subjectCtx", opts.subject);
            expect(node).not.toHaveProp("topologyCtx");
        });

it("sets a class name", () => {
        const opts = ctx.multipleCW(iri, { second: { id: "resources/10" } });
        opts.lrs.registerAll(LinkedRenderStore.registerRenderer(
            createTestElement("normalRendered"),
            defaultNS.schema("CreativeWork"),
        ));

        // tslint:disable-next-line max-classes-per-file
        class ClassNameProvider extends TopologyProvider {
            constructor(props) {
                super(props);
                this.className = "test-class";
            }
        }

        const comp = createElement(
            ClassNameProvider,
            null,
            createElement("span", null),

export function renderNoView(props: TypableInjectedProps & { label?: LabelType }, lrs: LinkReduxLRSType) {
    const NoView = lrs.getComponentForProperty(
        NS.ll("NoView"),
        (props.label || RENDER_CLASS_NAME),
        props.topology || props.topologyCtx,
    );

    if (NoView) {
        return React.createElement(NoView);
    }

    // tslint:disable-next-line no-console
    console.log(
        "no-view",
        props.subject,
        lrs.getStatus(props.subject),
    );

    return React.createElement(

function getLinkedObjectProperties(
        lrs: LinkReduxLRSType,
        context: LinkRenderContext,
        subjProps: Statement[],
    ): PropertyBoundProps {
        const acc: PropertyBoundProps = {};

        for (const propOpts of Object.values(propMap)) {
            for (const cur of propOpts.label) {
                if (acc[propOpts.name]) {
                    // TODO: Merge
                    continue;
                }

                if (propOpts.limit === 1) {
                    const p = getPropBestLangRaw(
                        lrs.getResourcePropertyRaw(context.subject, cur),
                        (lrs as any).store.langPrefs,
                    );
                    if (p) {
                        acc[propOpts.name] = toReturnType(returnType, p);
                    }
                } else {
                    acc[propOpts.name] = subjProps
                        .filter((s: Statement) => s.predicate.sI === cur.sI)
                        .map(
                            (s: Statement) => toReturnType(returnType, s),
                        ) as Statement[] | SomeTerm[] | string[];
                }
            }
        }

returnType: LinkReturnType,
): PropertyBoundProps {
    const lrs = useLRS();
    const context = useLinkRenderContext();

    const acc: PropertyBoundProps = {};

    for (const propOpts of Object.values(propMap)) {
        for (const cur of propOpts.label) {
            if (acc[propOpts.name]) {
                // TODO: Merge
                continue;
            }

            if (propOpts.limit === 1) {
                const p = getPropBestLangRaw(
                    lrs.getResourcePropertyRaw(context.subject, cur),
                    (lrs as any).store.langPrefs,
                );
                if (p) {
                    acc[propOpts.name] = toReturnType(returnType, p);
                }
            } else {
                acc[propOpts.name] = subjProps
                    .filter((s: Quad) => rdfFactory.id(s.predicate) === rdfFactory.id(cur))
                    .map((s: Quad) => toReturnType(returnType, s)) as Quad[] | SomeTerm[] | string[];
            }
        }
    }

    return acc;
}

func: (prop: SomeTerm) => React.ReactNode,
    associationRenderer: React.ReactType,
): React.ReactElement | null {

    const associationProps = associationRenderer !== React.Fragment ? props : null;

    if (objRaw.length === 0) {
        return null;
    } else if (objRaw.length === 1) {
        return React.createElement(associationRenderer, associationProps, func(objRaw[0]));
    } else if (props.limit === 1) {
        return React.createElement(
            associationRenderer,
            associationProps,
            // @ts-ignore
            func(getTermBestLang(objRaw, lrs.store.langPrefs)),
        );
    }
    const pLimit = Math.min(...[props.limit, objRaw.length].filter(Number) as number[]);
    const elems = new Array(pLimit);
    for (let i = 0; i < pLimit; i++) {
        elems.push(func(objRaw[i]));
    }

    return React.createElement(associationRenderer, associationProps, elems);
}