Override Unite Profile Controller

View.js

import React from 'react';
import Controller from '@SE/Core/Page/Controller';
import app from '@SE/Core/App';
import ProfileService from '@SE/Profile/Service/ProfileService';
import Loader from '@SE/Core/Loader';

export default class Component extends React.Component {
    static propTypes = {};

    constructor (props) {
        super(props);

        this.state = {
            ready: false,
            user: null
        };
    }

    componentDidMount () {
        ProfileService.get(this);
    }

    componentDidCatch (error, info) {
        app.withException(error, info);
    }

    render () {
        if (!this.state.ready) {
            return <Loader type="section" />;
        }
        return (
            <Controller {...ProfileService.getControllerProps(this, {
                route: 'profile',
                params: {
                    route: 'profile'
                }
            })}>
                <div className="p-3 mb-5 bg-primary text-white">
                    PRIMARY CONTENT
                </div>
            </Controller>
        );
    }
}

The above file View.js, for this example would be placed located in: /src/HelloWorld/Controller/View.js. No route is needed to be created in DevOps, simply created the file manually.

When managing your product add the following to COMPONENT REPLACEMENTS:

{
    "@SE/Profile/Controller/View.js": "@Acme/HelloWorld/Controller/View.js"
}

Successfully adding this will render something similar to: