some minor refactoring - preparing for the appropriate data store com…

…munication with the server.

src/importpgn.ts

@@ -1,4 +1,3 @@
-//--------------------------------------------------------------------------------------------------
 // The import PGN modal dialog.
 import { Component, h, Message, ConnectParams, RenderParams } from 'kaiju'
 import { update } from 'immupdate'
@@ -11,26 +10,41 @@ export default function() {
 
 //-----------------------------------------------------------------------------------------
 interface State {
-  isActive: boolean,
+  showingSelectFileDialog: boolean,
+  showFileImportProgress: boolean,
   pgnPath?: string,
   targetDatabase: string,
-  fileInput?: HTMLInputElement
+  fileInput?: HTMLInputElement,
+  progress: number
 }
 
 function initState() {
-	return { isActive: false, pgnPath: undefined, targetDatabase: "new" }
+	return {
+    showingSelectFileDialog: false,
+    pgnPath: undefined,
+    targetDatabase: "new",
+    showFileImportProgress: false,
+    progress: 0.0
+  }
 }
 
 //-----------------------------------------------------------------------------------------
 const showModal = Message('showModal')
-const hideModal = Message('hideModal')
+const hideFileDialog = Message('hideFileDialog')
 const setFileInput = Message<HTMLInputElement>('setFileInput')
 const showFileDialog = Message('showFileDialog')
 const selectFile = Message<HTMLInputElement>('selectFile')
+const importPgn = Message('importPgn')
+const cancelFileImport = Message('cancelFileImport')
 
 function connect({ on }: ConnectParams<void, State>) {
-	on(showModal, (state) => update(state, {isActive: true}))
-	on(hideModal, (state) => update(state, {isActive: false}))
+	on(showModal, (state) => update(state, {showingSelectFileDialog: true}))
+	on(hideFileDialog, (state) => update(state, {showingSelectFileDialog: false}))
+	on(importPgn, (state) => {
+    console.log(state.pgnPath)
+    return update(state, { showingSelectFileDialog: false, showFileImportProgress: true })
+  })
+	on(cancelFileImport, (state) => update(state, {showFileImportProgress: false}))
 	on(setFileInput, (state, elm: HTMLInputElement) => update(state, {fileInput: elm}))
 	on(showFileDialog, (state) => {
     if (state.fileInput) {
@@ -48,10 +62,15 @@ function connect({ on }: ConnectParams<void, State>) {
 
 //-----------------------------------------------------------------------------------------
 function render({ state, msg }: RenderParams<void, State>) {
-  let classExtra = ""
-  if (state.isActive) {
-    classExtra = " .is-active"
+  let fileDialogClass = ""
+  if (state.showingSelectFileDialog) {
+    fileDialogClass = " .is-active"
+  }
+  let progressDialogClass = ""
+  if (state.showFileImportProgress) {
+    progressDialogClass = " .is-active"
   }
+  console.log(progressDialogClass);
   let buttonTitle = ""
   if (state.pgnPath) {
     buttonTitle = "Change PGN File: " + path.basename(state.pgnPath)
@@ -61,12 +80,12 @@ function render({ state, msg }: RenderParams<void, State>) {
 
   return h("import", {}, [
     h("button.import.button", {on: { click: () => msg.send(showModal())}}, "+ Import Games"),
-    h("div.modal" + classExtra, {}, [
+    h("div.modal" + fileDialogClass, {}, [
       h("div.modal-background"),
       h("div.modal-card", {}, [
         h("header.modal-card-head", {}, [
           h("div.modal-card-title", "Import Games"),
-          h("button.delete", {on: {click: () => msg.send(hideModal())}})
+          h("button.delete", {on: {click: () => msg.send(hideFileDialog())}})
         ]),
         h("section.modal-card-body", {}, [
           h("div.form", {}, [
@@ -100,8 +119,23 @@ function render({ state, msg }: RenderParams<void, State>) {
           ])
         ]),
         h("footer.modal-card-foot", {}, [
-          h("a.button is-success", "Import"),
-          h("a.button", {on: {click: () => msg.send(hideModal())}}, "Cancel")
+          h("a.button is-success", {on: {click: () => msg.send(importPgn())}}, "Import"),
+          h("a.button", {on: {click: () => msg.send(hideFileDialog())}}, "Cancel")
+        ]),
+      ]),
+    ]),
+    h("div.modal" + progressDialogClass, {}, [
+      h("div.modal-background"),
+      h("div.modal-card", {}, [
+        h("header.modal-card-head", {}, [
+          h("div.modal-card-title", "Importing..."),
+          h("button.delete", {on: {click: () => msg.send(cancelFileImport())}})
+        ]),
+        h("section.modal-card-body", {}, [
+          h("progress.progress.is-large", {attrs: {"value": state.progress, "max": 100}}, state.progress + "%")
+        ]),
+        h("footer.modal-card-foot", {}, [
+          h("a.button", {on: {click: () => msg.send(cancelFileImport())}}, "Cancel")
         ]),
       ]),
     ])

src/server.ts

@@ -1,6 +1,7 @@
 import { Component, h, Message, ConnectParams, RenderParams } from 'kaiju'
 import { update } from 'immupdate'
 import { Observable } from 'kaiju/observable'
+import { Connection } from "./server/connection"
 
 
 // TODO: At the moment - access to the websocket is not provided anywhere. Which we will need
@@ -16,25 +17,28 @@ const Connected: ConnectionState = { type: 'Connected' }
 const Retrying: ConnectionState = { type: 'Retrying' }
 const WaitingToRetry: ConnectionState = { type: 'WaitingToRetry' }
 
+//-----------------------------------------------------------------------------------------
 export default function(props: Props) {
 	return Component<Props, State>({ name: 'server', props, initState, connect, render })
 }
 
+//-----------------------------------------------------------------------------------------
 interface Props {
   url: string
 }
 
+//-----------------------------------------------------------------------------------------
 interface State {
   url: string,
 	state: ConnectionState,
   timeout: number,
   timeToRetry: number,
-  ws?: WebSocket,
+  connection: Connection,
 }
 
 //-----------------------------------------------------------------------------------------
 function initState(initProps: Props) {
-	return { url: initProps.url, state: WaitingToRetry, timeout: 1, ws: undefined, timeToRetry: 0 }
+	return { url: initProps.url, state: WaitingToRetry, timeout: 1, connection: Connection.getInstance(), timeToRetry: 0 }
 }
 
 //-----------------------------------------------------------------------------------------
@@ -59,14 +63,10 @@ function connect({ on, msg }: ConnectParams<{}, State>) {
     return update(state, {timeToRetry: timeToRetry})
   });
   on(tryReconnect, state => {
-    console.log("Connecting: " + state.url)
-    let ws = new WebSocket(state.url)
-    ws.onopen = () => msg.send(connected())
-    ws.onclose = () => msg.send(disconnected())
-    ws.onmessage = (evt) => {
-      console.log("Message: " + evt.data)
-    }
-    return update(state, { ws: ws, state: Retrying })
+    state.connection.connect(state.url);
+    state.connection.onopen = () => msg.send(connected())
+    state.connection.onclose = () => msg.send(disconnected())
+    return update(state, { state: Retrying })
   });
   on(connected, state => update(state, {state: Connected, timeout: 1, timeToRetry: 1}))
 

src/server/connection.ts

@@ -0,0 +1,31 @@
+//--------------------------------------------------------------------------------------------------
+// A simple WebSocket wrapped in a singleton so that we have a single point of access to the server.
+export class Connection {
+  private static _instance?:Connection = undefined;
+  ws: WebSocket;
+
+  //------------------------------------------------------------------------------------------------
+  public static getInstance(): Connection {
+    if (!Connection._instance) {
+      Connection._instance = new Connection()
+    }
+    return Connection._instance
+  }
+
+  //------------------------------------------------------------------------------------------------
+  constructor() {}
+
+  //------------------------------------------------------------------------------------------------
+  connect(url: string) {
+    this.ws = new WebSocket(url)
+    this.ws.onopen = () => this.onopen()
+    this.ws.onclose = () => this.onclose()
+  }
+
+  //------------------------------------------------------------------------------------------------
+  onopen() {}
+
+  //------------------------------------------------------------------------------------------------
+  onclose() {}
+}
+