Mastodonを読む/タイムラインの表示その1（クライアント側）
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
[[Mastodonを読む]]
#contents
*はじめに [#zec820f0]
Reactを利用して画面描画するところまで来ました。ここからは...
*app/assets/javascripts/components/features/home_timeline...
ホームのタイムラインを表示しているコンポーネントはHomeTim...
HomeTimeline以降のコンポーネントの階層は以下のようになっ...
HomeTimeline
StatusListContainer
StatusList
StatusContainer
Status
なお、Containerは対応するHTMLが出力されるわけではなく、イ...
ファイルの場所は次の通り。いろんなところに飛んでいますが...
-app/assets/javascripts/components/features/home_timeline...
-app/assets/javascripts/components/features/ui/containers...
-app/assets/javascripts/components/components/status_list...
-app/assets/javascripts/components/containers/status_cont...
-app/assets/javascripts/components/components/status.jsx
ところで、これらのファイルを見ていってもデータをどこから...
*app/assets/javascripts/components/features/ui/index.jsx ...
Reduxの動作を思い出してみましょう。Reduxではユーザ入力に...
というか、見出しでネタバレしていますが(笑)、UIクラスに書...
#code{{
componentWillMount () {
window.addEventListener('resize', this.handleResize, ...
document.addEventListener('dragenter', this.handleDra...
document.addEventListener('dragover', this.handleDrag...
document.addEventListener('drop', this.handleDrop, fa...
document.addEventListener('dragleave', this.handleDra...
document.addEventListener('dragend', this.handleDragE...
this.props.dispatch(refreshTimeline('home'));
this.props.dispatch(refreshNotifications());
}
}}
refreshTimeline、明らかに当たりです。
*app/assets/javascripts/components/actions/timelines.jsx ...
refreshTimelineはactionsの下、timelinesに書かれている関数...
#code{{
export function refreshTimeline(timeline, id = null) {
return function (dispatch, getState) {
if (getState().getIn(['timelines', timeline, 'isLoadi...
return;
}
const ids = getState().getIn(['timelines', timel...
const newestId = ids.size > 0 ? ids.first() : null;
let params = getState().getIn(['timelines', timel...
const path = getState().getIn(['timelines', timel...
let skipLoading = false;
if (newestId !== null && getState().getIn(['timelines...
if (id === null && getState().getIn(['timelines', t...
// Skip refreshing when timeline is live anyway
return;
}
params = { ...params, since_id: newestId };
skipLoading = true;
}
dispatch(refreshTimelineRequest(timeline, id, skipLoa...
api(getState).get(path, { params }).then(response => {
const next = getLinks(response).refs.find(link => l...
dispatch(refreshTimelineSuccess(timeline, response....
}).catch(error => {
dispatch(refreshTimelineFail(timeline, error, skipL...
});
};
};
}}
初回、二回目以降（すでに取得してるのより新しいものだけ取...
**app/assets/javascripts/components/reducers/timelines.js...
pathの情報はreducersの下のtimelinesに書かれています。
#code{{
const initialState = Immutable.Map({
home: Immutable.Map({
path: () => '/api/v1/timelines/home',
next: null,
isLoading: false,
online: false,
loaded: false,
top: true,
unread: 0,
items: Immutable.List()
}),
}}
routes.rbを読んだのはだいぶ前だったので忘れかけていますが...
#code(Ruby){{
namespace :api do
省略
# JSON / REST API
namespace :v1 do
省略
get '/timelines/home', to: 'timelines#home', as...
get '/timelines/public', to: 'timelines#public', ...
get '/timelines/tag/:id', to: 'timelines#tag', as:...
省略
end
end
}}
**app/assets/javascripts/components/api.jsx [#h509398f]
apiはcomponents直下のapi.jsxで定義されています。その実体...
*おわりに [#u2ded306]
というわけでタイムラインのトゥート（Status）を取得する流...
言語とか立場とかが切り替わるので一旦ここまで。
終了行:
[[Mastodonを読む]]
#contents
*はじめに [#zec820f0]
Reactを利用して画面描画するところまで来ました。ここからは...
*app/assets/javascripts/components/features/home_timeline...
ホームのタイムラインを表示しているコンポーネントはHomeTim...
HomeTimeline以降のコンポーネントの階層は以下のようになっ...
HomeTimeline
StatusListContainer
StatusList
StatusContainer
Status
なお、Containerは対応するHTMLが出力されるわけではなく、イ...
ファイルの場所は次の通り。いろんなところに飛んでいますが...
-app/assets/javascripts/components/features/home_timeline...
-app/assets/javascripts/components/features/ui/containers...
-app/assets/javascripts/components/components/status_list...
-app/assets/javascripts/components/containers/status_cont...
-app/assets/javascripts/components/components/status.jsx
ところで、これらのファイルを見ていってもデータをどこから...
*app/assets/javascripts/components/features/ui/index.jsx ...
Reduxの動作を思い出してみましょう。Reduxではユーザ入力に...
というか、見出しでネタバレしていますが(笑)、UIクラスに書...
#code{{
componentWillMount () {
window.addEventListener('resize', this.handleResize, ...
document.addEventListener('dragenter', this.handleDra...
document.addEventListener('dragover', this.handleDrag...
document.addEventListener('drop', this.handleDrop, fa...
document.addEventListener('dragleave', this.handleDra...
document.addEventListener('dragend', this.handleDragE...
this.props.dispatch(refreshTimeline('home'));
this.props.dispatch(refreshNotifications());
}
}}
refreshTimeline、明らかに当たりです。
*app/assets/javascripts/components/actions/timelines.jsx ...
refreshTimelineはactionsの下、timelinesに書かれている関数...
#code{{
export function refreshTimeline(timeline, id = null) {
return function (dispatch, getState) {
if (getState().getIn(['timelines', timeline, 'isLoadi...
return;
}
const ids = getState().getIn(['timelines', timel...
const newestId = ids.size > 0 ? ids.first() : null;
let params = getState().getIn(['timelines', timel...
const path = getState().getIn(['timelines', timel...
let skipLoading = false;
if (newestId !== null && getState().getIn(['timelines...
if (id === null && getState().getIn(['timelines', t...
// Skip refreshing when timeline is live anyway
return;
}
params = { ...params, since_id: newestId };
skipLoading = true;
}
dispatch(refreshTimelineRequest(timeline, id, skipLoa...
api(getState).get(path, { params }).then(response => {
const next = getLinks(response).refs.find(link => l...
dispatch(refreshTimelineSuccess(timeline, response....
}).catch(error => {
dispatch(refreshTimelineFail(timeline, error, skipL...
});
};
};
}}
初回、二回目以降（すでに取得してるのより新しいものだけ取...
**app/assets/javascripts/components/reducers/timelines.js...
pathの情報はreducersの下のtimelinesに書かれています。
#code{{
const initialState = Immutable.Map({
home: Immutable.Map({
path: () => '/api/v1/timelines/home',
next: null,
isLoading: false,
online: false,
loaded: false,
top: true,
unread: 0,
items: Immutable.List()
}),
}}
routes.rbを読んだのはだいぶ前だったので忘れかけていますが...
#code(Ruby){{
namespace :api do
省略
# JSON / REST API
namespace :v1 do
省略
get '/timelines/home', to: 'timelines#home', as...
get '/timelines/public', to: 'timelines#public', ...
get '/timelines/tag/:id', to: 'timelines#tag', as:...
省略
end
end
}}
**app/assets/javascripts/components/api.jsx [#h509398f]
apiはcomponents直下のapi.jsxで定義されています。その実体...
*おわりに [#u2ded306]
というわけでタイムラインのトゥート（Status）を取得する流...
言語とか立場とかが切り替わるので一旦ここまで。
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
