@@ -1,10 +1,57 @@
-import React, { Component } from 'react';
-import { Text } from 'react-native';
+import React, { Component, PropTypes } from 'react';
+import { ScrollView } from 'react-native';
+import Api from '../../../utils/api';
+import AppStyle from '../../../theme/styles';
+import SimpleListItem from '../../../components/discover/view/SimpleListItem';
+import Dialog from '../../../components/dialog';
+import Launch from '../../../components/discover/Launch';
 
 class ChapterList extends Component {
   static componentName = 'ChapterList';
-  render = () => (
-    <Text>ChapterList</Text>
-  );
+
+  static propTypes = {
+    url: PropTypes.string.isRequired,
+    dialogContent: PropTypes.string,
+  };
+
+  static defaultProps = {
+    url: '',
+    dialogContent: '',
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: true,
+      baseUrl: '',
+      data: [],
+    };
+  }
+
+  componentDidMount() {
+    Api.get(this.props.url)
+      .then(response => (
+        this.setState({
+          visible: false,
+          baseUrl: response.data.source,
+          data: Array.from(
+            new Array(response.data.content.length))
+            .map((val, index) => (response.data.content[index])) })));
+  }
+
+  render() {
+    const rows = this.state.data
+      .map((val, index) => (
+        <SimpleListItem
+          text={val.title}
+          click={() => Launch.chapterListArticle(this.state.baseUrl.concat(val.path))}
+          key={val.title.concat(index)}
+        />))
+    return (
+      <ScrollView style={AppStyle.detailBasisStyle}>
+        <Dialog show={this.state.visible} content={this.props.dialogContent} />
+        {rows}
+      </ScrollView>);
+  }
 }
 export default ChapterList;