add items page

src/actions/index.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
+})

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 (
+        <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>
+    )
+}

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

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 (
     <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>

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)

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

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 (
+    <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>
     )
   }

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
   }