添加upvotes到reactjs和火力地堡聊天室

Question

https://github.com/kristinyim/ClassroomChat

我想一個upvoting功能添加到這個聊天室類似，你有什麼GroupMe的消息，但我是新來的反應，並建立了這個斷教程所以不知道從哪裏開始。我對webdev很滿意，但剛開始使用React.js和Firebase的基礎知識。謝謝！

Answer 1

注意：有很多方法可以做到這一點，所以以下只是一個建議。

首先，您必須考慮如何將數據存儲在數據庫中。如果你有用戶，郵件和消息喜歡，你可以構建這樣的：

"root": { 
    "users": { 
     "$userId": { 
      ... 
      "messages": { 
       "$messageId1": true, 
       "$messageId2": true, 
       ... 
      } 
     } 
    }, 
    "messages": { 
     "$messageId": { 
      "author": $userId, 
      "timestamp": ServerValue.TIMESTAMP 
     } 
    }, 
    "likesToMessages": { 
     "$messageId": { 
      "$likeId": { 
       liker: $userId, 
       "message": $messageId, 
       "timestamp": ServerValue.TIMESTAMP 
      } 
     } 
    } 
} 

每當用戶點擊「喜歡」上的消息，你要寫信給

var messageId = ?; // The id of the message that was liked 
var like = { 
    liker: currentUserId, // id of logged in user 
    message: messageId, 
    timestamp: firebase.database.ServerValue.TIMESTAMP  
}; 
firebase.database.ref().child('likesToMessages').child(messageId).push(like); 

然後你在數據庫中獲得新的like，匹配提議的結構。

然後，當你想讀並顯示喜歡的計數的消息，你可以這樣做：

const Message = React.createClass({ 
    propTypes: { 
     message: React.PropTypes.object, 
     messageId: React.PropTypes.string // you need to add this prop 
    } 

    componentWillMount() { 
     firebase.database.ref().child('likesToMessages').child(this.props.messageId).on('value', this.onLikesUpdated) 
    } 

    onLikesUpdated(dataSnapshot) { 
     var likes = snap.val(); 
     this.setState({ 
      likes 
     }); 
    } 

    render() { 
     const {name, message} = this.props.message; 
     const emojifiedString = emoji.emojify(message); 

     return (
      <p> 
       {name}: {emojifiedString} [{this.state.likes.length}&hearts;] 
      </p> 
     ); 
    } 
}); 

而且，在你的數據庫的安全規則，你會通過timestamp想要索引爲消息和喜歡這樣你可以快速查詢最新的消息。

此外，請隨時查看我製作的類似應用程序，GitHub中的代碼和wooperate.firebaseapp.com上的演示。