- To test knowledge of using sockets (socket.io) and events
- Understanding of callbacks, hooks and function references
None
Most of the work needs to be done in the Messages components.
- Implement hooks such as
useEffectanduseCallbackto handle events - Scroll to the bottom of the messages list when sending/receiving a message
- Show the initial Botty message by default (can be found in
common/constants) - Use sockets to:
- Send the user's message to Botty
- Show a typing message when Botty is typing
- Handle incoming Botty messages and display them
See the Botty server documentation for more information.
bot-typing: Emitted by Botty when they are typing in response to a user message.bot-message: Emitted by Botty with a message payload in response to a user message.user-message: Emitted by you/the client with a messsage payload
We've provided Message components and classes. Here's some information about the classes.
.message--last: The last message in a group.message--typing: The message the user sees when the recipient is typing.message--me: Denotes a user message
- References to functions and current hook state
- How to interact with socket.io, events and payloads
- How React contexts work
- Socket setup/configuration with the Botty server (botty.alexgurr.com)
- All UX and UI, including for messages
- All components, including a message and typing message component
- A context for setting the latest message, which will change the preview in the left user list
- Hooks for playing send/receive sounds
