Featured projects: welcome banner (#5650)

* Projects welcome banner
Add a featured projects banner to the projects page.
Add some projects page styles.
Add projects page text to the English locale file.

* Remove constraint from admin interface. Remove line for prototyping now the API supports multiple

Co-authored-by: Sarah Allen <[email protected]>

app/locales/en.js

@@ -30,6 +30,14 @@ export default {
       studyInfo: 'I do not want to take part in this messaging [study](+tab+https://docs.google.com/document/d/1gLyN6Dgff8dOCOC88f47OD6TtFrfSJltsLgJMKkYMso/preview).'
     }
   },
+  projects: {
+    welcome: {
+      heading: "Welcome! We're so glad you're here",
+      thanks: "Thank you for your interest in helping real research. Here we've gathered a few projects we could really use your help on right now. For more options just scroll down to browse all of our active projects.",
+      talk: "Make sure to also check out [Talk](/talk) where you can chat to other like-minded volunteers.",
+      scrollDown: "Scroll down for even more"
+    }
+  },
   project: {
     language: 'Language',
     loading: 'Loading project',

app/pages/admin/project-status.jsx

@@ -31,15 +31,13 @@ class ProjectStatus extends Component {
     this.state = {
       dialogIsOpen: false,
       error: null,
-      featuredProject: null,
       project: null,
       usedWorkflowLevels: [],
       workflows: []
     };
   }
 
   componentDidMount() {
-    this.getFeaturedProject();
     this.getProjectAndWorkflows();
   }
 
@@ -64,14 +62,6 @@ class ProjectStatus extends Component {
       .catch(error => this.setState({ error }));
   }
 
-  getFeaturedProject() {
-    return apiClient.type('projects')
-      .get({ featured: true, cards: true })
-      .then(([featuredProject]) => {
-        this.setState({ featuredProject });
-      });
-  }
-
   getProject() {
     const { owner, name } = this.props.params;
     const slug = `${owner}/${name}`;
@@ -134,19 +124,9 @@ class ProjectStatus extends Component {
   }
 
   handleFeaturedProjectChange({ target }) {
-    const { featuredProject, project } = this.state;
-    project.update({ featured: target.checked });
-    if (featuredProject) {
-      return featuredProject.update({ featured: false }).save()
-        .then(() => project.save())
-        .then(newFeaturedProject => this.setState({
-          featuredProject: newFeaturedProject
-        }))
-        .catch(error => this.setState({ error }));
-    } else {
-      return project.save()
-        .catch(error => this.setState({ error }));
-    }
+    const { project } = this.state;
+    return project.update({ featured: target.checked }).save()
+      .catch(error => this.setState({ error }));
   }
 
   handleToggle(event, workflow) {

app/pages/projects/index.jsx

@@ -5,6 +5,7 @@ import Translate from 'react-translate-component';
 import { browserHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
 
+import ProjectsWelcome from './projects-welcome'
 import StatusLink from './status-link';
 
 counterpart.registerTranslations('en', {
@@ -72,6 +73,7 @@ class ProjectsPage extends Component {
           </div>
         </section>
         <section className="resources-container">
+          <ProjectsWelcome />
           {children}
         </section>
       </div>

app/pages/projects/projects-welcome.jsx

@@ -0,0 +1,40 @@
+import counterpart from 'counterpart';
+import { Markdown } from 'markdownz';
+import apiClient from 'panoptes-client/lib/api-client';
+import React, { Component } from 'react';
+import Translate from 'react-translate-component';
+import ProjectCardList from './project-card-list';
+
+class ProjectsWelcome extends Component {
+  constructor() {
+    super();
+    this.state = {
+      featuredProjects: []
+    };
+  }
+
+  componentDidMount() {
+    this.getFeaturedProjects();
+  }
+
+  getFeaturedProjects() {
+    const query = { featured: true, launch_approved: true, cards: true };
+    return apiClient.type('projects').get(query)
+      .then((featuredProjects) => {
+        this.setState({ featuredProjects });
+      });
+  }
+  render() {
+    return (
+      <div className="resources-container welcome-banner">
+        <Translate content="projects.welcome.heading" component="h2" />
+        <Translate content="projects.welcome.thanks" component="p" />
+        <Markdown>{counterpart('projects.welcome.talk')}</Markdown>
+        <ProjectCardList projects={this.state.featuredProjects} />
+        <p><Translate content="projects.welcome.scrollDown" component="em" /></p>
+      </div>
+    );
+  }
+}
+
+export default ProjectsWelcome;

css/main.styl

@@ -60,6 +60,7 @@
 @require './admin-page'
 @require './highlights-page'
 @require './donate-page'
+@require './projects-page'
 
 // Project
 @require './project-page'

css/projects-page.styl

@@ -0,0 +1,19 @@
+
+.resources-container .welcome-banner
+  background: #fff
+  padding: 2em 4em
+
+  h2
+    font-size: 1.1em
+    text-transform: uppercase
+
+  p
+    margin: 1.4em auto 0
+    text-align: center
+    max-width: 50em
+
+    em
+      color: COPY
+      font-style: normal
+      font-weight: normal
+      text-transform: uppercase