reactjsする追加upvotesとFirebaseチャットルーム

Question

https://github.com/kristinyim/ClassroomChat

私はあなたがGroupMeに持っているものに似たこのチャットルームのメッセージにupvoting機能を追加したいが、私は反応するように新たなんだとチュートリアルのオフにこれを建てだから始める場所が分からない。私はwebdevにはうってつけですが、React.jsとFirebaseの基本を学び始めています。ありがとう！

Answer 1

NB：これを達成する方法はたくさんあるので、以下は単なる提案です。

まず、データをデータベースに保存する方法を考える必要があります。あなたは、ユーザー、メッセージおよびメッセージ・同類を持っている場合は、このようにそれを構造化することができます：

"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のデモで作成した同様のアプリをチェックしてください。