dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

added intermediate state to enable live messages

Browse Source
This commit is contained in:
awalias committed 2020-01-31 15:28:51 +08:00
1 parent 39ad5c2579
commit 569de0404b
3 files changed
+65 -27
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

examples/slack-clone/components/Message.js
+1 -1
View File
@@ -2,7 +2,7 @@ const Message = ({ message }) => (
<>
<div className="flex items-center">
<div className="">
<p className="text-white font-bold">{message.author.username}</p>
<p className="text-white font-bold">{message.user_id}</p>
<p className="text-white">{message.message}</p>
</div>
</div>
examples/slack-clone/package-lock.json
Generated
+43 -24
View File
@@ -1403,16 +1403,6 @@
"colors": "1.1.2",
"commander": "2.9.0",
"promise": "7.1.1"
},
"dependencies": {
"commander": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
"integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=",
"requires": {
"graceful-readlink": ">= 1.0.0"
}
}
}
},
"ansi-colors": {
@@ -2398,9 +2388,12 @@
}
},
"commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
"integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=",
"requires": {
"graceful-readlink": ">= 1.0.0"
}
},
"commondir": {
"version": "1.0.1",
@@ -9756,6 +9749,13 @@
"commander": "^2.20.0",
"source-map": "~0.6.1",
"source-map-support": "~0.5.12"
},
"dependencies": {
"commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
}
}
},
"terser-webpack-plugin": {
@@ -10325,7 +10325,8 @@
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true
"bundled": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
@@ -10343,11 +10344,13 @@
},
"balanced-match": {
"version": "1.0.0",
"bundled": true
"bundled": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -10360,15 +10363,18 @@
},
"code-point-at": {
"version": "1.1.0",
"bundled": true
"bundled": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true
"bundled": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true
"bundled": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
@@ -10471,7 +10477,8 @@
},
"inherits": {
"version": "2.0.4",
"bundled": true
"bundled": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@@ -10481,6 +10488,7 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -10493,17 +10501,20 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
},
"minimist": {
"version": "0.0.8",
"bundled": true
"bundled": true,
"optional": true
},
"minipass": {
"version": "2.9.0",
"bundled": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -10520,6 +10531,7 @@
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -10600,7 +10612,8 @@
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true
"bundled": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@@ -10610,6 +10623,7 @@
"once": {
"version": "1.4.0",
"bundled": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -10685,7 +10699,8 @@
},
"safe-buffer": {
"version": "5.1.2",
"bundled": true
"bundled": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -10715,6 +10730,7 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -10732,6 +10748,7 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -10770,11 +10787,13 @@
},
"wrappy": {
"version": "1.0.2",
"bundled": true
"bundled": true,
"optional": true
},
"yallist": {
"version": "3.1.1",
"bundled": true
"bundled": true,
"optional": true
}
}
},
examples/slack-clone/pages/channels/[id].js
+21 -2
View File
@@ -16,15 +16,16 @@ const ChannelsPage = props => {
const { id: channelId } = router.query
const [channels, setChannels] = useState([])
const [messages, setMessages] = useState([])
const [changes, setChanges] = useState([])
// Initial load of data
useEffect(() => {
try {
setChannels(props.channels)
const mySubscription = supabase
supabase
.from('messages')
.on('*', payload => {
console.log('Change received!', payload)
setChanges([payload.new].concat(changes))
})
.subscribe()
} catch (error) {
@@ -32,6 +33,15 @@ const ChannelsPage = props => {
}
}, [])
// Initial load of data
useEffect(() => {
try {
if (changes.length) setMessages(messages.concat(changes[0]))
} catch (error) {
console.log('Error: ', error)
}
}, [changes])
// Update when the route changes
useEffect(() => {
try {
@@ -41,6 +51,15 @@ const ChannelsPage = props => {
}
}, [router.query.id])
// // Update when the messages changes
// useEffect(() => {
// try {
// console.log(messages)
// } catch (error) {
// console.log('Error: ', error)
// }
// }, [messages])
// Render the channels and messages
return (
<Layout channels={channels}>