add items page

master
Jay 6 years ago
parent 1ca78c34f1
commit 9f9f8affe0
  1. 28
      src/actions/index.js
  2. 37
      src/components/ItemsPage/index.js
  3. 8
      src/components/StoreList/Item.js
  4. 11
      src/components/StoreList/index.js
  5. 23
      src/containers/ItemsPage.js
  6. 7
      src/containers/StoreList.js
  7. 19
      src/index.js
  8. 6
      src/reducers/sys.js

@ -45,4 +45,30 @@ export const getStoreList = () => dispatch => {
list: json.record || []
})
})
}
}
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
})

@ -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 (
<View style={{ flex: 1 }}>
<View style={{
height: 25,
marginTop: 5,
marginLeft: 10,
marginRight: 10,
marginBottom: 5
}}>
<TouchableOpacity onPress={() => backPage()}>
<Text style={{fontSize: 20}}>&lt;&lt;Back</Text>
</TouchableOpacity>
</View>
<ListView
refreshControl={<RefreshControl refreshing={refresh} onRefresh={getList} />}
enableEmptySections={true}
dataSource={ds.cloneWithRows(list)}
renderRow={data => {
return (
<Text>{data.name} / {data.price}</Text>
)
}} />
</View>
)
}

@ -1,7 +1,7 @@
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
const Item = ({ name }) => {
const Item = ({ name, onClick }) => {
return (
<TouchableOpacity style={{
flex: 1,
@ -10,12 +10,14 @@ const Item = ({ name }) => {
paddingBottom: 5,
paddingLeft: 10,
paddingRight: 10
}} onPress={() => { console.log(`item press`); }}>
}} onPress={() => { onClick() }}>
<View style={{
flex: 1,
flexDirection: 'column'
}}>
<Text>{name}</Text>
<Text style={{
fontSize: 20
}}>{name}</Text>
</View>
</TouchableOpacity>
)

@ -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 (
<View style={{flex: 1}}>
<ListView
refreshControl={<RefreshControl refreshing={refresh} onRefresh={getList} />}
enableEmptySections={true}
dataSource={ds.cloneWithRows(list)}
dataSource={ds1.cloneWithRows(list)}
renderRow={data => {
return (
<Text>{data.name}</Text>
<Item name={data.name} onClick={()=>loadItems(data.id)} />
)
}} />
</View>

@ -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)

@ -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))
}
})

@ -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 (
<View style={{flex: 1}}>
{
props.children
}
</View>
)
}
const CView = connect()(VV)
class Main extends React.Component {
componentDidMount(){
@ -28,7 +42,10 @@ class Main extends React.Component {
render() {
return (
<Provider store={store}>
<StoreList />
<CView>
<StoreList />
<ItemsPage />
</CView>
</Provider>
)
}

@ -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
}

Loading…
Cancel
Save