質問編集履歴
2
掲載ソースコード修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -20,11 +20,13 @@
|
|
|
20
20
|
|
|
21
21
|
Header.jsの「this.props.location('/DiaryFeed');」にて画面遷移を実施している。
|
|
22
22
|
|
|
23
|
-
DairyFeed.jsは、呼び出された時点で「const DiaryReportFeedData = graphql(ALL_DIARY_REPORTS)(DiaryFeed);」が実行される認識ですが、
|
|
23
|
+
DairyFeed.jsは、呼び出された時点で「const DiaryReportFeedData = graphql(ALL_DIARY_REPORTS)(DiaryFeed);」が実行される認識ですが、実行されていないため、遷移元のページにて登録したデータが存在しないのかと思います。
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
-
リロード(DairyFeed.jsのみ)
|
|
27
|
+
リロード(DairyFeed.jsのみ)して画面遷移させる方法を教えていただけないでしょうか？
|
|
28
|
+
|
|
29
|
+
もしくは、別の方法があれば教えてください。
|
|
28
30
|
|
|
29
31
|
|
|
30
32
|
|
|
@@ -334,8 +336,6 @@
|
|
|
334
336
|
|
|
335
337
|
```JavaScript
|
|
336
338
|
|
|
337
|
-
// DiaryFeed.js
|
|
338
|
-
|
|
339
339
|
// DairyFeed.js
|
|
340
340
|
|
|
341
341
|
import React, { Component } from 'react';
|
|
@@ -519,3 +519,5 @@
|
|
|
519
519
|
|
|
520
520
|
|
|
521
521
|
export default DiaryReportFeedData;
|
|
522
|
+
|
|
523
|
+
```
|
1
説明追記、ソースコード掲載追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -18,7 +18,13 @@
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
+
Header.jsの「this.props.location('/DiaryFeed');」にて画面遷移を実施している。
|
|
22
|
+
|
|
23
|
+
DairyFeed.jsは、呼び出された時点で「const DiaryReportFeedData = graphql(ALL_DIARY_REPORTS)(DiaryFeed);」が実行される認識ですが、誤りありますか？？
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
21
|
-
リロードさせて画面遷移させる方法を教えていただけないでしょうか？
|
|
27
|
+
リロード(DairyFeed.jsのみ)させて画面遷移させる方法を教えていただけないでしょうか？
|
|
22
28
|
|
|
23
29
|
|
|
24
30
|
|
|
@@ -323,3 +329,193 @@
|
|
|
323
329
|
};
|
|
324
330
|
|
|
325
331
|
```
|
|
332
|
+
|
|
333
|
+
|
|
334
|
+
|
|
335
|
+
```JavaScript
|
|
336
|
+
|
|
337
|
+
// DiaryFeed.js
|
|
338
|
+
|
|
339
|
+
// DairyFeed.js
|
|
340
|
+
|
|
341
|
+
import React, { Component } from 'react';
|
|
342
|
+
|
|
343
|
+
import { graphql } from 'react-apollo';
|
|
344
|
+
|
|
345
|
+
import gql from 'graphql-tag';
|
|
346
|
+
|
|
347
|
+
import PropTypes from 'prop-types';
|
|
348
|
+
|
|
349
|
+
import { VelocityTransitionGroup } from 'velocity-react';
|
|
350
|
+
|
|
351
|
+
|
|
352
|
+
|
|
353
|
+
import * as appConst from '../constans/appConst';
|
|
354
|
+
|
|
355
|
+
import DiaryFeedItem from './DiaryFeedItem';
|
|
356
|
+
|
|
357
|
+
import Loading from './Loading';
|
|
358
|
+
|
|
359
|
+
import DiaryFeedItemNone from './DiaryFeedItemNone';
|
|
360
|
+
|
|
361
|
+
|
|
362
|
+
|
|
363
|
+
class DiaryFeed extends Component {
|
|
364
|
+
|
|
365
|
+
constructor(props) {
|
|
366
|
+
|
|
367
|
+
super(props);
|
|
368
|
+
|
|
369
|
+
this.state = {
|
|
370
|
+
|
|
371
|
+
loadingFlg: true,
|
|
372
|
+
|
|
373
|
+
displayContentFlg: false,
|
|
374
|
+
|
|
375
|
+
};
|
|
376
|
+
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
componentDidMount() {
|
|
380
|
+
|
|
381
|
+
setTimeout(() => {
|
|
382
|
+
|
|
383
|
+
this.setState({
|
|
384
|
+
|
|
385
|
+
loadingFlg: false,
|
|
386
|
+
|
|
387
|
+
displayContentFlg: true
|
|
388
|
+
|
|
389
|
+
})
|
|
390
|
+
|
|
391
|
+
}, 1500);
|
|
392
|
+
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
render() {
|
|
396
|
+
|
|
397
|
+
let gqlRet = '';
|
|
398
|
+
|
|
399
|
+
// Graphcool接続エラー処理
|
|
400
|
+
|
|
401
|
+
if (this.props.data.error) {
|
|
402
|
+
|
|
403
|
+
console.log(this.props.data.error.message);
|
|
404
|
+
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
console.log(this.props);
|
|
408
|
+
|
|
409
|
+
return (
|
|
410
|
+
|
|
411
|
+
<div style={{ paddingTop: "50px", paddingLeft: "20px", paddingRight: "20px" }}>
|
|
412
|
+
|
|
413
|
+
{this.state.displayContentFlg ?
|
|
414
|
+
|
|
415
|
+
<div>
|
|
416
|
+
|
|
417
|
+
{gqlRet}
|
|
418
|
+
|
|
419
|
+
<div style={{ paddingBottom: "50px" }}>
|
|
420
|
+
|
|
421
|
+
{this.props.data.allDiaryReports.length > 0 ?
|
|
422
|
+
|
|
423
|
+
this.props.data.allDiaryReports.map(diaryFeed => (
|
|
424
|
+
|
|
425
|
+
<DiaryFeedItem key={diaryFeed.id} item={diaryFeed} userId={this.props.userId} />)) :
|
|
426
|
+
|
|
427
|
+
<DiaryFeedItemNone />
|
|
428
|
+
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
</div>
|
|
432
|
+
|
|
433
|
+
</div>
|
|
434
|
+
|
|
435
|
+
:
|
|
436
|
+
|
|
437
|
+
undefined
|
|
438
|
+
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
</div>
|
|
442
|
+
|
|
443
|
+
);
|
|
444
|
+
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
|
|
450
|
+
|
|
451
|
+
// 全ユーザ日報一覧取得クエリ生成
|
|
452
|
+
|
|
453
|
+
export const ALL_DIARY_REPORTS = gql`
|
|
454
|
+
|
|
455
|
+
query GetAllDiaryReports {
|
|
456
|
+
|
|
457
|
+
allDiaryReports(orderBy: createdAt_DESC) {
|
|
458
|
+
|
|
459
|
+
id
|
|
460
|
+
|
|
461
|
+
title
|
|
462
|
+
|
|
463
|
+
description
|
|
464
|
+
|
|
465
|
+
likecount
|
|
466
|
+
|
|
467
|
+
author {
|
|
468
|
+
|
|
469
|
+
email
|
|
470
|
+
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
createdAt
|
|
474
|
+
|
|
475
|
+
comments(orderBy: createdAt_ASC) {
|
|
476
|
+
|
|
477
|
+
id
|
|
478
|
+
|
|
479
|
+
createdAt
|
|
480
|
+
|
|
481
|
+
commentdesc
|
|
482
|
+
|
|
483
|
+
author {
|
|
484
|
+
|
|
485
|
+
email
|
|
486
|
+
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
`;
|
|
496
|
+
|
|
497
|
+
|
|
498
|
+
|
|
499
|
+
// プロパティ宣言
|
|
500
|
+
|
|
501
|
+
DiaryFeed.propTypes = {
|
|
502
|
+
|
|
503
|
+
data: PropTypes.shape({
|
|
504
|
+
|
|
505
|
+
loading: PropTypes.bool,
|
|
506
|
+
|
|
507
|
+
error: PropTypes.object,
|
|
508
|
+
|
|
509
|
+
allDiaryReports: PropTypes.array
|
|
510
|
+
|
|
511
|
+
}).isRequired
|
|
512
|
+
|
|
513
|
+
};
|
|
514
|
+
|
|
515
|
+
|
|
516
|
+
|
|
517
|
+
const DiaryReportFeedData = graphql(ALL_DIARY_REPORTS)(DiaryFeed);
|
|
518
|
+
|
|
519
|
+
|
|
520
|
+
|
|
521
|
+
export default DiaryReportFeedData;
|