From 37d6c3bd7bc8569c6efb1823deff77201fd8ad3d Mon Sep 17 00:00:00 2001 From: Sergio Garcia Date: Mon, 8 Feb 2021 02:41:08 -0600 Subject: [PATCH 1/5] Changes default avatar to initials --- .../src/layouts/DashboardLayout/TopBar.js | 31 ++++++++++++++----- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/moped-editor/src/layouts/DashboardLayout/TopBar.js b/moped-editor/src/layouts/DashboardLayout/TopBar.js index cf68b53aa0..e081067ba4 100644 --- a/moped-editor/src/layouts/DashboardLayout/TopBar.js +++ b/moped-editor/src/layouts/DashboardLayout/TopBar.js @@ -15,18 +15,29 @@ import MenuIcon from "@material-ui/icons/Menu"; import { LogOut as LogOutIcon } from "react-feather"; import Logo from "src/components/Logo"; import { useUser } from "../../auth/user"; -import { defaultUser } from "../../views/account/AccountView/Profile"; const useStyles = makeStyles(() => ({ root: {}, avatar: { marginRight: 8, + backgroundColor: "#e53935", }, })); const TopBar = ({ className, onMobileNavOpen, ...rest }) => { const classes = useStyles(); - const { logout } = useUser(); + const { user, logout } = useUser(); + + const emailToInitials = email => { + try { + const subdomain = "austintexas.gov"; + if(!email.endsWith(subdomain)) return null; + const [first, last] = email.replace("azure_ad", "").replace(subdomain, "").split(".") + return first.charAt(0) + last.charAt(0); + } catch { + return null; + } + } return ( @@ -36,12 +47,16 @@ const TopBar = ({ className, onMobileNavOpen, ...rest }) => { - +
+ + {emailToInitials(user.attributes.email)} + +
From d415668916130e36421155348e99be9cfd34ca9b Mon Sep 17 00:00:00 2001 From: Sergio Garcia Date: Mon, 8 Feb 2021 02:54:29 -0600 Subject: [PATCH 2/5] Random color --- moped-editor/src/auth/user.js | 14 ++++++++++++++ moped-editor/src/layouts/DashboardLayout/TopBar.js | 11 +++++++---- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/moped-editor/src/auth/user.js b/moped-editor/src/auth/user.js index 1c9939df02..4d58b43195 100644 --- a/moped-editor/src/auth/user.js +++ b/moped-editor/src/auth/user.js @@ -95,11 +95,25 @@ export const UserProvider = ({ children }) => { return {children}; }; +export const getRandomColor = () => { + const key = "atd_moped_user_color"; + if (localStorage.getItem(key) === null) { + const randomInt = Math.floor(Math.random() * Math.floor(3)); + const colors = ["#43a047", "#3949ab", "#fb8c00", "#e53935"]; + localStorage.setItem(key, colors[randomInt]); + } + + return localStorage.getItem(key); +}; + // We also create a simple custom hook to read these values from. We want our React components // to know as little as possible on how everything is handled, so we are not only abtracting them from // the fact that we are using React's context, but we also skip some imports. export const useUser = () => { const context = React.useContext(UserContext); + if (context && context.user) { + context.user.userColor = getRandomColor(); + } if (context === undefined) { throw new Error( diff --git a/moped-editor/src/layouts/DashboardLayout/TopBar.js b/moped-editor/src/layouts/DashboardLayout/TopBar.js index e081067ba4..ef83ecde85 100644 --- a/moped-editor/src/layouts/DashboardLayout/TopBar.js +++ b/moped-editor/src/layouts/DashboardLayout/TopBar.js @@ -20,7 +20,6 @@ const useStyles = makeStyles(() => ({ root: {}, avatar: { marginRight: 8, - backgroundColor: "#e53935", }, })); @@ -31,13 +30,16 @@ const TopBar = ({ className, onMobileNavOpen, ...rest }) => { const emailToInitials = email => { try { const subdomain = "austintexas.gov"; - if(!email.endsWith(subdomain)) return null; - const [first, last] = email.replace("azure_ad", "").replace(subdomain, "").split(".") + if (!email.endsWith(subdomain)) return null; + const [first, last] = email + .replace("azure_ad", "") + .replace(subdomain, "") + .split("."); return first.charAt(0) + last.charAt(0); } catch { return null; } - } + }; return ( @@ -53,6 +55,7 @@ const TopBar = ({ className, onMobileNavOpen, ...rest }) => { component={RouterLink} src={null} to="/moped/account" + style={{ "background-color": user ? user.userColor : null }} > {emailToInitials(user.attributes.email)} From f67494f645ce085e9240da74e4f997826b0624dd Mon Sep 17 00:00:00 2001 From: Sergio Garcia Date: Wed, 10 Feb 2021 10:41:37 -0600 Subject: [PATCH 3/5] Makes use of theme colors --- moped-editor/src/auth/user.js | 36 ++++++++++++++++++++++++++++++----- 1 file changed, 31 insertions(+), 5 deletions(-) diff --git a/moped-editor/src/auth/user.js b/moped-editor/src/auth/user.js index 4d58b43195..36c9567eee 100644 --- a/moped-editor/src/auth/user.js +++ b/moped-editor/src/auth/user.js @@ -1,6 +1,8 @@ import React from "react"; import Amplify, { Auth } from "aws-amplify"; +import { colors } from "@material-ui/core"; + // Create a context that will hold the values that we are going to expose to our components. // Don't worry about the `null` value. It's gonna be *instantly* overriden by the component below export const UserContext = React.createContext(null); @@ -80,6 +82,9 @@ export const UserProvider = ({ children }) => { return data; }); + // Remove the current color + destroyProfileColor(); + // Make sure to not force a re-render on the components that are reading these values, // unless the `user` value has changed. This is an optimisation that is mostly needed in cases // where the parent of the current component re-renders and thus the current component is forced @@ -95,15 +100,36 @@ export const UserProvider = ({ children }) => { return {children}; }; +/** + * This is a constant string key that holds the profile color for a user. + * @type {string} + * @variable + */ +export const atdColorKeyName = "atd_moped_user_color"; + +/** + * Returns a random themes standard color as hexadecimal + * @return {string} + */ export const getRandomColor = () => { - const key = "atd_moped_user_color"; - if (localStorage.getItem(key) === null) { + if (localStorage.getItem(atdColorKeyName) === null) { const randomInt = Math.floor(Math.random() * Math.floor(3)); - const colors = ["#43a047", "#3949ab", "#fb8c00", "#e53935"]; - localStorage.setItem(key, colors[randomInt]); + const colorList = [ + colors.green[900], + colors.indigo[600], + colors.orange[600], + colors.red[600], + ]; + localStorage.setItem(atdColorKeyName, colorList[randomInt]); } + return localStorage.getItem(atdColorKeyName); +}; - return localStorage.getItem(key); +/** + * Removes the current user profile color + */ +export const destroyProfileColor = () => { + localStorage.removeItem(atdColorKeyName); }; // We also create a simple custom hook to read these values from. We want our React components From 27129b0a323a8a58b77d023b7ef321621a66b9b1 Mon Sep 17 00:00:00 2001 From: Sergio Garcia Date: Wed, 10 Feb 2021 10:41:51 -0600 Subject: [PATCH 4/5] Uppercase initials --- moped-editor/src/layouts/DashboardLayout/TopBar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/moped-editor/src/layouts/DashboardLayout/TopBar.js b/moped-editor/src/layouts/DashboardLayout/TopBar.js index ef83ecde85..01972a91c2 100644 --- a/moped-editor/src/layouts/DashboardLayout/TopBar.js +++ b/moped-editor/src/layouts/DashboardLayout/TopBar.js @@ -35,7 +35,7 @@ const TopBar = ({ className, onMobileNavOpen, ...rest }) => { .replace("azure_ad", "") .replace(subdomain, "") .split("."); - return first.charAt(0) + last.charAt(0); + return String(first.charAt(0) + last.charAt(0)).toUpperCase(); } catch { return null; } From 9c0d1a08b9eff40065526aef99a066ebd251e6b7 Mon Sep 17 00:00:00 2001 From: Sergio Garcia Date: Wed, 10 Feb 2021 10:42:21 -0600 Subject: [PATCH 5/5] Removes picture with a generic avatar --- .../src/views/account/AccountView/Profile.js | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/moped-editor/src/views/account/AccountView/Profile.js b/moped-editor/src/views/account/AccountView/Profile.js index 5760b5dd49..6710e9762b 100644 --- a/moped-editor/src/views/account/AccountView/Profile.js +++ b/moped-editor/src/views/account/AccountView/Profile.js @@ -12,13 +12,7 @@ import { Typography, makeStyles, } from "@material-ui/core"; - -export const defaultUser = { - avatar: `${process.env.PUBLIC_URL}/static/images/avatars/robSpillar.jpeg`, - name: "Rob Spillar", - jobTitle: "Director of Transportation", - city: "Austin, TX", -}; +import { useUser } from "../../../auth/user"; const useStyles = makeStyles(() => ({ root: {}, @@ -31,22 +25,27 @@ const useStyles = makeStyles(() => ({ const Profile = ({ className, ...rest }) => { const classes = useStyles(); + const { user } = useUser(); return ( - + - {defaultUser.name} + {String(user?.userName ?? user?.attributes?.email).toLowerCase()} - {defaultUser.jobTitle} + {user?.userJobTitle ?? "Austin Transportation"} - {defaultUser.city} + {user?.userCity ?? "Austin, TX"}