feat: add views for qiita users list

LancersDevTeam · Dec 4, 2016 · 568613f · 568613f
1 parent c2da653
commit 568613f
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/src/components/api_call_result_component.js b/src/components/api_call_result_component.js
@@ -1,12 +1,25 @@
 // @flow
 import React, { Component } from 'react';
+import { List, ListItem } from 'material-ui/List';
 
 class ApiCallResultComponent extends Component {
-    props: {};
+    props: {
+        qiitaUsers: any;
+    };
     render() {
         return (
             <div>
-                <h2>なんらかの API コールをした結果を表示したいコンポーネント</h2>
+                <h2>Qiita のユーザー一覧取得 API コールの結果を表示するコンポーネント</h2>
+                <List>
+                    {this.props.qiitaUsers.data.map((qiitaUser, i) =>
+                        <ListItem
+                            key={i}
+                            primaryText={qiitaUser.id}
+                        />,
+                    )}
+                </List>
+
+
             </div>
         );
     }

diff --git a/src/containers/another_container.js b/src/containers/another_container.js
@@ -1,23 +1,35 @@
 // @flow
 import React, { Component } from 'react';
+import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import ApiCallResultComponent from '../components/api_call_result_component';
+import * as qiitaUsersActions from '../actions/qiita_users_action';
 
 function mapStateToProps(state: Object): Object {
-    return {};
+    return {
+        qiitaUsers: state.qiitaUsers,
+    };
 }
 
 function mapDispatchToProps(dispatch: Function): Object {
-    return {};
+    return {
+        qiitaUsersActions: bindActionCreators(qiitaUsersActions, dispatch),
+    };
 }
 
 class AnotherContainer extends Component {
-    props: {};
+    componentWillMount() {
+        this.props.qiitaUsersActions.getQiitaUsersStart();
+    }
+    props: {
+        qiitaUsersActions: any;
+        qiitaUsers: any;
+    };
     render() {
         return (
             <div>
                 <h1>AnotherContainer</h1>
-                <ApiCallResultComponent />
+                <ApiCallResultComponent qiitaUsers={this.props.qiitaUsers} />
             </div>
         );
     }