diff --git a/index.ios.js b/index.ios.js index fb4e86d..8586ee7 100644 --- a/index.ios.js +++ b/index.ios.js @@ -6,48 +6,16 @@ import React, { Component } from 'react'; import { - AppRegistry, - StyleSheet, - Text, - View + AppRegistry } from 'react-native'; +import MainApp from './src' export default class BuyWhat extends Component { render() { return ( - - - Welcome to React Native! - - - To get started, edit index.ios.js - - - Press Cmd+R to reload,{'\n'} - Cmd+D or shake for dev menu - - + ); - } + } } -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#F5FCFF', - }, - welcome: { - fontSize: 20, - textAlign: 'center', - margin: 10, - }, - instructions: { - textAlign: 'center', - color: '#333333', - marginBottom: 5, - }, -}); - AppRegistry.registerComponent('BuyWhat', () => BuyWhat); diff --git a/ios/BuyWhat/Images.xcassets/AppIcon.appiconset/Contents.json b/ios/BuyWhat/Images.xcassets/AppIcon.appiconset/Contents.json index 118c98f..b8236c6 100644 --- a/ios/BuyWhat/Images.xcassets/AppIcon.appiconset/Contents.json +++ b/ios/BuyWhat/Images.xcassets/AppIcon.appiconset/Contents.json @@ -1,5 +1,15 @@ { "images" : [ + { + "idiom" : "iphone", + "size" : "20x20", + "scale" : "2x" + }, + { + "idiom" : "iphone", + "size" : "20x20", + "scale" : "3x" + }, { "idiom" : "iphone", "size" : "29x29", diff --git a/src/actions/index.js b/src/actions/index.js index 7881982..93a4abd 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -36,7 +36,13 @@ export const removeDialog = () => ({ export const getStoreList = () => dispatch => { dispatch(toggleLoading(1)) fetch(`${apiUrl}/store`, genRequest()) - .then(response => response.json()) + .then(response => { + if(response.status == 404) return { + status: 0, + message: 'api not found' + } + return response.json() + }) .then(json => { dispatch(toggleLoading(0)) if (json.status != 1) return dispatch(addDialog(json.message)) @@ -50,7 +56,13 @@ export const getStoreList = () => dispatch => { export const getItems = (id) => dispatch => { dispatch(toggleLoading(1)) fetch(`${apiUrl}/item/${id}`, genRequest()) - .then(response => response.json()) + .then(response => { + if(response.status == 404) return { + status: 0, + message: 'api not found' + } + return response.json() + }) .then(json => { dispatch(toggleLoading(0)) if(json.status != 1) return dispatch(addDialog(json.message)) @@ -67,6 +79,10 @@ export const clearStore = () => ({ export const clearItems = () => ({ type: 'clear_items' }) +export const setStore = (id) => ({ + type: 'set_store', + id +}) export const toPage = (page = 0) => ({ type: 'page', diff --git a/src/components/Dialog.js b/src/components/Dialog.js new file mode 100644 index 0000000..d33552f --- /dev/null +++ b/src/components/Dialog.js @@ -0,0 +1,54 @@ +import React from 'react'; +import { View, Text, Button, TouchableOpacity, Dimensions } from 'react-native'; +const width = Dimensions.get('window').width; +const height = Dimensions.get('window').height; + +const Dialog = ({ show, obj, onButtonPress }) => { + if (!show) return null; + return ( + + + + {obj} + + + onButtonPress()}> + OK + + + + + ) +} + +export default Dialog; \ No newline at end of file diff --git a/src/components/ItemsPage/index.js b/src/components/ItemsPage/index.js index 6c8c7e9..3155730 100644 --- a/src/components/ItemsPage/index.js +++ b/src/components/ItemsPage/index.js @@ -7,31 +7,115 @@ const ds = new ListView.DataSource({ } }) -export default ItemsPage = ({ dev, show, list, refresh, getList, backPage }) => { - if (!show) return null - console.log('Items') - return ( - - - backPage()}> - <<Back - +const defState = () => ({ + show: false, + list: [], + id: '', + result: null +}) + +const shuffle = (array) => { + var currentIndex = array.length, temporaryValue, randomIndex; + + // While there remain elements to shuffle... + while (0 !== currentIndex) { + + // Pick a remaining element... + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex -= 1; + + // And swap it with the current element. + temporaryValue = array[currentIndex]; + array[currentIndex] = array[randomIndex]; + array[randomIndex] = temporaryValue; + } + + return array; +} + +export default class ItemsPage extends React.Component { + + constructor(props) { + super(props) + this.state = defState() + this.refreshList = this.refreshList.bind(this) + this.randomItem = this.randomItem.bind(this) + } + + refreshList() { + let { getList } = this.props + getList(this.state.id) + } + + randomItem() { + let ls = shuffle([...this.state.list]) + this.setState({ + result: ls[0] || null + }) + } + + componentWillReceiveProps(nextProps) { + if (this.state.show !== nextProps.show) { + this.setState({ + show: nextProps.show, + result: null + }) + } + if (this.state.id !== nextProps.sid) { + this.setState({ id: nextProps.sid }, () => { + this.refreshList() + }) + } + this.setState({ + list: nextProps.list + }) + } + + + render() { + let { dev, list, refresh, getList, backPage } = this.props + if (!this.state.show) return null + console.log('Items') + return ( + + + backPage()}> + <<Back + + + + this.randomItem()}> + Random!! + + + + {this.state.result != null ? 結果: {this.state.result.name} / {this.state.result.price} : null} + + } + enableEmptySections={true} + dataSource={ds.cloneWithRows(list)} + renderRow={data => { + return ( + {data.name} / {data.price} + ) + }} /> - } - 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 f8f0791..013256f 100644 --- a/src/components/StoreList/Item.js +++ b/src/components/StoreList/Item.js @@ -16,7 +16,8 @@ const Item = ({ name, onClick }) => { flexDirection: 'column' }}> {name} diff --git a/src/components/StoreList/index.js b/src/components/StoreList/index.js index f2a5e51..c4f8bd8 100644 --- a/src/components/StoreList/index.js +++ b/src/components/StoreList/index.js @@ -14,6 +14,12 @@ export default StoreList = ({dev, show, list, refresh, getList, loadItems}) => { console.log('Store', list) return ( + + 請選擇店家 + } enableEmptySections={true} diff --git a/src/containers/Dialog.js b/src/containers/Dialog.js new file mode 100644 index 0000000..10e6fe4 --- /dev/null +++ b/src/containers/Dialog.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import Dialog from '../components/Dialog'; +import { removeDialog } from '../actions'; + +const mapStateToProps = (state) => ({ + obj: state.ui.dialog[0] || null, + show: state.ui.dialog.length > 0 +}); + +const mapDispatchToProps = (dispatch, ownProps) => ({ + onButtonPress: () => { + dispatch(removeDialog()); + } +}); + +export default connect(mapStateToProps, mapDispatchToProps)(Dialog); diff --git a/src/containers/ItemsPage.js b/src/containers/ItemsPage.js index 401bf3a..cbf2c26 100644 --- a/src/containers/ItemsPage.js +++ b/src/containers/ItemsPage.js @@ -1,17 +1,18 @@ import {connect} from 'react-redux' import ItemsPage from '../components/ItemsPage' -import {toPage, getStoreList, clearItems} from '../actions' +import {toPage, getStoreList, clearItems, getItems} from '../actions' const mapStateToProps = (state) => ({ dev: state.sys.dev, show: state.ui.page == 1, refresh: state.ui.loading, - list: state.sys.items || [] + list: state.sys.items || [], + sid: state.sys.sid }) const mapDispatchToProps = (dispatch, ownProps) => ({ - getList: () => { - dispatch(getItems()) + getList: (id) => { + dispatch(getItems(id)) }, backPage: () => { dispatch(clearItems()) diff --git a/src/containers/StoreList.js b/src/containers/StoreList.js index f82d91d..ce36fee 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, getItems, toPage, clearStore} from '../actions' +import {getStoreList, getItems, toPage, clearStore, setStore} from '../actions' const mapStateToProps = (state) => ({ dev: state.sys.dev, @@ -15,6 +15,7 @@ const mapDispatchToProps = (dispatch, ownProps) => ({ }, loadItems: (id) => { dispatch(clearStore()) + dispatch(setStore(id)) dispatch(toPage(1)) dispatch(getItems(id)) } diff --git a/src/index.js b/src/index.js index 1b67fae..c5d0f97 100644 --- a/src/index.js +++ b/src/index.js @@ -3,12 +3,13 @@ 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 {View, Text, Platform} from 'react-native' import {SetDev, getStoreList} from './actions' // import pages import StoreList from './containers/StoreList' import ItemsPage from './containers/ItemsPage' +import Dialog from './containers/Dialog' const middleware = [thunk] @@ -21,7 +22,10 @@ store.subscribe(() => { const VV = (props) => { console.log(props) return ( - + { props.children } @@ -34,8 +38,6 @@ const CView = connect()(VV) class Main extends React.Component { componentDidMount(){ - let {dev} = this.props - store.dispatch(SetDev(dev)) store.dispatch(getStoreList()) } @@ -45,6 +47,7 @@ class Main extends React.Component { + ) diff --git a/src/reducers/sys.js b/src/reducers/sys.js index b6b78e0..4725867 100644 --- a/src/reducers/sys.js +++ b/src/reducers/sys.js @@ -1,6 +1,7 @@ const stateDefault = () => ({ dev: '', store: [], + sid: '', items: [] }) @@ -16,6 +17,8 @@ export default sysReducer = (state = stateDefault(), action) => { return { ...state, items: [] } case 'items': return { ...state, items: action.list } + case 'set_store': + return { ...state, sid: action.id } default: return state }