How to use the @dhis2/d2-ui-core.addD2Context function in @dhis2/d2-ui-core

import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';

import HeaderMenu from './HeaderMenu';
import HeaderMenuItem from './HeaderMenuItem';
import { addD2Context } from '@dhis2/d2-ui-core';
import getBaseUrlFromD2ApiUrl from '../utils/getBaseUrlFromD2ApiUrl';
import styles from '../header-bar-styles';

const getBaseUrl = getBaseUrlFromD2ApiUrl;

const ProfileMenu = addD2Context((props, { d2 }) => {
    const { currentUser, items } = props;
    const menuItems = items.map((item, index) => ());

    if (!currentUser.firstName) {
        return (<div>);
    }

    const initials = `${currentUser.firstName.charAt(0)}${currentUser.surname.charAt(0)}`;
    const rightSide = (
        <div style="{styles.profileRightSide}">
            <div style="{styles.profileFlexWrap}">
                {initials}
                <div>
                    <div style="{styles.profileName}">{currentUser.displayName}</div>
                    <div style="{styles.profileMail}">{currentUser.email}</div>
                </div></div></div></div>

import React from 'react';
import { config } from 'd2/lib/d2';
import { addD2Context } from '@dhis2/d2-ui-core';

config.i18n.strings.add('no_results_found');

function NoResults(props, { d2 }) {
    return (
        <div>{d2.i18n.getTranslation('no_results_found')}</div>
    );
}

export default addD2Context(NoResults);

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classes from 'classnames';
import IconButton from 'material-ui/IconButton';
import FontIcon from 'material-ui/FontIcon';
import MoreVert from 'material-ui/svg-icons/navigation/more-vert';
import { addD2Context } from '@dhis2/d2-ui-core';
import { findValueRenderer } from './data-value/valueRenderers';

function getD2ModelValueType(dataSource, columnName) {
    return dataSource && dataSource.modelDefinition && dataSource.modelDefinition.modelValidations && dataSource.modelDefinition.modelValidations[columnName] && dataSource.modelDefinition.modelValidations[columnName].type;
}

const TableRow = addD2Context(class extends Component {
    iconMenuClick = (event) => {
        this.props.itemClicked(event, this.props.dataSource);
    };

    singleActionClick = () => {
        if (this.hasSingleAction()) {
            this.singleAction().action(this.props.dataSource);
        }
    };

    handleContextClick = (event) => {
        event && event.preventDefault();
        this.props.itemClicked(event, this.props.dataSource);
    };

    handleClick = (event) => {

import React from 'react';
import { isFunction } from 'lodash/fp';
import log from 'loglevel';
import { addD2Context } from '@dhis2/d2-ui-core';

function Translate(props, context) {
    if (context.d2 && context.d2.i18n && isFunction(context.d2.i18n.getTranslation)) {
        return (<span>{context.d2.i18n.getTranslation(props.children)}</span>);
    }

    log.error(': d2 is not available on the `context`');
    return <span>;
}

export const TranslateSpan = addD2Context(Translate);

const PublicAccessValue = ({ value }) =&gt; {
    const metaData = value.substr(0, 2);
    const data = value.substr(2, 2);
    const other = value.substr(4, 4);

    if (other === '----' &amp;&amp; (data === '--' || data === 'r-' || data === 'rw')) {
        if (metaData === 'rw') {
            return public_can_edit;
        } else if (metaData === 'r-') {
            return public_can_view;
        } else if (metaData === '--') {
            return public_none;
        }

        return null;</span>

import { isString } from 'lodash/fp';
import { isFunction } from 'lodash/fp';
import { addD2Context } from '@dhis2/d2-ui-core';
import log from 'loglevel';
import IconOption from './IconOption.component';

function Translate(props, context) {
    if (context.d2 && context.d2.i18n && isFunction(context.d2.i18n.getTranslation)) {
        return (<span>{context.d2.i18n.getTranslation(props.children)}</span>);
    }

    log.error(': d2 is not available on the `context`');
    return <span>;
}

const TranslateSpan = addD2Context(Translate);

export default function CurrentIcon(props) {

    if (!props.imgSrc) {
        return (
            
                select
            
        );
    }

    return (
        
    );
}
</span>