Improve supabase-chat example

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

@@ -1,4 +1,4 @@
-import { createClient, ChangeMapper } from '@supabase/supabase-js'
+import { createClient } from '@supabase/supabase-js'
 import cookie from 'js-cookie'
 import moment from 'moment'
 
@@ -26,14 +26,12 @@ export default class ChatScreen extends React.Component {
       .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)
-        
-        this.setState({messages: updatedMessages})
+        if (payload.eventType == 'INSERT') {
+          let updatedMessages = this.state.messages
+          updatedMessages.push(payload.new)
+
+          this.setState({ messages: updatedMessages })
+        }
       })
       .subscribe()
   }
@@ -51,14 +49,19 @@ export default class ChatScreen extends React.Component {
     let payload = {
       sender: this.state.username,
       message: this.state.message,
-      inserted_at: moment().format()
+      inserted_at: moment().format(),
     }
-    
+
+    await this.supabase.from('messages').insert([payload])
+
+    this.setState({ message: '' })
+  }
+
+  async deleteMessage(id){
     await this.supabase
       .from('messages')
-      .insert([payload])
-
-    this.setState({message: ''})
+      .match({id})
+      .delete()
   }
 
   render() {
@@ -67,9 +70,18 @@ export default class ChatScreen extends React.Component {
         <h1>Hello</h1>
         {this.state.messages.map(message => {
           return (
-            <p>
-              {message.sender}: {message.message}
-            </p>
+            <div>
+              <p>
+                {message.sender}: {message.message}
+              </p>
+              <button
+                onClick={() => {
+                  this.deleteMessage(message.id)
+                }}
+              > 
+                Delete 
+              </button>
+            </div>
           )
         })}
         <label>Say Something!</label>
@@ -83,7 +95,7 @@ export default class ChatScreen extends React.Component {
             this.setState({ message: event.target.value })
           }}
           onKeyPress={event => {
-            if(event.key === "Enter") this.sendMessage()
+            if (event.key === 'Enter') this.sendMessage()
           }}
         />
         <br />