From 9f9f8affe0cbe7123181ff6c77534a49ff8098c9 Mon Sep 17 00:00:00 2001 From: Jay Date: Tue, 4 Jul 2017 23:08:19 +0800 Subject: [PATCH] add items page --- src/actions/index.js | 28 ++++++++++++++++++++++- src/components/ItemsPage/index.js | 37 +++++++++++++++++++++++++++++++ src/components/StoreList/Item.js | 8 ++++--- src/components/StoreList/index.js | 11 +++++---- src/containers/ItemsPage.js | 23 +++++++++++++++++++ src/containers/StoreList.js | 7 +++++- src/index.js | 19 +++++++++++++++- src/reducers/sys.js | 6 +++++ 8 files changed, 129 insertions(+), 10 deletions(-) create mode 100644 src/components/ItemsPage/index.js create mode 100644 src/containers/ItemsPage.js diff --git a/src/actions/index.js b/src/actions/index.js index 61645ba..7881982 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -45,4 +45,30 @@ export const getStoreList = () => dispatch => { list: json.record || [] }) }) -} \ No newline at end of file +} + +export const getItems = (id) => dispatch => { + dispatch(toggleLoading(1)) + fetch(`${apiUrl}/item/${id}`, genRequest()) + .then(response => response.json()) + .then(json => { + dispatch(toggleLoading(0)) + if(json.status != 1) return dispatch(addDialog(json.message)) + return dispatch({ + type: 'items', + list: json.record || [] + }) + }) +} + +export const clearStore = () => ({ + type: 'clear_store' +}) +export const clearItems = () => ({ + type: 'clear_items' +}) + +export const toPage = (page = 0) => ({ + type: 'page', + page +}) \ No newline at end of file diff --git a/src/components/ItemsPage/index.js b/src/components/ItemsPage/index.js new file mode 100644 index 0000000..6c8c7e9 --- /dev/null +++ b/src/components/ItemsPage/index.js @@ -0,0 +1,37 @@ +import React from 'react' +import { View, Text, ListView, RefreshControl, TouchableOpacity } from 'react-native' + +const ds = new ListView.DataSource({ + rowHasChanged: (r1, r2) => { + return r1.name != r2.name + } +}) + +export default ItemsPage = ({ dev, show, list, refresh, getList, backPage }) => { + if (!show) return null + console.log('Items') + return ( + + + backPage()}> + <<Back + + + } + enableEmptySections={true} + dataSource={ds.cloneWithRows(list)} + renderRow={data => { + return ( + {data.name} / {data.price} + ) + }} /> + + ) +} \ No newline at end of file diff --git a/src/components/StoreList/Item.js b/src/components/StoreList/Item.js index 685ea56..f8f0791 100644 --- a/src/components/StoreList/Item.js +++ b/src/components/StoreList/Item.js @@ -1,7 +1,7 @@ import React from 'react'; import { View, Text, TouchableOpacity } from 'react-native'; -const Item = ({ name }) => { +const Item = ({ name, onClick }) => { return ( { paddingBottom: 5, paddingLeft: 10, paddingRight: 10 - }} onPress={() => { console.log(`item press`); }}> + }} onPress={() => { onClick() }}> - {name} + {name} ) diff --git a/src/components/StoreList/index.js b/src/components/StoreList/index.js index d63168f..f2a5e51 100644 --- a/src/components/StoreList/index.js +++ b/src/components/StoreList/index.js @@ -1,23 +1,26 @@ import React from 'react' import {View, Text, ListView, RefreshControl} from 'react-native' -const ds = new ListView.DataSource({ +import Item from './Item' + +const ds1 = new ListView.DataSource({ rowHasChanged: (r1, r2) => { return r1.name != r2.name } }) -export default StoreList = ({dev, show, list, refresh, getList}) => { +export default StoreList = ({dev, show, list, refresh, getList, loadItems}) => { if(!show) return null + console.log('Store', list) return ( } enableEmptySections={true} - dataSource={ds.cloneWithRows(list)} + dataSource={ds1.cloneWithRows(list)} renderRow={data => { return ( - {data.name} + loadItems(data.id)} /> ) }} /> diff --git a/src/containers/ItemsPage.js b/src/containers/ItemsPage.js new file mode 100644 index 0000000..401bf3a --- /dev/null +++ b/src/containers/ItemsPage.js @@ -0,0 +1,23 @@ +import {connect} from 'react-redux' +import ItemsPage from '../components/ItemsPage' +import {toPage, getStoreList, clearItems} from '../actions' + +const mapStateToProps = (state) => ({ + dev: state.sys.dev, + show: state.ui.page == 1, + refresh: state.ui.loading, + list: state.sys.items || [] +}) + +const mapDispatchToProps = (dispatch, ownProps) => ({ + getList: () => { + dispatch(getItems()) + }, + backPage: () => { + dispatch(clearItems()) + dispatch(toPage(0)) + dispatch(getStoreList()) + } +}) + +export default connect(mapStateToProps, mapDispatchToProps)(ItemsPage) \ No newline at end of file diff --git a/src/containers/StoreList.js b/src/containers/StoreList.js index 7029b13..f82d91d 100644 --- a/src/containers/StoreList.js +++ b/src/containers/StoreList.js @@ -1,6 +1,6 @@ import {connect} from 'react-redux' import StoreList from '../components/StoreList' -import {getStoreList} from '../actions' +import {getStoreList, getItems, toPage, clearStore} from '../actions' const mapStateToProps = (state) => ({ dev: state.sys.dev, @@ -12,6 +12,11 @@ const mapStateToProps = (state) => ({ const mapDispatchToProps = (dispatch, ownProps) => ({ getList: () => { dispatch(getStoreList()) + }, + loadItems: (id) => { + dispatch(clearStore()) + dispatch(toPage(1)) + dispatch(getItems(id)) } }) diff --git a/src/index.js b/src/index.js index ec358d9..1b67fae 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,7 @@ import {SetDev, getStoreList} from './actions' // import pages import StoreList from './containers/StoreList' +import ItemsPage from './containers/ItemsPage' const middleware = [thunk] @@ -17,6 +18,19 @@ store.subscribe(() => { console.log(JSON.stringify(store.getState())) }) +const VV = (props) => { + console.log(props) + return ( + + { + props.children + } + + ) +} + +const CView = connect()(VV) + class Main extends React.Component { componentDidMount(){ @@ -28,7 +42,10 @@ class Main extends React.Component { render() { return ( - + + + + ) } diff --git a/src/reducers/sys.js b/src/reducers/sys.js index b6bec00..b6b78e0 100644 --- a/src/reducers/sys.js +++ b/src/reducers/sys.js @@ -10,6 +10,12 @@ export default sysReducer = (state = stateDefault(), action) => { return { ...state, dev: action.dev } case 'store': return { ...state, store: action.list } + case 'clear_store': + return { ...state, store: [] } + case 'clear_items': + return { ...state, items: [] } + case 'items': + return { ...state, items: action.list } default: return state }