eur2 · November 15, 2021 09:12 · Jun 4, 2020 · Jun 4, 2020 · Jun 4, 2020 · Jun 4, 2020
diff --git a/usage.js b/usage.js
@@ -1,4 +1,4 @@
-import { http } from './httpStore.js'
+import http from './httpStore.js'
 
 // create store and set initial value
 const cart = http(window.cart)

diff --git a/httpStore.js b/httpStore.js
@@ -1,6 +1,7 @@
 import { writable } from 'svelte/store'
 
 // returns a store with HTTP access functions for get, post, patch, delete
+// anytime an HTTP request is made, the store is updated and all subscribers are notified.
 export default function(initial) {
   // create the underlying store
   const store = writable(initial)

diff --git a/usage.js b/usage.js
@@ -3,14 +3,17 @@ import { http } from './httpStore.js'
 // create store and set initial value
 const cart = http(window.cart)
 
-// subscribe to changes to cart
+// any component can subscribe to changes
 cart.subscribe($cart => console.log('Cart was updated: ', $cart))
 
-// add item to cart
+// issue HTTP POST to add item to cart
 cart.post('/cart', {productId: 123, quantity: 4})
+// prints: Cart was updated: ...
 
-// delete item '123' from cart
+// issue HTTP DELETE item '123' from cart
 cart.delete('/cart/123')
+// prints: Cart was updated: ...
 
-// refresh cart
-cart.get('/cart')
+// issue HTTP GET to refresh cart
+cart.get('/cart')
+// prints: Cart was updated: ...
diff --git a/httpStore.js b/httpStore.js
@@ -3,49 +3,49 @@ import { writable } from 'svelte/store'
 // returns a store with HTTP access functions for get, post, patch, delete
 export default function(initial) {
   // create the underlying store
-	const store = writable(initial)
-	
+  const store = writable(initial)
+
   // define a request function that will do `fetch` and update store when request finishes
-	store.request = async (method, url, params=null) => {
-		// before we fetch, clear out previous errors and set `loading` to `true`
+  store.request = async (method, url, params=null) => {
+    // before we fetch, clear out previous errors and set `loading` to `true`
     store.update(data => {
-			delete data.errors
+      delete data.errors
       data.loading = true
-      
-			return data
-		})
-		
+
+      return data
+    })
+
     // define headers and body
-		const headers = {
-			"Content-type": "application/json"
-		}
-		const body = params ? JSON.stringify(params) : undefined
-    
+    const headers = {
+      "Content-type": "application/json"
+    }
+    const body = params ? JSON.stringify(params) : undefined
+
     // execute fetch
-		const response = await fetch(url, { method, body, headers })
-		// pull out json body
+    const response = await fetch(url, { method, body, headers })
+    // pull out json body
     const json = await response.json()
-		
+
     // if response is 2xx
-		if (response.ok) {
+    if (response.ok) {
       // update the store, which will cause subscribers to be notified
-			store.set(json)
-		} else {
+      store.set(json)
+    } else {
       // response failed, set `errors` and clear `loading` flag
-			store.update(data => {
+      store.update(data => {
         data.loading = false
         data.errors = json.errors
         return data
       })
-		}
-	}
-	
+    }
+  }
+
   // convenience wrappers for get, post, patch, and delete
-	store.get = (url) => store.request('GET', url)
-	store.post = (url, params) => store.request('POST', url, params)
-	store.patch = (url, params) => store.request('PATCH', url, params)
-	store.delete = (url, params) => store.request('DELETE', url, params)
-	
+  store.get = (url) => store.request('GET', url)
+  store.post = (url, params) => store.request('POST', url, params)
+  store.patch = (url, params) => store.request('PATCH', url, params)
+  store.delete = (url, params) => store.request('DELETE', url, params)
+
   // return the customized store
-	return store
+  return store
 }
diff --git a/httpStore.js b/httpStore.js
@@ -0,0 +1,51 @@
+import { writable } from 'svelte/store'
+
+// returns a store with HTTP access functions for get, post, patch, delete
+export default function(initial) {
+  // create the underlying store
+	const store = writable(initial)
+
+  // define a request function that will do `fetch` and update store when request finishes
+	store.request = async (method, url, params=null) => {
+		// before we fetch, clear out previous errors and set `loading` to `true`
+    store.update(data => {
+			delete data.errors
+      data.loading = true
+
+			return data
+		})
+
+    // define headers and body
+		const headers = {
+			"Content-type": "application/json"
+		}
+		const body = params ? JSON.stringify(params) : undefined
+
+    // execute fetch
+		const response = await fetch(url, { method, body, headers })
+		// pull out json body
+    const json = await response.json()
+
+    // if response is 2xx
+		if (response.ok) {
+      // update the store, which will cause subscribers to be notified
+			store.set(json)
+		} else {
+      // response failed, set `errors` and clear `loading` flag
+			store.update(data => {
+        data.loading = false
+        data.errors = json.errors
+        return data
+      })
+		}
+	}
+
+  // convenience wrappers for get, post, patch, and delete
+	store.get = (url) => store.request('GET', url)
+	store.post = (url, params) => store.request('POST', url, params)
+	store.patch = (url, params) => store.request('PATCH', url, params)
+	store.delete = (url, params) => store.request('DELETE', url, params)
+
+  // return the customized store
+	return store
+}
diff --git a/usage.js b/usage.js
@@ -0,0 +1,16 @@
+import { http } from './httpStore.js'
+
+// create store and set initial value
+const cart = http(window.cart)
+
+// subscribe to changes to cart
+cart.subscribe($cart => console.log('Cart was updated: ', $cart))
+
+// add item to cart
+cart.post('/cart', {productId: 123, quantity: 4})
+
+// delete item '123' from cart
+cart.delete('/cart/123')
+
+// refresh cart
+cart.get('/cart')
No results found