-
Notifications
You must be signed in to change notification settings - Fork 0
/
Firestore.jsx
58 lines (48 loc) · 1.51 KB
/
Firestore.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import React from 'react'
import {
firestoreUserById as userById,
firestoreMessagesForRoom as messagesForRoom,
firestoreAddMessage as addMessage,
} from '~/fire'
import {withAuth} from '~/fireview'
import {Map} from '~/fireview'
export default ({room}) => {
const messages = messagesForRoom(room)
return <div>
<ChatLog messages={messages} />
<ChatEntry messages={messages} />
</div>
}
const ChatLog = ({messages}) =>
<Map from={messages.orderBy('timestamp')}
Loading={() => 'Loading messages...'}
Render={Message}
Empty={() => 'No messages here.'}
/>
const User = ({id}) =>
<Map from={userById(id)} Render={({displayName}) => displayName || ''} />
const Message = ({from, body, _ref, _user}) =>
<div>
<User id={from} />: {body}
</div>
const ChatEntry = withAuth(
({messages, _user: user}) =>
user
? <form onSubmit={submitMessage(messages, user)}>
<Map from={userById(user.uid)} Empty={() => 'What?'} Render={DisplayNameEntry} />
{user && user.id}
<input name="body" />
<input type="submit" />
</form>
: 'Sign in to say something.'
)
const submitMessage = (messages, user) => evt => {
evt.preventDefault()
addMessage(messages, {from: user.uid, body: evt.target.body.value})
evt.target.body.value = ''
}
const DisplayNameEntry = ({_ref, displayName}) =>
<input defaultValue={displayName}
onChange={setDisplayName(_ref)} />
const setDisplayName = ref => evt =>
ref.set({displayName: evt.target.value}, {merge: true})