WebSDK

LiveLike WebSDK Code Challenge

Usage

To start the development environment

npm run dev

Then open localhost:8000 in your browser.

Details

This project uses LitElement, which is a Web Component library.

The rollup.config.js contains the Rollup configuration for building the bundle.

The db.json file is the "database" for the project that contains all of the starting data.

The server.js file creates a jsonServer using the db.json file as the data, and is accessible through localhost:3000.

Data Structure

The db.json file contains a list of users, a list of chat rooms, and a list of comments.

Each chat room contains a comments_url property. Making a 'GET' request to this url will return comments that have a matching room_id property.

Each comment has a room_id property. This is the room_id of the chat room that the comment "belongs to".

Each comment also has an event property. This property can be either "created" or "deleted".

Requirements

Create a chat room using Web Components. There should be a way to send comments, a list of existing comments that updates when a new comment is sent, and a way to switch between different "chat rooms" list of comments.

1. Add TypeScript interfaces/types that you think are useful.

2. Create a sendComment method. a. The method should be accessible when importing the built file. b. To send a comment, make a POST request to localhost:3000/comments/ b. The POST request should have a body that contains the properties "comment", "room_id", "sender_name", "sender_id". c. The method should return a Promise that resolves the sent comment, or rejects an error.

3. Create a getComments method. a. The method should be accessible when importing the built file. b. Must take a room id as an argument. c. Must return a Promise that resolves an array of comments d. To get chat_rooms, make a GET request to localhost:3000/chat-rooms/ e. To get comments, make a GET request to the chat_rooms comments_url property. f. Array of resolved comments must contain only comments with event: "created" - remove the comments with the event: "deleted" g. Each comment with an event: "deleted" will have an id property. This id property matches a single comment with the event: "created" property. h. Comment items that have an id that matches an event: "deleted" comments must have their message property changed to "This message has been removed".

4. There should be a chat-room element that renders the list of comments a. It should take a roomid attribute, and the matching set of comments should be rendered. b. If the roomid attribute is changed, it should update to render the correct matching set of comments. c. It should take a userid attribute, and the matching user data should be used to send comments. d. If the userid attribute does not match any existing user, a new user should be created. e. If the userid attribute changes, the chat-room element should update to use the correct matching user data when sending comments. e. Only the comments with event: "created" properties should be rendered.

Example comment list for getComments method and chat-room element rendering:

// Comments fetch result
{
  message: 'Comment 1',
  sender_name: 'Sender 1'
  event: 'created',
  id: '8f15d858-f273-4192-9928-81a2d70d24cf'
},
{
  message: 'Comment 2',
  sender_name: 'Sender 2'
  event: 'created',
  id: 'db07c912-058e-452e-ab2d-830134812c73'
},
{
  event: 'deleted',
  id: 'db07c912-058e-452e-ab2d-830134812c73'
}

The result will be two comments rendered on the page

Sender 1 Comment 1

Sender 2 This message has been removed

1. There should be a chat-comment element that renders the comment message, sender_name, and created_at properties.
2. There should be a chat-input element that enables the user to input and send comments.
3. There should be a chat-switcher element that allows the user to switch between chat rooms. When switching chat rooms, the chat-room element's roomid attribute should change and the correct matching comment list should be rendered.
4. The chat-room element, and the sendComment and getComments method must be exported/exposed so they can be used once the built file is imported.
5. In the chat-room.ts, you'll find some code that sets up a WebSocket. This is connected to a WebSocket connection that the server uses. When a comment is created, that WebSocket event listener will fire its callback. If you have two browser windows open, you should be able to send and receive comments.