From 1ccd0ccaf100d712ea03188e98c3ab5337ce584c Mon Sep 17 00:00:00 2001 From: lauvrenn Date: Sat, 16 Nov 2019 23:46:26 +0100 Subject: [PATCH 1/5] Moved workspace functions + map_icons --- src/components/Avatar/index.tsx | 31 +++++----- src/mocks/user_pp.mock.tsx | 10 ++++ src/models/user_pp.models.tsx | 1 + src/pages/Maps/Content/View/Popup.tsx | 4 +- src/pages/Maps/Content/View/Sprites.tsx | 4 +- src/pages/User/content/UserPage/UserPage.tsx | 52 ++--------------- src/pages/User/workspace/Workspace.tsx | 57 +++++++++++++++++++ .../common/Header/Menu/Profile/Profile.tsx | 5 +- src/stores/Maps/maps.groupings.ts | 18 +----- 9 files changed, 103 insertions(+), 79 deletions(-) create mode 100644 src/pages/User/workspace/Workspace.tsx diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx index fe8c9a2af7..543505f647 100644 --- a/src/components/Avatar/index.tsx +++ b/src/components/Avatar/index.tsx @@ -4,10 +4,13 @@ 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 { UserPage } from 'src/pages/User/content/UserPage/UserPage' interface IProps extends ImageProps { width?: string userName: string + // profileType: ProfileTypeLabel } interface IInjected extends IProps { @@ -16,6 +19,7 @@ interface IInjected extends IProps { interface IState { avatarUrl?: string + fallbackBadge?: IProfileType showFallback?: boolean } @@ -36,6 +40,10 @@ export class Avatar extends React.Component { this.getAvatar(this.props.userName) } + // async getFallbackBadge() { + // findWorkspaceBadge + // } + async getAvatar(userName: string) { const url = getUserAvatar(userName) console.log('avatar', url) @@ -47,19 +55,16 @@ export class Avatar extends React.Component { const { showFallback, avatarUrl } = this.state return ( <> - {showFallback && } - {!showFallback && avatarUrl && ( - { - // if user image doesn't exist show fallback image instead - this.setState({ showFallback: true }) - }} - /> - )} + {/* {showFallback && } */} + {/* {!showFallback && avatarUrl && ( */} + + {/* )} */} ) } 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..0e0252b0bb 100644 --- a/src/pages/common/Header/Menu/Profile/Profile.tsx +++ b/src/pages/common/Header/Menu/Profile/Profile.tsx @@ -73,7 +73,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), })) From d24a7ff0b1019d287f6859bb409c497fee3dd10f Mon Sep 17 00:00:00 2001 From: lauvrenn Date: Sun, 17 Nov 2019 01:34:34 +0100 Subject: [PATCH 2/5] Added user fallback icon --- src/components/Avatar/index.tsx | 28 +++++++++++-------- .../common/Header/Menu/Profile/Profile.tsx | 5 +--- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx index 543505f647..a938ce3d6a 100644 --- a/src/components/Avatar/index.tsx +++ b/src/components/Avatar/index.tsx @@ -1,16 +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 { UserPage } from 'src/pages/User/content/UserPage/UserPage' +import Workspace from 'src/pages/User/workspace/Workspace' interface IProps extends ImageProps { width?: string userName: string - // profileType: ProfileTypeLabel + profileType?: ProfileTypeLabel } interface IInjected extends IProps { @@ -19,7 +18,7 @@ interface IInjected extends IProps { interface IState { avatarUrl?: string - fallbackBadge?: IProfileType + fallbackBadge?: string showFallback?: boolean } @@ -38,11 +37,13 @@ export class Avatar extends React.Component { // 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) } - // async getFallbackBadge() { - // findWorkspaceBadge - // } + async getFallbackImage(type?: ProfileTypeLabel) { + const img = Workspace.findWorkspaceBadge(type, true) + this.setState({ fallbackBadge: img }) + } async getAvatar(userName: string) { const url = getUserAvatar(userName) @@ -52,19 +53,22 @@ export class Avatar extends React.Component { 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 && } */} - {/* {!showFallback && avatarUrl && ( */} - {/* )} */} ) } diff --git a/src/pages/common/Header/Menu/Profile/Profile.tsx b/src/pages/common/Header/Menu/Profile/Profile.tsx index 0e0252b0bb..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 { @@ -75,7 +72,7 @@ export default class Profile extends React.Component { this.toggleProfileModal()} ml={1}> From 01a001b127d6860b362212b7e4c0493b61c9476f Mon Sep 17 00:00:00 2001 From: Patricia Wanat Date: Mon, 18 Nov 2019 20:25:58 +0100 Subject: [PATCH 3/5] Update index.tsx --- src/components/Avatar/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx index a938ce3d6a..d4d1955dc3 100644 --- a/src/components/Avatar/index.tsx +++ b/src/components/Avatar/index.tsx @@ -40,7 +40,7 @@ export class Avatar extends React.Component { this.getFallbackImage(this.props.profileType) } - async getFallbackImage(type?: ProfileTypeLabel) { + getFallbackImage(type?: ProfileTypeLabel) { const img = Workspace.findWorkspaceBadge(type, true) this.setState({ fallbackBadge: img }) } From 6853e6cbdb7ab906382d65a82ebd073504f4dc1e Mon Sep 17 00:00:00 2001 From: Patricia Wanat Date: Mon, 18 Nov 2019 20:45:33 +0100 Subject: [PATCH 4/5] Update index.tsx --- src/components/Avatar/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx index d4d1955dc3..5e03b2ad7c 100644 --- a/src/components/Avatar/index.tsx +++ b/src/components/Avatar/index.tsx @@ -40,7 +40,7 @@ export class Avatar extends React.Component { this.getFallbackImage(this.props.profileType) } - getFallbackImage(type?: ProfileTypeLabel) { + public getFallbackImage(type?: ProfileTypeLabel) { const img = Workspace.findWorkspaceBadge(type, true) this.setState({ fallbackBadge: img }) } From 922f8f3b51b60fa5e45e5fd06d06b25986036ee3 Mon Sep 17 00:00:00 2001 From: Benjamin Gammaire Date: Fri, 22 Nov 2019 18:10:20 +0100 Subject: [PATCH 5/5] use only profile badge in Avatar component - remove useless states - rename fn for clarity --- src/components/Avatar/index.tsx | 37 +++++++-------------------------- 1 file changed, 7 insertions(+), 30 deletions(-) diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx index 5e03b2ad7c..d7d969b46d 100644 --- a/src/components/Avatar/index.tsx +++ b/src/components/Avatar/index.tsx @@ -2,8 +2,7 @@ import React from 'react' import { Image, ImageProps } from 'rebass' 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 { ProfileTypeLabel } from 'src/models/user_pp.models' import Workspace from 'src/pages/User/workspace/Workspace' interface IProps extends ImageProps { @@ -12,14 +11,8 @@ interface IProps extends ImageProps { profileType?: ProfileTypeLabel } -interface IInjected extends IProps { - userStore: UserStore -} - interface IState { - avatarUrl?: string - fallbackBadge?: string - showFallback?: boolean + badgeProfileType?: string } @inject('userStore') @@ -29,35 +22,20 @@ 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.getFallbackImage(this.props.profileType) + this.getProfileTypeBadge(this.props.profileType) } - public getFallbackImage(type?: ProfileTypeLabel) { + public getProfileTypeBadge(type?: ProfileTypeLabel) { const img = Workspace.findWorkspaceBadge(type, true) - this.setState({ fallbackBadge: img }) + this.setState({ badgeProfileType: img }) } - - async getAvatar(userName: string) { - const url = getUserAvatar(userName) - console.log('avatar', url) - this.setState({ avatarUrl: url }) - } - render() { const { width } = this.props - const { avatarUrl, fallbackBadge } = this.state - - const addFallbackSrc = (ev: any) => { - ev.target.src = fallbackBadge - } + const { badgeProfileType } = this.state return ( <> @@ -66,8 +44,7 @@ export class Avatar extends React.Component { width={width ? width : 40} height={width ? width : 40} sx={{ borderRadius: '25px' }} - src={avatarUrl} - onError={addFallbackSrc} + src={badgeProfileType} /> )