From e13f90a6cc1e8bda7455d3b80ac12554a8a04bb7 Mon Sep 17 00:00:00 2001
From: riqo <hernandeze2@xavier.edu>
Date: Wed, 23 Jun 2021 08:48:58 -0500
Subject: [PATCH] add connectionStatus state and component

---
 src/main.ts                                |  2 ++
 src/render/components/connectionStatus.vue | 26 ++++++++++++++++++++++
 src/render/components/header.vue           |  4 ++++
 src/render/listeners.ts                    |  3 ++-
 src/render/shared/connectionStatus.ts      |  2 ++
 src/session.ts                             |  6 ++---
 6 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 src/render/components/connectionStatus.vue

diff --git a/src/main.ts b/src/main.ts
index a360835..efa8f14 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -24,6 +24,8 @@ export default async function main() {
     /* launch browser window */
     await createWindow();
 
+    console.log('[Session]: Connection Alive: ', "loading");
+
     try {
         authState = await accountAuth() as AuthState;
     } catch(e) {
diff --git a/src/render/components/connectionStatus.vue b/src/render/components/connectionStatus.vue
new file mode 100644
index 0000000..7dccf1a
--- /dev/null
+++ b/src/render/components/connectionStatus.vue
@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <div v-if="isAlive">Nominal</div>
+        <div v-else>Connecting</div>
+    </div>
+</template>
+
+
+<script lang="ts">
+
+import { defineComponent } from 'vue'
+import { isAlive } from "@/render/shared/connectionStatus";
+
+export default defineComponent({
+    name: "ConnectionStatus",
+
+    setup() {
+        return {
+            isAlive
+        }
+    }
+
+})
+
+</script>
+
diff --git a/src/render/components/header.vue b/src/render/components/header.vue
index ebc47c6..a97f061 100644
--- a/src/render/components/header.vue
+++ b/src/render/components/header.vue
@@ -9,6 +9,7 @@
         class="menuButton minimizeButton"
         @click.prevent="postNavBarMin"
       />
+      <connection-status />
     </span>
 </template>
 
@@ -18,8 +19,11 @@
     import { defineComponent } from "vue";
     import { postNavBar } from "@/render/ipc";
 
+    import ConnectionStatus from "./connectionStatus.vue";
+
     export default defineComponent({
         name: "Header",
+        components: { ConnectionStatus },
         setup() {
             const postNavBarExit = () => postNavBar('close');
             const postNavBarMin = () => postNavBar('min');
diff --git a/src/render/listeners.ts b/src/render/listeners.ts
index 0a05208..3a7b547 100644
--- a/src/render/listeners.ts
+++ b/src/render/listeners.ts
@@ -12,6 +12,7 @@ const SET_PROFILE_CHANNEL = "set-profile";
 const INIT_MESSAGES_CHANNEL = "init-messages";
 const ADD_MESSAGE_CHANNEL = "add-message";
 const UPDATE_MESSAGE_CHANNEL = "update-message";
+const CONNECTION_STATUS_CHANNEL = "set-connection-status";
 
 export const setProfileListener = new IpcRendererListener({
     channel: SET_PROFILE_CHANNEL,
@@ -35,7 +36,7 @@ export const updateMessagesListener = new IpcRendererListener({
 });
 
 export const connectionStatusListener = new IpcRendererListener({
-    channel: UPDATE_MESSAGE_CHANNEL,
+    channel: CONNECTION_STATUS_CHANNEL,
     listenerCallback: setConnectionStatus
 });
 
diff --git a/src/render/shared/connectionStatus.ts b/src/render/shared/connectionStatus.ts
index 8e675dd..7fb15eb 100644
--- a/src/render/shared/connectionStatus.ts
+++ b/src/render/shared/connectionStatus.ts
@@ -2,9 +2,11 @@
 import { ref } from "vue";
 
 export const isAlive = ref(false);
+
 export const loading = ref(true);
 
 export const setConnectionStatus: IpcListenerCallback<boolean | null> = (payload) => {
+    console.log('received payload', payload)
     if (payload) {
         isAlive.value = payload;
     } else {
diff --git a/src/session.ts b/src/session.ts
index 01a105c..912aa68 100644
--- a/src/session.ts
+++ b/src/session.ts
@@ -60,9 +60,9 @@ const onMessageCallback = (payload: string) => {
 
 }
 
-const onConnectionStatusCallback = (alive: boolean) => {
-    console.log('[Session]: Connection Alive: ', alive);
-    // ipcEmit('connection-state', alive);
+const onConnectionStatusCallback = (isAlive: boolean | Error) => {
+    console.log('[Session]: Connection Alive: ', isAlive);
+    ipcEmit('set-connection-status', isAlive);
 }
 
 const { connect, send, close } = useWebsockets(
-- 
2.43.0