1. 创建/修改日记本

2. 删除日记本

src/page/NotebookDetailPage.js

@@ -1,12 +1,46 @@
 import React, {Component} from 'react';
 import {StyleSheet, Text, View, ScrollView} from 'react-native';
+import {Navigation} from 'react-native-navigation';
 
 import Color from '../style/color';
+import {Icon} from '../style/icon';
 import NotebookDiaryList from '../component/notebook/notebookDiaryList';
 
 
 export default class NotebookDetailPage extends Component {
 
+    constructor(props) {
+        super(props);
+        Navigation.events().bindComponent(this);
+    }
+
+    static options(passProps) {
+        return {
+            topBar: {
+              title: {
+                  text: '《' + passProps.notebook.subject + '》'
+              },
+              rightButtons: [{
+                  id: 'navButtonNotebookSetting',
+                  icon: Icon.navButtonNotebookSetting,
+
+                  color: Color.primary
+              }]
+            }
+        };
+    }
+
+    navigationButtonPressed({buttonId}) {
+        Navigation.push(this.props.componentId, {
+            component: {
+                name: 'NotebookEdit',
+                passProps: {
+                    notebook: this.props.notebook
+                }
+            }
+        });
+    }
+
     render() {
         return (
             <View style={{flex: 1}}>

src/page/NotebookEditPage.js

@@ -1,5 +1,16 @@
 import React, {Component} from 'react';
-import {StyleSheet, Text, View, ScrollView, Switch, TextInput, TouchableOpacity} from 'react-native';
+import {
+    StyleSheet,
+    Text,
+    View,
+    ScrollView,
+    Switch,
+    TextInput,
+    TouchableOpacity,
+    DeviceEventEmitter,
+    Keyboard,
+    Alert
+} from 'react-native';
 import {Navigation} from 'react-native-navigation';
 import ActionSheet from 'react-native-actionsheet-api';
 import ImagePicker from 'react-native-image-crop-picker'
@@ -9,6 +20,7 @@ import Color from '../style/color';
 import {Icon} from '../style/icon';
 import Msg from '../util/msg';
 import Api from '../util/api';
+import Event from "../util/event";
 
 import Loading from '../component/loading'
 import DateInput from '../component/dateInput'
@@ -23,11 +35,11 @@ export default class NotebookEditPage extends Component {
         this.state = {
             notebook: props.notebook,
 
-            subject: '',
+            subject: props.notebook ? props.notebook.subject : '',
-            isPublic: false,
+            isPublic: props.notebook ? props.notebook.isPublic : false,
-            dateString: '',
 
-            uploading: false
+            uploading: false,
+            saving: false
         }
     }
 
@@ -35,7 +47,10 @@ export default class NotebookEditPage extends Component {
         return {
             topBar: {
               title: {
-                  text: '创建日记本'
+                  text: !passProps.notebook ? '创建日记本' : '修改日记本'
+              },
+              backButton: {
+                  title: passProps.backTitle ? passProps.backTitle : '返回'
               },
               rightButtons: [{
                   id: 'save',
@@ -53,9 +68,50 @@ export default class NotebookEditPage extends Component {
     }
 
     navigationButtonPressed({buttonId}) {
-        console.log('date string:', this.dateInput.getDate());
+        this.saveNotebook();
     }
 
+    async saveNotebook() {
+        let notebook = this.state.notebook;
+
+        let subject = this.state.subject;
+        let isPublic = this.state.isPublic;
+
+        try{
+            this.setState({saving: true});
+
+            let result;
+            if (!notebook) {
+                let dateString = this.dateInput.getDate();
+                result = await Api.createNotebook(subject, '', dateString, isPublic ? 10 : 1);
+
+            } else {
+                result = await Api.updateNotebook(notebook.id, subject, notebook.description, isPublic ? 10 : 1);
+            }
+            
+            if(result) {
+                Keyboard.dismiss();
+
+                Msg.showMsg(!notebook ? '创建完成' : '保存完成');
+                DeviceEventEmitter.emit(Event.updateNotebooks);
+
+                Navigation.popToRoot(this.props.componentId);
+
+            } else {
+                throw {
+                    message: 'save notebook failed'
+                }
+            }
+
+        } catch(e) {
+            console.log('e:', e);
+            Msg.showMsg(!notebook ? '创建日记本失败' : '修改日记本失败');
+        }
+
+        this.setState({saving: false});
+    }
+
+
     async resizePhoto(uri, oWidth, oHeight) {
         let width = 0;
         let height = 0;
@@ -123,24 +179,22 @@ export default class NotebookEditPage extends Component {
     }
 
     _onDelete() {
-        Navigation.popToRoot(this.props.componentId);
+        let notebookId = this.state.notebook ? this.state.notebook.id : null;
-
-        /*
-        let notebookId = this.state.notebook ? this.state.notebook.id;
         if(!notebookId) {
             return;
         }
 
         Api.deleteNotebook(notebookId)
             .then(() => {
+                DeviceEventEmitter.emit(Event.updateNotebooks);
+
                 Alert.alert('提示', '日记本已删除', [{text: '好', onPress: () =>  {
-                    Navigation.popToRoot();
+                    Navigation.popToRoot(this.props.componentId);
                 }}]);
             })
             .catch((err) => {
                 Alert.alert('删除失败', err.message)
             });
-        */
     }
 
     render() {
@@ -163,6 +217,9 @@ export default class NotebookEditPage extends Component {
                     </View>
                     <View style={localStyle.line} />
 
+                    {
+                        !this.state.notebook
+                        ? (
                             <View>
                                   <View style={localStyle.item}>
                                       <DateInput ref={(r) => {this.dateInput = r}}
@@ -170,8 +227,11 @@ export default class NotebookEditPage extends Component {
                                             customStyles={customDatePickerStyle}>
                                         </DateInput>
                                   </View>
-                    </View>
                                   <View style={localStyle.line} />
+                            </View>
+                        ) : null
+                    }
+                    
 
                     <View style={localStyle.item}>
                         <Text style={localStyle.title}>公开日记本</Text>
@@ -183,16 +243,16 @@ export default class NotebookEditPage extends Component {
                     </View>
                 </View>
 
-
+                {
+                    this.state.notebook
+                    ? (
+                        <View>
                             <View style={localStyle.group}>
                                 <TouchableOpacity style={localStyle.item}
                                     onPress={this._onEditCover.bind(this)}>
                                     <Text style={localStyle.editCover}>设置封面</Text>
                                 </TouchableOpacity>
                             </View>
-
-
-                <View>
                             <View style={localStyle.group}>
                                 <TouchableOpacity style={localStyle.item}
                                     onPress={this._onDelete.bind(this)}>
@@ -201,6 +261,8 @@ export default class NotebookEditPage extends Component {
                             </View>
                             <Text style={localStyle.tip}>提示：写过的日记本不能被删除</Text>
                         </View>
+                    ) : null
+                }
 
             </View>
         );

src/page/UserPage.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {StyleSheet, Text, View, Animated} from 'react-native';
+import {StyleSheet, Text, View, Animated, DeviceEventEmitter} from 'react-native';
 import {
   PagerScroll,
   TabView,
@@ -9,6 +9,7 @@ import {
 import {Navigation} from 'react-native-navigation';
 
 import Api from '../util/api';
+import Event from "../util/event";
 import Color from '../style/color';
 
 import UserIntro from '../component/userIntro';
@@ -36,7 +37,15 @@ export default class UserPage extends Component {
         };
     }
 
+    componentDidMount(){
+        this.listener = DeviceEventEmitter.addListener(Event.updateNotebooks, (param) => {
+            this.notebookList.refresh();
+        });
+    }
 
+    componentWillUnmount(){
+        this.listener.remove();
+    }
 
     _renderLabel = props => ({route}) => {
         let routes = props.navigationState.routes;
@@ -75,6 +84,7 @@ export default class UserPage extends Component {
             {...this.props}
         />,
         notebook: () => <NotebookList
+            ref={(r) => this.notebookList = r}
             user={this.user}
             {...this.props}
         />

src/util/api.js

@@ -132,7 +132,28 @@ async function updateNotebookCover(bookId, photoUri) {
             name: 'image.jpg',
             type: 'image/jpg'
         }
-    })
+    });
+}
+
+async function createNotebook(subject, description, expired, privacy) {
+    return call('POST', '/notebooks', {
+        subject: subject,
+        description: description,
+        expired: expired,
+        privacy: privacy
+    });
+}
+
+async function updateNotebook(id, subject, description, privacy) {
+    return call('PUT', '/notebooks/' + id, {
+        subject: subject,
+        description: description,
+        privacy: privacy
+    });
+}
+
+async function deleteNotebook(id) {
+    return call('DELETE', '/notebooks/' + id)
 }
 
 
@@ -272,5 +293,8 @@ export default {
 
     getMessagesHistory,
 
-    updateNotebookCover
+    updateNotebookCover,
+    createNotebook,
+    updateNotebook,
+    deleteNotebook
 }

src/util/event.js

@@ -0,0 +1,4 @@
+export default {
+    updateNotebooks: 'updateNotebooks'
+
+}