Single chat room #40
Single chat room #40
Conversation
src/components/chat/ChatRoom.js
Outdated
| }; | ||
|
|
||
| sendNewMessage = e => { | ||
| e.preventDefault(); |
There was a problem hiding this comment.
Minor: can be left to the underlying componenent
| } | ||
|
|
||
| export function createEventChannel() { | ||
| const listener = eventChannel(emit => { |
|
|
||
| export function* watchFetchMessages() { | ||
| const updateMessages = createEventChannel(); | ||
| while (true) { |
There was a problem hiding this comment.
Minor: I think you can use takeEvery directly
src/api/firebase.js
Outdated
| .set(value); | ||
|
|
||
| .limitToLast(limit) | ||
| .on('value', handler); |
There was a problem hiding this comment.
When working with list of datas, you could (and should at scale) be more granular with data loading. Otherwise you'll end up loading too much data from the network, it will slow down the interface.
You can check the firebase doc to know how: https://firebase.google.com/docs/database/web/lists-of-data
src/reducers/messagesReducer.js
Outdated
| export default function messagesReducer(state = initialState.messages, action) { | ||
| switch (action.type) { | ||
| case types.FETCH_MESSAGES_SUCCESS: | ||
| return Object.keys(action.payload).map(key => { |
There was a problem hiding this comment.
In theory, you should merge the payload wit the current state: you add the new messages to the currently loaded messages.
Given the fact you are using the value event from Firebase, it does not change anything but, as mentioned above, you should not really rely on value only.
| } | ||
| } | ||
|
|
||
| export const getMessages = state => state.messages; |
src/components/chat/ChatRoom.js
Outdated
|
|
||
| updateMessage = e => { | ||
| let message = this.state.message; | ||
| message[e.target.name] = e.target.value; |
There was a problem hiding this comment.
Indeed:
const message = this.state.message;
message['foo'] = 'bar';
this.setState({message: message})
this.state.message === message //=> truehttps://medium.com/pro-react/a-brief-talk-about-immutability-and-react-s-helpers-70919ab8ae7c
src/components/chat/Message.js
Outdated
| import prop from 'lodash/fp/prop'; | ||
| import MessageItem from './MessageItem'; | ||
|
|
||
| const Message = ({ messages }) => |
| export default function messagesReducer(state = initialState.messages, action) { | ||
| switch (action.type) { | ||
| case types.FETCH_MESSAGES_SUCCESS: | ||
| return [...state, action.payload]; |
There was a problem hiding this comment.
I would have checked on the key / id of a message like done here to avoid duplicates.
Can be useful: https://redux.js.org/docs/basics/ExampleTodoList.html#reducers
Summary
This is a simple chat room to be able to send messages.
Main steps
• Implementation of redux-saga
• Babel polyfill is added to the webpack config for RuntimeGenerator and so be able to use redux-saga
• The update of the firebase configuration
• New link in the header to access to the chat room
• Chat Module with a main page and some components to display messages.
• New reducer to manage messages
• Watcher to fetch and push messages on the firebase database.
You need to be logged to access to the room, if not, we will be redirect to the authentification.
You will be able to read the last 10 messages, also read messages from other users and finally to write new messages.
I fixed a little problem on the LoadingDots.js by using lodash but i'm not sure is the best way.
How to start
npm start -s