feat: show snackbar

src/App.vue

@@ -1,15 +1,10 @@
 <template>
-
   <v-app>
-
     <v-app-bar app v-if="!showNotEmbeddError">
-
       <v-toolbar-title class="headline text-uppercase mx-0 pa-0">
-
         <span @click="showDev()">WELCOME TO DUI3</span>
 
-        <span class="font-weight-light">{{$store.state.hostAppName}}</span>
-
+        <span class="font-weight-light">{{ $store.state.hostAppName }}</span>
       </v-toolbar-title>
 
       <v-spacer></v-spacer>
@@ -24,11 +19,9 @@
         fab
         :ripple="false"
         @click.native="showAddNewReceiver = true"
-        style="margin-right:120px"
+        style="margin-right: 120px"
       >
-
         <v-icon>cloud_download</v-icon>
-
       </v-btn>
 
       <!-- <v-btn
@@ -61,7 +54,6 @@
         <v-icon>account_circle</v-icon>
 
       </v-btn> -->
-
     </v-app-bar>
 
     <v-dialog
@@ -70,12 +62,10 @@
       xxxfullscreen
       v-if="!showNotEmbeddError"
     >
-
       <NewClient
         :is-visible="showAddNewReceiver"
         @close="showAddNewReceiver = false"
       ></NewClient>
-
     </v-dialog>
 
     <v-dialog
@@ -84,24 +74,17 @@
       xxxfullscreen
       v-if="!showNotEmbeddError"
     >
-
       <NewClientSender
         :is-visible="showAddNewSender"
         @close="showAddNewSender = false"
       ></NewClientSender>
-
     </v-dialog>
 
     <v-content v-if="!showNotEmbeddError">
-
-      <v-container grid-list-md pa-0>
-
-        <v-layout row wrap v-show="$store.state.accounts.length === 0">
-
+      <v-container fill-height pa-0>
+        <v-layout v-show="$store.state.accounts.length === 0" height="100%">
           <v-flex xs12>
-
-            <v-card color="primary" dark>
-
+            <v-card color="primary" pa-0 dark height="100%">
               <v-img
                 contain
                 src="https://robohash.org/specklesucks"
@@ -109,43 +92,38 @@
               ></v-img>
 
               <v-card-text class="text-sm-center white--text">
-
                 <v-btn block class="mt-2" @click.native="showAccountsPopup()">
-                   Do something
+                  Send Everything Test
                 </v-btn>
 
+                <v-btn block class="mt-2" plain small @click.native="showDev()">
+                  Show Dev Tools
+                </v-btn>
               </v-card-text>
-
             </v-card>
-
           </v-flex>
-
         </v-layout>
-
       </v-container>
-
     </v-content>
 
+    <v-snackbar v-model="showNotification" color="purple">
+      {{ notification }}
+    </v-snackbar>
+
     <v-dialog v-model="showNotEmbeddError" persistent width="500">
-
       <v-card>
-
         <v-card-title class="headline primary white--text" primary-title>
-           Welcome to the future DUI3 🚀
+          Welcome to the future DUI3 🚀
         </v-card-title>
 
         <v-img src="https://robohash.org/speckled" height="210" contain></v-img>
 
         <v-card-text class="mt-5">
-           Just kidding! This is a test :) Please embed me to use any bindings.
+          Just kidding! This is a test :) Please embed me to use any bindings.
         </v-card-text>
-
       </v-card>
-
     </v-dialog>
-
   </v-app>
-
 </template>
 
 <script>
@@ -154,7 +132,6 @@ import NewClient from "./components/NewClient.vue";
 import NewClientSender from "./components/NewClientSender.vue";
 import ClientReceiver from "./components/ClientReceiver.vue";
 import ClientSender from "./components/ClientSender.vue";
-var pluralize = require("pluralize");
 
 export default {
   name: "App",
@@ -165,6 +142,15 @@ export default {
     ClientReceiver,
     ClientSender,
   },
+  created() {
+    this.$store.subscribe((mutation, state) => {
+      console.log(mutation.type);
+      if (mutation.type === "SET_SHOW_NOTIFICATION") {
+        this.notification = state.notification;
+        this.showNotification = true;
+      }
+    });
+  },
   computed: {
     receivers() {
       return this.$store.state.clients.filter((cl) => cl.type === "receiver");
@@ -178,6 +164,8 @@ export default {
       showAddNewReceiver: false,
       showAddNewSender: false,
       showNotEmbeddError: false,
+      notification: "",
+      showNotification: false,
     };
   },
   methods: {
@@ -186,6 +174,7 @@ export default {
       UiBindings.showDev();
     },
     showAccountsPopup() {
+      console.log("send starting");
       UiBindings.showAccountsPopup();
     },
   },
@@ -195,12 +184,6 @@ export default {
       this.showNotEmbeddError = true;
       return;
     }
-
-    this.$store.dispatch("getAccounts");
-    this.$store.dispatch("getApplicationHostName");
-    this.$store.dispatch("getExistingClients");
-
-    this.$store.dispatch("getReceiverOptions");
   },
 };
 </script>
@@ -210,4 +193,3 @@ export default {
   color: #000 !important;
 }
 </style>
-

src/main.js

@@ -1,56 +1,62 @@
-import Vue from 'vue'
-import vuetify from './plugins/vuetify'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-import Axios from 'axios'
-import 'roboto-fontface/css/roboto/roboto-fontface.css'
-import 'material-design-icons-iconfont/dist/material-design-icons.css'
+import Vue from "vue";
+import vuetify from "./plugins/vuetify";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import Axios from "axios";
+import "roboto-fontface/css/roboto/roboto-fontface.css";
+import "material-design-icons-iconfont/dist/material-design-icons.css";
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
-import VueTimeago from 'vue-timeago'
-Vue.use( VueTimeago, {
-  name: 'Timeago',
-  locale: 'en',
-} )
+import VueTimeago from "vue-timeago";
+Vue.use(VueTimeago, {
+  name: "Timeago",
+  locale: "en",
+});
 
 // if IE <= 11, disable REST caching since IE has caching problems
-let ua = window.navigator.userAgent
-if (ua.indexOf('MSIE ') > 0 || ua.indexOf('Trident/' > 0)) {
-  Axios.defaults.headers.common[ 'Cache-Control' ] = 'no-cache, no-store'
-  Axios.defaults.headers.common[ 'Pragma' ] = 'no-cache'
-  Axios.defaults.headers.common[ 'Expires' ] = '0'
+let ua = window.navigator.userAgent;
+if (ua.indexOf("MSIE ") > 0 || ua.indexOf("Trident/" > 0)) {
+  Axios.defaults.headers.common["Cache-Control"] = "no-cache, no-store";
+  Axios.defaults.headers.common["Pragma"] = "no-cache";
+  Axios.defaults.headers.common["Expires"] = "0";
 }
 
 // set up an event bus on the window, to be used by the SpeckleUiBindings class to send events here
-window.EventBus = new Vue( )
+window.EventBus = new Vue();
 
 // generic route used for quite a bit of comms
-window.EventBus.$on( 'update-client', args => {
-  let cl = JSON.parse( args )
-  console.log( cl )
-  window.Store.commit( 'SET_CLIENT_DATA', cl )
-} )
+window.EventBus.$on("update-client", (args) => {
+  let cl = JSON.parse(args);
+  console.log(cl);
+  window.Store.commit("SET_CLIENT_DATA", cl);
+});
 
 // keeps track of the selected objects count
-window.EventBus.$on( 'update-selection-count', args => {
-  let parsed = JSON.parse( args )
-  if ( window.Store )
-    window.Store.commit( "SET_SELECTION_COUNT", parsed.selectedObjectsCount )
-} )
+window.EventBus.$on("update-selection-count", (args) => {
+  let parsed = JSON.parse(args);
+  if (window.Store)
+    window.Store.commit("SET_SELECTION_COUNT", parsed.selectedObjectsCount);
+});
 
 // keeps track of the selected objects
-window.EventBus.$on('update-selection', args => {
-  let parsed = JSON.parse(args)
+window.EventBus.$on("update-selection", (args) => {
+  let parsed = JSON.parse(args);
   if (window.Store)
-    window.Store.commit("SET_SELECTION_OBJECTS", parsed.selectedObjects)
-})
+    window.Store.commit("SET_SELECTION_OBJECTS", parsed.selectedObjects);
+});
 
-window.Store = store
-window.app = new Vue( {
+// keeps track of the selected objects
+window.EventBus.$on("show-notification", (args) => {
+  console.log(args);
+  if (window.Store) window.Store.commit("SET_SHOW_NOTIFICATION", args);
+});
+
+window.Store = store;
+window.app = new Vue({
   router,
   store,
   vuetify,
-  render: h => h( App )
-} ).$mount( '#app' )
+  render: (h) => h(App),
+}).$mount("#app");

src/store.js

@@ -1,276 +1,374 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import Axios from 'axios'
+import Vue from "vue";
+import Vuex from "vuex";
+import Axios from "axios";
 
-Vue.use( Vuex )
+Vue.use(Vuex);
 
-export default new Vuex.Store( {
+export default new Vuex.Store({
   state: {
     test: {},
-    accounts: [ ],
-    clients: [ ],
+    accounts: [],
+    clients: [],
     hostAppName: null,
     currentFileName: null,
-    errors: [ ],
+    errors: [],
     selectionCount: 0,
-    selectedObjects: [ ],
-    slackInviteUrl: "https://speckle-works.slack.com/join/shared_invite/enQtNjY5Mzk2NTYxNTA4LTU4MWI5ZjdhMjFmMTIxZDIzOTAzMzRmMTZhY2QxMmM1ZjVmNzJmZGMzMDVlZmJjYWQxYWU0MWJkYmY3N2JjNGI",
+    selectedObjects: [],
+    slackInviteUrl:
+      "https://speckle-works.slack.com/join/shared_invite/enQtNjY5Mzk2NTYxNTA4LTU4MWI5ZjdhMjFmMTIxZDIzOTAzMzRmMTZhY2QxMmM1ZjVmNzJmZGMzMDVlZmJjYWQxYWU0MWJkYmY3N2JjNGI",
     canTogglePreview: false,
     canSelectObjects: false,
+    notification: "",
+    showNotification: false,
   },
   mutations: {
-    ADD_CLIENT( state, client ) {
-      if ( !client.hasOwnProperty( "objects" ) ) client.objects = [ ]
-      state.clients.unshift( client )
+    ADD_CLIENT(state, client) {
+      if (!client.hasOwnProperty("objects")) client.objects = [];
+      state.clients.unshift(client);
     },
 
-    UPDATE_CLIENT( state, client ) {
-      const index = state.clients.findIndex( cl => cl._id === client._id )
-      if ( index !== -1 )
-        state.clients.splice( index, 1, client )
-      else
-        console.error( 'client not found', _id )
+    UPDATE_CLIENT(state, client) {
+      const index = state.clients.findIndex((cl) => cl._id === client._id);
+      if (index !== -1) state.clients.splice(index, 1, client);
+      else console.error("client not found", _id);
     },
 
-    REMOVE_CLIENT( state, _id ) {
-      const index = state.clients.findIndex( cl => cl._id === _id )
-      if ( index >= 0 )
-        state.clients.splice( index, 1 )
-      else
-        console.error( 'client not found', _id )
+    REMOVE_CLIENT(state, _id) {
+      const index = state.clients.findIndex((cl) => cl._id === _id);
+      if (index >= 0) state.clients.splice(index, 1);
+      else console.error("client not found", _id);
     },
 
-    SET_CLIENT_DATA( state, props ) {
-      let found = state.clients.find( cl => cl._id === props._id )
-      Object.keys( props ).forEach( key => {
-        found[ key ] = props[ key ]
-      } )
+    SET_CLIENT_DATA(state, props) {
+      let found = state.clients.find((cl) => cl._id === props._id);
+      Object.keys(props).forEach((key) => {
+        found[key] = props[key];
+      });
     },
 
-    DELETE_ALL_CLIENTS( state ) {
-      state.clients = [ ]
+    DELETE_ALL_CLIENTS(state) {
+      state.clients = [];
     },
 
-    SET_ACCOUNTS( state, accounts ) {
-      state.accounts = accounts
+    SET_ACCOUNTS(state, accounts) {
+      state.accounts = accounts;
     },
 
-    SET_ACCOUNT_DATA( state, props ) {
-      let found = state.accounts.find( a => a.AccountId === props.AccountId )
-      Object.keys( props ).forEach( key => {
-        found[ key ] = props[ key ]
-      } )
+    SET_ACCOUNT_DATA(state, props) {
+      let found = state.accounts.find((a) => a.AccountId === props.AccountId);
+      Object.keys(props).forEach((key) => {
+        found[key] = props[key];
+      });
     },
 
-    SET_HOST_APP( state, appName ) {
-      state.hostAppName = appName
+    SET_HOST_APP(state, appName) {
+      state.hostAppName = appName;
     },
 
-    SET_SELECTION_COUNT( state, count ) {
-      state.selectionCount = count
+    SET_SELECTION_COUNT(state, count) {
+      state.selectionCount = count;
     },
 
-    SET_SELECTION_OBJECTS( state, objects ) {
-      state.selectedObjects = objects
+    SET_SELECTION_OBJECTS(state, objects) {
+      state.selectedObjects = objects;
     },
-    SET_canTogglePreview( state, value ) {
-      state.canTogglePreview = value
+    SET_canTogglePreview(state, value) {
+      state.canTogglePreview = value;
+    },
+    SET_canSelectObjects(state, value) {
+      state.canSelectObjects = value;
+    },
+    SET_SHOW_NOTIFICATION(state, value) {
+      state.notification = value;
+      state.showNotification = true;
     },
-    SET_canSelectObjects( state, value ) {
-      state.canSelectObjects = value
-    }
   },
   actions: {
-    bakeReceiver: ( context, client ) => new Promise( async( resolve, reject ) => {
-      await UiBindings.bakeReceiver( JSON.stringify( client ) )
-      client.expired = false
-      client.loading = false
-      context.commit( 'SET_CLIENT_DATA', { _id: client._id, expired: false, loading: false } )
-    } ),
+    bakeReceiver: (context, client) =>
+      new Promise(async (resolve, reject) => {
+        await UiBindings.bakeReceiver(JSON.stringify(client));
+        client.expired = false;
+        client.loading = false;
+        context.commit("SET_CLIENT_DATA", {
+          _id: client._id,
+          expired: false,
+          loading: false,
+        });
+      }),
 
-    addSenderClient: ( context, { account, streamName, objects, filter } ) => new Promise( async( resolve, reject ) => {
-      console.log( streamName, objects )
-      let res = await Axios.post( `${account.RestApi}/streams`, { name: streamName }, { headers: { Authorization: account.Token } } )
-      let stream = res.data.resource
-      console.log( stream )
+    addSenderClient: (context, { account, streamName, objects, filter }) =>
+      new Promise(async (resolve, reject) => {
+        console.log(streamName, objects);
+        let res = await Axios.post(
+          `${account.RestApi}/streams`,
+          { name: streamName },
+          { headers: { Authorization: account.Token } }
+        );
+        let stream = res.data.resource;
+        console.log(stream);
 
-      let client = {...stream }
-      client.filter = filter
-      client.AccountId = account.AccountId
-      client.account = { RestApi: account.RestApi, Email: account.Email, Token: account.Token }
-      client.type = 'sender'
-      client.expired = true
-      client.loading = false
-      client.loadingBlurb = 'This stream might be expired.'
-      client.isLoadingIndeterminate = true
-      client.loadingProgress = 0
-      client.message = ''
-      client.errors = null
-      client.errorMsg = ''
-      client.clientId = null
+        let client = { ...stream };
+        client.filter = filter;
+        client.AccountId = account.AccountId;
+        client.account = {
+          RestApi: account.RestApi,
+          Email: account.Email,
+          Token: account.Token,
+        };
+        client.type = "sender";
+        client.expired = true;
+        client.loading = false;
+        client.loadingBlurb = "This stream might be expired.";
+        client.isLoadingIndeterminate = true;
+        client.loadingProgress = 0;
+        client.message = "";
+        client.errors = null;
+        client.errorMsg = "";
+        client.clientId = null;
 
-      let docName = await UiBindings.getFileName( )
-      let docId = await UiBindings.getDocumentId( )
-      let clientCreationRes = await Axios.post( `${account.RestApi}/clients`, { documentType: context.state.hostAppName, streamId: stream.streamId, documentName: docName, documentGuid: docId, role: 'sender' }, { headers: { Authorization: account.Token } } )
-      client.clientId = clientCreationRes.data.resource._id
+        let docName = await UiBindings.getFileName();
+        let docId = await UiBindings.getDocumentId();
+        let clientCreationRes = await Axios.post(
+          `${account.RestApi}/clients`,
+          {
+            documentType: context.state.hostAppName,
+            streamId: stream.streamId,
+            documentName: docName,
+            documentGuid: docId,
+            role: "sender",
+          },
+          { headers: { Authorization: account.Token } }
+        );
+        client.clientId = clientCreationRes.data.resource._id;
 
-      context.commit( 'ADD_CLIENT', client )
+        context.commit("ADD_CLIENT", client);
 
-      let dupe = {...client }
-      dupe.account = {...dupe.account }
-      delete dupe.account.Token
+        let dupe = { ...client };
+        dupe.account = { ...dupe.account };
+        delete dupe.account.Token;
 
-      console.log( 'Sending this to ui bindings to add as a sender' )
-      console.log( client )
+        console.log("Sending this to ui bindings to add as a sender");
+        console.log(client);
 
-      await UiBindings.addSender( JSON.stringify( client ) )
-      return resolve( )
-    } ),
+        await UiBindings.addSender(JSON.stringify(client));
+        return resolve();
+      }),
 
-    updateSenderClient: ( context, { client, streamName, objects, filter } ) => new Promise( async( resolve, reject ) => {
+    updateSenderClient: (context, { client, streamName, objects, filter }) =>
+      new Promise(async (resolve, reject) => {
+        client.name = streamName;
+        client.filter = filter;
 
-      client.name = streamName
-      client.filter = filter
+        await Axios.put(
+          `${client.account.RestApi}/streams/${client.streamId}`,
+          { name: streamName },
+          { headers: { Authorization: client.account.Token } }
+        ).catch((err) => {
+          console.warn(err);
+        });
 
-      await Axios.put( `${client.account.RestApi}/streams/${client.streamId}`, { name: streamName }, { headers: { Authorization: client.account.Token } } )
-        .catch( err => {
-          console.warn( err )
-        } )
+        context.commit("UPDATE_CLIENT", client);
 
-      context.commit( 'UPDATE_CLIENT', client )
+        console.log("Sending this to ui bindings to add as a sender");
+        console.log(client);
 
-      console.log( 'Sending this to ui bindings to add as a sender' )
-      console.log( client )
+        await UiBindings.updateSender(JSON.stringify(client));
+        return resolve();
+      }),
 
-      await UiBindings.updateSender( JSON.stringify( client ) )
-      return resolve( )
-    } ),
+    addReceiverClient: (context, { account, stream }) =>
+      new Promise(async (resolve, reject) => {
+        let client = { ...stream };
 
-    addReceiverClient: ( context, { account, stream } ) => new Promise( async( resolve, reject ) => {
-      let client = {...stream }
+        client.AccountId = account.AccountId;
+        client.account = {
+          RestApi: account.RestApi,
+          Email: account.Email,
+          Token: account.Token,
+        };
+        client.type = "receiver";
+        client.expired = true;
+        client.loading = false;
+        client.loadingBlurb = "";
+        client.isLoadingIndeterminate = true;
+        client.loadingProgress = 0;
+        client.message = "";
+        client.errors = null;
+        client.errorMsg = "";
+        client.objects = [];
+        client.clientId = null;
+        client.preview = true;
+        let docName = await UiBindings.getFileName();
+        let docId = await UiBindings.getDocumentId();
+        let res = await Axios.post(
+          `${account.RestApi}/clients`,
+          {
+            documentType: context.state.hostAppName,
+            streamId: stream.streamId,
+            documentName: docName,
+            documentGuid: docId,
+            role: "receiver",
+          },
+          { headers: { Authorization: account.Token } }
+        );
+        client.clientId = res.data.resource._id;
+        context.commit("ADD_CLIENT", client);
 
-      client.AccountId = account.AccountId
-      client.account = { RestApi: account.RestApi, Email: account.Email, Token: account.Token }
-      client.type = 'receiver'
-      client.expired = true
-      client.loading = false
-      client.loadingBlurb = ''
-      client.isLoadingIndeterminate = true
-      client.loadingProgress = 0
-      client.message = ''
-      client.errors = null
-      client.errorMsg = ''
-      client.objects = [ ]
-      client.clientId = null
-      client.preview = true
-      let docName = await UiBindings.getFileName( )
-      let docId = await UiBindings.getDocumentId( )
-      let res = await Axios.post( `${account.RestApi}/clients`, { documentType: context.state.hostAppName, streamId: stream.streamId, documentName: docName, documentGuid: docId, role: 'receiver' }, { headers: { Authorization: account.Token } } )
-      client.clientId = res.data.resource._id
-      context.commit( 'ADD_CLIENT', client )
+        let dupe = { ...client };
+        dupe.account = { ...dupe.account };
+        delete dupe.account.Token;
+        await UiBindings.addReceiver(JSON.stringify(client));
+        return resolve();
+      }),
 
-      let dupe = {...client }
-      dupe.account = {...dupe.account }
-      delete dupe.account.Token
-      await UiBindings.addReceiver( JSON.stringify( client ) )
-      return resolve( )
-    } ),
-
-    removeReceiverClient: ( context, client ) => new Promise( async( resolve, reject ) => {
-      await UiBindings.removeClient( JSON.stringify( client ) )
-      try {
-        await Axios.delete( `${client.account.RestApi}/clients/${client.clientId}`, { headers: { Authorization: client.account.Token } } )
-          // TODO: mark stream as deleted too!
-      } catch {}
-      context.commit( 'REMOVE_CLIENT', client._id )
-      console.log( 'hello refresh - this is important' )
-    } ),
-
-    updateClient: ( context, { client, expire } ) => new Promise( async( resolve, reject ) => {
-      // note: real update, with all the heavy object lifting, happens in .NET
-      let res = await Axios.get( `${client.account.RestApi}/streams/${client.streamId}?fields=name,updatedAt`, { headers: { Authorization: client.account.Token } } )
-      console.log( res.data.resource )
-      let cl = { _id: res.data.resource._id, name: res.data.resource.name, updatedAt: res.data.resource.updatedAt, expired: expire }
-      context.commit( 'SET_CLIENT_DATA', cl )
-      let stateClient = context.state.clients.find( cl => cl._id === cl._id )
-      //UiBindings.ClientUpdated( JSON.stringify( stateClient ) ); // propagate to ui, in case something can be done there
-    } ),
-
-    flushClients: ( context ) => new Promise( async( resolve, reject ) => {
-      context.commit( 'DELETE_ALL_CLIENTS' )
-    } ),
-
-    getAccounts: ( context ) => new Promise( async( resolve, reject ) => {
-      let res = await UiBindings.getAccounts( )
-      let accounts = JSON.parse( res )
-
-      accounts.forEach( ac => {
-        ac.fullName = ac.Email + ' - ' + ac.ServerName
-        ac.streams = [ ]
-        ac.validated = false
-        context.dispatch( 'getAccountStreams', ac )
-      } )
-
-      context.commit( 'SET_ACCOUNTS', accounts )
-    } ),
-
-    getAccountStreams: ( context, account ) => new Promise( async( resolve, reject ) => {
-      Axios.get( `${account.RestApi}/streams?fields=streamId,name,updatedAt,parent&deleted=false&isComputedResult=false&sort=updatedAt`, { headers: { Authorization: account.Token } } )
-        .then( res => {
-          res.data.resources.forEach( s => s.fullName = `${s.streamId} - ${s.name}` )
-          let sorted = res.data.resources.sort( ( a, b ) => {
-            let ad = new Date( a.updatedAt )
-            let bd = new Date( b.updatedAt )
-            return ad > bd ? -1 : 1
-          } ).filter( s => s.parent === null )
-          context.commit( 'SET_ACCOUNT_DATA', {...account, validated: true, streams: sorted } )
-          resolve( res.data.resources )
-        } )
-        .catch( err => {
-          // console.log( err )
-          context.commit( 'SET_ACCOUNT_DATA', {...account, validated: false } )
-          reject( err )
-        } )
-    } ),
-
-    getApplicationHostName: ( context ) => new Promise( async( resolve, reject ) => {
-      let res = await UiBindings.getApplicationHostName( )
-      context.commit( 'SET_HOST_APP', res )
-    } ),
-
-    getReceiverOptions: ( context ) => new Promise( async( resolve, reject ) => {
-      let previewCapable = await UiBindings.canTogglePreview( )
-      previewCapable != null ? context.commit( 'SET_canTogglePreview', previewCapable ) : {}
-      let showObjectsCapable = await UiBindings.canSelectObjects( )
-      showObjectsCapable != null ? context.commit( 'SET_canSelectObjects', showObjectsCapable ) : {}
-    } ),
-
-    getExistingClients: ( context ) => new Promise( async( resolve, reject ) => {
-      let clients = JSON.parse( await UiBindings.getFileClients( ) )
-      console.log( clients )
-      if ( clients.length === 0 ) return resolve( )
-      clients.forEach( existingClient => {
+    removeReceiverClient: (context, client) =>
+      new Promise(async (resolve, reject) => {
+        await UiBindings.removeClient(JSON.stringify(client));
         try {
-          let account = context.state.accounts.find( ac => ac.Email === existingClient.account.Email && ac.RestApi === existingClient.account.RestApi )
-          if ( account !== null ) {
-            existingClient.account.Token = account.Token
-            context.commit( 'ADD_CLIENT', existingClient )
+          await Axios.delete(
+            `${client.account.RestApi}/clients/${client.clientId}`,
+            { headers: { Authorization: client.account.Token } }
+          );
+          // TODO: mark stream as deleted too!
+        } catch {}
+        context.commit("REMOVE_CLIENT", client._id);
+        console.log("hello refresh - this is important");
+      }),
+
+    updateClient: (context, { client, expire }) =>
+      new Promise(async (resolve, reject) => {
+        // note: real update, with all the heavy object lifting, happens in .NET
+        let res = await Axios.get(
+          `${client.account.RestApi}/streams/${client.streamId}?fields=name,updatedAt`,
+          { headers: { Authorization: client.account.Token } }
+        );
+        console.log(res.data.resource);
+        let cl = {
+          _id: res.data.resource._id,
+          name: res.data.resource.name,
+          updatedAt: res.data.resource.updatedAt,
+          expired: expire,
+        };
+        context.commit("SET_CLIENT_DATA", cl);
+        let stateClient = context.state.clients.find((cl) => cl._id === cl._id);
+        //UiBindings.ClientUpdated( JSON.stringify( stateClient ) ); // propagate to ui, in case something can be done there
+      }),
+
+    flushClients: (context) =>
+      new Promise(async (resolve, reject) => {
+        context.commit("DELETE_ALL_CLIENTS");
+      }),
+
+    getAccounts: (context) =>
+      new Promise(async (resolve, reject) => {
+        let res = await UiBindings.getAccounts();
+        let accounts = JSON.parse(res);
+
+        accounts.forEach((ac) => {
+          ac.fullName = ac.Email + " - " + ac.ServerName;
+          ac.streams = [];
+          ac.validated = false;
+          context.dispatch("getAccountStreams", ac);
+        });
+
+        context.commit("SET_ACCOUNTS", accounts);
+      }),
+
+    getAccountStreams: (context, account) =>
+      new Promise(async (resolve, reject) => {
+        Axios.get(
+          `${account.RestApi}/streams?fields=streamId,name,updatedAt,parent&deleted=false&isComputedResult=false&sort=updatedAt`,
+          { headers: { Authorization: account.Token } }
+        )
+          .then((res) => {
+            res.data.resources.forEach(
+              (s) => (s.fullName = `${s.streamId} - ${s.name}`)
+            );
+            let sorted = res.data.resources
+              .sort((a, b) => {
+                let ad = new Date(a.updatedAt);
+                let bd = new Date(b.updatedAt);
+                return ad > bd ? -1 : 1;
+              })
+              .filter((s) => s.parent === null);
+            context.commit("SET_ACCOUNT_DATA", {
+              ...account,
+              validated: true,
+              streams: sorted,
+            });
+            resolve(res.data.resources);
+          })
+          .catch((err) => {
+            // console.log( err )
+            context.commit("SET_ACCOUNT_DATA", {
+              ...account,
+              validated: false,
+            });
+            reject(err);
+          });
+      }),
+
+    getApplicationHostName: (context) =>
+      new Promise(async (resolve, reject) => {
+        let res = await UiBindings.getApplicationHostName();
+        context.commit("SET_HOST_APP", res);
+      }),
+
+    getReceiverOptions: (context) =>
+      new Promise(async (resolve, reject) => {
+        let previewCapable = await UiBindings.canTogglePreview();
+        previewCapable != null
+          ? context.commit("SET_canTogglePreview", previewCapable)
+          : {};
+        let showObjectsCapable = await UiBindings.canSelectObjects();
+        showObjectsCapable != null
+          ? context.commit("SET_canSelectObjects", showObjectsCapable)
+          : {};
+      }),
+
+    getExistingClients: (context) =>
+      new Promise(async (resolve, reject) => {
+        let clients = JSON.parse(await UiBindings.getFileClients());
+        console.log(clients);
+        if (clients.length === 0) return resolve();
+        clients.forEach((existingClient) => {
+          try {
+            let account = context.state.accounts.find(
+              (ac) =>
+                ac.Email === existingClient.account.Email &&
+                ac.RestApi === existingClient.account.RestApi
+            );
+            if (account !== null) {
+              existingClient.account.Token = account.Token;
+              context.commit("ADD_CLIENT", existingClient);
               // TODO: update state on server (client: online)
-          } else {
-            console.warn( 'no account found for client. sorrrrry!', existingClient )
+            } else {
+              console.warn(
+                "no account found for client. sorrrrry!",
+                existingClient
+              );
+            }
+          } catch {
+            console.warn(
+              "Error in recreating client " + existingClient.streamId
+            );
           }
-        } catch {
-          console.warn( 'Error in recreating client ' + existingClient.streamId )
-        }
-      } )
-    } ),
+        });
+      }),
 
-    cloneStream: ( context, client ) => new Promise( async( resolve, reject ) => {
-      let res = await Axios.post( `${client.account.RestApi}/streams/${client.streamId}/clone`, null, { headers: { Authorization: client.account.Token } } )
-      console.log( res.data )
-      let tempClient = { _id: client._id, children: res.data.parent.children }
-      context.commit( 'SET_CLIENT_DATA', tempClient )
-    } ),
-
-  }
-} )
+    cloneStream: (context, client) =>
+      new Promise(async (resolve, reject) => {
+        let res = await Axios.post(
+          `${client.account.RestApi}/streams/${client.streamId}/clone`,
+          null,
+          { headers: { Authorization: client.account.Token } }
+        );
+        console.log(res.data);
+        let tempClient = {
+          _id: client._id,
+          children: res.data.parent.children,
+        };
+        context.commit("SET_CLIENT_DATA", tempClient);
+      }),
+  },
+});