Merge pull request #21 from zooniverse/project-context

Project context
zooniverse · Nov 5, 2018 · ac20c5e · ac20c5e
2 parents f4ac201 + 106bb97
commit ac20c5e
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 80 deletions.
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -3,7 +3,8 @@ import GrommetApp from 'grommet/components/App';
 import Box from 'grommet/components/Box';
 import { ZooFooter, ZooHeader } from 'zooniverse-react-components';
 
-import { UserProvider, withUser } from '../context/UserContext';
+import { ProjectProvider, ProjectContext } from '../context/ProjectContext';
+import { UserProvider, UserContext } from '../context/UserContext';
 import AuthContainer from '../containers/AuthContainer';
 import UserHeading from './UserHeading';
 import RecentsContainer from '../containers/RecentsContainer';
@@ -12,46 +13,54 @@ import StatsContainer from '../containers/StatsContainer';
 
 import Title from './Title'; // remove with completion of Badge section
 
-const UserHeadingWithUser = withUser(UserHeading);
-const RecentsWithUser = withUser(RecentsContainer);
-const FavoritesWithUser = withUser(FavoritesContainer);
-const StatsWithUser = withUser(StatsContainer);
-
 const App = () => (
   <UserProvider>
-    <GrommetApp centered={false}>
-      <ZooHeader authContainer={<AuthContainer />} />
-      <Box className="main" pad="large" tag="main">
-        <UserHeadingWithUser />
-        <Box
-          direction="row"
-          full="horizontal"
-          margin={{ bottom: 'medium' }}
-          responsive
-        >
-          <Box
-            basis="2/3"
-            colorIndex="light-1"
-            justify="between"
-            margin={{ right: 'medium' }}
-          >
-            <RecentsWithUser />
-            <hr className="main__hr" />
-            <FavoritesWithUser />
-          </Box>
-          <StatsWithUser />
-        </Box>
-        <Box
-          colorIndex="light-1"
-          full="horizontal"
-          pad="medium"
-          style={{ height: '250px' }}
-        >
-          <Title>Your Badges</Title>
-        </Box>
-      </Box>
-      <ZooFooter />
-    </GrommetApp>
+    <ProjectProvider>
+      <UserContext.Consumer>
+        {userContext => (
+          <GrommetApp centered={false}>
+            <ZooHeader authContainer={<AuthContainer />} />
+            <Box className="main" pad="large" tag="main">
+              <ProjectContext.Consumer>
+                {projectContext => (
+                  <UserHeading
+                    project={projectContext.project}
+                    user={userContext.user}
+                  />
+                )}
+              </ProjectContext.Consumer>
+              <Box
+                direction="row"
+                full="horizontal"
+                margin={{ bottom: 'medium' }}
+                responsive
+              >
+                <Box
+                  basis="2/3"
+                  colorIndex="light-1"
+                  justify="between"
+                  margin={{ right: 'medium' }}
+                >
+                  <RecentsContainer user={userContext.user} />
+                  <hr className="main__hr" />
+                  <FavoritesContainer user={userContext.user} />
+                </Box>
+                <StatsContainer user={userContext.user} />
+              </Box>
+              <Box
+                colorIndex="light-1"
+                full="horizontal"
+                pad="medium"
+                style={{ height: '250px' }}
+              >
+                <Title>Your Badges</Title>
+              </Box>
+            </Box>
+            <ZooFooter />
+          </GrommetApp>
+        )}
+      </UserContext.Consumer>
+    </ProjectProvider>
   </UserProvider>
 );
 

diff --git a/src/components/Histogram.jsx b/src/components/Histogram.jsx
@@ -51,10 +51,12 @@ export default function Histogram({
 
   const max = Math.max(...weekOfData.series);
   const increment = Math.ceil(max / 4);
+  const base = 10 ** (increment.toString().length - 1);
+  const roundedIncrement = Math.round(increment / base) * base;
 
   const axisY = [0, 1, 2, 3, 4].map(index => ({
     index,
-    label: `${index * increment}`
+    label: `${(index * roundedIncrement).toLocaleString()}`
   }));
 
   const axisX = weekOfData.labels.map((label, index) => ({ index, label }));
@@ -78,15 +80,15 @@ export default function Histogram({
             colorIndex="accent-2"
             count={7}
             index={6}
-            label={<Value value={weekOfData.series[6]} />}
+            label={<Value value={weekOfData.series[6].toLocaleString()} />}
           />
           <Base />
           <Layers>
             <Grid rows={5} columns={3} />
             <Bar
               activeIndex={6}
               colorIndex="accent-1"
-              max={increment * 4}
+              max={roundedIncrement * 4}
               values={weekOfData.series.map(value => value)}
             />
             <Marker count={7} index={6} vertical />

diff --git a/src/components/SubjectCard.jsx b/src/components/SubjectCard.jsx
@@ -5,6 +5,7 @@ import Button from 'grommet/components/Button';
 import { Thumbnail } from 'zooniverse-react-components';
 
 import { config } from '../config';
+import { ProjectContext } from '../context/ProjectContext';
 import getSubjectLocations from '../lib/get-subject-locations';
 
 export default function SubjectCard({ subject }) {
@@ -24,32 +25,36 @@ export default function SubjectCard({ subject }) {
     ? `/subjects/${subject.links.subject}`
     : subject.href;
   return (
-    <Box alignSelf="center" className="subject-card" margin="small">
-      <a
-        href={`${config.zooniverse}/projects/${
-          config.projectSlug
-        }/talk${subjectId}`}
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        <Thumbnail
-          alt={`Subject ${subject.links.subject}`}
-          src={src}
-          type={type}
-          format={format}
-          height={250}
-          width={200}
-        />
-      </a>
-      <Box direction="row" justify="center">
-        <Button type="button">
-          <i className="fa fa-heart fa-fw" />
-        </Button>
-        <Button type="button">
-          <i className="fa fa-list fa-fw" />
-        </Button>
-      </Box>
-    </Box>
+    <ProjectContext.Consumer>
+      {projectContext => (
+        <Box alignSelf="center" className="subject-card" margin="small">
+          <a
+            href={`${config.zooniverse}/projects/${
+              projectContext.project ? projectContext.project.slug : ''
+            }/talk${subjectId}`}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <Thumbnail
+              alt={`Subject ${subject.links.subject}`}
+              src={src}
+              type={type}
+              format={format}
+              height={250}
+              width={200}
+            />
+          </a>
+          <Box direction="row" justify="center">
+            <Button type="button">
+              <i className="fa fa-heart fa-fw" />
+            </Button>
+            <Button type="button">
+              <i className="fa fa-list fa-fw" />
+            </Button>
+          </Box>
+        </Box>
+      )}
+    </ProjectContext.Consumer>
   );
 }
 

diff --git a/src/components/UserHeading.jsx b/src/components/UserHeading.jsx
@@ -2,25 +2,46 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Heading from 'grommet/components/Heading';
 
-export default function UserHeading({ user }) {
-  const headingContent =
-    user && user.display_name
-      ? `${user.display_name}'s Field Book`
-      : 'Your Field Book (please sign-in)';
+import { config } from '../config';
+
+export default function UserHeading({ project, user }) {
+  if (user && project) {
+    const projectLink = (
+      <a href={`${config.zooniverse}/projects/${project.slug}`}>
+        {project.display_name}
+      </a>
+    );
+
+    return (
+      <Heading className="user-heading" strong tag="h2">
+        {`${user.display_name}'s `}
+        {projectLink}
+        {' Field Book'}
+      </Heading>
+    );
+  }
   return (
     <Heading className="user-heading" strong tag="h2">
-      {headingContent}
+      Your Field Book (please sign-in)
     </Heading>
   );
 }
 
 UserHeading.propTypes = {
+  project: PropTypes.shape({
+    display_name: PropTypes.string,
+    slug: PropTypes.string
+  }),
   user: PropTypes.shape({
     display_name: PropTypes.string
   })
 };
 
 UserHeading.defaultProps = {
+  project: {
+    display_name: '',
+    slug: ''
+  },
   user: {
     display_name: ''
   }

diff --git a/src/components/UserStats.jsx b/src/components/UserStats.jsx
@@ -35,18 +35,22 @@ export default function UserStats({
       margin={{ bottom: 'medium' }}
       pad="medium"
     >
-      <Title>Your Notes from Nature Stats</Title>
+      <Title>Your Stats</Title>
       <Box direction="row">
         <Box basis="1/2" justify="center" separator="right">
-          <Value align="start" colorIndex="accent-2" value={activityCount} />
+          <Value
+            align="start"
+            colorIndex="accent-2"
+            value={activityCount.toLocaleString()}
+          />
           <Label margin="none">Total Classifications</Label>
         </Box>
         <Box basis="1/2" justify="center" margin={{ left: 'medium' }}>
           <Value
             align="start"
             colorIndex="accent-1"
             size="small"
-            value={maxDay.value}
+            value={maxDay.value.toLocaleString()}
           />
           <Label size="small">
             Highest day: {moment.utc(maxDay.label).format('dd, l')}
@@ -55,7 +59,7 @@ export default function UserStats({
             align="start"
             colorIndex="accent-1"
             size="small"
-            value={maxMonth.value}
+            value={maxMonth.value.toLocaleString()}
           />
           <Label size="small">
             Highest month: {moment.utc(maxDay.label).format('MMMM, YYYY')}

diff --git a/src/config.js b/src/config.js
@@ -37,7 +37,6 @@ const baseConfig = {
     caesar: 'https://caesar-staging.zooniverse.org',
     origin: window.location.origin,
     projectId: projectIdFromBrowser || '1613',
-    projectSlug: 'rafe-dot-lafrance/notes-from-nature-on-staging',
     panoptesAppId:
       '16ac801e4ad438d929d30668206df31294e7a7222ce3f449a1c4b45cd80d44cc',
     stats: 'https://stats-staging.zooniverse.org',
@@ -49,7 +48,6 @@ const baseConfig = {
     panoptesAppId:
       '940c60fa02251f156c0d9129e3b8d885424fe729da4e4a7750525ca154bdb3d7',
     projectId: projectIdFromBrowser || '1558',
-    projectSlug: 'zooniverse/notes-from-nature',
     stats: 'https://stats.zooniverse.org',
     zooniverse: 'https://www.zooniverse.org'
   }

diff --git a/src/context/ProjectContext.jsx b/src/context/ProjectContext.jsx
@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import apiClient from 'panoptes-client/lib/api-client';
+
+import { config } from '../config';
+
+export const ProjectContext = React.createContext({
+  id: config.projectId
+});
+
+export class ProjectProvider extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      initialised: false,
+      project: null
+    };
+  }
+
+  componentDidMount() {
+    if (!this.state.initialised) {
+      apiClient
+        .type('projects')
+        .get(config.projectId)
+        .then(project => this.setState({ initialised: true, project }));
+    }
+  }
+
+  render() {
+    return (
+      <ProjectContext.Provider
+        value={{
+          initialised: this.state.initialised,
+          project: this.state.project
+        }}
+      >
+        {this.props.children}
+      </ProjectContext.Provider>
+    );
+  }
+}
+
+ProjectProvider.propTypes = {
+  children: PropTypes.element.isRequired
+};
+
+export function withProject(MyComponent) {
+  return function ProjectComponent(props) {
+    return (
+      <ProjectContext.Consumer>
+        {projectState => (
+          <MyComponent
+            {...props}
+            initialised={projectState.initialised}
+            project={projectState.project}
+          />
+        )}
+      </ProjectContext.Consumer>
+    );
+  };
+}