Kontur.Admin

//....... app.js ........//
import React from 'react'
import ReactDOM from 'react-dom'
...

store.dispatch(prepareApp(store, routes))

//...... prepareApp action ......//
export function prepareApp(store, routes) {
    return dispatch => {
        return axios.get('/settings/config.json')
            .then( res => {
                dispatch(setSettings(res.data))
                dispatch(startApp(store, routes))
            })
            .catch( err => {
                dispatch(appLoadingFailed(err))
            })
            .then( res => {
                dispatch(loadAutocompleteKeys())
            })
    }
}

//....... start app reducer .....//
function startApp(state, action.store, action.routes) {
            ReactDOM.render(
                <Provider store={store}>
                    <Router routes={routes} />
                </Provider>,
                document.getElementById('monitoring'));
            return state
        }

//...... routes.js ......//
export default {
    path: '/',
    component: require('./components/Monitoring'),
    childRoutes: [
        require('./routes/SearchHandler'),
        require('./routes/UserProfile'),
        require('./routes/OrgProfile'),
        require('./routes/Representative'),
        require('./routes/UserGroup'),
        require('./routes/NotFound')
    ]
}

//.... routes/UserProfile/index.js ...//
export default {
    path: 'profile',
    getChildRoutes (location, cb) {
        require.ensure([], (require) => {
            cb(null, [
                require('./routes/Requisites'),
                require('./routes/AccessRights'),
                require('./routes/Certificates'),
                require('./routes/MonitoringAdministrate'),
                require('./routes/UserServices'),
                require('./routes/History')
            ])
        }, 'userProfileChildren')
    },
    getComponents (location, cb) {
        require.ensure([], (require) => {
            cb(null, require('./UserProfile.jsx'))
        }, 'userProfile')
    }
}

@connect(state => {return ({state: state.toJS()})})
class Monitoring extends React.Component {

    handleSearchModeChange = (mode) => {
        const {dispatch, state, history} = this.props;
        history.pushState('search', `/search/${mode}?search=${state.search.query}`);
        dispatch(setSearchMode(mode))
    }

    handleSearchSubmit = () => {
        const {dispatch, state, history} = this.props;
        history.pushState('search', `/search/${state.search.mode}?search=${state.search.query}`);
        dispatch(getSearchResults(state.search.query, state.search.mode));
    }

    render(){
        const {dispatch, state} = this.props;
        return(
            <div className="monitoring" >
                <div className="monitoring_logo">
                    <Logo/>
                </div>
                <div className="monitoring_menu">
                    <SearchMode mode={state.search.mode}
                                modes={state.modes}
                                otherResults={state.search.otherResults}
                                onChange={ this.handleSearchModeChange } />
                </div>
                <div className="monitoring_content">
                    <div className="monitoring_search">
                        <Search query={state.search.query}
                                dropdownItems={state.search.autocomplete[state.search.mode] || []}
                                onChange={input => dispatch(setSearchQuery(input.value))}
                                onSubmit={this.handleSearchSubmit} />
                    </div>
                    <div className="monitoring_data">
                        {this.props.children || <MainPage />}
                    </div>
                </div>
                <Feedback />
            </div>
        )
    }
}

export default Monitoring;

//.... UserProfile.jsx ....//
@connect(state => ({state: state.get('user').toJS()}))
class UserProfile extends React.Component {
    componentDidMount(){
        const userid = this.props.params.userid;
        const {dispatch} = this.props;
        dispatch(userFetchRequisites(userid));
    }
    componentDidUpdate(pp){
        if (pp.location.pathname !== this.props.location.pathname) {
            const userid = this.props.params.userid;
            const {dispatch} = this.props;
            dispatch(userFetchRequisites(userid));
        }
    }
    shouldComponentUpdate(np){
        return np.location.pathname !== this.props.location.pathname ||
            np.state !== this.props.state;
    }
    ...
    render() {
        ...
        return(
            <div className="userProfile">
                <Header tabs={realTabs}>
                    <Header.Title>Пользователь</Header.Title>
                    <Header.Name>{name}</Header.Name>
                </Header>
                <div className="userProfile_tabContent">
                    {React.cloneElement(this.props.children, {
                        requisites: {Base, Scope, Auxiliary, Guid: state.userid, Status: state.status},
                        certificates: state.certificates,
                        accessRights: state.accessRights,
                        onRequisiteLoad: data => dispatch(userFetchRequisites(data)),
                        onRequisiteUpdate: data => dispatch(userUpdateRequisites(data)),
                        onAccessRightsAdd: args => dispatch(addAccessRights(args)),
                        fader: state.isLoading
                    })}
                </div>
            </div>
        )   
    }
}

GitLab

https://git.skbkontur.ru/portal/portal.monitoring.front

//...... searchReducers.js ......//

import {fromJS} from 'immutable'

function setSearchMode(searchState, mode) {
    return searchState.set('mode', mode);
}

function setSearchQuery(searchState, query) {
    return searchState.set('query', query)
}

function getSearchResultsRequest(searchState){
    return searchState
        .set('searchResults', fromJS([]))
        .set('otherResults', fromJS({}))
        .set('status', 'Loading');
}

function getSearchResults(searchState, data, query, mode) {
    return searchState
        .set('status', data.Status)
        .set('searchResults', data.Data)
        .set('mode', data.Mode || mode)
        .set('otherResults', fromJS(data.OtherResultCounts))
        .set('query', query);

}

export default function (searchState, action) {
    switch(action.type) {
        case 'SET_SEARCH_MODE':
            return setSearchMode(searchState, action.mode);

        case 'SET_SEARCH_QUERY':
            return setSearchQuery(searchState, action.query);

        case 'GET_SEARCH_RESULTS_REQUEST':
            return getSearchResultsRequest(searchState);

        case 'GET_SEARCH_RESULTS':
            return getSearchResults(searchState, action.res.data, action.query, action.mode);

        default:
            return searchState;
    }
}

//.... searchActions.js ....//

import axios from 'axios'

const urls = settings.url;

export function setSearchMode(mode) {
    return {
        type: 'SET_SEARCH_MODE',
        mode
    }
}

export function setSearchQuery(query) {
    return {
        type: 'SET_SEARCH_QUERY',
        query
    };
}

export function getSearchResults(query, mode) {
    return {
        type: 'GET_SEARCH_RESULTS',
        promise: axios.post(`${settings.url.search}`, {
            query,
            mode,
            matches: getMatchesFromQuery(query)
        }),
        query,
        mode
    };
}

//.... searchActions.js ....//

import axios from 'axios'

const urls = settings.url;

export function setSearchMode(mode) {
    return {
        reducer(searchState){
            return searchState.set('mode', mode);
        }
    }
}

export function setSearchQuery(query) {
    return {
        reducer(searchState) {
            return searchState.set('query', query);
        }
    };
}

export function getSearchResults(query, mode) {
    return {
        promise: axios.post(`${settings.url.search}`, {
            query,
            mode,
            matches: getMatchesFromQuery(query)
        }),
        reducer(searchState){
            return searchState
                    .set('status', res.data.Status)
                    .set('searchResults', res.data.Data)
                    .set('mode', res.data.Mode || mode)
                    .set('otherResults', fromJS(res.data.OtherResultCounts))
                    .set('query', query);
        }
    };
}

//..... searchReducer ...//
export default function (searchState, action) {
    if (action.reducer) {
        return action.reducer(searchState);
    }
    return  searchState;
}