|
| 1 | +import * as React from 'react'; |
| 2 | +import { observer } from 'mobx-react'; |
| 3 | +import { remoteData, isWebdriver } from 'cbioportal-frontend-commons'; |
| 4 | +import { action, computed, observable } from 'mobx'; |
| 5 | +import autobind from 'autobind-decorator'; |
| 6 | +import * as _ from 'lodash'; |
| 7 | +import styles from './styles.module.scss'; |
| 8 | +import classNames from 'classnames'; |
| 9 | +import { getBrowserWindow } from 'cbioportal-frontend-commons'; |
| 10 | +import { Container } from 'react-bootstrap'; |
| 11 | +import WindowStore from 'app/store/WindowStore'; |
| 12 | + |
| 13 | +export interface IUserMessage { |
| 14 | + dateStart?: number; |
| 15 | + dateEnd: number; |
| 16 | + content: string; |
| 17 | + id: string; |
| 18 | +} |
| 19 | + |
| 20 | +function makeMessageKey(id: string) { |
| 21 | + return `portalMessageKey-${id}`; |
| 22 | +} |
| 23 | + |
| 24 | +// ADD MESSAGE IN FOLLOWING FORMAT |
| 25 | +// UNIQUE ID IS IMPORTANT B/C WE REMEMBER A MESSAGE HAS BEEN SHOWN |
| 26 | +// BASED ON USERS LOCALSTORAGE |
| 27 | +let MESSAGE_DATA: IUserMessage[]; |
| 28 | + |
| 29 | +if ( |
| 30 | + ['beta.oncokb.org', 'www.oncokb.org'].includes( |
| 31 | + getBrowserWindow().location.hostname |
| 32 | + ) |
| 33 | +) { |
| 34 | + MESSAGE_DATA = [ |
| 35 | + // ADD MESSAGE IN FOLLOWING FORMAT |
| 36 | + // UNIQUE ID IS IMPORTANT B/C WE REMEMBER A MESSAGE HAS BEEN SHOWN |
| 37 | + // BASED ON USERS LOCALSTORAGE |
| 38 | + { |
| 39 | + dateEnd: 100000000000000, |
| 40 | + content: `Join our webinar to learn how to use OncoKB effectively. First webinar <strong>May 7th 3pm-4pm EDT</strong>. <a class="btn btn-secondary btn-sm ml-2" target="_blank" href="https://meetmsk.zoom.us/meeting/register/vJcvf-CvrzsshBK8VEiD5J9DSRDf7C--qg">Click here to register!</a>`, |
| 41 | + id: '2020_spring_webinar' |
| 42 | + } |
| 43 | + ]; |
| 44 | +} |
| 45 | + |
| 46 | +@observer |
| 47 | +export default class UserMessager extends React.Component< |
| 48 | + { |
| 49 | + dataUrl?: string; |
| 50 | + windowStore: WindowStore; |
| 51 | + }, |
| 52 | + {} |
| 53 | +> { |
| 54 | + messageData = remoteData<IUserMessage[]>(async () => { |
| 55 | + return Promise.resolve(MESSAGE_DATA); |
| 56 | + }); |
| 57 | + |
| 58 | + @observable dismissed = false; |
| 59 | + |
| 60 | + get shownMessage() { |
| 61 | + const messageToShow = _.find(this.messageData.result, message => { |
| 62 | + const notYetShown = !localStorage.getItem(makeMessageKey(message.id)); |
| 63 | + const expired = Date.now() > message.dateEnd; |
| 64 | + return notYetShown && !expired; |
| 65 | + }); |
| 66 | + |
| 67 | + return messageToShow; |
| 68 | + } |
| 69 | + |
| 70 | + @autobind |
| 71 | + close() { |
| 72 | + this.markMessageDismissed(this.shownMessage!); |
| 73 | + } |
| 74 | + |
| 75 | + @action |
| 76 | + markMessageDismissed(message: IUserMessage) { |
| 77 | + localStorage.setItem(makeMessageKey(message.id), 'shown'); |
| 78 | + this.dismissed = true; |
| 79 | + } |
| 80 | + |
| 81 | + render() { |
| 82 | + if (!this.dismissed && this.messageData.isComplete && this.shownMessage) { |
| 83 | + return ( |
| 84 | + <div className={styles.messager}> |
| 85 | + <Container |
| 86 | + fluid={!this.props.windowStore.isXLscreen} |
| 87 | + className={styles.messagerContainer} |
| 88 | + > |
| 89 | + <div |
| 90 | + className={styles.message} |
| 91 | + dangerouslySetInnerHTML={{ |
| 92 | + __html: this.shownMessage.content |
| 93 | + }} |
| 94 | + ></div> |
| 95 | + <i |
| 96 | + className={classNames(styles.close, 'fa', 'fa-close')} |
| 97 | + onClick={this.close} |
| 98 | + /> |
| 99 | + </Container> |
| 100 | + </div> |
| 101 | + ); |
| 102 | + } else { |
| 103 | + return null; |
| 104 | + } |
| 105 | + } |
| 106 | +} |
0 commit comments