#635 - Use claims for nickname and handle missing primary attributes gracefully

Author: callmekatootie

client/src/components/AddToGroupModal/index.jsx

@@ -12,6 +12,7 @@ import * as groupLib from "../../lib/groups";
 
 import style from "./style.module.scss";
 import Axios from "axios";
+import { getNickname } from "../../lib/common";
 
 export default function AddToGroupModal({ onCancel, updateUser, user }) {
   const apiClient = api();
@@ -42,7 +43,7 @@ export default function AddToGroupModal({ onCancel, updateUser, user }) {
     (async () => {
       const groups = await groupLib.getGroups(
         apiClient,
-        auth0User.nickname,
+        getNickname(auth0User),
         cancelTokenSource.token
       );
 

client/src/components/Header/index.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import PT from "prop-types";
 
 import { useSearch } from "../../lib/search";
+import { getNickname } from "../../lib/common";
 import { ReactComponent as SearchTabIcon } from "../../assets/images/search-tab-icon.svg";
 import { ReactComponent as GroupsTabIcon } from "../../assets/images/groups-tab-icon.svg";
 import { ReactComponent as UploadsTabIcon } from "../../assets/images/uploads-tab-icon.svg";
@@ -102,7 +103,7 @@ export default function Header({
           className={style.accountMenu}
           onMouseDown={() => setShowAccountDropdown(!showAccountDropdown)}
         >
-          {user.nickname}
+          {getNickname(user)}
           {organization ? <>&nbsp;({organization.name})</> : ""}
           {showAccountDropdown ? (
             <div className={`${iconStyles.chevronUpG} ${style.arrow}`}></div>

client/src/components/ProfileCard/index.js

@@ -28,6 +28,53 @@ function ProfileCard({
   const apiClient = api();
 
   if (formatData) {
+    let title;
+    let isAvailable;
+    let company;
+    let location;
+    let isMissingAPrimaryAttribute = false;
+    let missingPrimaryAttributes = [];
+
+    try {
+      title = cardHelper.getUserPrimaryAttributeDetails(
+        profile,
+        config.PRIMARY_ATTRIBUTES.title
+      );
+    } catch (error) {
+      missingPrimaryAttributes.push("Title");
+      isMissingAPrimaryAttribute = true;
+    }
+
+    try {
+      isAvailable = cardHelper.getUserPrimaryAttributeDetails(
+        profile,
+        config.PRIMARY_ATTRIBUTES.availability
+      );
+    } catch (error) {
+      missingPrimaryAttributes.push("Availability");
+      isMissingAPrimaryAttribute = true;
+    }
+
+    try {
+      company = cardHelper.getUserPrimaryAttributeDetails(
+        profile,
+        config.PRIMARY_ATTRIBUTES.company
+      );
+    } catch (error) {
+      missingPrimaryAttributes.push("Company");
+      isMissingAPrimaryAttribute = true;
+    }
+
+    try {
+      location = cardHelper.getUserPrimaryAttributeDetails(
+        profile,
+        config.PRIMARY_ATTRIBUTES.location
+      );
+    } catch (error) {
+      missingPrimaryAttributes.push("Location");
+      isMissingAPrimaryAttribute = true;
+    }
+
     // The profile data structure received from api is converted to a format
     // that is easy to use for rendering the UI as well as updating the fields
     tempUser = {
@@ -38,27 +85,17 @@ function ProfileCard({
       groups: cardHelper.getUserGroups(profile),
       skills: cardHelper.getUserSkills(profile),
       achievements: cardHelper.getUserAchievements(profile),
-      title: cardHelper.getUserPrimaryAttributeDetails(
-        profile,
-        config.PRIMARY_ATTRIBUTES.title
-      ),
-      isAvailable: cardHelper.getUserPrimaryAttributeDetails(
-        profile,
-        config.PRIMARY_ATTRIBUTES.availability
-      ),
-      company: cardHelper.getUserPrimaryAttributeDetails(
-        profile,
-        config.PRIMARY_ATTRIBUTES.company
-      ),
-      location: cardHelper.getUserPrimaryAttributeDetails(
-        profile,
-        config.PRIMARY_ATTRIBUTES.location
-      ),
+      title,
+      isAvailable,
+      company,
+      location,
       companyAttributes: cardHelper.getUserCompanyAttributeDetails(profile),
       avatarColor,
       // Indicates if the user has been deactivated. The user is still shown in this case, but with a
       // clear indicator about its deactivated status.
       isDeactivated: cardHelper.isUserDeactivated(profile),
+      isMissingAPrimaryAttribute,
+      missingPrimaryAttributes,
     };
   } else {
     // Data is already in the format seen above. No further processing needed
@@ -264,6 +301,23 @@ function ProfileCard({
     containerStyle += ` ${styles.stripped}`;
   }
 
+  if (user.isMissingAPrimaryAttribute) {
+    return (
+      <div className={containerStyle}>
+        <div className={styles.profileCardHeaderContainer}></div>
+        <div className={styles.profileCardMainContainer}></div>
+        <div className={styles.profileCardFooterContainer}></div>
+        <div className={styles.deactivatedCard}>
+          <span>
+            User with handle {user.handle} is missing values for the following
+            primary attribute(s):
+            <br /> {user.missingPrimaryAttributes.join(", ")}{" "}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className={containerStyle}>
       {showManageGroupsModal ? (

client/src/config.js

@@ -36,5 +36,6 @@ export default {
     domain: process.env.REACT_APP_AUTH0_DOMAIN,
     clientId: process.env.REACT_APP_AUTH0_CLIENTID,
     audience: process.env.REACT_APP_AUTH0_AUDIENCE,
+    handleClaims: process.env.REACT_APP_AUTH0_CLAIMS_HANDLE,
   },
 };

client/src/lib/common.js

@@ -0,0 +1,9 @@
+import config from "../config";
+
+/**
+ * Returns the nickname of the logged in user
+ * @param {Object} auth0User The auth0 user object
+ */
+export function getNickname(auth0User) {
+  return auth0User[config.AUTH0.handleClaims];
+}

client/src/pages/Search/Groups.jsx

@@ -11,6 +11,7 @@ import api from "../../services/api";
 import * as groupLib from "../../lib/groups";
 
 import style from "./style.module.scss";
+import { getNickname } from "../../lib/common";
 
 const colorIterator = makeColorIterator(avatarColors);
 
@@ -37,7 +38,7 @@ export default function SearchGroups() {
     (async () => {
       const groups = await groupLib.getGroups(
         apiClient,
-        auth0User.nickname,
+        getNickname(auth0User),
         cancelTokenSource.token
       );
 

client/src/pages/Search/index.jsx

@@ -18,10 +18,16 @@ import * as OrgService from "../../services/user-org";
 import api from "../../services/api";
 
 import Cookies from "js-cookie";
+import { getNickname } from "../../lib/common";
 
 export default function SearchPage() {
   const apiClient = api();
-  const { isLoading, isAuthenticated, user: auth0User, loginWithRedirect } = useAuth0();
+  const {
+    isLoading,
+    isAuthenticated,
+    user: auth0User,
+    loginWithRedirect,
+  } = useAuth0();
   const [tab, setTab] = React.useState(TABS.SEARCH);
   const [keyword, setKeyword] = React.useState(null);
   const [selectedOrg, setSelectedOrg] = React.useState(null);
@@ -37,7 +43,7 @@ export default function SearchPage() {
     (async () => {
       const organizations = await OrgService.getOrg(
         apiClient,
-        auth0User.nickname
+        getNickname(auth0User)
       );
 
       setLoadingOrgs(false);
@@ -64,8 +70,8 @@ export default function SearchPage() {
   }, [keyword]);
 
   const onSelectOrg = (org) => {
-    const cookie = Cookies.get('auth0.is.authenticated');
-    if (cookie && cookie === 'true') {
+    const cookie = Cookies.get("auth0.is.authenticated");
+    if (cookie && cookie === "true") {
       OrgService.setSingleOrg(org);
       setSelectedOrg(org);
       setShouldSelectOrg(false);