added sagas to fetch settings

This commit is contained in:
cyril lopez 2017-07-12 15:57:15 +02:00
parent 53606ae6c9
commit 84261bffd7
7 changed files with 95 additions and 12 deletions

View File

@ -5,6 +5,20 @@
*/ */
import { import {
LOAD_DATA, MENU_FETCH,
DATA_LOADED, MENU_FETCH_SUCCEEDED,
} from './constants'; } from './constants';
export function menuFetch() {
return {
type: MENU_FETCH,
};
}
export function fetchMenuSucceeded(menu) {
return {
type: MENU_FETCH_SUCCEEDED,
menu,
};
}

View File

@ -4,5 +4,5 @@
* *
*/ */
export const LOAD_DATA = 'SettingsManager/App/LOAD_DATA'; export const MENU_FETCH = 'SettingsManager/App/MENU_FETCH';
export const DATA_LOADED = 'SettingsManager/App/DATA_LOADED'; export const MENU_FETCH_SUCCEEDED = 'SettingsManager/App/MENU_FETCH_SUCCEEDED';

View File

@ -8,8 +8,12 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect'; import { createStructuredSelector } from 'reselect';
import { bindActionCreators } from 'redux';
import { pluginId } from 'app'; import { pluginId } from 'app';
import PluginLeftMenu from 'components/PluginLeftMenu'; import PluginLeftMenu from 'components/PluginLeftMenu';
import { menuFetch } from './actions';
import selectGlobalDomain from './selectors';
import styles from './styles.scss'; import styles from './styles.scss';
class App extends React.Component { class App extends React.Component {
@ -22,6 +26,10 @@ class App extends React.Component {
} }
} }
componentDidMount() {
this.props.menuFetch();
}
handleChange = ({ target }) => { handleChange = ({ target }) => {
this.setState({ value: target.value}); this.setState({ value: target.value});
} }
@ -33,6 +41,7 @@ class App extends React.Component {
exposedComponents: this.props.exposedComponents, exposedComponents: this.props.exposedComponents,
}) })
); );
console.log(this.props.app)
return ( return (
<div className={`${pluginId} ${styles.app}`}> <div className={`${pluginId} ${styles.app}`}>
<div className={styles.baseline}></div> <div className={styles.baseline}></div>
@ -57,12 +66,17 @@ App.propTypes = {
}; };
export function mapDispatchToProps(dispatch) { export function mapDispatchToProps(dispatch) {
return { return bindActionCreators(
dispatch, {
}; menuFetch,
},
dispatch
);
} }
const mapStateToProps = createStructuredSelector({}); const mapStateToProps = createStructuredSelector({
app: selectGlobalDomain(),
});
// Wrap the component to inject dispatch and state into it // Wrap the component to inject dispatch and state into it
export default connect(mapStateToProps, mapDispatchToProps)(App); export default connect(mapStateToProps, mapDispatchToProps)(App);

View File

@ -4,12 +4,19 @@
* *
*/ */
import { fromJS } from 'immutable'; import { fromJS, List } from 'immutable';
import {
MENU_FETCH_SUCCEEDED,
} from './constants';
const initialState = fromJS({}); const initialState = fromJS({
sections: List()
});
function appReducer(state = initialState, action) { function appReducer(state = initialState, action) {
switch (action.type) { switch (action.type) {
case MENU_FETCH_SUCCEEDED:
return state.set('menuSections', action.menu.sections);
default: default:
return state; return state;
} }

View File

@ -0,0 +1,30 @@
import { takeLatest } from 'redux-saga';
import { LOCATION_CHANGE } from 'react-router-redux';
import { put, fork } from 'redux-saga/effects';
import { fetchMenuSucceeded } from './actions';
import { MENU_FETCH } from './constants';
export function* fetchMenu() {
try {
const opts = {
method: 'GET',
};
const response = yield fetch('/settings-manager/menu', opts);
const data = yield response.json();
yield put(fetchMenuSucceeded(data));
} catch(err) {
window.Strapi.notification.error(
'An error occurred.'
);
}
}
function* defaultSaga() {
yield fork(takeLatest, MENU_FETCH, fetchMenu);
}
export default [defaultSaga];

View File

@ -1,10 +1,10 @@
// import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
/** /**
* Direct selector to the list state domain * Direct selector to the list state domain
*/ */
// const selectGlobalDomain = () => state => state.get('global'); const selectGlobalDomain = () => state => state.get('global');
const selectLocationState = () => { const selectLocationState = () => {
let prevRoutingState; let prevRoutingState;
@ -23,3 +23,4 @@ const selectLocationState = () => {
}; };
export { selectLocationState }; export { selectLocationState };
export default selectGlobalDomain;

View File

@ -0,0 +1,17 @@
.app { /* stylelint-disable */
min-height: calc(100vh - 6rem); // TODO should be variable
background: rgba(14,22,34,0.02);
}
.baseline {
// display: none;
z-index: 100001;
opacity: .2;
position: absolute;
top:0; left:0;
width: 100%;
height: 500%;
min-height: 100%;
background: url('../../assets/images/baseline-18.png');
// background: url('../../assets/images/baseline-20.png');
pointer-events: none;
}