# LiveLike WebSDK Code Challenge

## Usage

To start the development environment

```bash
npm run dev
```

Then open `localhost:8000` in your browser.

### Details

This project uses [LitElement](https://lit-element.polymer-project.org/guide), which is a [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) library.

The `rollup.config.js` contains the [Rollup](https://rollupjs.org/guide/en/) 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:

```js
// 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

5. There should be a chat-comment element that renders the comment message, sender_name, and created_at properties.
6. There should be a chat-input element that enables the user to input and send comments.
7. 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.
8. 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.
9. 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.