Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
react-with-firebase code from http://gkueny.fr/react-tchat
// File : src/actions/chat.actions.js
import {UPDATEMESSAGES} from './actions.type';
export function updateMessage(messages) {
return {
type: UPDATEMESSAGES,
data: {
messages
}
};
}
// File : src/components/chat.component.js [EXTRAIT]
import * as firebase from 'firebase';
//..
class ChatComponent extends Component {
constructor (props) {
super(props);
const rootRef = firebase.database().ref();
this.messagesRef = rootRef.child('messages');
this.state = {
messageWriting : "",
};
}
//...
}
//...
// Fichier : src/components/chat.component.js [EXTRAIT]
//..
componentDidMount() {
// notre listener
this.messagesRef.on('value', snapshot => {
let messages;
// les valeurs de la base de données sont récupérables via snapshot.val()
// On récupère ces données sous la forme [index] = value
messages = snapshot.val() ? Object.keys(snapshot.val()).map( key => {
return snapshot.val()[key];
}) :
messages = [];
// On met à jour notre state à partir des messages récupérés de Firebase
this.props.updateMessage(messages);
});
}
// Et on supprime le listener lorsque le composant est détruit
componentWillUnmount() {
this.messagesRef.on('value').off();
}
//..
// Fichier : src/components/chat.component.js [EXTRAIT]
//..
sendNewMessage = e => {
e.preventDefault();
// On ajoute une nouvelle entrée dans notre base de données et on récupère la clé correspondante
const newMessageKey = this.messagesRef.push().key;
// On décrit notre nouvelle entrée
let updates = {};
updates['/messages/' + newMessageKey] = {
name : this.props.name,
text : this.state.messageWriting
};
// On met à jour
firebase.database().ref().update(updates);
this.setState({
messageWriting : ""
});
}
//..
// File : src/containers/chat.container.js [EXTRAIT]
//..
const mapDispatchToProps = (dispatch) => {
return {
updateMessage: (messages) => dispatch(updateMessage(messages))
};
};
//...
// File : src/reducers/chat.reducer.js [EXTRAIT]
//..
const chatReducer = (state = initialState, action) => {
switch (action.type) {
case UPDATEMESSAGES : {
return {
...state,
messages: action.data.messages
};
}
//..
}
};
export default chatReducer;
// File : src/index.js [EXTRAIT]
//...
import * as firebase from 'firebase';
//...
// On retrouve notre variable config ;)
// Remplacez par la votre si vous voulez
const config = {
apiKey: "AIzaSyA5pPKO8J9sR1m3hyPu7WJw2MzIu0z0q6o",
authDomain: "react-tchat-e518d.firebaseapp.com",
databaseURL: "https://react-tchat-e518d.firebaseio.com",
storageBucket: "react-tchat-e518d.appspot.com",
messagingSenderId: "640840838780"
};
firebase.initializeApp(config);
//...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment