diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx index fe8c9a2af7..d7d969b46d 100644 --- a/src/components/Avatar/index.tsx +++ b/src/components/Avatar/index.tsx @@ -1,22 +1,18 @@ 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 } from 'src/models/user_pp.models' +import Workspace from 'src/pages/User/workspace/Workspace' interface IProps extends ImageProps { width?: string userName: string -} - -interface IInjected extends IProps { - userStore: UserStore + profileType?: ProfileTypeLabel } interface IState { - avatarUrl?: string - showFallback?: boolean + badgeProfileType?: string } @inject('userStore') @@ -26,40 +22,30 @@ export class Avatar extends React.Component { super(props) this.state = {} } - get injected() { - return this.props as IInjected - } // subscribe/unsubscribe from specific user profile message when // user updates their avatar (same url so by default will now be aware of change) componentDidMount() { - this.getAvatar(this.props.userName) + this.getProfileTypeBadge(this.props.profileType) } - async getAvatar(userName: string) { - const url = getUserAvatar(userName) - console.log('avatar', url) - this.setState({ avatarUrl: url }) + public getProfileTypeBadge(type?: ProfileTypeLabel) { + const img = Workspace.findWorkspaceBadge(type, true) + this.setState({ badgeProfileType: img }) } - render() { const { width } = this.props - const { showFallback, avatarUrl } = this.state + const { badgeProfileType } = this.state + return ( <> - {showFallback && } - {!showFallback && avatarUrl && ( - { - // if user image doesn't exist show fallback image instead - this.setState({ showFallback: true }) - }} - /> - )} + ) } diff --git a/src/mocks/user_pp.mock.tsx b/src/mocks/user_pp.mock.tsx index a199c06c3a..5a47517866 100644 --- a/src/mocks/user_pp.mock.tsx +++ b/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, }, ] diff --git a/src/models/user_pp.models.tsx b/src/models/user_pp.models.tsx index b4dcecf0e2..f56389504e 100644 --- a/src/models/user_pp.models.tsx +++ b/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 { diff --git a/src/pages/Maps/Content/View/Popup.tsx b/src/pages/Maps/Content/View/Popup.tsx index 4b67340c59..fd63c270ee 100644 --- a/src/pages/Maps/Content/View/Popup.tsx +++ b/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 { 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 } diff --git a/src/pages/Maps/Content/View/Sprites.tsx b/src/pages/Maps/Content/View/Sprites.tsx index 95539fda78..032ae45edb 100644 --- a/src/pages/Maps/Content/View/Sprites.tsx +++ b/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) } diff --git a/src/pages/User/content/UserPage/UserPage.tsx b/src/pages/User/content/UserPage/UserPage.tsx index 17530bd1be..609bf7bcce 100644 --- a/src/pages/User/content/UserPage/UserPage.tsx +++ b/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) { 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 = [ type.label === workspaceType, + ) + + if (foundProfileTypeObj) { + if (ifCleanImage && foundProfileTypeObj.cleanImageSrc) { + return foundProfileTypeObj.cleanImageSrc + } + if (foundProfileTypeObj.imageSrc) { + return foundProfileTypeObj.imageSrc + } + } + + return MemberBadge +} + +export default { + findWordspaceHighlight, + findWorkspaceBadge, +} diff --git a/src/pages/common/Header/Menu/Profile/Profile.tsx b/src/pages/common/Header/Menu/Profile/Profile.tsx index 8989e0f8b6..43f08a385c 100644 --- a/src/pages/common/Header/Menu/Profile/Profile.tsx +++ b/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 { ) : (
this.toggleProfileModal()} ml={1}> - + {showProfileModal && ( diff --git a/src/stores/Maps/maps.groupings.ts b/src/stores/Maps/maps.groupings.ts index bbf0ef940f..21ef0c9d0e 100644 --- a/src/stores/Maps/maps.groupings.ts +++ b/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), }))