Fix visibleGroups is undefined error

authn.js

@@ -76,14 +76,7 @@ function setup(app) {
         const groups = response.Groups.map((g) => g.GroupName);
 
         // All users are ok, as we control the entire user pool.
-        const user = {...profile, groups};
-
-        user.visibleGroups = Array.from(sources.values())
-          .filter(source => source.visibleToUser(user))
-          .map(source => source._name)
-          .filter(source => groups.includes(source));
-
-        return done(null, user);
+        return done(null, {...profile, groups});
       }
     )
   );
@@ -216,16 +209,37 @@ function setup(app) {
     });
   });
 
+  /**
+   * Returns an array of names of Nextstrain groups that are visible to a
+   * given *user*.
+   *
+   * FIX: Contains a hard-coded assumption that all Nextstrain groups match
+   * their corresponding group name exactly.
+   * See <https://github.com/nextstrain/nextstrain.org/issues/76> for more
+   * context and to track this issue.
+   *
+   * @param {Object} user
+   * @returns {Array}
+   */
+  const visibleGroups = (user) => Array.from(sources.values())
+    .filter(source => source.visibleToUser(user))
+    .map(source => source._name)
+    .filter(source => user.groups.includes(source));
+
   // Provide the client-side app with info about the current user
   app.route("/whoami").get((req, res) => {
-    res.format({
+
+    return res.format({
       html: () => res.redirect(
         req.user
           ? `/users/${req.user.username}`
           : "/users"),
 
       // Express's JSON serialization drops keys with undefined values
-      json: () => res.json({ user: req.user || null })
+      json: () => res.json({
+        user: req.user || null,
+        visibleGroups: (req.user && req.user.groups) ? visibleGroups(req.user) : []
+      })
     });
   });
 

static-site/src/components/splash/index.jsx

@@ -51,8 +51,7 @@ class Splash extends React.Component {
         </FlexCenter>
 
         <HugeSpacer/>
-
-        {this.props.user && <UserGroups user={this.props.user}/>}
+        {this.props.user && <UserGroups user={this.props.user} visibleGroups={this.props.visibleGroups} />}
 
         <ScrollableAnchor id={'pathogens'}>
           <Styles.H1>Explore pathogens</Styles.H1>

static-site/src/components/splash/userGroups.jsx

@@ -6,10 +6,9 @@ import { HugeSpacer, FlexCenter } from "../../layouts/generalComponents";
 import { theme } from "../../layouts/theme";
 
 const UserGroups = (props) => {
-
   const colors = [...theme.titleColors];
 
-  const groupCards = props.user.visibleGroups.map((group) => {
+  const groupCards = props.visibleGroups.map((group) => {
     const groupColor = colors[0];
     colors.push(colors.shift());
 

static-site/src/layouts/userDataWrapper.jsx

@@ -2,7 +2,8 @@ import React from "react";
 
 export default class UserDataWrapper extends React.Component {
   state = {
-    user: undefined
+    user: undefined,
+    visibleGroups: undefined,
   }
 
   componentDidMount() {
@@ -21,7 +22,8 @@ export default class UserDataWrapper extends React.Component {
     const childElements = React.Children.map(children, child =>
       // Passes the user state as a prop to all children elements via the prop `user`
       child && React.cloneElement(child, {
-        user: this.state.user
+        user: this.state.user,
+        visibleGroups: this.state.visibleGroups,
       })
     );
     return <div>{ childElements }</div>;

static-site/src/pages/users.jsx

@@ -5,7 +5,7 @@ import NavBar from '../components/nav-bar';
 import { Logos } from "../components/logos";
 
 const UserPage = (props) => {
-  const { user } = props;
+  const { user, visibleGroups } = props;
 
   const LoggedIn = () => (
     <Fragment>
@@ -16,7 +16,7 @@ const UserPage = (props) => {
       </SubText>
 
       <UserGroupsList>
-        {user.visibleGroups.map((group) => (
+        {visibleGroups.map((group) => (
           <li>
             <a href={`/groups/${group}`}>{group}</a>
           </li>