displaying the user submissions in their profile

Author: David Silva

src/components/profile/index.js

@@ -1,21 +1,23 @@
 import React from 'react';
-import { ProfileType } from '../../types';
+import { ProfileType, SubmitType } from '../../types';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import corgiImg from '../../assets/images/team/corginson.png';
 import bgImage from '../../assets/images/art/pattern-background03.png';
 import { Helmet } from 'react-helmet';
 import { PROD_URL, BACKEND_URL } from '../../constants';
 import ReactMarkdown from 'react-markdown';
+import SubmitList from '../submit/list';
 
 class ProfileComponent extends React.Component {
     static propTypes = {
         profile: ProfileType,
         self: PropTypes.bool.isRequired,
+        submits: PropTypes.arrayOf( SubmitType ),
     }
 
     render() {
-        const { profile, self } = this.props;
+        const { profile, self, submits } = this.props;
         return (
             <div className="profile-container">
                 <Helmet>
@@ -50,23 +52,33 @@ class ProfileComponent extends React.Component {
                         </div>
                     </div>
                 </section>
-                <section className="container profile-body">
+                <section className="container profile-body" style={{ margin: '30px auto' }}>
                     <div className="row">
                         <div className="col-xs-12">
                             <ReactMarkdown source={ profile.profile.bio } />
                         </div>
                     </div>
-                    {profile.projects && profile.projects.length > 0 && <div className="row">
-                        <h3>Projects</h3>
-                        <div className="col-xs-12">
-                            {profile.projects.map((p, index) => (
-                                <div className="project" key={ index }>
-                                    <p><Link to={p.url} target="_blank">{ p.name }</Link></p>
-                                    <p>{ p.description }</p>
-                                </div>
-                            ))}
+                    {submits && submits.length > 0 &&
+                        <div className="row" style={{ marginBottom: '30px' }}>
+                            <h3>Submissions</h3>
+                            <div className="col-xs-12">
+                                <SubmitList submits={ submits } />
+                            </div>
+                        </div>
+                    }
+                    {profile.projects && profile.projects.length > 0 &&
+                        <div className="row" style={{ marginBottom: '30px' }}>
+                            <h3>Projects</h3>
+                            <div className="col-xs-12">
+                                {profile.projects.map((p, index) => (
+                                    <div className="project" key={ index }>
+                                        <p><Link to={p.url} target="_blank">{ p.name }</Link></p>
+                                        <p>{ p.description }</p>
+                                    </div>
+                                ))}
+                            </div>
                         </div>
-                    </div>}
+                    }
                 </section>
             </div>
         );

src/containers/profile/index.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { ProfileType } from '../../types';
+import { ProfileType, SubmitType } from '../../types';
 import ReactRouterPropTypes from 'react-router-prop-types';
 import { readEndpoint } from 'redux-json-api';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import E404 from '../404/';
 import ProfileComponent from '../../components/profile';
+import _get from 'lodash/get';
 
 class Profile extends React.Component {
     static propTypes = {
@@ -15,6 +16,7 @@ class Profile extends React.Component {
         match: ReactRouterPropTypes.match,
         username: PropTypes.string,
         self: PropTypes.bool.isRequired,
+        submits: PropTypes.arrayOf(SubmitType),
     }
 
     constructor(props) {
@@ -25,32 +27,38 @@ class Profile extends React.Component {
     }
 
     componentWillMount() {
-        this.props.readEndpoint(`profile/${this.props.username || ''}`).then(() => {
+        this.props.readEndpoint(`profile/${this.props.username || ''}`).then((r) => {
             this.setState({ loading: false });
+            const user = _get(r, 'body.data[0]', null);
+            if (user) {
+                this.props.readEndpoint(`submit/all/user/${ user.id }`);
+            }
         });
     }
 
     render() {
-        const { profile, self } = this.props;
+        const { profile, self, submits } = this.props;
         return(
             <div>
-                {!this.state.loading && this.props.profile && <ProfileComponent profile={profile} self={self} />}
+                {!this.state.loading && this.props.profile && <ProfileComponent profile={profile} self={self} submits={ submits }/>}
                 {!this.state.loading && !this.props.profile && <E404 />}
             </div>);
     }
 }
 
 const mapStateToProps = (state, ownProps) => {
     const { profile, api } = state;
-    const { users = {data: [] }} = api;
+    const { users = {data: [] }, submit = {data: []} } = api;
 
     const username = ownProps.match.params.username ? ownProps.match.params.username : profile.username;
     const user = users.data.find((u) => u.attributes.username === username);
+    const submits = submit.data.filter(s => s.attributes._user === user.id);
 
     return {
         profile: user ? user.attributes : undefined,
         username,
         self: !ownProps.match.params.username || ownProps.match.params.username === profile.username,
+        submits,
     };
 };