import Content from '../components/Content/Content' ; import { ContextData , IContextData } from './../components/Context' ; import api from './../api/api' ; import * as I from './../api/interfaces' ; import config from './../api/config' ; import { socket } from './../components/Content/Tabs/Live/Live' ; import LoginRegisterModal from './LoginRegisterModal' ; import { hash } from '../hash' ; import GamePicker from './GamePicker' ; import { AvailableGames , CloudSyncStatus } from '../../types/interfaces' ; import SyncModal from './SyncModal' ; import Changelog from './ChangelogModal' ; import { Component } from 'react' ; import { canPlanUseCloudStorage } from '../utils' ; const isElectron = config . isElectron ; interface IState { data : IContextData ; loading : boolean ; loadingLogin : boolean ; loadingGame : boolean ; loginError : string ; version : string ; picked : null | AvailableGames ; synchronizationStatus : CloudSyncStatus | null ; isSyncModalOpen : boolean ; config : I . ExtendedConfig | null ; } export default class Layout extends Component < { } , IState > { constructor ( props ) { super ( props ) ; this . state = { data : { teams : [ ] , players : [ ] , matches : [ ] , spaceUsed : 0 , tournaments : [ ] , reload : ( ) => { return Promise . all ( [ this . loadPlayers ( ) , this . loadTeams ( ) , this . loadMatch ( ) , this . loadTournaments ( ) , this . getCustomFields ( ) , this . loadConfig ( ) , this . getSpaceUsed ( ) ] ) . then ( this . rehash ) ; } , fields : { players : [ ] , teams : [ ] } , hash : '' , game : 'csgo' } , loginError : '' , loadingLogin : false , loading : true , loadingGame : true , version : '-' , picked : null , synchronizationStatus : null , isSyncModalOpen : false , config : null } ; } getSpaceUsed = async ( ) => { const response = await api . cloud . size ( ) ; console . log ( response ) ; if ( ! response ) return ; const { data } = this . state ; data . spaceUsed = response . size ; this . setState ( { data } ) ; } ; async componentDidMount ( ) { await this . loadUser ( ) ; api . games . getCurrent ( ) . then ( result => { const { data } = this . state ; data . game = result . game ; this . setState ( { loadingGame : false , picked : result . game , data } , ( ) => { if ( result . init ) { this . sync ( ) ; } } ) ; } ) ; await this . getVersion ( ) ; socket . on ( 'match' , ( fromVeto ? ) => { if ( fromVeto ) this . loadMatch ( ) ; } ) ; socket . on ( 'banned' , ( ) => { this . logout ( ) ; } ) ; socket . on ( 'db_update' , this . state . data . reload ) ; socket . on ( 'config' , ( ) => { this . loadConfig ( ) ; this . getSpaceUsed ( ) ; } ) ; } loadConfig = async ( ) => { const cfg = await api . config . get ( ) ; this . setState ( { config : cfg } ) ; } ; setSyncOpen = ( sync ) => { this . setState ( { isSyncModalOpen : sync } ) ; } ; rehash = ( ) => { this . setState ( state => { state . data . hash = hash ( ) ; return state ; } ) ; } ; setGame = ( game ) => { const { data } = this . state ; data . game = game ; this . setState ( { picked : game , data } , this . sync ) ; } ; clearGame = ( ) => { this . setState ( { picked : null } ) ; } ; sync = ( ) => { if ( ! this . state . picked ) return ; api . games . startServices ( this . state . picked ) . then ( response => { this . setState ( { synchronizationStatus : response . result } ) ; this . setSyncOpen ( response . result !== 'ALL_SYNCED' ) ; if ( response . result === 'ALL_SYNCED' ) { this . state . data . reload ( ) ; } } ) ; } ; getCustomFields = async ( ) => { const [ teams , players ] = await Promise . all ( [ api . teams . fields . get ( ) , api . players . fields . get ( ) ] ) ; this . setState ( state => { state . data . fields = { teams , players } ; return state ; } ) ; } ; getVersion = async ( ) => { const response = await api . config . getVersion ( ) ; this . setState ( { version : response . version } ) ; return response . version ; } ; loadUser = async ( ) => { try { const appLoadedUser = await api . user . getCurrent ( ) ; if ( 'message' in appLoadedUser ) { this . setLoading ( false , appLoadedUser . message ) ; this . setUser ( ) ; return this . setState ( { loading : false } ) ; } this . setUser ( appLoadedUser ) ; return this . setState ( { loading : false } ) ; } catch { this . setUser ( ) ; return this . setState ( { loading : false } ) ; } } ; setUser = ( user ? ) => { const { data } = this . state ; data . customer = user ; this . setState ( { data } ) ; } ; loadTeams = async ( ) => { const teams = await api . teams . get ( ) ; if ( ! teams ) return ; const { data } = this . state ; data . teams = teams ; if ( teams ) { this . setState ( { data } ) ; } } ; loadPlayers = async ( ) => { const players = await api . players . get ( ) ; if ( ! players ) return ; const { data } = this . state ; data . players = players ; this . setState ( { data } ) ; } ; loadMatch = async ( ) => { const matches = await api . match . get ( ) ; if ( ! matches ) return ; const { data } = this . state ; data . matches = matches ; if ( matches ) { this . setState ( { data } ) ; } } ; loadTournaments = async ( ) => { const tournaments = await api . tournaments . get ( ) ; const { data } = this . state ; data . tournaments = tournaments ; if ( tournaments ) { this . setState ( { data } ) ; } } ; logout = async ( ) => { await api . user . logout ( ) ; this . loadUser ( ) ; } ; setLoading = ( loading , loginError ? ) => { this . setState ( { loadingLogin : loading , loginError : loginError || '' } ) ; } ; toggleSync = async ( ) => { const cfg = await api . config . get ( ) ; cfg . sync = ! cfg . sync ; await api . config . update ( cfg ) ; await this . loadConfig ( ) ; this . sync ( ) ; } ; render ( ) { const { Provider } = ContextData ; const { loading , data , loadingLogin , loginError , version , loadingGame , isSyncModalOpen , synchronizationStatus , config } = this . state ; const available = canPlanUseCloudStorage ( data . customer ?. license ?. type ) ; const active = Boolean ( available && config ?. sync ) ; return ( < Provider value = { this . state . data } > { } < div className = { `loaded ${ isElectron ? 'electron' : '' }` } > { } { < div className = { `loading-container ${ loading || loadingGame ? '' : 'hide' }` } > Loading ... < /div>} < LoginRegisterModal isOpen = { ! data . customer } loading = { loadingLogin } setLoading = { this . setLoading } loadUser = { this . loadUser } error = { loginError } / > < SyncModal isOpen = { isSyncModalOpen } setOpen = { this . setSyncOpen } syncStatus = { synchronizationStatus } reload = { this . state . data . reload } / > { version !== '-' ? < Changelog version = { version } customer = { data . customer } / > : null } < GamePicker isOpen = { Boolean ( data . customer && ! this . state . picked ) } setGame = { this . setGame } / > < Content active = { active } available = { available } toggleSync = { this . toggleSync } clearGame = { this . clearGame } game = { this . state . data . game } customer = { data . customer } logout = { this . logout } version = { version } / > < /div> < /Provider>); } }