import React from 'react' ; import { GroupMemberInvitation } from '../../datastore/sharing/db/GroupMemberInvitations' ; import { PersistenceLayerProvider } from '../../datastore/PersistenceLayer' ; import { Logger } from 'polar-shared/src/logger/Logger' ; import { GroupJoins } from '../../datastore/sharing/rpc/GroupJoins' ; import { UserImage } from './UserImage' ; import Button from "@material-ui/core/Button" ; const log = Logger . create ( ) ; export class NotificationForPrivateGroupDoc extends React . Component < IProps , IState > { constructor ( props ) { super ( props ) ; this . onAdd = this . onAdd . bind ( this ) ; } public render ( ) { const { invitation } = this . props ; const doc = invitation . docs [ 0 ] ; const from = invitation . from ; return ( < div className = "" > < div className = "text-lg" > { doc . title } < /div> < div > { doc . description || "" } < /div> < p className = "border-left border-secondary ml-1 pl-1 mt-1" > { invitation . message } < /p> < div style = { { display : 'flex' } } > < div className = "mt-auto mb-auto" style = { { flexGrow : 1 , display : 'flex' } } > < UserImage name = { from . name } image = { from . image } / > < div className = "mt-auto mb-auto ml-1" > { from . name } < /div> < /div> < div className = "mt-auto mb-auto" > < Button color = "primary" variant = "contained" onClick = { ( ) => this . onAdd ( ) } style = { { fontSize : '15px' , fontWeight : 'bold' } } className = "" > < i className = "fas fa-plus" style = { { marginRight : '5px' } } /> Add &nbsp; < /Button> < /div> < /div> < /div>); } private onAdd ( ) { const persistenceLayer = this . props . persistenceLayerProvider ( ) ; const { invitation } = this . props ; } } interface IProps { readonly invitation : GroupMemberInvitation ; readonly persistenceLayerProvider : PersistenceLayerProvider ; } interface IState { }