New API - POC - stage 1

core/lib/sync/index.ts

@@ -7,6 +7,7 @@ import * as localForage from 'localforage'
 import UniversalStorage from '@vue-storefront/core/store/lib/storage'
 import { currentStoreView } from '../multistore'
 import { isServer } from '@vue-storefront/core/helpers'
+import Task from "core/lib/sync/types/Task";
 
 /** Syncs given task. If user is offline requiest will be sent to the server after restored connection */
 function queue (task) {
@@ -26,7 +27,7 @@ function queue (task) {
 }
 
 /** Runs given task. If user is offline request will fail */
-function execute (task) { // not offline task
+function execute(task) : Promise<Task>{ // not offline task
   const storeView = currentStoreView()
   const dbNamePrefix = storeView.storeCode ? storeView.storeCode + '-' : ''
   task = _prepareTask(task)

core/modules/api/types/Request.ts

@@ -0,0 +1,7 @@
+export interface RequestOptions {
+  dryRun?: boolean
+  forceClientState?: boolean
+  payload?: any
+  silent?: boolean
+  callbackEvent?: boolean | string
+}

core/modules/cart/store/actions.ts

@@ -58,23 +58,24 @@ const actions: ActionTree<CartState, RootState> = {
   save (context) {
     context.commit(types.CART_SAVE)
   },
-  serverPull (context, { forceClientState = false, dryRun = false }) { // pull current cart FROM the server
+  serverPull(context, {forceClientState = false, dryRun = false}) { // pull current cart FROM the server
     if (config.cart.synchronize && !isServer) {
-      const newItemsHash = sha3_224(JSON.stringify({ items: context.state.cartItems, token: context.state.cartServerToken }))
+      const newItemsHash = sha3_224(JSON.stringify({
+        items: context.state.cartItems,
+        token: context.state.cartServerToken
+      }))
       if ((Date.now() - context.state.cartServerPullAt) >= CART_PULL_INTERVAL_MS || (newItemsHash !== context.state.cartItemsHash)) {
         context.state.cartServerPullAt = Date.now()
         context.state.cartItemsHash = newItemsHash
-        return TaskQueue.execute({ url: config.cart.pull_endpoint, // sync the cart
-          payload: {
-            method: 'GET',
-            headers: { 'Content-Type': 'application/json' },
-            mode: 'cors'
+        return context.dispatch(
+          "apiFetchCartProducts",
+          {
+            forceClientState,
+            dryRun,
+            callbackEvent: 'store:cart/servercartAfterPulled'
           },
-          silent: true,
-          force_client_state: forceClientState,
-          dry_run: dryRun,
-          callback_event: 'store:cart/servercartAfterPulled'
-        }).then(task => {
+          { root: true }
+        ).then(task => {
           const storeView = currentStoreView()
           if ((Date.now() - context.state.cartServerMethodsRefreshAt) >= CART_METHODS_INTERVAL_MS) {
             context.state.cartServerMethodsRefreshAt = Date.now()

core/modules/cart/types/ApiCartActions.ts

@@ -0,0 +1,6 @@
+import {Action, ActionTree} from "vuex";
+
+export interface ApiCartActions<S, R> extends ActionTree<S, R> {
+  apiFetchCartProducts: Action<S, R>,
+  [key: string]: Action<S, R>;
+}

src/modules/api-other-backend/index.ts

@@ -0,0 +1,11 @@
+import { VueStorefrontModule, VueStorefrontModuleConfig } from '@vue-storefront/core/lib/module'
+import { module } from './store'
+
+const KEY = 'api-other-backend';
+
+const moduleConfig: VueStorefrontModuleConfig = {
+  store: { modules: [{ key: KEY, module }] },
+  key: KEY
+};
+
+export const ApiOtherBackend = new VueStorefrontModule(moduleConfig);

src/modules/api-other-backend/store/actions.ts

@@ -0,0 +1,10 @@
+import { ActionTree } from 'vuex'
+import RootState from '@vue-storefront/core/types/RootState'
+import ClaimsState from '../types/ApiState'
+import cart from './api/cart';
+
+const actions: ActionTree<ClaimsState, RootState> = {
+  ...cart
+};
+
+export default actions

src/modules/api-other-backend/store/api/cart.ts

@@ -0,0 +1,31 @@
+import { ActionContext } from 'vuex';
+import { TaskQueue } from '@vue-storefront/core/lib/sync';
+import config from 'config'
+import Task from '@vue-storefront/core/lib/sync/types/Task';
+import RootState from '@vue-storefront/core/types/RootState'
+import ApiState from "../../types/ApiState";
+import { ApiCartActions } from '@vue-storefront/core/modules/cart/types/ApiCartActions';
+import { RequestOptions } from '@vue-storefront/core/modules/api/types/Request';
+
+
+const cart: ApiCartActions<ApiState, RootState> = {
+  apiFetchCartProducts: {
+    root: true,
+    handler(context: ActionContext<ApiState, RootState>, {forceClientState = false, dryRun = false, callbackEvent = false}: RequestOptions): Promise<Task> {
+      return TaskQueue.execute({
+        url: `${config.backendUrl}/cart`, // sync the cart
+        payload: {
+          method: 'GET',
+          headers: {'Content-Type': 'application/json'},
+          mode: 'cors'
+        },
+        silent: true,
+        force_client_state: forceClientState,
+        dry_run: dryRun,
+        callback_event: callbackEvent
+      });
+    }
+  }
+};
+
+export default cart

src/modules/api-other-backend/store/index.ts

@@ -0,0 +1,9 @@
+import { Module } from 'vuex'
+import actions from './actions'
+import RootState from '@vue-storefront/core/types/RootState'
+import ApiState from '../types/ApiState'
+
+export const module: Module<ApiState, RootState> = {
+  namespaced: true,
+  actions
+};

src/modules/api-other-backend/types/ApiState.ts

@@ -0,0 +1,3 @@
+export default interface ApiState {
+
+}

src/modules/api-vue-storefront-extended/index.ts

@@ -0,0 +1,11 @@
+import { VueStorefrontModule, VueStorefrontModuleConfig } from '@vue-storefront/core/lib/module'
+import { module } from './store'
+
+const KEY = 'api-vue-storefront-extended';
+
+const moduleConfig: VueStorefrontModuleConfig = {
+  store: { modules: [{ key: KEY, module }] },
+  key: KEY
+};
+
+export const ApiVueStorefrontExtended = new VueStorefrontModule(moduleConfig);

src/modules/api-vue-storefront-extended/store/actions.ts

@@ -0,0 +1,10 @@
+import { ActionTree } from 'vuex'
+import RootState from '@vue-storefront/core/types/RootState'
+import ClaimsState from '../types/ApiState'
+import cart from './api/cart';
+
+const actions: ActionTree<ClaimsState, RootState> = {
+  ...cart
+};
+
+export default actions

src/modules/api-vue-storefront-extended/store/api/cart.ts

@@ -0,0 +1,12 @@
+import RootState from '@vue-storefront/core/types/RootState'
+import ApiState from "../../types/ApiState";
+import { ApiCartActions } from '@vue-storefront/core/modules/cart/types/ApiCartActions';
+import baseCartActions from '../../../api-vue-storefront/store/api/cart';
+
+
+const cart: ApiCartActions<ApiState, RootState> = {
+  ...baseCartActions // import all base cart actions
+  // replace override base ones with whatever you want or add your own
+};
+
+export default cart

src/modules/api-vue-storefront-extended/store/index.ts

@@ -0,0 +1,9 @@
+import { Module } from 'vuex'
+import actions from './actions'
+import RootState from '@vue-storefront/core/types/RootState'
+import ApiState from '../types/ApiState'
+
+export const module: Module<ApiState, RootState> = {
+  namespaced: true,
+  actions
+};

src/modules/api-vue-storefront-extended/types/ApiState.ts

@@ -0,0 +1,5 @@
+import BaseApiState from '../../api-vue-storefront/types/ApiState';
+
+export default interface ApiState extends BaseApiState {
+
+}

src/modules/api-vue-storefront/index.ts

@@ -0,0 +1,11 @@
+import { VueStorefrontModule, VueStorefrontModuleConfig } from '@vue-storefront/core/lib/module'
+import { module } from './store'
+
+const KEY = 'api-vue-storefront';
+
+const moduleConfig: VueStorefrontModuleConfig = {
+  store: { modules: [{ key: KEY, module }] },
+  key: KEY
+};
+
+export const ApiVueStorefront = new VueStorefrontModule(moduleConfig);

src/modules/api-vue-storefront/store/actions.ts

@@ -0,0 +1,10 @@
+import { ActionTree } from 'vuex'
+import RootState from '@vue-storefront/core/types/RootState'
+import ClaimsState from '../types/ApiState'
+import cart from './api/cart';
+
+const actions: ActionTree<ClaimsState, RootState> = {
+  ...cart
+};
+
+export default actions

src/modules/api-vue-storefront/store/api/cart.ts

@@ -0,0 +1,31 @@
+import { ActionContext } from 'vuex';
+import { TaskQueue } from '@vue-storefront/core/lib/sync';
+import config from 'config'
+import Task from '@vue-storefront/core/lib/sync/types/Task';
+import RootState from '@vue-storefront/core/types/RootState'
+import ApiState from "../../types/ApiState";
+import { ApiCartActions } from '@vue-storefront/core/modules/cart/types/ApiCartActions';
+import { RequestOptions } from '@vue-storefront/core/modules/api/types/Request';
+
+
+const cart: ApiCartActions<ApiState, RootState> = {
+  apiFetchCartProducts: {
+    root: true,
+    handler(context: ActionContext<ApiState, RootState>, {forceClientState = false, dryRun = false, callbackEvent = false}: RequestOptions): Promise<Task> {
+      return TaskQueue.execute({
+        url: config.cart.pull_endpoint, // sync the cart
+        payload: {
+          method: 'GET',
+          headers: {'Content-Type': 'application/json'},
+          mode: 'cors'
+        },
+        silent: true,
+        force_client_state: forceClientState,
+        dry_run: dryRun,
+        callback_event: callbackEvent
+      });
+    }
+  }
+};
+
+export default cart

src/modules/api-vue-storefront/store/index.ts

@@ -0,0 +1,9 @@
+import { Module } from 'vuex'
+import actions from './actions'
+import RootState from '@vue-storefront/core/types/RootState'
+import ApiState from '../types/ApiState'
+
+export const module: Module<ApiState, RootState> = {
+  namespaced: true,
+  actions
+};

src/modules/api-vue-storefront/types/ApiState.ts

@@ -0,0 +1,3 @@
+export default interface ApiState {
+
+}

src/modules/index.ts

@@ -1,5 +1,8 @@
 // import { extendModule } from '@vue-storefront/core/lib/module'
 import { VueStorefrontModule } from '@vue-storefront/core/lib/module'
+import { ApiVueStorefront } from './api-vue-storefront';
+//import { ApiVueStorefrontExtended } from './api-vue-storefront-extended';
+//import { ApiOtherBackend } from './api-other-backend';
 import { Catalog } from "@vue-storefront/core/modules/catalog"
 import { Cart } from '@vue-storefront/core/modules/cart'
 import { Checkout } from '@vue-storefront/core/modules/checkout'
@@ -52,6 +55,9 @@ import { InstantCheckout } from './instant-checkout'
  * - Wishlist
  */
 export const registerModules: VueStorefrontModule[] = [
+  ApiVueStorefront,
+//ApiVueStorefrontExtended,
+//ApiOtherBackend,
   Checkout,
   Catalog,
   Cart,