質問編集履歴

3

更新

2017/11/21 10:39

投稿

MOTOMUR
MOTOMUR

スコア195

test CHANGED
File without changes
test CHANGED
@@ -6,44 +6,432 @@
6
6
 
7
7
  ```js
8
8
 
9
- <CardHeader
10
-
11
- title={this.props.post.author}
12
-
13
- avatar={
14
-
15
- <Badge
16
-
17
- badgeContent={this.state.star}
18
-
19
- secondary={true}
20
-
21
- badgeStyle={{top: 12, right: 12,fontSize:1}}
22
-
23
- >
24
-
25
- <Avatar src={this.state.profile_image} />
26
-
27
- </Badge>
9
+ import React, { Component } from 'react'
10
+
11
+ import { Card, CardActions, CardHeader, CardText, CardTitle } from 'material-ui/Card'
12
+
13
+ import FlatButton from 'material-ui/FlatButton'
14
+
15
+ import { List } from 'material-ui/List'
16
+
17
+ import Dialog from 'material-ui/Dialog'
18
+
19
+ import Avatar from 'material-ui/Avatar'
20
+
21
+ import ChatIcon from 'material-ui/svg-icons/communication/chat-bubble-outline'
22
+
23
+ import Badge from 'material-ui/Badge'
24
+
25
+ import { withStyles } from 'material-ui/styles'
26
+
27
+
28
+
29
+ import Linkify from 'react-linkify'
30
+
31
+ import Timestamp from 'react-timestamp'
32
+
33
+
34
+
35
+ import firebase from 'firebase'
36
+
37
+
38
+
39
+ import CommentRef from './CommentRef'
40
+
41
+ import CommentForm from './CommentForm'
42
+
43
+
44
+
45
+
46
+
47
+ const myStyle = {
48
+
49
+ title: {
50
+
51
+ '&:hover': {
52
+
53
+ background: '#E0F7FA',
54
+
55
+ color:'white'
56
+
57
+ },
58
+
59
+ paddingTop:'0'
60
+
61
+ }
62
+
63
+ }
64
+
65
+
66
+
67
+ class PostRef extends Component {
68
+
69
+ constructor(props) {
70
+
71
+ super(props);
72
+
73
+ this.state = {
74
+
75
+ open:false,
76
+
77
+ star:'',
78
+
79
+ profile_image:'',
80
+
81
+ postOpen:false,
82
+
83
+ };
84
+
85
+ }
86
+
87
+
88
+
89
+ handleClose = () => {
90
+
91
+ this.setState({open: false,postOpen:false});
92
+
93
+ }
94
+
95
+
96
+
97
+ onCommentFncOpen = () => {
98
+
99
+ this.setState({open:true})
100
+
101
+ }
102
+
103
+
104
+
105
+ handleCommentSubmit = (val) =>{
106
+
107
+ this.writeNewComment(val)
108
+
109
+ }
110
+
111
+
112
+
113
+ handlePostOpen = () => {
114
+
115
+ this.setState({postOpen:true})
116
+
117
+ }
118
+
119
+
120
+
121
+ writeNewComment(val){
122
+
123
+ const self = this
124
+
125
+ var newCommentKey = firebase.database().ref().child('comments').push().key
126
+
127
+
128
+
129
+ firebase.database().ref('posts/' + self.props.post.postId + '/postComment').once("value").then(function(snapshot) {
130
+
131
+ const postCommentData = snapshot.val()
132
+
133
+ var commentData = {
134
+
135
+ author: self.props.author,
136
+
137
+ uid: self.props.myuid,
138
+
139
+ body: val,
140
+
141
+ commentId: newCommentKey,
142
+
143
+ profile_image:self.props.profile_image,
144
+
145
+ }
146
+
147
+ var updates = {}
148
+
149
+ updates['/comments/' + newCommentKey] = commentData
150
+
151
+ updates['posts/' + self.props.post.postId + '/postComment/commentCount/'] = postCommentData.commentCount+1
152
+
153
+ updates['posts/' + self.props.post.postId + '/postComment/comments/' + newCommentKey]= true
154
+
155
+ console.log(updates)
156
+
157
+ return firebase.database().ref().update(updates);
158
+
159
+ })
160
+
161
+ this.setState({open:false})
162
+
163
+ }
164
+
165
+
166
+
167
+ fetchPostsData(){
168
+
169
+ const self = this
170
+
171
+ const userId = this.props.post.uid
172
+
173
+ firebase.database().ref('/users/'+userId).once('value',function(snapshot) {
174
+
175
+ self.setState({
176
+
177
+ profile_image:snapshot.val().profile_image,
178
+
179
+ star:snapshot.val().userStar.starCount,
180
+
181
+ })
182
+
183
+ })
184
+
185
+ }
186
+
187
+
188
+
189
+ componentDidMount(){
190
+
191
+ this.fetchPostsData()
192
+
193
+ }
194
+
195
+
196
+
197
+ render(){
198
+
199
+ const actions = [
200
+
201
+ <FlatButton
202
+
203
+ label="Cancel"
204
+
205
+ primary={true}
206
+
207
+ onClick={this.handleClose} />,]
208
+
209
+ return(
210
+
211
+ <Card style={{
212
+
213
+ width:'300px',
214
+
215
+ display: 'inline-block',
216
+
217
+ marginRight:'10px',
218
+
219
+ verticalAlign: 'top',}} >
220
+
221
+ <CardHeader
222
+
223
+ title={
224
+
225
+ <div>
226
+
227
+ <Badge
228
+
229
+ badgeContent={this.state.star}
230
+
231
+ secondary={true}
232
+
233
+ badgeStyle={{top: 12, right: 12,fontSize:1}}
234
+
235
+ >
236
+
237
+ <Avatar src={this.state.profile_image} />
238
+
239
+ </Badge>
240
+
241
+ {this.props.post.author}
242
+
243
+ </div>
28
244
 
29
245
  }
30
246
 
31
247
  style={{
32
248
 
33
- height:'50px',
249
+ height:'70px',
34
250
 
35
251
  cursor: 'pointer',
36
252
 
253
+ paddingTop:'0',
254
+
255
+ verticalAlign:'top'
256
+
37
257
  }}
38
258
 
39
- titleStyle={{
40
-
41
- hoverBackgroundColor:'#E0F7FA',
259
+ classes={{ title: this.props.classes.title }}
42
-
43
- }}
44
260
 
45
261
  onClick={() => this.props.herfUserPage(this.props.post.uid)} />
46
262
 
263
+ <CardTitle title={this.props.post.title}
264
+
265
+ subtitle={
266
+
267
+ <Timestamp time={this.props.post.timestamp/1000} format='full' includeDay/>
268
+
269
+ }
270
+
271
+ titleStyle={{
272
+
273
+ paddingTop:'0',
274
+
275
+ marginTop:'-20'
276
+
277
+ }}/>
278
+
279
+ <CardText style={{
280
+
281
+ paddingTop:'0',
282
+
283
+ }}
284
+
285
+ onClick={this.handlePostOpen}
286
+
287
+ >
288
+
289
+ <Linkify> {this.props.post.body} </Linkify>
290
+
291
+ <br />
292
+
293
+ <p style={{
294
+
295
+ textAlign:'center'
296
+
297
+ }}>
298
+
299
+ <img src={this.props.post.post_image}
300
+
301
+ alt=""
302
+
303
+ style={{
304
+
305
+ objectFit:'cover',
306
+
307
+ width:'270px',
308
+
309
+ hight:'270px',}}></img>
310
+
311
+ </p>
312
+
313
+ </CardText>
314
+
315
+ <CardActions style={{
316
+
317
+ paddingTop:'0',
318
+
319
+ }}>
320
+
321
+ <FlatButton
322
+
323
+ secondary
324
+
325
+ label="Comment"
326
+
327
+ onClick={this.onCommentFncOpen} />
328
+
329
+ </CardActions>
330
+
331
+
332
+
333
+ <CardHeader showExpandableButton
334
+
335
+ title={ <Badge badgeContent={this.props.post.postComment.commentCount}
336
+
337
+ primary={true}
338
+
339
+ badgeStyle={{fontSize:1,top: 12, right: 12}} >
340
+
341
+ <ChatIcon style={{size:'10px'}}/>
342
+
343
+ </Badge> }
344
+
345
+ style={{
346
+
347
+ paddingTop:'0',
348
+
349
+ marginTop:'-10',
350
+
351
+ marginBottom:'-25'
352
+
353
+ }}/>
354
+
355
+ <List expandable>
356
+
357
+ <CommentRef postId={this.props.post.postId} uid={this.props.post.uid}/>
358
+
359
+ </List>
360
+
361
+
362
+
363
+ <Dialog title="write comment"
364
+
365
+ actions={actions}
366
+
367
+ modal={false}
368
+
369
+ open={this.state.open}
370
+
371
+ onRequestClose={this.handleClose} >
372
+
373
+ <CommentForm onSubmit={this.handleCommentSubmit.bind(this)}/>
374
+
375
+ </Dialog>
376
+
377
+
378
+
379
+ <Dialog title={this.props.post.title}
380
+
381
+ actions={actions}
382
+
383
+ modal={false}
384
+
385
+ open={this.state.postOpen}
386
+
387
+ onRequestClose={this.handleClose} >
388
+
389
+ <div style={{
390
+
391
+ paddingTop:'0',
392
+
393
+ }} >
394
+
395
+ <Linkify> {this.props.post.body} </Linkify>
396
+
397
+ <br />
398
+
399
+ <p style={{
400
+
401
+ textAlign:'center'
402
+
403
+ }}>
404
+
405
+ <img src={this.props.post.post_image}
406
+
407
+ alt=""
408
+
409
+ style={{
410
+
411
+ objectFit:'cover',
412
+
413
+ width:'100%',
414
+
415
+ hight:'100%',}}></img>
416
+
417
+ </p>
418
+
419
+ </div>
420
+
421
+ </Dialog>
422
+
423
+ </Card>
424
+
425
+ )}
426
+
427
+
428
+
429
+ }
430
+
431
+ export default withStyles(myStyle)(PostRef)
432
+
433
+
434
+
47
435
  ```
48
436
 
49
437
 

2

変更

2017/11/21 10:39

投稿

MOTOMUR
MOTOMUR

スコア195

test CHANGED
File without changes
test CHANGED
File without changes

1

変更

2017/11/20 08:10

投稿

MOTOMUR
MOTOMUR

スコア195

test CHANGED
@@ -1 +1 @@
1
- CSS on MaterialUi記述法について。
1
+ CSS hoverColor指定について。
test CHANGED
File without changes