Bind server select button and store selected server in redux store.
This commit is contained in:
parent
574b362d12
commit
cb68c34abe
@ -23,7 +23,7 @@ import { LoggerUtil } from 'common/logging/loggerutil'
|
||||
import { DistributionAPI } from 'common/distribution/DistributionAPI'
|
||||
import { getServerStatus } from 'common/mojang/net/ServerStatusAPI'
|
||||
import { Distribution } from 'helios-distribution-types'
|
||||
import { HeliosDistribution } from 'common/distribution/DistributionFactory'
|
||||
import { HeliosDistribution, HeliosServer } from 'common/distribution/DistributionFactory'
|
||||
|
||||
import './Application.css'
|
||||
|
||||
@ -39,6 +39,7 @@ interface ApplicationProps {
|
||||
currentView: View
|
||||
overlayQueue: OverlayPushAction<unknown>[]
|
||||
distribution: HeliosDistribution
|
||||
selectedServer: HeliosServer
|
||||
}
|
||||
|
||||
interface ApplicationState {
|
||||
@ -52,7 +53,8 @@ const mapState = (state: StoreType): Partial<ApplicationProps> => {
|
||||
return {
|
||||
currentView: state.currentView,
|
||||
overlayQueue: state.overlayQueue,
|
||||
distribution: state.app.distribution!
|
||||
distribution: state.app.distribution!,
|
||||
selectedServer: state.app.selectedServer!
|
||||
}
|
||||
}
|
||||
const mapDispatch = {
|
||||
@ -63,7 +65,7 @@ const mapDispatch = {
|
||||
|
||||
class Application extends React.Component<ApplicationProps & typeof mapDispatch, ApplicationState> {
|
||||
|
||||
private readonly logger = LoggerUtil.getLogger('Application')
|
||||
private static readonly logger = LoggerUtil.getLogger('ApplicationTSX')
|
||||
|
||||
private bkid!: number
|
||||
|
||||
@ -87,7 +89,7 @@ class Application extends React.Component<ApplicationProps & typeof mapDispatch,
|
||||
</>
|
||||
case View.LANDING:
|
||||
return <>
|
||||
<Landing />
|
||||
<Landing distribution={this.props.distribution} selectedServer={this.props.selectedServer} />
|
||||
</>
|
||||
case View.LOGIN:
|
||||
return <>
|
||||
@ -161,7 +163,11 @@ class Application extends React.Component<ApplicationProps & typeof mapDispatch,
|
||||
})
|
||||
return
|
||||
} else {
|
||||
this.props.setDistribution(new HeliosDistribution(rawDisto))
|
||||
const distro = new HeliosDistribution(rawDisto)
|
||||
this.props.setDistribution(distro)
|
||||
// TODO TEMP USE CONFIG
|
||||
// TODO TODO TODO TODO
|
||||
this.props.setSelectedServer(distro.servers[0])
|
||||
}
|
||||
|
||||
// TODO Setup hook for distro refresh every ~ 5 mins.
|
||||
@ -190,27 +196,12 @@ class Application extends React.Component<ApplicationProps & typeof mapDispatch,
|
||||
console.log(serverStatus)
|
||||
}
|
||||
})
|
||||
this.props.pushServerSelectOverlay({
|
||||
servers: this.props.distribution.servers,
|
||||
selectedId: this.props.distribution.servers[0].rawServer.id,
|
||||
onSelection: (serverId: string) => this.logger.info('Server Selection Change:', serverId)
|
||||
})
|
||||
// this.props.pushGenericOverlay({
|
||||
// title: 'Test Title 2',
|
||||
// description: 'Test Description',
|
||||
// dismissible: true
|
||||
// })
|
||||
// this.props.pushGenericOverlay({
|
||||
// title: 'Test Title 3',
|
||||
// description: 'Test Description',
|
||||
// dismissible: true
|
||||
// })
|
||||
// this.props.pushGenericOverlay({
|
||||
// title: 'Test Title 4',
|
||||
// description: 'Test Description',
|
||||
// dismissible: true
|
||||
// })
|
||||
// this.props.pushGenericOverlay({
|
||||
// title: 'Test Title IMPORTANT',
|
||||
// description: 'Test Description',
|
||||
// dismissible: true
|
||||
|
@ -1,25 +1,49 @@
|
||||
import * as React from 'react'
|
||||
import News from '../news/News'
|
||||
import { connect } from 'react-redux'
|
||||
|
||||
import { StoreType } from '../../redux/store'
|
||||
import { AppActionDispatch } from '../..//redux/actions/appActions'
|
||||
import { OverlayActionDispatch } from '../../redux/actions/overlayActions'
|
||||
import { HeliosDistribution, HeliosServer } from 'common/distribution/DistributionFactory'
|
||||
import { MojangStatus, MojangStatusColor } from 'common/mojang/rest/internal/MojangStatus'
|
||||
import { MojangResponse } from 'common/mojang/rest/internal/MojangResponse'
|
||||
import { MojangRestAPI } from 'common/mojang/rest/MojangRestAPI'
|
||||
import { RestResponseStatus } from 'common/got/RestResponse'
|
||||
import { LoggerUtil } from 'common/logging/loggerutil'
|
||||
|
||||
import News from '../news/News'
|
||||
|
||||
import './Landing.css'
|
||||
|
||||
interface LandingProps {
|
||||
distribution: HeliosDistribution
|
||||
selectedServer: HeliosServer
|
||||
}
|
||||
|
||||
interface LandingState {
|
||||
mojangStatuses: MojangStatus[]
|
||||
}
|
||||
|
||||
export default class Landing extends React.Component<unknown, LandingState> {
|
||||
const mapState = (state: StoreType): Partial<LandingProps> => {
|
||||
return {
|
||||
distribution: state.app.distribution!,
|
||||
selectedServer: state.app.selectedServer!
|
||||
}
|
||||
}
|
||||
const mapDispatch = {
|
||||
...AppActionDispatch,
|
||||
...OverlayActionDispatch
|
||||
}
|
||||
|
||||
private static readonly logger = LoggerUtil.getLogger('Landing')
|
||||
type InternalLandingProps = LandingProps & typeof mapDispatch
|
||||
|
||||
class Landing extends React.Component<InternalLandingProps, LandingState> {
|
||||
|
||||
private static readonly logger = LoggerUtil.getLogger('LandingTSX')
|
||||
|
||||
private mojangStatusInterval!: NodeJS.Timeout
|
||||
|
||||
constructor(props: unknown) {
|
||||
constructor(props: InternalLandingProps) {
|
||||
super(props)
|
||||
this.state = {
|
||||
mojangStatuses: []
|
||||
@ -109,6 +133,25 @@ export default class Landing extends React.Component<unknown, LandingState> {
|
||||
return statuses
|
||||
}
|
||||
|
||||
private openServerSelect = (): void => {
|
||||
this.props.pushServerSelectOverlay({
|
||||
servers: this.props.distribution.servers,
|
||||
selectedId: this.props.selectedServer.rawServer.id,
|
||||
onSelection: (serverId: string) => {
|
||||
Landing.logger.info('Server Selection Change:', serverId)
|
||||
this.props.setSelectedServer(this.props.distribution.getServerById(serverId)!)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
private getSelectedServerText = (): string => {
|
||||
if(this.props.selectedServer != null) {
|
||||
return `• ${this.props.selectedServer.rawServer.id}`
|
||||
} else {
|
||||
return '• No Server Selected'
|
||||
}
|
||||
}
|
||||
|
||||
render(): JSX.Element {
|
||||
return <>
|
||||
|
||||
@ -254,7 +297,7 @@ export default class Landing extends React.Component<unknown, LandingState> {
|
||||
<div id="launch_content">
|
||||
<button id="launch_button">PLAY</button>
|
||||
<div className="bot_divider"></div>
|
||||
<button id="server_selection_button" className="bot_label">• No Server Selected</button>
|
||||
<button onClick={this.openServerSelect} id="server_selection_button" className="bot_label">{this.getSelectedServerText()}</button>
|
||||
</div>
|
||||
<div id="launch_details">
|
||||
<div id="launch_details_left">
|
||||
@ -276,4 +319,6 @@ export default class Landing extends React.Component<unknown, LandingState> {
|
||||
</>
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export default connect<unknown, typeof mapDispatch>(mapState, mapDispatch)(Landing)
|
@ -47,7 +47,7 @@ class ServerSelectOverlay extends React.Component<InternalServerSelectOverlayPro
|
||||
this.props.popOverlayContent()
|
||||
}
|
||||
|
||||
getMainServerStar(): JSX.Element {
|
||||
private getMainServerStar(): JSX.Element {
|
||||
return (
|
||||
<div className="serverListingStarWrapper">
|
||||
<svg id="mainServerSVG" viewBox="0 0 107.45 104.74" width="20px" height="20px">
|
||||
@ -59,7 +59,7 @@ class ServerSelectOverlay extends React.Component<InternalServerSelectOverlayPro
|
||||
)
|
||||
}
|
||||
|
||||
getServers(): JSX.Element[] {
|
||||
private getServerListings(): JSX.Element[] {
|
||||
const servers: JSX.Element[] = []
|
||||
|
||||
for(const { rawServer: raw } of this.props.servers) {
|
||||
@ -89,7 +89,7 @@ class ServerSelectOverlay extends React.Component<InternalServerSelectOverlayPro
|
||||
<span id="serverSelectHeader">Available Servers</span>
|
||||
<div id="serverSelectList">
|
||||
<div id="serverSelectListScrollable">
|
||||
{this.getServers()}
|
||||
{this.getServerListings()}
|
||||
</div>
|
||||
</div>
|
||||
<div id="serverSelectActions">
|
||||
|
@ -29,6 +29,7 @@ ReactDOM.render(
|
||||
currentView={store.getState().currentView}
|
||||
overlayQueue={store.getState().overlayQueue}
|
||||
distribution={store.getState().app.distribution!}
|
||||
selectedServer={store.getState().app.selectedServer!}
|
||||
/>
|
||||
</Provider>
|
||||
</AppContainer>,
|
||||
|
@ -1,8 +1,9 @@
|
||||
import { Action } from 'redux'
|
||||
import { HeliosDistribution } from 'common/distribution/DistributionFactory'
|
||||
import { HeliosDistribution, HeliosServer } from 'common/distribution/DistributionFactory'
|
||||
|
||||
export enum AppActionType {
|
||||
SetDistribution = 'SET_DISTRIBUTION'
|
||||
SetDistribution = 'SET_DISTRIBUTION',
|
||||
SetSelectedServer = 'SET_SELECTED_SERVER'
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
||||
@ -12,6 +13,10 @@ export interface SetDistributionAction extends AppAction {
|
||||
payload: HeliosDistribution
|
||||
}
|
||||
|
||||
export interface SetSelectedServerAction extends AppAction {
|
||||
payload: HeliosServer
|
||||
}
|
||||
|
||||
export function setDistribution(distribution: HeliosDistribution): SetDistributionAction {
|
||||
return {
|
||||
type: AppActionType.SetDistribution,
|
||||
@ -19,6 +24,14 @@ export function setDistribution(distribution: HeliosDistribution): SetDistributi
|
||||
}
|
||||
}
|
||||
|
||||
export function setSelectedServer(server: HeliosServer): SetSelectedServerAction {
|
||||
return {
|
||||
type: AppActionType.SetSelectedServer,
|
||||
payload: server
|
||||
}
|
||||
}
|
||||
|
||||
export const AppActionDispatch = {
|
||||
setDistribution: (d: HeliosDistribution): SetDistributionAction => setDistribution(d)
|
||||
setDistribution: (d: HeliosDistribution): SetDistributionAction => setDistribution(d),
|
||||
setSelectedServer: (s: HeliosServer): SetSelectedServerAction => setSelectedServer(s)
|
||||
}
|
@ -1,13 +1,15 @@
|
||||
import { AppActionType, AppAction, SetDistributionAction } from '../actions/appActions'
|
||||
import { AppActionType, AppAction, SetDistributionAction, SetSelectedServerAction } from '../actions/appActions'
|
||||
import { Reducer } from 'redux'
|
||||
import { HeliosDistribution } from 'common/distribution/DistributionFactory'
|
||||
import { HeliosDistribution, HeliosServer } from 'common/distribution/DistributionFactory'
|
||||
|
||||
export interface AppState {
|
||||
distribution: HeliosDistribution | null
|
||||
selectedServer: HeliosServer | null
|
||||
}
|
||||
|
||||
const defaultAppState: AppState = {
|
||||
distribution: null!
|
||||
distribution: null,
|
||||
selectedServer: null
|
||||
}
|
||||
|
||||
const AppReducer: Reducer<AppState, AppAction> = (state = defaultAppState, action) => {
|
||||
@ -17,6 +19,11 @@ const AppReducer: Reducer<AppState, AppAction> = (state = defaultAppState, actio
|
||||
...state,
|
||||
distribution: (action as SetDistributionAction).payload
|
||||
}
|
||||
case AppActionType.SetSelectedServer:
|
||||
return {
|
||||
...state,
|
||||
selectedServer: (action as SetSelectedServerAction).payload
|
||||
}
|
||||
}
|
||||
return state
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user