update(table): add header, custom pagination of result table

issue sabertazimi/awesome-notes#105

.eslintrc.json

@@ -5,6 +5,7 @@
     "node": true
   },
   "rules": {
-    "react/prop-types": 0
+    "react/prop-types": 0,
+    "no-plusplus": 0 
   }
 }

src/api/index.js

@@ -2,6 +2,8 @@ export const dblpQuery = (keyword, venue) => (
   `http://dblp.org/search/publ/api?q=${keyword} venue:${venue}:&format=json&h=999`
 );
 
+let KEY = 0;
+
 export const normalize = (data) => {
   const { hit: results } = data.result.hits;
 
@@ -10,7 +12,7 @@ export const normalize = (data) => {
   }
 
   return results.map(({ info }) => ({
-    key: info.key,
+    key: KEY++,
     title: info.title,
     venue: info.venue,
     year: info.year,

src/containers/Result.jsx

@@ -5,22 +5,22 @@ import { Table } from 'antd';
 const Result = ({ error, isLoading, data }) => {
   const columns = [
     {
-      Title: 'Title',
+      title: 'Title',
       dataIndex: 'title',
       key: 'title',
     },
     {
-      Title: 'Venue',
+      title: 'Venue',
       dataIndex: 'venue',
       key: 'venue',
     },
     {
-      Title: 'Year',
+      title: 'Year',
       dataIndex: 'year',
       key: 'year',
     },
     {
-      Title: 'Url',
+      title: 'Url',
       dataIndex: 'url',
       key: 'url',
       render: url => (
@@ -39,22 +39,19 @@ const Result = ({ error, isLoading, data }) => {
     );
   }
 
-  if (isLoading) {
-    return (
-      <h2>
-        Loading ...
-      </h2>
-    );
-  }
-
-  if (data && data.length) {
-    return (<Table rowKey="uid" columns={columns} dataSource={data} />);
-  }
-
   return (
-    <h2>
-      No Data
-    </h2>
+    <Table
+      columns={columns}
+      dataSource={data}
+      loading={isLoading}
+      pagination={{
+        defaultPageSize: 30,
+        hideOnSinglePage: true,
+        pageSizeOptions: ['10', '20', '30', '40', '50'],
+        showQuickJumper: true,
+        showSizeChanger: true,
+      }}
+    />
   );
 };