Skirda/SkirdaElectronLauncher
4
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

Bind server select button and store selected server in redux store.

Browse Source
This commit is contained in:
Daniel Scalzi 2020-08-31 22:58:43 -04:00
parent 574b362d12
commit cb68c34abe
No known key found for this signature in database
GPG Key ID: D18EA3FB4B142A57
6 changed files with 92 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/renderer/components/Application.tsx
View File

@ -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

55
src/renderer/components/landing/Landing.tsx
View File

@ -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">&#8226; 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">
@ -277,3 +320,5 @@ export default class Landing extends React.Component<unknown, LandingState> {
}
}
export default connect<unknown, typeof mapDispatch>(mapState, mapDispatch)(Landing)

6
src/renderer/components/overlay/server-select/ServerSelectOverlay.tsx
View File

@ -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">

1
src/renderer/index.tsx
View File

@ -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>,

21
src/renderer/redux/actions/appActions.ts
View File

@ -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 const AppActionDispatch = {
setDistribution: (d: HeliosDistribution): SetDistributionAction => setDistribution(d)
export function setSelectedServer(server: HeliosServer): SetSelectedServerAction {
return {
type: AppActionType.SetSelectedServer,
payload: server
}
}
export const AppActionDispatch = {
setDistribution: (d: HeliosDistribution): SetDistributionAction => setDistribution(d),
setSelectedServer: (s: HeliosServer): SetSelectedServerAction => setSelectedServer(s)
}

13
src/renderer/redux/reducers/appReducer.ts
View File

@ -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
}