import * as React from 'react' ; import { IconButton } from 'office-ui-fabric-react/lib/Button' ; import { Panel , PanelType } from 'office-ui-fabric-react/lib/Panel' ; import { Link } from 'office-ui-fabric-react/lib/Link' ; import { Shimmer , ShimmerElementsGroup , ShimmerElementType } from 'office-ui-fabric-react/lib/Shimmer' ; import { IFollowedSitesProps } from './IFollowedSitesProps' ; import { ISiteItem } from '../../../Common/Modules/ISiteItem' ; import styles from '../../MyFollowedSitesApplicationCustomizer.module.scss' ; import { formProperties } from '@uifabric/utilities' ; import { Icon } from 'office-ui-fabric-react/lib/Icon' ; import { sortBy } from '@microsoft/sp-lodash-subset' ; import Utilities from '../../../Common/Services/Utilities' ; export default class FollowedSites extends React . Component < IFollowedSitesProps , any > { private _myFollowedSites : ISiteItem [ ] | undefined ; private _UserSessionStorageKey : string | undefined ; public constructor ( props ) { super ( props ) ; this . state = { openPanel : false , isDataLoaded : false , myFollowedSites : [ ] } ; } description public componentDidMount ( ) { try { this . _UserSessionStorageKey = this . props . currentContext . pageContext . user . loginName . substring ( 0 , this . props . currentContext . pageContext . user . loginName . indexOf ( '@' ) ) + '_FollowedSites' ; } catch ( error ) { } } description private handleLogoClick ( ) { try { this . setState ( { openPanel : true , isDataLoaded : false } ) ; let myFollowedSitesString = Utilities . getFromSessionStorage ( this . _UserSessionStorageKey ) ; if ( myFollowedSitesString && myFollowedSitesString !== undefined && myFollowedSitesString . length > 0 ) { console . log ( 'Loading from Session storage' ) ; this . _myFollowedSites = JSON . parse ( myFollowedSitesString ) ; setTimeout ( ( ) => { this . setState ( { myFollowedSites : this . _myFollowedSites , isDataLoaded : true } ) ; } , 500 ) ; } else { console . log ( 'Loading from server' ) ; this . setState ( { openPanel : true , isDataLoaded : false } ) ; this . getUserFollowedSitesFromServer ( ) . then ( ufsites => { if ( ufsites ) { this . setState ( { myFollowedSites : ufsites , isDataLoaded : true } ) ; myFollowedSitesString = JSON . stringify ( ufsites ) ; Utilities . updateSessionStorage ( this . _UserSessionStorageKey , myFollowedSitesString ) ; } } ) ; } } catch ( error ) { console . log ( JSON . stringify ( error ) ) ; } } description private handleRefreshClick ( ) { try { event . preventDefault ( ) ; console . log ( 'Loading from server' ) ; let myFollowedSitesString ; this . setState ( { openPanel : true , isDataLoaded : false } ) ; this . getUserFollowedSitesFromServer ( ) . then ( ufsites => { if ( ufsites ) { this . setState ( { myFollowedSites : ufsites , isDataLoaded : true } ) ; myFollowedSitesString = JSON . stringify ( ufsites ) ; if ( undefined !== myFollowedSitesString ) { this . updateSessionStorage ( this . _UserSessionStorageKey , myFollowedSitesString ) ; } } } ) . catch ( err => { console . log ( JSON . stringify ( err ) ) ; } ) ; } catch ( error ) { console . log ( error ) ; } } description private generateFollowedSitesUI ( ) { let sitesUI = [ ] ; try { if ( this . state . myFollowedSites && this . state . myFollowedSites . length > 0 ) { this . state . myFollowedSites . map ( ( mysite ) => { sitesUI . push ( < div className = { styles . sitelink } > < Link href = { mysite . Uri } target = "_blank" > { ( mysite . SiteLogo === null || mysite . SiteLogo === undefined ) && < Icon iconName = "FavoriteStarFill" className = { styles . sitelogdefault } / > } { mysite . SiteLogo && mysite . SiteLogo !== undefined && < img src = { mysite . SiteLogo } className = { styles . sitelogo } / > } { mysite . Name } < /Link> < /div>); } ) ; } return sitesUI ; } catch ( error ) { console . log ( JSON . stringify ( error ) ) ; } } private dismissPanel ( event ) { try { event . preventDefault ( ) ; this . setState ( { openPanel : false } ) ; } catch ( error ) { } } private getFromSessionStorage ( key ) { let sessionValue = null ; try { if ( key !== undefined && key ) { sessionValue = window . sessionStorage . getItem ( key ) ; } } catch ( error ) { } return sessionValue ; } private updateSessionStorage ( key , value ) { try { if ( key && key !== undefined && value && value !== undefined ) { window . sessionStorage . setItem ( key , value ) ; } } catch ( error ) { } } private async getUserFollowedSitesFromServer ( ) { try { return this . props . spService . getMyFollowedSites ( ) . then ( fSites => { if ( fSites && fSites !== undefined && fSites . length > 0 ) { let uniqueSites = [ ] ; fSites . forEach ( fsite => { if ( undefined !== fsite ) { if ( uniqueSites . indexOf ( uniqueSites . filter ( u => u . Uri === fsite . Uri ) [ 0 ] ) === - 1 ) { uniqueSites . push ( fsite ) ; } } } ) ; let sortedFSites = sortBy ( uniqueSites , [ 'Name' ] ) ; this . _myFollowedSites = sortedFSites ; return sortedFSites ; } } ) ; } catch ( error ) { } } public render ( ) { const mySitesUI = this . generateFollowedSitesUI ( ) ; return ( < div className = { styles . app } > < div className = { styles . iconcontainer } > < IconButton iconProps = { { iconName : 'AdminSLogoInverse32' , className : styles . iconstyle } } ariaLabel = 'My Followed Sites' title = 'My Followed Sites' onClick = { this . handleLogoClick . bind ( this ) } / > < /div> { this . state . openPanel && < Panel isOpen = { this . state . openPanel } type = { PanelType . medium } closeButtonAriaLabel = "Close" headerText = "My Followed Sites" onDismiss = { this . dismissPanel . bind ( this ) } > < Shimmer ariaLabel = "Loading data" isDataLoaded = { this . state . isDataLoaded } > < div className = { styles . refreshcontainer } > < div className = { styles . refreshbutton } > < IconButton iconProps = { { iconName : 'Refresh' , className : styles . refreshbuttonstyle } } ariaLabel = 'Refresh' title = 'Refresh' onClick = { this . handleRefreshClick . bind ( this ) } / > < /div> < /div> < p className = { styles . sitespanel } > { mySitesUI } < /p> < /Shimmer> < /Panel>} < /div>); } }