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

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

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<unknown, LandingState> {
+const mapState = (state: StoreType): Partial<LandingProps> => {
+    return {
+        distribution: state.app.distribution!,
+        selectedServer: state.app.selectedServer!
+    }
+}
+const mapDispatch = {
+    ...AppActionDispatch,
+    ...OverlayActionDispatch
+}
+
+type InternalLandingProps = LandingProps & typeof mapDispatch
+
+class Landing extends React.Component<InternalLandingProps, LandingState> {
 
-    private static readonly logger = LoggerUtil.getLogger('Landing')
+    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">
@@ -276,4 +319,6 @@ export default class Landing extends React.Component<unknown, LandingState> {
         </>
     }
 
-}
+}
+
+export default connect<unknown, typeof mapDispatch>(mapState, mapDispatch)(Landing)

src/renderer/components/overlay/server-select/ServerSelectOverlay.tsx

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

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!}
             />
         </Provider>
     </AppContainer>,

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

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