lirent/synapse-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove examples feature

Browse Source 
Change-Id: Id347a0a8b62c3f9df7e5b2e06a0daf4e989626dd
This commit is contained in:
Manuel Stahl
2019-02-07 12:51:30 +01:00
parent deae3535bc
commit 3749005995
34 changed files with 0 additions and 949 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/rootReducer.js
-2
View File
@@ -2,7 +2,6 @@ import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import homeReducer from '../features/home/redux/reducer';
import commonReducer from '../features/common/redux/reducer';
import examplesReducer from '../features/examples/redux/reducer';
// NOTE 1: DO NOT CHANGE the 'reducerMap' name and the declaration pattern.
// This is used for Rekit cmds to register new features, remove features, etc.
@@ -13,7 +12,6 @@ const reducerMap = {
router: routerReducer,
home: homeReducer,
common: commonReducer,
examples: examplesReducer,
};
export default combineReducers(reducerMap);
src/common/routeConfig.js
-2
View File
@@ -2,7 +2,6 @@ import { App } from '../features/home';
import { PageNotFound } from '../features/common';
import homeRoute from '../features/home/route';
import commonRoute from '../features/common/route';
import examplesRoute from '../features/examples/route';
import _ from 'lodash';
// NOTE: DO NOT CHANGE the 'childRoutes' name and the declaration pattern.
@@ -10,7 +9,6 @@ import _ from 'lodash';
const childRoutes = [
homeRoute,
commonRoute,
examplesRoute,
];
const routes = [{
src/features/examples/CounterPage.js
-45
View File
@@ -1,45 +0,0 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actions from './redux/actions';
export class CounterPage extends Component {
static propTypes = {
examples: PropTypes.object.isRequired,
actions: PropTypes.object.isRequired,
};
render() {
return (
<div className="examples-counter-page">
<h1>Counter</h1>
<p>This is simple counter demo to show how Redux sync actions work.</p>
<button className="btn-minus-one" onClick={this.props.actions.counterMinusOne} disabled={this.props.examples.count === 0}>
-
</button>
<span>{this.props.examples.count}</span>
<button className="btn-plus-one" onClick={this.props.actions.counterPlusOne}>+</button>
<button className="btn-reset" onClick={this.props.actions.counterReset}>
Reset
</button>
</div>
);
}
}
/* istanbul ignore next */
function mapStateToProps(state) {
return {
examples: state.examples,
};
}
/* istanbul ignore next */
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({ ...actions }, dispatch),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(CounterPage);
src/features/examples/CounterPage.scss
-18
View File
@@ -1,18 +0,0 @@
@import '../../styles/mixins';
.examples-counter-page {
color: #555;
h1 {
margin-top: 0px;
font-size: 28px;
}
span {
padding: 0 10px;
display: inline-block;
min-width: 30px;
text-align: center;
}
button.btn-reset {
margin-left: 15px;
}
}
src/features/examples/Layout.js
-20
View File
@@ -1,20 +0,0 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { SidePanel } from './';
export default class Layout extends Component {
static propTypes = {
children: PropTypes.node,
};
render() {
return (
<div className="examples-layout">
<SidePanel />
<div className="examples-page-container">
{this.props.children}
</div>
</div>
);
}
}
src/features/examples/Layout.scss
-9
View File
@@ -1,9 +0,0 @@
@import '../../styles/mixins';
.examples-layout {
.examples-page-container {
padding: 40px 30px 0 300px;
min-width: 400px;
max-width: 800px;
}
}
src/features/examples/RedditListPage.js
-57
View File
@@ -1,57 +0,0 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { fetchRedditList } from './redux/actions';
export class RedditListPage extends Component {
static propTypes = {
examples: PropTypes.object.isRequired,
actions: PropTypes.object.isRequired,
};
render() {
const { fetchRedditListPending, redditList, fetchRedditListError } = this.props.examples;
const { fetchRedditList } = this.props.actions;
return (
<div className="examples-reddit-list-page">
<h1>Reddit API Usage</h1>
<p>This demo shows how to use Redux async actions to fetch data from Reddit's REST API.</p>
<button className="btn-fetch-reddit" disabled={fetchRedditListPending} onClick={fetchRedditList}>
{fetchRedditListPending ? 'Fetching...' : 'Fetch reactjs topics'}
</button>
{fetchRedditListError && (
<div className="fetch-list-error">Failed to load: {fetchRedditListError.toString()}</div>
)}
{redditList.length > 0 ? (
<ul className="examples-reddit-list">
{redditList.map(item => (
<li key={item.data.id}>
<a href={item.data.url}>{item.data.title}</a>
</li>
))}
</ul>
) : (
<div className="no-items-tip">No items yet.</div>
)}
</div>
);
}
}
/* istanbul ignore next */
function mapStateToProps(state) {
return {
examples: state.examples,
};
}
/* istanbul ignore next */
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({ fetchRedditList }, dispatch),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(RedditListPage);
src/features/examples/RedditListPage.scss
-24
View File
@@ -1,24 +0,0 @@
@import '../../styles/mixins';
.examples-reddit-list-page {
color: #555;
h1 {
margin-top: 0px;
font-size: 28px;
}
a {
color: #2db7f5;
text-decoration: none;
&:hover {
color: #f90;
}
}
.fetch-list-error {
display: block;
margin-top: 20px;
color: red;
}
.no-items-tip {
margin-top: 15px;
}
}
src/features/examples/SidePanel.js
-54
View File
@@ -1,54 +0,0 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actions from './redux/actions';
export class SidePanel extends Component {
static propTypes = {
examples: PropTypes.object.isRequired,
actions: PropTypes.object.isRequired,
};
render() {
return (
<div className="examples-side-panel">
<ul>
<li>
<Link to="/examples">Welcome</Link>
</li>
<li>
<Link to="/examples/counter">Counter Demo</Link>
</li>
<li>
<Link to="/examples/reddit">Reddit API Demo</Link>
</li>
<li>
<Link to="/">Back to start page</Link>
</li>
</ul>
<div className="memo">
This is a Rekit feature that contains some examples for you to quick learn how Rekit works. To remove it just
delete the feature.
</div>
</div>
);
}
}
/* istanbul ignore next */
function mapStateToProps(state) {
return {
examples: state.examples,
};
}
/* istanbul ignore next */
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({ ...actions }, dispatch),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(SidePanel);
src/features/examples/SidePanel.scss
-46
View File
@@ -1,46 +0,0 @@
@import '../../styles/mixins';
.examples-side-panel {
position: fixed;
box-sizing: border-box;
overflow: auto;
top: 0;
left: 0;
margin: 0;
padding: 40px;
width: 260px;
height: 100%;
background-color: #f7f7f7;
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
li {
padding: 8px;
}
a {
color: #2db7f5;
text-decoration: none;
&:hover {
color: #f90;
}
}
.memo {
&:before {
content: ' ';
display: block;
height: 2px;
width: 60px;
margin-bottom: 10px;
background-color: #ddd;
}
font-size: 13px;
margin-top: 40px;
line-height: 150%;
color: #aaa;
}
}
src/features/examples/WelcomePage.js
-57
View File
@@ -1,57 +0,0 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import rekitLogo from '../../images/rekit-logo.svg';
import * as actions from './redux/actions';
export class WelcomePage extends Component {
static propTypes = {
examples: PropTypes.object.isRequired,
actions: PropTypes.object.isRequired,
};
render() {
return (
<div className="examples-welcome-page">
<a href="http://github.com/supnate/rekit">
<img src={rekitLogo} className="app-logo" alt="logo" />
</a>
<h1>Welcome to Rekit!</h1>
<p>
Contratulations! You have created your Rekit app successfully! Seeing this page means everything works well
now.
</p>
<p>
By default <a href="https://github.com/supnate/rekit">Rekit Studio</a> is also started at{' '}
<a href="http://localhost:6076">http://localhost:6076</a> to manage the project.
</p>
<p>
This is an example feature showing about how to layout the container, how to use Redux and React Router. If
you want to remove all sample code, just delete the feature from Rekit Studio. Alternatively you can run&nbsp;
<code>rekit remove feature examples</code> by command line under the project folder.
</p>
<p>
To learn more about how to get started, you can visit:{' '}
<a href="http://rekit.js.org/docs/get-started.html">Get started</a>
</p>
</div>
);
}
}
/* istanbul ignore next */
function mapStateToProps(state) {
return {
examples: state.examples,
};
}
/* istanbul ignore next */
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({ ...actions }, dispatch),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(WelcomePage);
src/features/examples/WelcomePage.scss
-36
View File
@@ -1,36 +0,0 @@
@import '../../styles/mixins';
.examples-welcome-page {
line-height: 160%;
position: relative;
color: #555;
a {
color: #2db7f5;
text-decoration: none;
&:hover {
color: #f90;
}
}
.app-logo {
position: absolute;
top: -14px;
left: 0px;
width: 50px;
}
h1 {
padding-left: 60px;
margin-bottom: 40px;
font-size: 28px;
}
h3 {
margin-top: 20px;
}
code {
font-size: 14px;
}
}
src/features/examples/index.js
-5
View File
@@ -1,5 +0,0 @@
export { default as SidePanel } from './SidePanel';
export { default as WelcomePage } from './WelcomePage';
export { default as CounterPage } from './CounterPage';
export { default as RedditListPage } from './RedditListPage';
export { default as Layout } from './Layout';
src/features/examples/redux/actions.js
-4
View File
@@ -1,4 +0,0 @@
export { counterPlusOne } from './counterPlusOne';
export { counterMinusOne } from './counterMinusOne';
export { counterReset } from './counterReset';
export { fetchRedditList, dismissFetchRedditListError } from './fetchRedditList';
src/features/examples/redux/constants.js
-7
View File
@@ -1,7 +0,0 @@
export const EXAMPLES_COUNTER_PLUS_ONE = 'EXAMPLES_COUNTER_PLUS_ONE';
export const EXAMPLES_COUNTER_MINUS_ONE = 'EXAMPLES_COUNTER_MINUS_ONE';
export const EXAMPLES_COUNTER_RESET = 'EXAMPLES_COUNTER_RESET';
export const EXAMPLES_FETCH_REDDIT_LIST_BEGIN = 'EXAMPLES_FETCH_REDDIT_LIST_BEGIN';
export const EXAMPLES_FETCH_REDDIT_LIST_SUCCESS = 'EXAMPLES_FETCH_REDDIT_LIST_SUCCESS';
export const EXAMPLES_FETCH_REDDIT_LIST_FAILURE = 'EXAMPLES_FETCH_REDDIT_LIST_FAILURE';
export const EXAMPLES_FETCH_REDDIT_LIST_DISMISS_ERROR = 'EXAMPLES_FETCH_REDDIT_LIST_DISMISS_ERROR';
src/features/examples/redux/counterMinusOne.js
-24
View File
@@ -1,24 +0,0 @@
// Rekit uses a new approach to organizing actions and reducers. That is
// putting related actions and reducers in one file. See more at:
// https://medium.com/@nate_wang/a-new-approach-for-managing-redux-actions-91c26ce8b5da
import { EXAMPLES_COUNTER_MINUS_ONE } from './constants';
export function counterMinusOne() {
return {
type: EXAMPLES_COUNTER_MINUS_ONE,
};
}
export function reducer(state, action) {
switch (action.type) {
case EXAMPLES_COUNTER_MINUS_ONE:
return {
...state,
count: state.count - 1,
};
default:
return state;
}
}
src/features/examples/redux/counterPlusOne.js
-24
View File
@@ -1,24 +0,0 @@
// Rekit uses a new approach to organizing actions and reducers. That is
// putting related actions and reducers in one file. See more at:
// https://medium.com/@nate_wang/a-new-approach-for-managing-redux-actions-91c26ce8b5da
import { EXAMPLES_COUNTER_PLUS_ONE } from './constants';
export function counterPlusOne() {
return {
type: EXAMPLES_COUNTER_PLUS_ONE,
};
}
export function reducer(state, action) {
switch (action.type) {
case EXAMPLES_COUNTER_PLUS_ONE:
return {
...state,
count: state.count + 1,
};
default:
return state;
}
}
src/features/examples/redux/counterReset.js
-24
View File
@@ -1,24 +0,0 @@
// Rekit uses a new approach to organizing actions and reducers. That is
// putting related actions and reducers in one file. See more at:
// https://medium.com/@nate_wang/a-new-approach-for-managing-redux-actions-91c26ce8b5da
import { EXAMPLES_COUNTER_RESET } from './constants';
export function counterReset() {
return {
type: EXAMPLES_COUNTER_RESET,
};
}
export function reducer(state, action) {
switch (action.type) {
case EXAMPLES_COUNTER_RESET:
return {
...state,
count: 0,
};
default:
return state;
}
}
src/features/examples/redux/fetchRedditList.js
-97
View File
@@ -1,97 +0,0 @@
import axios from 'axios';
import {
EXAMPLES_FETCH_REDDIT_LIST_BEGIN,
EXAMPLES_FETCH_REDDIT_LIST_SUCCESS,
EXAMPLES_FETCH_REDDIT_LIST_FAILURE,
EXAMPLES_FETCH_REDDIT_LIST_DISMISS_ERROR,
} from './constants';
// Rekit uses redux-thunk for async actions by default: https://github.com/gaearon/redux-thunk
// If you prefer redux-saga, you can use rekit-plugin-redux-saga: https://github.com/supnate/rekit-plugin-redux-saga
export function fetchRedditList(args = {}) {
return dispatch => {
// optionally you can have getState as the second argument
dispatch({
type: EXAMPLES_FETCH_REDDIT_LIST_BEGIN,
});
// Return a promise so that you could control UI flow without states in the store.
// For example: after submit a form, you need to redirect the page to another when succeeds or show some errors message if fails.
// It's hard to use state to manage it, but returning a promise allows you to easily achieve it.
// e.g.: handleSubmit() { this.props.actions.submitForm(data).then(()=> {}).catch(() => {}); }
const promise = new Promise((resolve, reject) => {
// doRequest is a placeholder Promise. You should replace it with your own logic.
// See the real-word example at: https://github.com/supnate/rekit/blob/master/src/features/home/redux/fetchRedditReactjsList.js
// args.error here is only for test coverage purpose.
const doRequest = axios.get('http://www.reddit.com/r/reactjs.json');
doRequest.then(
res => {
dispatch({
type: EXAMPLES_FETCH_REDDIT_LIST_SUCCESS,
data: res.data,
});
resolve(res);
},
// Use rejectHandler as the second argument so that render errors won't be caught.
err => {
dispatch({
type: EXAMPLES_FETCH_REDDIT_LIST_FAILURE,
data: { error: err },
});
reject(err);
}
);
});
return promise;
};
}
// Async action saves request error by default, this method is used to dismiss the error info.
// If you don't want errors to be saved in Redux store, just ignore this method.
export function dismissFetchRedditListError() {
return {
type: EXAMPLES_FETCH_REDDIT_LIST_DISMISS_ERROR,
};
}
export function reducer(state, action) {
switch (action.type) {
case EXAMPLES_FETCH_REDDIT_LIST_BEGIN:
// Just after a request is sent
return {
...state,
fetchRedditListPending: true,
fetchRedditListError: null,
};
case EXAMPLES_FETCH_REDDIT_LIST_SUCCESS:
// The request is success
return {
...state,
redditList: action.data.data.children,
fetchRedditListPending: false,
fetchRedditListError: null,
};
case EXAMPLES_FETCH_REDDIT_LIST_FAILURE:
// The request is failed
return {
...state,
fetchRedditListPending: false,
fetchRedditListError: action.data.error,
};
case EXAMPLES_FETCH_REDDIT_LIST_DISMISS_ERROR:
// Dismiss the request failure error
return {
...state,
fetchRedditListError: null,
};
default:
return state;
}
}
src/features/examples/redux/initialState.js
-15
View File
@@ -1,15 +0,0 @@
// Initial state is the place you define all initial values for the Redux store of the feature.
// In the 'standard' way, initialState is defined in reducers: http://redux.js.org/docs/basics/Reducers.html
// But when application grows, there will be multiple reducers files, it's not intuitive what data is managed by the whole store.
// So Rekit extracts the initial state definition into a separate module so that you can have
// a quick view about what data is used for the feature, at any time.
// NOTE: initialState constant is necessary so that Rekit could auto add initial state when creating async actions.
const initialState = {
count: 0,
redditList: [],
fetchRedditListPending: false,
fetchRedditListError: null,
};
export default initialState;
src/features/examples/redux/reducer.js
-31
View File
@@ -1,31 +0,0 @@
// This is the root reducer of the feature. It is used for:
// 1. Load reducers from each action in the feature and process them one by one.
// Note that this part of code is mainly maintained by Rekit, you usually don't need to edit them.
// 2. Write cross-topic reducers. If a reducer is not bound to some specific action.
// Then it could be written here.
// Learn more from the introduction of this approach:
// https://medium.com/@nate_wang/a-new-approach-for-managing-redux-actions-91c26ce8b5da.
import initialState from './initialState';
import { reducer as counterPlusOneReducer } from './counterPlusOne';
import { reducer as counterMinusOneReducer } from './counterMinusOne';
import { reducer as counterResetReducer } from './counterReset';
import { reducer as fetchRedditListReducer } from './fetchRedditList';
const reducers = [
counterPlusOneReducer,
counterMinusOneReducer,
counterResetReducer,
fetchRedditListReducer,
];
export default function reducer(state = initialState, action) {
let newState;
switch (action.type) {
// Handle cross-topic actions here
default:
newState = state;
break;
}
return reducers.reduce((s, r) => r(s, action), newState);
}
src/features/examples/route.js
-20
View File
@@ -1,20 +0,0 @@
// This is the JSON way to define React Router rules in a Rekit app.
// Learn more from: http://rekit.js.org/docs/routing.html
import {
WelcomePage,
CounterPage,
RedditListPage,
Layout,
} from './';
export default {
path: 'examples',
name: 'Examples',
component: Layout,
childRoutes: [
{ path: '', name: 'Welcome page', component: WelcomePage },
{ path: 'counter', name: 'Counter page', component: CounterPage },
{ path: 'reddit', name: 'Reddit list page', component: RedditListPage },
],
};
src/features/examples/style.scss
-6
View File
@@ -1,6 +0,0 @@
@import '../../styles/mixins';
@import './SidePanel';
@import './WelcomePage';
@import './CounterPage';
@import './RedditListPage';
@import './Layout';
src/styles/index.scss
-1
View File
@@ -2,4 +2,3 @@
@import './global';
@import '../features/home/style';
@import '../features/common/style';
@import '../features/examples/style';