1import * as React from 'react' 2import * as Kb from '../../common-adapters' 3import * as Styles from '../../styles' 4import * as Types from '../../constants/types/teams' 5import * as Container from '../../util/container' 6import * as Constants from '../../constants/teams' 7import * as TeamsGen from '../../actions/teams-gen' 8 9type Props = {title: string; teamID: Types.TeamID} 10 11const activityToIcon: {[key in 'active' | 'recently']: Kb.IconType} = { 12 active: 'iconfont-campfire-burning', 13 recently: 'iconfont-campfire-out', 14} 15const activityToLabel = { 16 active: 'Active', 17 recently: 'Recently active', 18} 19const Activity = ({level, style}: {level: Types.ActivityLevel; style?: Styles.StylesCrossPlatform}) => 20 level === 'none' ? null : ( 21 <Kb.Box2 direction="horizontal" gap="xtiny" alignItems="center" fullWidth={Styles.isMobile} style={style}> 22 <Kb.Icon 23 type={activityToIcon[level]} 24 color={level === 'active' ? Styles.globalColors.greenDark : Styles.globalColors.black_50} 25 sizeType="Small" 26 /> 27 <Kb.Text type="BodySmall" style={level === 'active' ? styles.activityActive : undefined}> 28 {activityToLabel[level]} 29 </Kb.Text> 30 </Kb.Box2> 31 ) 32 33export const ModalTitle = ({title, teamID}: Props) => { 34 const teamname = Container.useSelector(state => Constants.getTeamMeta(state, teamID).teamname) 35 const avatarFilepath = Container.useSelector(state => state.teams.newTeamWizard.avatarFilename) 36 const avatarCrop = Container.useSelector(state => state.teams.newTeamWizard.avatarCrop) 37 const isNewTeamWizard = teamID == Types.newTeamWizardTeamID 38 39 return Styles.isMobile ? ( 40 <Kb.Box2 direction="vertical" alignItems="center"> 41 {!!teamname && ( 42 <Kb.Text type="BodyTiny" lineClamp={1} ellipsizeMode="middle"> 43 {teamname} 44 </Kb.Text> 45 )} 46 <Kb.Text type="BodyBig">{title}</Kb.Text> 47 </Kb.Box2> 48 ) : ( 49 <Kb.Box2 direction="vertical" gap="xtiny" alignItems="center" style={styles.title}> 50 <Kb.Avatar 51 size={32} 52 teamname={teamname === 'New team' ? '' : teamname} 53 style={styles.avatar} 54 isTeam={true} 55 imageOverrideUrl={isNewTeamWizard ? avatarFilepath : undefined} 56 crop={isNewTeamWizard ? avatarCrop : undefined} 57 /> 58 <Kb.Box2 direction="vertical" alignItems="center"> 59 <Kb.Text type="BodySmall" lineClamp={1}> 60 {teamname} 61 </Kb.Text> 62 <Kb.Text type="Header">{title}</Kb.Text> 63 </Kb.Box2> 64 </Kb.Box2> 65 ) 66} 67 68/** 69 * Ensure activity levels are loaded 70 * @param forceLoad force a reload even if they're already loaded. 71 */ 72export const useActivityLevels = (forceLoad?: boolean) => { 73 const dispatch = Container.useDispatch() 74 const activityLevelsLoaded = Container.useSelector(s => s.teams.activityLevels.loaded) 75 // keep whether we've triggered a load so we only do it once. 76 const triggeredLoad = React.useRef(false) 77 React.useEffect(() => { 78 if ((!activityLevelsLoaded || forceLoad) && !triggeredLoad.current) { 79 dispatch(TeamsGen.createGetActivityForTeams()) 80 triggeredLoad.current = true 81 } 82 }, [dispatch, activityLevelsLoaded, forceLoad]) 83} 84 85const styles = Styles.styleSheetCreate(() => ({ 86 activityActive: { 87 color: Styles.globalColors.greenDark, 88 }, 89 avatar: Styles.platformStyles({ 90 isElectron: { 91 height: 16, 92 position: 'relative', 93 top: -16, 94 }, 95 }), 96 title: { 97 paddingBottom: Styles.globalMargins.tiny, 98 }, 99})) 100 101export default Activity 102