Case 4: Share over projects

// ./common/containers/AccountViewer.js

import { getMyProfile } from './selectors/AccountViewer.js';

const mapMeToProps = (state, props) => {
    let me = getMyProfile(state);
    return { ...me }
}

export const connectToMe = connect(mapMeToProps);

export const composeProfileViewer = ({teacherComponent, studentComponent, defaultComponent}) => {
    const Presenter = ({job_title, ...props}) => {
        switch (job_title) {
            case 'teacher';
                return <teacherComponent {...props}/>;
            case 'student':
                return <studentComponent {...props}/>;
            default: 
                return <defaultComponent {...props}/>;
        }
    }
    return connectToMe(Presenter);
}

// ./common/containers/ProfileBrowser.js
import { goToClub, goToSubject } from '../actions';
import { getProfileById } from './selectors/ProfileBrowser';

const mapDispatchToProps = (dispatch, props) => {
    goToClub: bind(goToClub, dispatch),
    goToSubject: bind(goToSubject, dispatch)
}

export const translateAndConnectNavigation = compose(
    translate('AcccountViewer'),
    connect(mapDispatchToProps))

const mapStateToProps = (state, props) => {
    let profile = getProfileById(state, props)
    return { ...profile }
}

export const connectByProfileId = connect(mapStateToProps)

// ./app/containers/index.js
export * as AccountViewer from '../../common/containers/AccountViewer.js';
export * as ProfileBrowser from '../../common/containers/ProfileBrowser.js';

// ./app/components/Profile/*.js
import { translateAndConnectNavigation as enhance } from '../../containers';

const Presenter = (props) => (
)

export default enhance(Presenter);

// ./app/components/Profile/AutodetectedProfile.js

import { ProvidedTeacherProfile } from './TeacherProfile';
import { ProvidedStudentProfile } from './StudentProfile';
import { composeProfileViewer } from '../../enhancers';

const PlaceHolder = ({t}) => (<div>{t('UNKNOWN_JOB_TITLE')}</div>)

export default composeProfileViewer({
    teacherComponent: ProvidedTeacherProfile, 
    studentComponent: ProvidedStudentProfile,
    defaultComponent: PlaceHolder
});

// ./app/components/Profile/index.js

export TeacherProfile from './TeacherProfile';
export StudentProfile from './StudentProfile';
export MyProfile from './AutodetectedProfile';

// ./app/routes/index.js

import { StudentProfile, TeacherProfile, MyProfile } from '../components/Profile';

const RootRouter = () => (
    <Router>
        <Route path='/me' component={MyProfile}/>
        <Route path='/teacher/:profile_id' component={TeacherProfile}/>
        <Route path='/student/:profile_id' component={StudentProfile}/>
    </Router>
)