add a new action to handle a list of service workers

marianstdt · May 16, 2018 · 8097b4a · 8097b4a
1 parent b9662da
commit 8097b4a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/pages/_lang/serviceworker.vue b/pages/_lang/serviceworker.vue
@@ -95,6 +95,7 @@ import CodeViewer from '~/components/CodeViewer.vue';
 import StartOver from '~/components/StartOver.vue';
 
 import * as serviceworker from '~/store/modules/serviceworker';
+import { ServiceWorker } from '~/store/modules/serviceworker';
 
 const ServiceworkerState = namespace(serviceworker.name, State);
 const ServiceworkerAction = namespace(serviceworker.name, Action);
@@ -111,19 +112,23 @@ const ServiceworkerAction = namespace(serviceworker.name, Action);
 export default class extends Vue {
   public isBuilding = false;
   public serviceworker$: number | null = null;
+  public serviceworkers$: ServiceWorker[];
   public error: string | null = null;
   public viewerSize = '25rem';
 
+  @ServiceworkerState serviceworkers: ServiceWorker[];
   @ServiceworkerState serviceworker: number;
   @ServiceworkerState serviceworkerPreview: string;
   @ServiceworkerState webPreview: string;
   @ServiceworkerState archive: string;
 
   @ServiceworkerAction downloadServiceWorker;
   @ServiceworkerAction getCode;
+  @ServiceworkerAction getServiceworkers;
 
-  public created(): void {
-    this.serviceworker$ = this.serviceworker;
+  async created(){
+    await this.getServiceworkers();
+    this.serviceworker$ = this.serviceworkers[0].id;
   }
 
   public async download(): Promise<void> {

diff --git a/store/modules/serviceworker/serviceworker.actions.ts b/store/modules/serviceworker/serviceworker.actions.ts
@@ -1,5 +1,5 @@
 import { ActionTree, MutationTree, GetterTree, ActionContext } from 'vuex';
-import { State, types } from '~/store/modules/serviceworker';
+import { State, types, ServiceWorker } from '~/store/modules/serviceworker';
 import { RootState } from 'store';
 
 const apiUrl = `${process.env.apiUrl}/serviceworkers`;
@@ -8,6 +8,7 @@ const apiUrl = `${process.env.apiUrl}/serviceworkers`;
 export interface Actions<S, R> extends ActionTree<S, R> {
     downloadServiceWorker(context: ActionContext<S, R>, serviceWorkerId: number): Promise<void>;
     getCode(context: ActionContext<S, R>, serviceworker: number): Promise<void>;
+    getServiceworkers(context: ActionContext<S, R>): Promise<void>;
     resetStates(context: ActionContext<S, R>): void;
 }
 
@@ -47,6 +48,24 @@ export const actions: Actions<State, RootState> = {
             }
         });
     },
+    async getServiceworkers({ commit }): Promise<void> {
+        return new Promise<void>(async (resolve, reject) => {
+            try{
+                const result = new Array<ServiceWorker>();
+
+                result.push(<ServiceWorker>{id: 1, webPreview: '', serviceworkerPreview: ''});
+                result.push(<ServiceWorker>{id: 2, webPreview: '', serviceworkerPreview: ''});
+                result.push(<ServiceWorker>{id: 3, webPreview: '', serviceworkerPreview: ''});
+                result.push(<ServiceWorker>{id: 4, webPreview: '', serviceworkerPreview: ''});
+
+                commit(types.UPDATE_SERVICEWORKERS, result);
+
+                resolve();
+            }
+            catch{              
+            }
+        });
+    },
     resetStates({ commit }): void {
         commit(types.RESET_STATES);
     }