1. 首页，关注，我的日记列表增加ok绷图标，可点/可取消

src/component/diary/diaryBrief.js

@@ -7,6 +7,8 @@ import Color from '../../style/color';
 import UserIcon from '../userIcon';
 import Photo from '../photo';
 
+import DiaryIconComment from './diaryIconComment';
+import DiaryIconOkB from './diaryIconOkB';
 import DiaryAction from './diaryAction';
 
 
@@ -16,9 +18,10 @@ export default class DiaryBrief extends Component {
         super(props);
 
         this.diary = props.diary;
+        this.diary.isExpired = props.isExpired || false;
         this.editable = props.editable || false;
 
-        this.showField = ['icon', 'userName', 'subject', 'createdTime'];
+        this.showField = ['userIcon', 'userName', 'subject', 'createdTime'];
         if(props.showField && props.showField.length > 0) {
             this.showField = props.showField
         }
@@ -42,7 +45,7 @@ export default class DiaryBrief extends Component {
 
       return (
         <View style={[localStyle.box, this.props.style]}>
-            {(user && user.iconUrl && this.show('icon'))
+            {(user && user.iconUrl && this.show('userIcon'))
                 ? <UserIcon iconUrl={user.iconUrl} onPress={this.props.onUserIconPress}></UserIcon> : null}
 
             <View style={localStyle.body}>
@@ -72,16 +75,13 @@ export default class DiaryBrief extends Component {
                 <Photo uri={diary.photoThumbUrl} onPress={this.props.onPhotoPress}></Photo>
 
                 <View style={localStyle.actionBar}>
-                    {
+                    <View style={localStyle.icons}>
-                        diary.comment_count > 0
+                        <DiaryIconComment count={diary.comment_count}></DiaryIconComment>
-                        ? <View style={localStyle.commentIconBox}>
+                        <DiaryIconOkB diaryId={diary.id}
-                            <Ionicons name="ios-text-outline" size={18}
+                            count={diary.like_count}
-                                  color={Color.inactiveText}
+                            active={diary.liked}
-                                  style={localStyle.buttonIcon} />
+                            clickable={!diary.isExpired}></DiaryIconOkB>
-                            <Text style={localStyle.commentIconText}>{diary.comment_count}</Text>
                     </View>
-                        : null
-                    }
                     <View style={{flex: 1}} />
                     {
                         this.editable
@@ -143,19 +143,11 @@ const localStyle = StyleSheet.create({
         marginTop: 10,
         justifyContent: 'space-between'
     },
+    icons: {
+        flexDirection: 'row'
+    },
     moreIcon: {
         paddingVertical: 5,
         paddingHorizontal: 5
-    },
-    commentIconBox: {
-        flexDirection: "row"
-    },
-    buttonIcon: {
-        marginRight: 8,
-        marginLeft: 2
-    },
-    commentIconIext: {
-        fontSize: 15,
-        color: Color.inactiveText
     }
 });

src/component/diary/diaryIconComment.js

@@ -0,0 +1,42 @@
+import React, {Component} from 'react';
+import {StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+import Color from '../../style/color';
+
+
+export default class DiaryIconComment extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            count: props.count || 0
+        }
+    }
+
+    render() {
+        return this.state.count > 0 ? (
+            <View style={localStyle.wrap}>
+                <Ionicons name="ios-text-outline" size={18}
+                      style={localStyle.icon} />
+                <Text style={localStyle.text}>{this.state.count}</Text>
+            </View>
+        ) : null;
+    }
+}
+
+const localStyle = StyleSheet.create({
+    wrap: {
+        flexDirection: 'row',
+        marginRight: 6
+    },
+    icon: {
+        marginLeft: 2,
+        marginRight: 4
+    },
+    text: {
+        fontSize: 15,
+        color: Color.inactiveText
+    }
+});

src/component/diary/diaryIconOkB.js

@@ -0,0 +1,97 @@
+import React, {Component} from 'react';
+import {StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native';
+
+import Color from '../../style/color';
+import Api from '../../util/api';
+import Msg from '../../util/msg';
+
+
+export default class DiaryIconOkB extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            diaryId: props.diaryId || null,
+            count: props.count || 0,
+            active: props.active || false,
+            clickable: props.clickable && true
+        }
+    }
+
+    onPress() {
+        if(!this.state.clickable) {
+            return;
+        }
+
+        let count = this.state.count;
+        let isActive = this.state.active;
+
+        if(!isActive) {
+            Api.likeDiary(this.state.diaryId)
+                .then(re => {
+                    this.setState({
+                        count: count + 1,
+                        active: true
+                    })
+                })
+                .catch(e => {
+                    Msg.showMsg('操作失败');
+                })
+                .done();
+
+        } else {
+            Api.cancelLikeDiary(this.state.diaryId)
+                .then(re => {
+                    this.setState({
+                        count: count - 1,
+                        active: false
+                    })
+                })
+                .catch(e => {
+                    Msg.showMsg('操作失败');
+                })
+                .done();
+        }
+    }
+
+    render() {
+        return (
+            <TouchableOpacity onPress={this.onPress.bind(this)}>
+                <View style={localStyle.wrap}>
+                    <Image
+                        source={
+                            !this.state.active
+                            ? require('../../img/ok-beng1.png')
+                            : require('../../img/ok-beng2.png')
+                        }
+                        style={localStyle.icon}
+                    />
+
+                    <Text style={[localStyle.icon, {
+                            color: !this.state.active
+                            ? Color.inactiveText
+                            : Color.primary
+                        }]}
+                    >{this.state.count}</Text>
+                </View>
+            </TouchableOpacity>
+        );
+    }
+}
+
+const localStyle = StyleSheet.create({
+    wrap: {
+        flexDirection: 'row',
+        marginRight: 6
+    },
+    icon: {
+        width: 18,
+        height: 18,
+        marginLeft: 2,
+        marginRight: 4
+    },
+    text: {
+        fontSize: 15
+    }
+});

src/component/diary/diaryList.js

@@ -200,7 +200,7 @@ export default class DiaryList extends Component {
                     data={this.state.diaries}
 
                     keyExtractor={(item, index) => {
-                        return item.id + item.updated + item.comment_count;
+                        return item.id + item.updated + item.comment_count + item.like_count;
                     }}
 
                     renderItem={({item}) => {

src/component/notebook/notebookDiaryList.js

@@ -81,7 +81,6 @@ export default class NotebookDiaryList extends Component {
             });
         }
 
-        console.log('format result:', result);
         return result;
     }
 
@@ -177,7 +176,13 @@ export default class NotebookDiaryList extends Component {
     }
 
     render() {
-        return this.notebook ? (
+        if(!this.notebook) {
+            return null;
+        }
+
+        let isExpired = this.notebook.isExpired;
+
+        return (
           <View style={localStyle.container}>
             <SectionList
                 
@@ -187,8 +192,9 @@ export default class NotebookDiaryList extends Component {
 
                 renderItem={(rowData) => {
                     return (<Touchable onPress={() => this._onDiaryPress(rowData.item)}>
-                        <DiaryBrief diary={rowData.item}
+                        <DiaryBrief diary={rowData.item} isExpired={isExpired}
                             showField={['createdTime']}>
+                        }
                         </DiaryBrief>
                     </Touchable>);
                 }}
@@ -225,7 +231,7 @@ export default class NotebookDiaryList extends Component {
             />
           </View>
 
-        ) : null;
+        );
     }
 }
 

src/page/AboutPage.js

@@ -11,7 +11,7 @@ import Api from '../util/api';
 import Token from '../util/token';
 import Event from '../util/event';
 import Color from '../style/color';
-import UpdateInfo from '../updateInfo';
+import UpdateInfo from '../about/updateInfo';
 
 
 export default class AboutPage extends Component {
@@ -48,7 +48,7 @@ export default class AboutPage extends Component {
         return (
             <View style={{flex: 1, backgroundColor: 'white'}}>
                 <View style={{flex: 1, padding: 15, alignItems: 'center', paddingTop: 80}}>
-                    <Image source={require('../Icon.png')}
+                    <Image source={require('../about/Icon.png')}
                            style={{width: 128, height: 128, borderRadius: 28, borderWidth: 1, borderColor:"#d9d9d9"}} />
                     <Text style={{paddingTop: 20, paddingBottom: 60}}>版本: {Api.VERSION}{label}</Text>
                     <Text style={{color: Color.inactiveText}}>{this.state.news.date} 更新日志</Text>

src/page/FollowPage.js

@@ -2,10 +2,11 @@ import React, {Component} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {Navigation} from 'react-native-navigation';
 
-import Api from '../util/api'
+import Api from '../util/api';
-import {Icon} from '../style/icon'
+import {Icon} from '../style/icon';
+import Color from '../style/color';
 
-import DiaryList from '../component/diary/diaryList'
+import DiaryList from '../component/diary/diaryList';
 import FollowDiaryData from '../dataLoader/followDiaryData';
 
 
@@ -28,7 +29,7 @@ export default class FollowPage extends Component {
                   id: 'followIcon',
                   icon: Icon.followIcon,
 
-                  color: '#aaa' // android
+                  color: Color.primary // android
               }]
             }
         };
@@ -68,7 +69,7 @@ const localStyle = StyleSheet.create({
     wrap: {
         flex: 1,
         backgroundColor: '#fff',
-        paddingTop: 20
+        paddingTop: 1
     },
     header: {
         paddingLeft: 20,

src/util/api.js

@@ -260,6 +260,41 @@ async function deleteDiary(id) {
     return call('DELETE', '/diaries/' + id);
 }
 
+async function addDiary(bookId, content, photoUri = null, join_topic = null) {
+    if(!photoUri) {
+        return call('POST', '/notebooks/' + bookId + '/diaries', {
+            content,
+            join_topic
+        });
+
+    } else {
+        return upload('POST', '/notebooks/' + bookId + '/diaries', {
+            content,
+            join_topic,
+            photo: {
+                uri: photoUri,
+                name: 'image.jpg',
+                type: 'image/jpg'
+            }
+        });
+    }
+}
+
+async function updateDiary(id, bookId, content) {
+    return call('PUT', '/diaries/' + id, {
+        content,
+        notebook_id: bookId
+    });
+}
+
+async function likeDiary(id) {
+    return callV2('PUT', '/like/diaries/' + id);
+}
+
+async function cancelLikeDiary(id) {
+    return callV2('DELETE', '/like/diaries/' + id);
+}
+
 
 async function updateNotebookCover(bookId, photoUri) {
     return upload('POST', `/notebooks/${bookId}/cover`, {
@@ -292,33 +327,6 @@ async function deleteNotebook(id) {
     return call('DELETE', '/notebooks/' + id)
 }
 
-async function addDiary(bookId, content, photoUri = null, join_topic = null) {
-    if(!photoUri) {
-        return call('POST', '/notebooks/' + bookId + '/diaries', {
-            content,
-            join_topic
-        });
-
-    } else {
-        return upload('POST', '/notebooks/' + bookId + '/diaries', {
-            content,
-            join_topic,
-            photo: {
-                uri: photoUri,
-                name: 'image.jpg',
-                type: 'image/jpg'
-            }
-        });
-    }
-}
-
-async function updateDiary(id, bookId, content) {
-    return call('PUT', '/diaries/' + id, {
-        content,
-        notebook_id: bookId
-    });
-}
-
 
 async function report(user_id, diary_id) {
     return call('POST', '/reports/', {
@@ -494,6 +502,10 @@ export default {
 
     getDiary,
     deleteDiary,
+    addDiary,
+    updateDiary,
+    likeDiary,
+    cancelLikeDiary,
     
     getDiaryComments,
     deleteComment,
@@ -516,9 +528,6 @@ export default {
     updateNotebook,
     deleteNotebook,
 
-    addDiary,
-    updateDiary,
-
     report,
     feedback
 }