Add externalUrl to perspective config

src/client/components/main_layout/Main.js

@@ -9,6 +9,7 @@ import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
 import { Link } from 'react-router-dom';
+import { has } from 'lodash';
 import thumbImage from '../../img/thumb.png';
 
 const styles = theme => ({
@@ -23,9 +24,9 @@ const styles = theme => ({
   icon: {
     marginRight: theme.spacing(2),
   },
-  // heroUnit: {
-  //   backgroundColor: 'rgb(238, 238, 238)'
-  // },
+  link: {
+    textDecoration: 'none'
+  },
   heroContent: {
     maxWidth: 1100,
     paddingTop: theme.spacing(3),
@@ -70,26 +71,55 @@ let Main = props => {
       </div>
       <div className={classNames(classes.layout, classes.cardGrid)}>
         <Grid container spacing={5}>
-          {props.perspectives.map(perspective =>
-            <Grid key={perspective.id} item xs={12} sm={6} md={4}>
-              <Card className={classes.card}>
-                <CardActionArea component={Link} to={`/${perspective.id}/faceted-search`}>
-                  <CardMedia
-                    className={classes.media}
-                    image={thumbImage}
-                    title={perspective.label}
-                  />
-                  <CardContent className={classes.cardContent}>
-                    <Typography gutterBottom variant="h5" component="h2">
-                      {perspective.label}
-                    </Typography>
-                    <Typography component="p">
-                      {perspective.desc}
-                    </Typography>
-                  </CardContent>
-                </CardActionArea>
-              </Card>
-            </Grid>
+          {props.perspectives.map(perspective => {
+            return (
+              <Grid key={perspective.id} item xs={12} sm={6} md={4}>
+                <Card className={classes.card}>
+                  {has(perspective, 'externalUrl') &&
+                    <a className={classes.link}
+                      href={perspective.externalUrl}
+                      target='_blank'
+                      rel='noopener noreferrer'
+                    >
+                      <CardActionArea>
+                        <CardMedia
+                          className={classes.media}
+                          image={thumbImage}
+                          title={perspective.label}
+                        />
+                        <CardContent className={classes.cardContent}>
+                          <Typography gutterBottom variant="h5" component="h2">
+                            {perspective.label}
+                          </Typography>
+                          <Typography component="p">
+                            {perspective.desc}
+                          </Typography>
+                        </CardContent>
+                      </CardActionArea>
+                    </a>
+                  }
+                  {!has(perspective, 'externalUrl') &&
+                    <CardActionArea component={Link} to={`/${perspective.id}/faceted-search`}>
+                      <CardMedia
+                        className={classes.media}
+                        image={thumbImage}
+                        title={perspective.label}
+                      />
+                      <CardContent className={classes.cardContent}>
+                        <Typography gutterBottom variant="h5" component="h2">
+                          {perspective.label}
+                        </Typography>
+                        <Typography component="p">
+                          {perspective.desc}
+                        </Typography>
+                      </CardContent>
+                    </CardActionArea>
+                  }
+                </Card>
+              </Grid>
+            );
+          }
+
           )}
         </Grid>
       </div>