From cb68c34abe35115b54e6b8d687527211d2b918b4 Mon Sep 17 00:00:00 2001 From: Daniel Scalzi Date: Mon, 31 Aug 2020 22:58:43 -0400 Subject: [PATCH] Bind server select button and store selected server in redux store. --- src/renderer/components/Application.tsx | 31 ++++------ src/renderer/components/landing/Landing.tsx | 57 +++++++++++++++++-- .../server-select/ServerSelectOverlay.tsx | 6 +- src/renderer/index.tsx | 1 + src/renderer/redux/actions/appActions.ts | 19 ++++++- src/renderer/redux/reducers/appReducer.ts | 13 ++++- 6 files changed, 92 insertions(+), 35 deletions(-) diff --git a/src/renderer/components/Application.tsx b/src/renderer/components/Application.tsx index 6d65adc..d3a37b3 100644 --- a/src/renderer/components/Application.tsx +++ b/src/renderer/components/Application.tsx @@ -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[] distribution: HeliosDistribution + selectedServer: HeliosServer } interface ApplicationState { @@ -52,7 +53,8 @@ const mapState = (state: StoreType): Partial => { 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 { - 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 case View.LANDING: return <> - + case View.LOGIN: return <> @@ -161,7 +163,11 @@ class Application extends React.Component 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 diff --git a/src/renderer/components/landing/Landing.tsx b/src/renderer/components/landing/Landing.tsx index 100cf8a..93661bc 100644 --- a/src/renderer/components/landing/Landing.tsx +++ b/src/renderer/components/landing/Landing.tsx @@ -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 { +const mapState = (state: StoreType): Partial => { + 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 { + + 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 { 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 {
- +
@@ -276,4 +319,6 @@ export default class Landing extends React.Component { } -} \ No newline at end of file +} + +export default connect(mapState, mapDispatch)(Landing) \ No newline at end of file diff --git a/src/renderer/components/overlay/server-select/ServerSelectOverlay.tsx b/src/renderer/components/overlay/server-select/ServerSelectOverlay.tsx index ce7e16c..f2c9e58 100644 --- a/src/renderer/components/overlay/server-select/ServerSelectOverlay.tsx +++ b/src/renderer/components/overlay/server-select/ServerSelectOverlay.tsx @@ -47,7 +47,7 @@ class ServerSelectOverlay extends React.Component @@ -59,7 +59,7 @@ class ServerSelectOverlay extends React.ComponentAvailable Servers
- {this.getServers()} + {this.getServerListings()}
diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx index 1be4142..3ae66a6 100644 --- a/src/renderer/index.tsx +++ b/src/renderer/index.tsx @@ -29,6 +29,7 @@ ReactDOM.render( currentView={store.getState().currentView} overlayQueue={store.getState().overlayQueue} distribution={store.getState().app.distribution!} + selectedServer={store.getState().app.selectedServer!} /> , diff --git a/src/renderer/redux/actions/appActions.ts b/src/renderer/redux/actions/appActions.ts index ad6a6ec..a4e3aa4 100644 --- a/src/renderer/redux/actions/appActions.ts +++ b/src/renderer/redux/actions/appActions.ts @@ -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) } \ No newline at end of file diff --git a/src/renderer/redux/reducers/appReducer.ts b/src/renderer/redux/reducers/appReducer.ts index cddb6f7..72aa8b1 100644 --- a/src/renderer/redux/reducers/appReducer.ts +++ b/src/renderer/redux/reducers/appReducer.ts @@ -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 = (state = defaultAppState, action) => { @@ -17,6 +19,11 @@ const AppReducer: Reducer = (state = defaultAppState, actio ...state, distribution: (action as SetDistributionAction).payload } + case AppActionType.SetSelectedServer: + return { + ...state, + selectedServer: (action as SetSelectedServerAction).payload + } } return state }