User badge fallback image

src/components/Avatar/index.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
 
 import { Image, ImageProps } from 'rebass'
-import Icon from 'src/components/Icons'
 import { inject, observer } from 'mobx-react'
 import { UserStore, getUserAvatar } from 'src/stores/User/user.store'
+import { ProfileTypeLabel, IProfileType } from 'src/models/user_pp.models'
+import Workspace from 'src/pages/User/workspace/Workspace'
 
 interface IProps extends ImageProps {
   width?: string
   userName: string
+  profileType?: ProfileTypeLabel
 }
 
 interface IInjected extends IProps {
@@ -16,6 +18,7 @@ interface IInjected extends IProps {
 
 interface IState {
   avatarUrl?: string
+  fallbackBadge?: string
   showFallback?: boolean
 }
 
@@ -34,6 +37,12 @@ export class Avatar extends React.Component<IProps, IState> {
   // user updates their avatar (same url so by default will now be aware of change)
   componentDidMount() {
     this.getAvatar(this.props.userName)
+    this.getFallbackImage(this.props.profileType)
+  }
+
+  public getFallbackImage(type?: ProfileTypeLabel) {
+    const img = Workspace.findWorkspaceBadge(type, true)
+    this.setState({ fallbackBadge: img })
   }
 
   async getAvatar(userName: string) {
@@ -44,22 +53,22 @@ export class Avatar extends React.Component<IProps, IState> {
 
   render() {
     const { width } = this.props
-    const { showFallback, avatarUrl } = this.state
+    const { avatarUrl, fallbackBadge } = this.state
+
+    const addFallbackSrc = (ev: any) => {
+      ev.target.src = fallbackBadge
+    }
+
     return (
       <>
-        {showFallback && <Icon glyph={'account-circle'} size={50} />}
-        {!showFallback && avatarUrl && (
-          <Image
-            className="avatar"
-            width={width ? width : 40}
-            sx={{ borderRadius: '25px' }}
-            src={avatarUrl}
-            onError={() => {
-              // if user image doesn't exist show fallback image instead
-              this.setState({ showFallback: true })
-            }}
-          />
-        )}
+        <Image
+          className="avatar"
+          width={width ? width : 40}
+          height={width ? width : 40}
+          sx={{ borderRadius: '25px' }}
+          src={avatarUrl}
+          onError={addFallbackSrc}
+        />
       </>
     )
   }

src/mocks/user_pp.mock.tsx

@@ -21,6 +21,11 @@ import MemberBadge from 'src/assets/images/badges/pt-member.svg'
 import MachineBadge from 'src/assets/images/badges/pt-machine-shop.svg'
 import WorkspaceBadge from 'src/assets/images/badges/pt-workspace.svg'
 import LocalComBadge from 'src/assets/images/badges/pt-local-community.svg'
+import LogoWorkspace from 'src/assets/icons/map-workspace.svg'
+import LogoCollection from 'src/assets/icons/map-collection.svg'
+import LogoMember from 'src/assets/icons/map-member.svg'
+import LogoMachine from 'src/assets/icons/map-machine.svg'
+import LogoCommunity from 'src/assets/icons/map-community.svg'
 
 // assets workspaceType
 import Extrusion from 'src/assets/images/workspace-focus/extrusion.jpg'
@@ -342,26 +347,31 @@ export const PROFILE_TYPES: IProfileType[] = [
     label: 'workspace',
     textLabel: 'I run a workspace',
     imageSrc: WorkspaceBadge,
+    cleanImageSrc: LogoWorkspace,
   },
   {
     label: 'member',
     textLabel: 'I am a member',
     imageSrc: MemberBadge,
+    cleanImageSrc: LogoMember,
   },
   {
     label: 'machine-builder',
     textLabel: 'I build machines',
     imageSrc: MachineBadge,
+    cleanImageSrc: LogoMachine,
   },
   {
     label: 'community-builder',
     textLabel: 'I run a local community',
     imageSrc: LocalComBadge,
+    cleanImageSrc: LogoCommunity,
   },
   {
     label: 'collection-point',
     textLabel: 'I collect & sort plastic',
     imageSrc: CollectionBadge,
+    cleanImageSrc: LogoCollection,
   },
 ]
 

src/models/user_pp.models.tsx

@@ -42,6 +42,7 @@ export interface IPlasticType {
 export interface IProfileType {
   label: ProfileTypeLabel
   imageSrc?: string
+  cleanImageSrc?: string
   textLabel?: string
 }
 export interface IWorkspaceType {

src/pages/Maps/Content/View/Popup.tsx

@@ -5,7 +5,6 @@ import Text from 'src/components/Text'
 import { Popup as LeafletPopup, Map } from 'react-leaflet'
 import styled from 'styled-components'
 import { distanceInWords } from 'date-fns'
-import { MAP_ICONS } from 'src/stores/Maps/maps.groupings'
 
 import {
   IMapPin,
@@ -18,6 +17,7 @@ import { Link } from 'src/components/Links'
 import { inject } from 'mobx-react'
 import { MapsStore } from 'src/stores/Maps/maps.store'
 import { MAP_GROUPINGS } from 'src/stores/Maps/maps.groupings'
+import Workspace from 'src/pages/User/workspace/Workspace'
 
 interface IProps {
   activePin: IMapPin | IMapPinWithDetail
@@ -82,7 +82,7 @@ export class Popup extends React.Component<IProps> {
     console.log('detail', pin.detail)
 
     function addFallbackSrc(ev: any) {
-      const icon = MAP_ICONS[pin.type]
+      const icon = Workspace.findWorkspaceBadge(pin.type, true)
       ev.target.src = icon
     }
 

src/pages/Maps/Content/View/Sprites.tsx

@@ -2,7 +2,7 @@ import L, { MarkerCluster } from 'leaflet'
 import './sprites.css'
 import { IMapPin } from 'src/models/maps.models'
 import clusterIcon from 'src/assets/icons/map-cluster.svg'
-import { MAP_ICONS } from 'src/stores/Maps/maps.groupings'
+import Workspace from 'src/pages/User/workspace/Workspace'
 
 /**
  * Generate custom cluster icon, including style formatting, size, image etc.
@@ -30,7 +30,7 @@ export const createClusterIcon = (opts?: any) => {
 }
 
 export const createMarkerIcon = (pin: IMapPin) => {
-  const icon = MAP_ICONS[pin.type]
+  const icon = Workspace.findWorkspaceBadge(pin.type, true)
   if (!pin.type) {
     console.log('NO TYPE', pin)
   }

src/pages/User/content/UserPage/UserPage.tsx

@@ -8,7 +8,7 @@ import {
   IOpeningHours,
   PlasticTypeLabel,
 } from 'src/models/user_pp.models'
-import { PROFILE_TYPES } from 'src/mocks/user_pp.mock'
+
 import { UserStore } from 'src/stores/User/user.store'
 import Heading from 'src/components/Heading'
 import { Box, Link, Image } from 'rebass'
@@ -18,21 +18,12 @@ import Icon from 'src/components/Icons'
 import Flex from 'src/components/Flex'
 import ElWithBeforeIcon from 'src/components/ElWithBeforeIcon'
 import { zIndex } from 'src/themes/styled.theme'
+import Workspace from 'src/pages/User/workspace/Workspace'
 
 import theme from 'src/themes/styled.theme'
 import { capitalizeFirstLetter } from 'src/utils/helpers'
 import FlagIconEvents from 'src/components/Icons/FlagIcon/FlagIcon'
 
-// Highlights
-import CollectionHighlight from 'src/assets/images/highlights/highlight-collection-point.svg'
-import LocalCommunityHighlight from 'src/assets/images/highlights/highlight-local-community.svg'
-import MachineHighlight from 'src/assets/images/highlights/highlight-machine-shop.svg'
-import WorkspaceHighlight from 'src/assets/images/highlights/highlight-workspace.svg'
-import MemberHighlight from 'src/assets/images/highlights/highlight-member.svg'
-
-// assets profileType
-import MemberBadge from 'src/assets/images/badges/pt-member.svg'
-
 // Plastic types
 import HDPEIcon from 'src/assets/images/plastic-types/hdpe.svg'
 import LDPEIcon from 'src/assets/images/plastic-types/ldpe.svg'
@@ -378,39 +369,6 @@ export class UserPage extends React.Component<
     )
   }
 
-  public findWordspaceHighlight(workspaceType?: string): string {
-    switch (workspaceType) {
-      case 'workspace':
-        return WorkspaceHighlight
-      case 'member':
-        return MemberHighlight
-      case 'machine-builder':
-        return MachineHighlight
-      case 'community-builder':
-        return LocalCommunityHighlight
-      case 'collection-point':
-        return CollectionHighlight
-      default:
-        return MemberHighlight
-    }
-  }
-
-  public findWorkspaceBadge(workspaceType?: string): string {
-    if (!workspaceType) {
-      return MemberBadge
-    }
-
-    const foundProfileTypeObj = PROFILE_TYPES.find(
-      type => type.label === workspaceType,
-    )
-
-    if (foundProfileTypeObj && foundProfileTypeObj.imageSrc) {
-      return foundProfileTypeObj.imageSrc
-    }
-
-    return MemberBadge
-  }
-
   public renderPlasticTypes(plasticTypes: Array<PlasticTypeLabel>) {
     function renderIcon(type: string) {
       switch (type) {
@@ -510,8 +468,10 @@ export class UserPage extends React.Component<
       ),
     }
 
-    const workspaceBadgeSrc = this.findWorkspaceBadge(user.profileType)
-    const workspaceHighlightSrc = this.findWordspaceHighlight(user.profileType)
+    const workspaceBadgeSrc = Workspace.findWorkspaceBadge(user.profileType)
+    const workspaceHighlightSrc = Workspace.findWordspaceHighlight(
+      user.profileType,
+    )
 
     let coverImage = [
       <SliderImage

src/pages/User/workspace/Workspace.tsx

@@ -0,0 +1,57 @@
+import { PROFILE_TYPES } from 'src/mocks/user_pp.mock'
+
+// Highlights
+import CollectionHighlight from 'src/assets/images/highlights/highlight-collection-point.svg'
+import LocalCommunityHighlight from 'src/assets/images/highlights/highlight-local-community.svg'
+import MachineHighlight from 'src/assets/images/highlights/highlight-machine-shop.svg'
+import WorkspaceHighlight from 'src/assets/images/highlights/highlight-workspace.svg'
+import MemberHighlight from 'src/assets/images/highlights/highlight-member.svg'
+
+// assets profileType
+import MemberBadge from 'src/assets/images/badges/pt-member.svg'
+
+function findWordspaceHighlight(workspaceType?: string): string {
+  switch (workspaceType) {
+    case 'workspace':
+      return WorkspaceHighlight
+    case 'member':
+      return MemberHighlight
+    case 'machine-builder':
+      return MachineHighlight
+    case 'community-builder':
+      return LocalCommunityHighlight
+    case 'collection-point':
+      return CollectionHighlight
+    default:
+      return MemberHighlight
+  }
+}
+
+function findWorkspaceBadge(
+  workspaceType?: string,
+  ifCleanImage?: boolean,
+): string {
+  if (!workspaceType) {
+    return MemberBadge
+  }
+
+  const foundProfileTypeObj = PROFILE_TYPES.find(
+    type => type.label === workspaceType,
+  )
+
+  if (foundProfileTypeObj) {
+    if (ifCleanImage && foundProfileTypeObj.cleanImageSrc) {
+      return foundProfileTypeObj.cleanImageSrc
+    }
+    if (foundProfileTypeObj.imageSrc) {
+      return foundProfileTypeObj.imageSrc
+    }
+  }
+
+  return MemberBadge
+}
+
+export default {
+  findWordspaceHighlight,
+  findWorkspaceBadge,
+}

src/pages/common/Header/Menu/Profile/Profile.tsx

@@ -6,13 +6,10 @@ import { inject, observer } from 'mobx-react'
 import Flex from 'src/components/Flex'
 import { Avatar } from 'src/components/Avatar'
 import { ProfileModal } from 'src/components/ProfileModal/ProfileModal'
-import styled from 'styled-components'
 import theme from 'src/themes/styled.theme'
-import { Box } from 'rebass'
 import MenuMobileLink from 'src/pages/common/Header/Menu/MenuMobile/MenuMobileLink'
 import ProfileButtons from './ProfileButtons'
 import { MenuMobileLinkContainer } from '../MenuMobile/MenuMobilePanel'
-import { PanelItem } from '../MenuMobile/MenuMobilePanel'
 import { COMMUNITY_PAGES_PROFILE } from 'src/pages/PageList'
 
 interface IState {
@@ -73,7 +70,10 @@ export default class Profile extends React.Component<IProps, IState> {
           ) : (
             <div data-cy="user-menu">
               <Flex onClick={() => this.toggleProfileModal()} ml={1}>
-                <Avatar userName={user.userName} />
+                <Avatar
+                  userName={user.userName}
+                  profileType={user.profileType}
+                />
               </Flex>
               <Flex>
                 {showProfileModal && (

src/stores/Maps/maps.groupings.ts

@@ -1,17 +1,5 @@
-import { IMapGrouping, IMapPinType } from 'src/models/maps.models'
-import LogoWorkspace from 'src/assets/icons/map-workspace.svg'
-import LogoCollection from 'src/assets/icons/map-collection.svg'
-import LogoMember from 'src/assets/icons/map-member.svg'
-import LogoMachine from 'src/assets/icons/map-machine.svg'
-import LogoCommunity from 'src/assets/icons/map-community.svg'
-
-export const MAP_ICONS: { [key in IMapPinType]: string } = {
-  'collection-point': LogoCollection,
-  'community-builder': LogoCommunity,
-  'machine-builder': LogoMachine,
-  member: LogoMember,
-  workspace: LogoWorkspace,
-}
+import { IMapGrouping } from 'src/models/maps.models'
+import Workspace from 'src/pages/User/workspace/Workspace'
 
 // grouping used (icons will be generated from type in method below)
 const GROUPINGS: IMapGrouping[] = [
@@ -81,5 +69,5 @@ const GROUPINGS: IMapGrouping[] = [
 // merge groupings with icons above for export
 export const MAP_GROUPINGS = GROUPINGS.map(g => ({
   ...g,
-  icon: MAP_ICONS[g.type],
+  icon: Workspace.findWorkspaceBadge(g.type, true),
 }))