finish publish topic

soliury · soliury · commit e195669894ca · 2015-08-04T14:42:45.000+08:00
diff --git a/app/components/overlay/Loading.js b/app/components/overlay/Loading.js
@@ -0,0 +1,76 @@
+var React = require('react-native')
+var { Icon } = require('react-native-icons')
+var Modal = require('react-native-modal')
+
+var window = require('../../util/window')
+var { width, height } = window.get()
+
+
+var {
+    View,
+    StyleSheet,
+    Component,
+    Text,
+    Image,
+    ActivityIndicatorIOS
+    } = React
+
+
+class Loading extends Component {
+    constructor(props) {
+        super(props)
+    }
+
+
+    render() {
+        return (
+            <Modal
+                style={modalStyles}
+                hideCloseButton={true}
+                isVisible={this.props.isVisible}
+                >
+
+                <ActivityIndicatorIOS
+                    style={modalStyles.row}
+                    size='large'
+                    ></ActivityIndicatorIOS>
+            </Modal>
+        )
+    }
+}
+
+
+var modalStyles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: 'transparent',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    backdrop: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: '#000000',
+        opacity: 0.3,
+    },
+    modal: {
+        backgroundColor: 'white',
+        flex: 1,
+        height: 120,
+        width: 120,
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 5
+    }
+})
+
+
+module.exports = Loading
diff --git a/app/configs/Router.js b/app/configs/Router.js
@@ -101,6 +101,18 @@ class Router {
     replaceWithHome() {
         this.navigator.popToTop()
     }
+
+    replaceWithTopic(props) {
+        let routesList = this.navigator.getCurrentRoutes()
+        let index = routesList[routesList.length - 1].index
+        var route = {
+            props: props,
+            index: index,
+            component: Topic,
+            sceneConfig: customFloatFromRight
+        }
+        this.navigator.replace(route)
+    }
 }
 
 module.exports = Router
diff --git a/app/containers/Publish.js b/app/containers/Publish.js
@@ -1,9 +1,14 @@
 var React = require('react-native')
 var { Icon } = require('react-native-icons')
 var Modal = require('react-native-modal')
-
+var precomputeStyle = require('precomputeStyle')
+var KeyboardEvents = require('react-native-keyboardevents')
+var KeyboardEventEmitter = KeyboardEvents.Emitter
 
 var Nav = require('../components/Nav')
+var Loading = require('../components/overlay/Loading')
+
+var TopicService = require('../services/TopicService')
 
 var window = require('../util/window')
 var { width, height } = window.get()
@@ -17,7 +22,8 @@ var {
     StyleSheet,
     PickerIOS,
     TouchableOpacity,
-    TextInput
+    TextInput,
+    ScrollView
     } = React
 
 
@@ -35,21 +41,88 @@ class Publish extends Component {
         this.state = {
             selectTab: 'share',
             isPickerShow: false,
-            dirty: false
+            dirty: false,
+            isPublishing: false
         }
+        this.updateKeyboardSpace = this.updateKeyboardSpace.bind(this)
+        this.resetKeyboardSpace = this.resetKeyboardSpace.bind(this)
     }
 
 
-    _renderPickerContent() {
-        return Object.keys(this.tabs).map(tab=> {
-            return (
-                <PickerItemIOS
-                    key={tab}
-                    value={tab}
-                    label={this.tabs[tab]}
-                    ></PickerItemIOS>
-            )
+    updateKeyboardSpace(frames) {
+        this.contentInput.setNativeProps({
+            height: contentHeight - frames.end.height
+        })
+    }
+
+    resetKeyboardSpace() {
+        this.contentInput.setNativeProps({
+            height: contentHeight
+        })
+    }
+
+
+    componentDidMount() {
+        KeyboardEventEmitter.on(KeyboardEvents.KeyboardDidShowEvent, this.updateKeyboardSpace)
+        KeyboardEventEmitter.on(KeyboardEvents.KeyboardWillHideEvent, this.resetKeyboardSpace)
+    }
+
+    componentWillUnmount() {
+        KeyboardEventEmitter.off(KeyboardEvents.KeyboardDidShowEvent, this.updateKeyboardSpace)
+        KeyboardEventEmitter.off(KeyboardEvents.KeyboardWillHideEvent, this.resetKeyboardSpace)
+    }
+
+
+    _blur() {
+        this.titleInput.blur()
+        this.contentInput.blur()
+    }
+
+
+    _validateForm() {
+        if (!this.state.dirty) {
+            return window.alert('请选择要发布的板块!')
+        }
+
+
+        if (!this.titleInputValue || this.titleInput == '') {
+            return window.alert('标题不能为空!')
+        }
+
+        if (!this.contentInputValue || this.contentInput == '') {
+            return window.alert('你还没写东西呢!')
+        }
+
+        if (this.titleInputValue.length <= 10) {
+            return window.alert('标题字数必须在10字以上!')
+        }
+
+        return true
+    }
+
+
+    _submit() {
+        if (this.state.isPublishing || !this._validateForm()) return
+
+        this.setState({
+            isPublishing: true
         })
+        TopicService.req.publish(this.titleInputValue, this.state.selectTab, this.contentInputValue, this.props.state.user.token)
+            .then(topicId=> {
+                this.props.router.replaceWithTopic({
+                    topicId: topicId,
+                    from: 'html'
+                })
+            })
+            .catch(err=> {
+                console.log(err)
+                window.alert('发布帖子失败!')
+            })
+            .done(()=> {
+                this.setState({
+                    isPublishing: false
+                })
+            })
     }
 
 
@@ -58,8 +131,7 @@ class Publish extends Component {
             isPickerShow: true,
             dirty: true
         })
-        this.titleInput.blur()
-        this.contentInput.blur()
+        this._blur()
     }
 
 
@@ -77,6 +149,19 @@ class Publish extends Component {
     }
 
 
+    _renderPickerContent() {
+        return Object.keys(this.tabs).map(tab=> {
+            return (
+                <PickerItemIOS
+                    key={tab}
+                    value={tab}
+                    label={this.tabs[tab]}
+                    ></PickerItemIOS>
+            )
+        })
+    }
+
+
     render() {
         var router = this.props.router
 
@@ -85,16 +170,15 @@ class Publish extends Component {
                 text: '返回',
                 onPress: ()=> {
                     router.pop()
+                    this._blur()
                 }
             },
             Center: {
                 text: '发表帖子'
             },
             Right: {
                 text: '发布',
-                onPress: ()=> {
-
-                }
+                onPress: ()=> this._submit()
             }
         }
 
@@ -105,7 +189,9 @@ class Publish extends Component {
                     navs={navs}
                     ></Nav>
 
-                <View style={styles.content}>
+                <ScrollView
+                    ref={view=>this.contentView=view}
+                    style={styles.content}>
                     <TouchableOpacity
                         onPress={this._onPickerPress.bind(this)}
                         >
@@ -142,8 +228,9 @@ class Publish extends Component {
                             ref={view=>this.titleInput=view}
                             placeholder='请输入标题'
                             style={styles.titleInput}
-                            //onChangeText={(text) => this.setState({text})}
-                            //value={this.state.text}
+                            onChangeText={(text) => {
+                                this.titleInputValue = text
+                            }}
                             />
                     </View>
 
@@ -153,11 +240,12 @@ class Publish extends Component {
                         value={'\n'+config.replySuffix}
                         style={styles.topicContent}
                         multiline={true}
-                        //onChangeText={(text) => this.setState({text})}
-                        //value={this.state.text}
+                        onChangeText={(text) => {
+                            this.contentInputValue = text
+                        }}
                         />
 
-                </View>
+                </ScrollView>
 
 
                 <Modal
@@ -180,14 +268,18 @@ class Publish extends Component {
 
                 </Modal>
 
+                <Loading
+                    isVisible={this.state.isPublishing}
+                    ></Loading>
+
             </View>
         )
     }
 }
 
 
 var textColor = 'rgba(0,0,0,0.7)'
-
+var contentHeight = height - 51 * 2 - Nav.navHeight
 
 var styles = StyleSheet.create({
     container: {
@@ -229,7 +321,7 @@ var styles = StyleSheet.create({
         alignItems: 'flex-start',
         justifyContent: 'space-between',
         paddingTop: 20,
-        height: height - 51 * 2 - Nav.navHeight
+        height: contentHeight
     }
 })
 
diff --git a/app/containers/Topic.js b/app/containers/Topic.js
@@ -298,7 +298,12 @@ class Topic extends Component {
         }
 
         return (
-            <View style={styles.container}></View>
+            <View style={styles.container}>
+                <ActivityIndicatorIOS
+                    size="large"
+                    animating={true}
+                    style={{marginTop:20,width:width,flex:1}}/>
+            </View>
         )
 
     }
diff --git a/app/services/TopicService.js b/app/services/TopicService.js
@@ -130,5 +130,23 @@ req.upComment = function (replyId, token) {
 }
 
 
+req.publish = function (title, tab, content, token) {
+    let url = `${config.domain + config.apiPath}/topics`
+    const body = {
+        title: title,
+        tab: tab,
+        content: content,
+        accesstoken: token
+    }
+    return request.post(url, body)
+        .then(data=> {
+            if (data.success) {
+                return data.topic_id
+            }
+            throw 'publish failed'
+        })
+}
+
+
 exports.storage = storage
 exports.req = req

Original file line number	Diff line number	Diff line change
`@@ -298,7 +298,12 @@ class Topic extends Component {`
`298`	`298`	`}`
`299`	`299`
`300`	`300`	`return (`
`301`		`- <View style={styles.container}></View>`
	`301`	`+ <View style={styles.container}>`
	`302`	`+ <ActivityIndicatorIOS`
	`303`	`+ size="large"`
	`304`	`+ animating={true}`
	`305`	`+ style={{marginTop:20,width:width,flex:1}}/>`
	`306`	`+ </View>`
`302`	`307`	`)`
`303`	`308`
`304`	`309`	`}`