Merge branch 'release/0.10.0'

Author: David Silva

CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 0.10.0
+
+- displaying projects and submissions in profile page

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codecorgi",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "private": true,
   "proxy": "http://localhost:9500",
   "devDependencies": {

src/components/challenges/list.js

@@ -10,7 +10,7 @@ class ChallengesList extends Component {
 
     render() {
         const { challenges } = this.props;
-
+        challenges.sort((a, b) => parseInt(a.attributes.number, 10) < parseInt(b.attributes.number, 10));
         return(
             <div>
                 <TintedHeader title="Challenges" subtitle="These are all the available challenges" />

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/components/submit/list.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { SubmitType } from '../../types';
+import { Link } from 'react-router-dom';
+import Moment from '../misc/moment';
+
+class SubmitList extends Component {
+    static propTypes = {
+        submits: PropTypes.arrayOf(SubmitType),
+    }
+
+    render() {
+        const { submits } = this.props;
+
+        return(
+            <div>
+                {submits.map((s) => (
+                    s && s.attributes &&
+                    <div key={ s.id }>
+                        <p>Submission for: <strong> {s.attributes.challenge.number }&nbsp;</strong>
+                            <Link to={`/challenge/${s.attributes.challenge.number}/${ s.attributes.challenge.title }`}>{ s.attributes.challenge.title } </Link>
+                        </p>
+                        <p><strong>Description:</strong> { s.attributes.description }</p>
+                        <p>Submitted: <Moment date={ s.attributes.createdAt } /></p>
+                        <p>
+                            <Link to={`/submit/${ s.id }`} className="btn btn-primary">View Details</Link>
+                        </p>
+                    </div>
+                ))}
+            </div>
+        );
+    }
+}
+
+export default SubmitList;

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,
     };
 };
 

src/containers/submit/index.js

@@ -26,14 +26,14 @@ class ChallengeContainer extends Component {
     render() {
         const { challenge, submission, user } = this.props;
         return (
-            <div>
+            <div style={{ margin: '30px auto' }} >
                 {submission && challenge && <Helmet>
                     <title>{ `codecorgi | submission for: ${ challenge.title }` }</title>
                     <meta property="og:title" content={ `codecorgi | submission for: ${ challenge.title }` } />
                     <meta property="og:url" content={ `${PROD_URL}/${ challenge.url }` } />
                     <meta name="twitter:title" content={ `codecorgi | submission for: ${ challenge.title }` } />
                 </Helmet>}
-                {submission && challenge &&
+                {submission && challenge && user._id &&
                     <SubmitDetails submission={ submission } challenge={ challenge } user={ user } />
                 }
             </div>