first

src/actions/index.js

@@ -0,0 +1,48 @@
+const apiUrl = 'https://api.trj.tw/api/v1/buywhat'
+
+const genRequest = (method = 'GET', data = {}) => {
+  let json = {
+    method,
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+    },
+    mode: 'cors',
+    body: JSON.stringify(data)
+  }
+  if(/(get|head)/i.test(method)) delete json.body
+  return json
+}
+
+export const SetDev = (dev) => ({
+  type: 'device',
+  dev
+})
+
+export const toggleLoading = (flag = false) => ({
+  type: 'loading',
+  act: flag
+})
+
+export const addDialog = (msg = '') => ({
+  type: 'add_dialog',
+  msg
+})
+
+export const removeDialog = () => ({
+  type: 'remove_dialog'
+})
+
+export const getStoreList = () => dispatch => {
+  dispatch(toggleLoading(1))
+  fetch(`${apiUrl}/store`, genRequest())
+    .then(response => response.json())
+    .then(json => {
+      dispatch(toggleLoading(0))
+      if (json.status != 1) return dispatch(addDialog(json.message))
+      return dispatch({
+        type: 'store',
+        list: json.record || []
+      })
+    })
+}

src/components/StoreList/Item.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+
+const Item = ({ name }) => {
+  return (
+    <TouchableOpacity style={{
+      flex: 1,
+      flexDirection: 'row',
+      paddingTop: 5,
+      paddingBottom: 5,
+      paddingLeft: 10,
+      paddingRight: 10
+    }} onPress={() => { console.log(`item press`); }}>
+      <View style={{
+        flex: 1,
+        flexDirection: 'column'
+      }}>
+        <Text>{name}</Text>
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+export default Item;

src/components/StoreList/index.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import {View, Text, ListView, RefreshControl} from 'react-native'
+
+const ds = new ListView.DataSource({
+  rowHasChanged: (r1, r2) => {
+    return r1.name != r2.name
+  }
+})
+
+export default StoreList = ({dev, show, list, refresh, getList}) => {
+  if(!show) return null
+  return (
+    <View style={{flex: 1}}>
+      <ListView
+        refreshControl={<RefreshControl refreshing={refresh} onRefresh={getList} />}
+        enableEmptySections={true}
+        dataSource={ds.cloneWithRows(list)}
+        renderRow={data => {
+          return (
+            <Text>{data.name}</Text>
+          )
+        }} />
+    </View>
+  )
+}

src/containers/StoreList.js

@@ -0,0 +1,18 @@
+import {connect} from 'react-redux'
+import StoreList from '../components/StoreList'
+import {getStoreList} from '../actions'
+
+const mapStateToProps = (state) => ({
+  dev: state.sys.dev,
+  show: state.ui.page == 0,
+  refresh: state.ui.loading,
+  list: state.sys.store || []
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  getList: () => {
+    dispatch(getStoreList())
+  }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(StoreList)

src/index.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import {createStore, applyMiddleware} from 'redux'
+import reducers from './reducers'
+import {Provider, connect} from 'react-redux'
+import thunk from 'redux-thunk'
+import {View, Text} from 'react-native'
+import {SetDev, getStoreList} from './actions'
+
+// import pages
+import StoreList from './containers/StoreList'
+
+const middleware = [thunk]
+
+const store = createStore(reducers, applyMiddleware(...middleware))
+
+store.subscribe(() => {
+  console.log(JSON.stringify(store.getState()))
+})
+
+class Main extends React.Component {
+
+  componentDidMount(){
+    let {dev} = this.props
+    store.dispatch(SetDev(dev))
+    store.dispatch(getStoreList())
+  }
+
+  render() {
+    return (
+      <Provider store={store}>
+        <StoreList />
+      </Provider>
+    )
+  }
+}
+
+
+
+export default Main

src/reducers/index.js

@@ -0,0 +1,9 @@
+import {combineReducers} from 'redux'
+
+import sys from './sys'
+import ui from './ui'
+
+export default reducers = combineReducers({
+  sys,
+  ui
+})

src/reducers/sys.js

@@ -0,0 +1,16 @@
+const stateDefault = () => ({
+  dev: '',
+  store: [],
+  items: []
+})
+
+export default sysReducer = (state = stateDefault(), action) => {
+  switch (action.type) {
+    case 'device':
+      return { ...state, dev: action.dev }
+    case 'store':
+      return { ...state, store: action.list }
+    default:
+      return state
+  }
+}

src/reducers/ui.js

@@ -0,0 +1,20 @@
+const stateDefault = () => ({
+  page: 0,
+  loading: false,
+  dialog: []
+})
+
+export default uiReducer = (state = stateDefault(), action) => {
+  switch (action.type) {
+    case 'loading':
+      return { ...state, loading: action.act == true }
+    case 'add_dialog':
+      return { ...state, dialog: [...state.dialog, action.msg] }
+    case 'remove_dialog':
+      return { ...state, dialog: state.dialog.slice(1) }
+    case 'page':
+      return { ...state, page: action.page }
+    default:
+      return state
+  }
+}