Updated Readme

README.md

@@ -1,5 +1,7 @@
 # LiveLike WebSDK Code Challenge
 
+The objective of this code challenge is to create a library that exposes chat room Web Components with a chat API service.
+
 ## Usage
 
 To start the development environment
@@ -18,100 +20,30 @@ The `rollup.config.js` contains the [Rollup](https://rollupjs.org/guide/en/) con
 
 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`.
+The `server.js` file creates a server using the `db.json` file as the data, and is accessible through `localhost:3000`.
 
 The `/public/index.html` is the file that will be served by the server, and available on `localhost:8000`.
 
-When running `npm run dev` rollup will bundle all of your code into a single file `index.js` that will be placed in `/public`.
-
-## 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".
+When running `npm run dev`, Rollup will bundle all of your code into a single file `index.js` that will be placed in `/public`.
 
 ## 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.
+1. The library should expose a chat room UI
 
-   a. The method should be accessible when importing the built file.
+  a. It should display a list of existing comments that updates when a new comment is sent or received.
 
-   b. Must take a room id as an argument.
+  b. It should not display any comments that have been deleted.
 
-   c. Must return a Promise that resolves an array of comments.
+  b. It should include a way to send comments.
 
-   d. To get chat_rooms, make a GET request to localhost:3000/chat-rooms/
+  c. It should include a way to switch between different "chat rooms" list of comments.
 
-   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'
-}
-```
+2. The library should expose methods:
 
-The result will be two comments rendered on the page
+  a. To get lists of comments
 
-Sender 1
-Comment 1
+  b. To create and delete individual comments
 
-Sender 2
-This message has been removed
+  c. To get and create users
 
-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.
+3. Add TypeScript interfaces/types to exposed methods.

src/elements/chat-room/chat-room.ts → src/chat-room/chat-room.ts

@@ -2,8 +2,9 @@ import { LitElement, html, customElement, property } from "lit-element";
 
 export function subscribe(callback) {
   // Adds the WebSocket connection.
-  // The server is also connected to this websocket so when a comment is posted
-  // every client that has this connected will receive a "message" event.
+  // The server is also connected to this websocket so when a comment is posted,
+  // every client that has this connection will receive a "message" event.
+  // If you open two browsers to localhost:8000, you should be able to send messages between them.
   const ws = new WebSocket("ws://localhost:3030");
 
   // We listen to the "message" event, which will return a "data" property.
@@ -13,12 +14,12 @@ export function subscribe(callback) {
   });
 }
 
-@customElement("chat-room-two")
+@customElement("chat-room")
 export class ChatRoom extends LitElement {
   @property({ type: String, reflect: true }) roomid = "";
   @property({ type: String, reflect: true }) userid = "";
 
-  subscribeCallback = () => {};
+  subscribeCallback = (comment) => {};
 
   firstUpdated() {
     // Connects to the WebSocket. When a comment gets posted to localhost:3000, this.subscribeCallback will fire.

src/index.ts

@@ -0,0 +1 @@
+export * from "./chat-room/chat-room";