Darien Classrooms & Assignments Mk2 - Part 1

src/components/darien/Darien401.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import GenericStatusPage from '../../components/common/GenericStatusPage';
+
+const Darien401 = (props) => {
+  return (
+    <GenericStatusPage status="warning" message="Please login to view this page." />
+  );
+};
+
+export default Darien401;

src/components/darien/Darien404.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import GenericStatusPage from '../../components/common/GenericStatusPage';
+
+const Darien404 = (props) => {
+  return (
+    <GenericStatusPage status="warning" message="Page not found." />
+  );
+};
+
+export default Darien404;

src/components/darien/DarienEducators.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ClassroomsLayout from '../classrooms/ClassroomsLayout';
+
+const DarienEducators = (props) => {
+  return (
+    <ClassroomsLayout match={props.match} />
+  );
+};
+
+DarienEducators.defaultProps = {};
+DarienEducators.propTypes = {};
+
+export default DarienEducators;

src/components/darien/DarienHome.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { Actions } from 'jumpstate';
 
 import Section from 'grommet/components/Section';
 import Box from 'grommet/components/Box';
@@ -9,6 +10,7 @@ import Image from 'grommet/components/Image';
 import Heading from 'grommet/components/Heading';
 import Button from 'grommet/components/Button';
 import Paragraph from 'grommet/components/Paragraph';
+import Label from 'grommet/components/Label';
 
 import ProgramHome from '../common/ProgramHome';
 import NeedHelp from '../common/NeedHelp';
@@ -17,47 +19,54 @@ import {
   PROGRAMS_INITIAL_STATE, PROGRAMS_PROPTYPES, PROGRAMS_STATUS
 } from '../../ducks/programs';
 
-class DarienHome extends React.Component {
-  constructor(props) {
-    super(props);
-  }
+const DarienHome = (props) => {
+  const signedIn = (props.user && props.initialised);
+  const selectedProgramExists = (props.programsStatus === PROGRAMS_STATUS.SUCCESS && props.selectedProgram);
+  const name = (selectedProgramExists && props.selectedProgram.name) ? props.selectedProgram.name : '';
 
-  render() {
-    const selectedProgramExists = (this.props.programsStatus === PROGRAMS_STATUS.SUCCESS && this.props.selectedProgram);
-    const name = (selectedProgramExists && this.props.selectedProgram.name) ? this.props.selectedProgram.name : '';
-
-    return (
-      <ProgramHome className="darien-home">
-        <Hero
-          className="program-home__hero"
-          background={<Image src="https://placeimg.com/1000/1000/nature/any" fit="cover" />}
-          backgroundColorIndex="dark"
-          size="medium"
-        >
-          <Box align="center"><Heading className="program-home__header">{name}</Heading></Box>
-        </Hero>
-        <Section
-          className="program-home__section"
-          align="center"
-          colorIndex="accent-3"
-          direction="column"
-          margin={{ vertical: 'none', horizontal: 'none' }}
-          pad={{ vertical: 'none', horizontal: 'none' }}
-          justify="center"
-        >
-          <Box align="center" direction="column">
-            <Paragraph>Investigate ecological questions by exploring trail camera data using an interactive map. Filter and download data to perform analyses and test hypotheses. If you are an educator, you can set up private classrooms and invite your students to join. Curate data sets or let your students explore on their own. Guided activities and supporting educational resources are also available. If you are a student or you simply want to explore the data, click the Explorer button.</Paragraph>
-            <Paragraph>Are you an educator or a student/explorer? Make your selection to get started!</Paragraph>
+  return (
+    <ProgramHome className="darien-home">
+      <Hero
+        className="program-home__hero"
+        background={<Image src="https://placeimg.com/1000/1000/nature/any" fit="cover" />}
+        backgroundColorIndex="dark"
+        size="medium"
+      >
+        <Box align="center"><Heading className="program-home__header">{name}</Heading></Box>
+      </Hero>
+      <Section
+        className="program-home__section"
+        align="center"
+        colorIndex="accent-3"
+        direction="column"
+        margin={{ vertical: 'none', horizontal: 'none' }}
+        pad={{ vertical: 'none', horizontal: 'none' }}
+        justify="center"
+      >
+        <Box align="center" direction="column">
+          <Paragraph>Investigate ecological questions by exploring trail camera data using an interactive map. Filter and download data to perform analyses and test hypotheses.</Paragraph>
+
+          <Box pad="medium" size="medium">
+            <Paragraph>If you are an educator, you can set up private classrooms and invite your students to join. Curate data sets or let your students explore on their own. Guided activities and supporting educational resources are also available. {(signedIn) ? null : '(Sign In required)'}</Paragraph>
+            {(signedIn)
+              ? <Button path="/wildcam-darien-lab/educators/" label="Educator" />
+              : <Button type="button" className="button--secondary" onClick={Actions.auth.toggleOauthModal} label="Sign In" />
+            }            
           </Box>
-          <Box align="center" direction="row" justify="between" pad="medium" size="medium">
-            <Button path="/wildcam-darien-lab/educators/" label="Educator" />
-            <Button path="/wildcam-darien-lab/students/" label="Explorer" />
+
+          <Box pad="medium" size="medium">
+            <Paragraph> Alternatively, you can simply explore the data.</Paragraph>
+            <Button path="/wildcam-darien-lab/map/" label="Explorer" />
           </Box>
-        </Section>
-        <NeedHelp />
-      </ProgramHome>
-    );
-  }
+        </Box>
+        <Box align="center" direction="row" justify="between" pad="medium" size="medium">
+
+
+        </Box>
+      </Section>
+      <NeedHelp />
+    </ProgramHome>
+  );
 }
 
 DarienHome.propTypes = {

src/components/darien/DarienExplorer.jsx → src/components/darien/DarienMap.jsx

@@ -3,20 +3,20 @@ import PropTypes from 'prop-types';
 import MapExplorer from '../../containers/maps/MapExplorer';
 import mapConfig from '../../lib/wildcam-darien.mapConfig.js';
 
-const DarienExplorer = (props) => {
+const DarienMap = (props) => {
   return (
     <MapExplorer
       mapConfig={props.mapConfig}
     />
   );
 };
 
-DarienExplorer.defaultProps = {
+DarienMap.defaultProps = {
   mapConfig
 };
 
-DarienExplorer.propTypes = {
+DarienMap.propTypes = {
   mapConfig: PropTypes.object
 };
 
-export default DarienExplorer;
+export default DarienMap;

src/containers/common/ProgramHomeContainer.jsx

@@ -5,7 +5,7 @@ import { Actions } from 'jumpstate';
 import { Switch, Route, Redirect } from 'react-router-dom';
 
 import AstroHome from '../../components/astro/AstroHome';
-import DarienRoutesContainer from '../darien/DarienRoutesContainer';
+import DarienProgram from '../darien/DarienProgram';
 import GenericStatusPage from '../../components/common/GenericStatusPage';
 
 import {
@@ -61,7 +61,7 @@ export class ProgramHomeContainer extends React.Component {
       <Switch>
         <Route path="/astro-101-with-galaxy-zoo/educators" component={AstroHome} />
         <Redirect from="/astro-101-with-galaxy-zoo" to="/astro-101-with-galaxy-zoo/educators/" />
-        <Route path="/wildcam-darien-lab" component={DarienRoutesContainer} />
+        <Route path="/wildcam-darien-lab" component={DarienProgram} />
       </Switch>
     );
   }

src/containers/darien/DarienProgram.jsx

@@ -0,0 +1,70 @@
+/*
+Darien Program
+--------------
+This container is the "main parent" that oversees/organises the rest of the
+components used by WildCam Darien Lab.
+
+Currently, it has two concerns:
+- Only allow non-logged-in users access to certain parts of the Lab.
+- Route Teachers and Students to their correct components.
+
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Switch, Route } from 'react-router-dom';
+import DarienHome from '../../components/darien/DarienHome';
+import DarienEducators from '../../components/darien/DarienEducators';
+import DarienMap from '../../components/darien/DarienMap';
+import Darien401 from '../../components/darien/Darien401';
+import Darien404 from '../../components/darien/Darien404';
+import GenericStatusPage from '../../components/common/GenericStatusPage';
+
+class DarienProgram extends React.Component {
+  render() {
+    if (!this.props.initialised) {  //User status unknown: wait.
+      return (<GenericStatusPage status="fetching" message="Loading" />);
+    } else {
+
+      if (this.props.user) {  //User logged in: give access to all locations.
+        return (
+          <Switch>
+            <Route exact path={`${this.props.match.url}/`} component={DarienHome} />
+            <Route path={`${this.props.match.url}/educators`} component={DarienEducators} />
+            <Route path={`${this.props.match.url}/map`} component={DarienMap} />
+            <Route path="*" component={Darien404} />
+          </Switch>
+        );
+      } else {  //User not logged in: give limited access.
+        return (
+          <Switch>
+            <Route exact path={`${this.props.match.url}/`} component={DarienHome} />
+            <Route path={`${this.props.match.url}/educators`} component={Darien401} />
+            <Route path={`${this.props.match.url}/map`} component={DarienMap} />
+            <Route path="*" component={Darien404} />
+          </Switch>
+        );
+      }
+    }
+  }
+}
+
+DarienProgram.propTypes = {
+  initialised: PropTypes.bool,
+  user: PropTypes.shape({ login: PropTypes.string }),
+};
+
+DarienProgram.defaultProps = {
+  initialised: false,
+  user: null,
+};
+
+function mapStateToProps(state) {
+  return {
+    initialised: state.auth.initialised,
+    user: state.auth.user,
+  };
+}
+
+export default connect(mapStateToProps)(DarienProgram);