Added more views and atlas APIs

src/scenes/Atlas/Atlas.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { replace } from 'react-router-redux';
+import { fetchAtlasAsync } from 'actions/AtlasActions';
+
+// Temp
+import { client } from 'utils/ApiClient';
+
+import Layout from 'components/Layout';
+import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
+import CenteredContent from 'components/CenteredContent';
+
+import styles from './Atlas.scss';
+
+class Atlas extends React.Component {
+  static propTypes = {
+    atlas: React.PropTypes.object,
+  }
+
+  state = {
+    isLoading: true,
+    data: null,
+  }
+
+  componentDidMount = () => {
+    const { id } = this.props.params;
+
+    // this.props.fetchAtlasAsync(id);
+
+    // Temp before breaking out redux store
+    client.post('/atlases.info', {
+      id: id,
+    })
+    .then(data => {
+      this.setState({
+        isLoading: false,
+        data: data.data
+      });
+    })
+  }
+
+  render() {
+    const data = this.state.data;
+
+    return (
+      <Layout>
+        <CenteredContent>
+          { this.state.isLoading ? (
+            <AtlasPreviewLoading />
+          ) : (
+            <div className={ styles.container }>
+              <div className={ styles.atlasDetails }>
+                <h2>{ data.name }</h2>
+                <blockquote>
+                  { data.description }
+                </blockquote>
+              </div>
+
+              <div className={ styles.divider }><span></span></div>
+            </div>
+          ) }
+        </CenteredContent>
+      </Layout>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    isLoading: state.atlases.isLoading,
+  }
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return bindActionCreators({
+    replace,
+    fetchAtlasAsync,
+  }, dispatch)
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Atlas);

src/scenes/Atlas/Atlas.scss

@@ -0,0 +1,31 @@
+.container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.atlasDetails {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  blockquote {
+    padding: 0;
+    margin: 0 0 20px 0;
+    font-style: italic;
+  }
+}
+
+.divider {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+
+  span {
+    display: flex;
+    width: 50%;
+    margin: 20px 0;
+
+    border-bottom: 1px solid #eee;
+  }
+}

src/scenes/Atlas/index.js

@@ -0,0 +1,2 @@
+import Atlas from './Atlas';
+export default Atlas;

src/scenes/Dashboard/Dashboard.js

@@ -1,37 +1,53 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { replace } from 'react-router-redux';
-
-import { client } from 'utils/ApiClient';
+import { fetchAtlasesAsync } from 'actions/AtlasActions';
 
 import Layout from 'components/Layout';
+import AtlasPreview from 'components/AtlasPreview';
 import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
+import CenteredContent from 'components/CenteredContent';
 
 import styles from './Dashboard.scss';
 
 class Dashboard extends React.Component {
   static propTypes = {
-    replace: React.PropTypes.func.isRequired,
+  }
+
+  componentDidMount = () => {
+    this.props.fetchAtlasesAsync(this.props.teamId);
   }
 
   render() {
     return (
-      <Layout
-        header={<div>header!</div>}
-      >
-        <div className={ styles.content }>
-          <AtlasPreviewLoading />
-        </div>
+      <Layout>
+        <CenteredContent>
+          { this.props.isLoading ? (
+            <AtlasPreviewLoading />
+          ) : this.props.items.map((item) => {
+           return  (<AtlasPreview data={ item } />);
+          }) }
+        </CenteredContent>
       </Layout>
     );
   }
 }
 
+const mapStateToProps = (state) => {
+  return {
+    teamId: state.team ? state.team.id : null,
+    isLoading: state.atlases.isLoading,
+    items: state.atlases.items,
+  }
+};
+
 const mapDispatchToProps = (dispatch) => {
-  return bindActionCreators({ replace }, dispatch)
+  return bindActionCreators({
+    fetchAtlasesAsync,
+  }, dispatch)
 }
 
 export default connect(
-  null, mapDispatchToProps
+  mapStateToProps,
+  mapDispatchToProps
 )(Dashboard);

src/scenes/Dashboard/Dashboard.scss

@@ -1,7 +0,0 @@
-.content {
-  display: flex;
-  flex: 1;
-  max-width: 600px;
-
-  margin: 40px 20px;
-}