Update Supabase Chatroom Example

The following changes were done:
- Import proper dependencies from @supabase/supabase-js.
- Add additional npm scripts for @supabase/supabase-js.
- Add console test for ChangeMapper in the example.
- Minor refactoring.

examples/supabase-chat-room/package.json

@@ -7,13 +7,14 @@
     "start": "next start"
   },
   "dependencies": {
-    "@supabase/supabase-js": "file:../../../../../desktop/supabase/monorepo/libraries/supabase-js",
+    "@supabase/supabase-js": "^0.1.6",
     "dotenv": "^8.2.0",
     "js-cookie": "^2.2.1",
     "moment": "^2.24.0",
     "next": "latest",
     "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "react-dom": "^16.7.0",
+    "react-scroll": "^1.7.16"
   },
   "license": "MIT"
 }

examples/supabase-chat-room/pages/chatScreen.js

@@ -1,11 +1,11 @@
-import { createClient } from '@supabase/supabase-js'
+import { createClient, ChangeMapper } from '@supabase/supabase-js'
 import cookie from 'js-cookie'
 import moment from 'moment'
 
 export default class ChatScreen extends React.Component {
   constructor() {
     super()
-    this.supabase = createClient('https://world.supabase.co', '1a2b-3c4d-5e6f-7g8h')
+    this.supabase = createClient('http://localhost:8000', 'LmT3VFkGhD')
 
     this.state = {
       username: cookie.get('username'),
@@ -21,10 +21,15 @@ export default class ChatScreen extends React.Component {
   }
 
   subscribe() {
-    let test = this.supabase
+    this.supabase
       .from('messages')
       .on('*', payload => {
         console.log('REALTIME! ', payload)
+
+        // This is meant to test out ChangeMapper
+        let change = ChangeMapper.convertChangeData(payload.columns, payload.record)
+        console.log('this is the change ', change)
+        
         let updatedMessages = this.state.messages
         updatedMessages.push(payload.record)
         
@@ -77,6 +82,9 @@ export default class ChatScreen extends React.Component {
           onChange={event => {
             this.setState({ message: event.target.value })
           }}
+          onKeyPress={event => {
+            if(event.key === "Enter") this.sendMessage()
+          }}
         />
         <br />
         <button

examples/supabase-chat-room/pages/index.js

@@ -10,6 +10,11 @@ export default class Index extends React.Component {
     }
   }
 
+  logIn(){
+    cookie.set('username', this.state.username)
+    Router.push('/chatScreen')
+  }
+
   render() {
     return (
       <div style={styles.main}>
@@ -24,12 +29,16 @@ export default class Index extends React.Component {
           onChange={event => {
             this.setState({ username: event.target.value })
           }}
+          onKeyPress={event => {
+            if (event.key === 'Enter'){
+              this.logIn()
+            }
+          }}
         />
         <br />
         <button
           onClick={() => {
-            cookie.set('username', this.state.username)
-            Router.push(`/chatScreen`)
+            this.logIn()
           }}
         >
           Join

libraries/supabase-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supabase/supabase-js",
-  "version": "0.1.05",
+  "version": "0.1.6",
   "description": "Supabase Realtime API",
   "main": "./lib/index.js",
   "scripts": {
@@ -12,7 +12,8 @@
     "test:examples": "node examples/",
     "cover": "nyc --check-coverage npm run test:only",
     "build": "cross-env BABEL_ENV=production babel src --out-dir lib",
-    "prepublish": "npm run clean && npm run build"
+    "prepublish": "npm run clean && npm run build",
+    "deploy": "npm version patch && npm publish --access=public"
   },
   "files": [
     "lib",