From 4aad1e2ae26d81dc75f81a078d2098a827de6965 Mon Sep 17 00:00:00 2001 From: guillemcordoba Date: Mon, 6 Nov 2023 10:19:07 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20@=20holochai?= =?UTF-8?q?n-open-dev/common@9a12f308429afa096661f937685d475fd224dd31=20?= =?UTF-8?q?=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- stores/index.html | 102 ++++++++++++++++++++++++++++++++++------------ 1 file changed, 77 insertions(+), 25 deletions(-) diff --git a/stores/index.html b/stores/index.html index bf69cd2..0abd5ac 100644 --- a/stores/index.html +++ b/stores/index.html @@ -71,6 +71,8 @@

Reactive stores to build hApps

+ +
@@ -155,6 +157,7 @@

Reactive stores to build hApps

- **Promises to contain the latest known value for a certain piece of relevant state in our app** + 

@@ -220,7 +223,11 @@ 
Reactive stores to build hApps

                   "libsodium-wrappers": "https://unpkg.com/modern-isomorphic-ws",
                   "isomorphic-ws": "https://unpkg.com/modern-isomorphic-ws",
                   "blakejs": "https://unpkg.com/modern-isomorphic-ws",
-                  "lodash-es": "https://unpkg.com/modern-isomorphic-ws"
+                  "lodash-es/isEqual.js": "https://unpkg.com/lodash-es/isEqual.js",
+                  "lodash-es/flatMap.js": "https://unpkg.com/lodash-es/flatMap.js",
+                  "lodash-es/uniqWith.js": "https://unpkg.com/lodash-es/uniqWith.js",
+                  "lodash-es": "https://unpkg.com/modern-isomorphic-ws",
+                  "lodash-es/": "https://unpkg.com/modern-isomorphic-ws/"
                 }
               }
             
@@ -241,10 +248,10 @@ 
Reactive stores to build hApps

             class="fragment fade-in"
           >
 const lazyStore = lazyLoad(() => fetch('/some/big/request')); // Build the store
-                                                              // **No request is done yet**
+                                                              // **No request is made yet**
 const unsubscribe1 = lazyStore.subscribe(value => console.log(value)); // Now the request is made
 
-// After a while...
+// After a while, after the fetch completed...
 
 const unsubscribe2 = lazyStore.subscribe(value => console.log(value)); // No new request is made, the
                                                                        // status is automatically "complete"
@@ -253,7 +260,17 @@ 
Reactive stores to build hApps

           
           
             #### Complete This Exercise:
-          
+          
 
           
             
@@ -273,6 +290,7 @@ 
Reactive stores to build hApps

    content:'Second Post'  }
 ]}
 
+            
             
             
@@ -330,7 +352,7 @@ 
Reactive stores to build hApps

 const lazyStore = lazyLoadAndPoll(
   () => fetch('/some/big/request'), 
   4000 // Polling interval in ms 
-); // Build the store, **no request is done yet**
+); // Build the store, **no request is made yet**
 const unsubscribe = lazyStore.subscribe(value => console.log(value)); // Now the request is made
                                                                       // And will continually be made every 4 seconds
 // After a while...
@@ -342,7 +364,7 @@ 
Reactive stores to build hApps

           
             #### Complete This Exercise:
           
-
+          
           
             
             
@@ -428,14 +454,14 @@ 
Reactive stores to build hApps

           

-const lazyMap = new LazyHoloHashMap((agent: AgentPubKey) => // Define the fn to execute for new gets 
+const postsByAuthor = new LazyHoloHashMap((agent: AgentPubKey) => // Define the fn to execute for new gets 
   lazyLoadAndPoll(() => getAllPosts(agent), 4000) // Builds a new store that keeps polling whenever a new agent is requested
 );
-const myPostsStore1 = lazyMap.get(client.myPubKey); // Builds the store bound to "myPubKey"
-const myPostsStore2 = lazyMap.get(client.myPubKey); // Does not build a new store, just returns the same one
-const unsubscribe1 = myPostsStore.subscribe(value => console.log(value)); // Now the request is made
+const myPostsStore1: AsyncReadable<Array<ActionHash>> = postsByAuthor.get(client.myPubKey); // Builds the store bound to "myPubKey"
+const myPostsStore2: AsyncReadable<Array<ActionHash>> = postsByAuthor.get(client.myPubKey); // Does not build a new store, just returns the same one
+const unsubscribe1 = myPostsStore1.subscribe(asyncStatus => console.log(asyncStatus)); // Now the request is made
                                                                           // And will continually be made every 4 seconds
-const unsubscribe2 = myPostsStore.subscribe(value => console.log(value)); // No other requests are made, the polling is already active
+const unsubscribe2 = myPostsStore2.subscribe(asyncStatus => console.log(asyncStatus)); // No other requests are made, the polling is already active
 // After a while...
 unsubscribe1(); // Polling does not stop
 unsubscribe2(); // Last subscriber unsubscribes, polling stops
@@ -473,7 +499,7 @@ 
Reactive stores to build hApps

 
 // Builds an `AsyncReadable` store which lazily fetches all the posts,
 // And keeps fetching the latest version of the post which have subscribers every 1 second to keep it up to date
-export const latestPostVersion: LazyHoloHashMap>; // Implement the map
+export const latestPostVersion: LazyHoloHashMap> = // Implement the map
             
             
@@ -528,7 +558,7 @@ 
Reactive stores to build hApps

             class="fragment fade-in"
           >
 export function deriveAllPosts(alicePostsStore: Readable<Post[]>, bobPostsStore: Readable<Post[]>): Readable<Posts[]> {
-  return derived([alicePostsStore, bobPostsStore], 
+  return derived([alicePostsStore, bobPostsStore]: [Post[], Post[]], 
     ([alicePosts, bobPosts]) => [...alicePosts, ...bobPosts] // Will be called any time either `alicePostsStore` 
                                                              // or `bobPostsStore` are updated
   );
@@ -582,7 +612,11 @@ 
Reactive stores to build hApps

                   "libsodium-wrappers": "https://unpkg.com/emittery",
                   "isomorphic-ws": "https://unpkg.com/modern-isomorphic-ws",
                   "blakejs": "https://unpkg.com/modern-isomorphic-ws",
-                  "lodash-es": "https://unpkg.com/modern-isomorphic-ws"
+                  "lodash-es/isEqual.js": "https://unpkg.com/lodash-es/isEqual.js",
+                  "lodash-es/flatMap.js": "https://unpkg.com/lodash-es/flatMap.js",
+                  "lodash-es/uniqWith.js": "https://unpkg.com/lodash-es/uniqWith.js",
+                  "lodash-es": "https://unpkg.com/modern-isomorphic-ws",
+                  "lodash-es/": "https://unpkg.com/modern-isomorphic-ws/"
                 }
               }
             
@@ -656,7 +690,11 @@ 
Reactive stores to build hApps

                   "libsodium-wrappers": "https://unpkg.com/emittery",
                   "isomorphic-ws": "https://unpkg.com/modern-isomorphic-ws",
                   "blakejs": "https://unpkg.com/modern-isomorphic-ws",
-                  "lodash-es": "https://unpkg.com/modern-isomorphic-ws"
+                  "lodash-es/isEqual.js": "https://unpkg.com/lodash-es/isEqual.js",
+                  "lodash-es/flatMap.js": "https://unpkg.com/lodash-es/flatMap.js",
+                  "lodash-es/uniqWith.js": "https://unpkg.com/lodash-es/uniqWith.js",
+                  "lodash-es": "https://unpkg.com/modern-isomorphic-ws",
+                  "lodash-es/": "https://unpkg.com/modern-isomorphic-ws/"
                 }
               }
             
@@ -677,7 +715,8 @@ 
Reactive stores to build hApps

             class="fragment fade-in"
           >
 export function deriveAllPosts(alicePostsStore: AsyncReadable<Post[]>, bobPostsStore: AsyncReadable<Post[]>): AsyncReadable<Posts[]> {
-  return asyncDerived(joinAsync([alicePostsStore, bobPostsStore]), // Creates an `AsyncReadable<[Array<Post>, Array<Post>]>`
+  const joinedPosts: AsyncReadable<Posts[]> = joinAsync([alicePostsStore, bobPostsStore]); // Creates an `AsyncReadable<[Array<Post>, Array<Post>]>`
+  return asyncDerived(joinedPosts,
     ([alicePosts, bobPosts]) => [...alicePosts, ...bobPosts] // Will be called any time either `alicePostsStore` 
                                                              // or `bobPostsStore` are updated
   );
@@ -737,7 +776,11 @@ 
Reactive stores to build hApps

                   "libsodium-wrappers": "https://unpkg.com/emittery",
                   "isomorphic-ws": "https://unpkg.com/modern-isomorphic-ws",
                   "blakejs": "https://unpkg.com/modern-isomorphic-ws",
-                  "lodash-es": "https://unpkg.com/modern-isomorphic-ws"
+                  "lodash-es/isEqual.js": "https://unpkg.com/lodash-es/isEqual.js",
+                  "lodash-es/flatMap.js": "https://unpkg.com/lodash-es/flatMap.js",
+                  "lodash-es/uniqWith.js": "https://unpkg.com/lodash-es/uniqWith.js",
+                  "lodash-es": "https://unpkg.com/modern-isomorphic-ws",
+                  "lodash-es/": "https://unpkg.com/modern-isomorphic-ws/"
                 }
               }
             
@@ -762,9 +805,9 @@ 
Reactive stores to build hApps

 // Imagine for some reason we need to display the latest content for all the posts in the app,
 // and we already have a `LazyHoloHashMap` for the latest version of each of them
 export function latestVersionOfAllPosts(
-  allPosts: ActionHash[], 
+  allPostsHashes: ActionHash[], 
   latestVersionOfPostsMap: LazyHoloHashMap<ActionHash, AsyncReadable<Post>>
-): AsyncReadable<ReadonlyMap<ActionHash, Posts>> {
+): AsyncReadable<ReadonlyMap<ActionHash, Posts>> { // A ReadonlyMap is a map that only exposes a `get(hash)`
   return sliceAndJoin(latestVersionOfPostsMap, allPosts); // Will do a get for each post ActionHash
                                                           // If some of the posts were already loaded, 
                                                           // it will not need to make any new requests
@@ -825,7 +868,11 @@ 
Reactive stores to build hApps

                   "libsodium-wrappers": "https://unpkg.com/emittery",
                   "isomorphic-ws": "https://unpkg.com/modern-isomorphic-ws",
                   "blakejs": "https://unpkg.com/modern-isomorphic-ws",
-                  "lodash-es": "https://unpkg.com/modern-isomorphic-ws"
+                  "lodash-es/isEqual.js": "https://unpkg.com/lodash-es/isEqual.js",
+                  "lodash-es/flatMap.js": "https://unpkg.com/lodash-es/flatMap.js",
+                  "lodash-es/uniqWith.js": "https://unpkg.com/lodash-es/uniqWith.js",
+                  "lodash-es": "https://unpkg.com/modern-isomorphic-ws",
+                  "lodash-es/": "https://unpkg.com/modern-isomorphic-ws/"
                 }
               }
             
@@ -848,7 +895,7 @@ 
Reactive stores to build hApps

 // we already have a `LazyHoloHashMap` for the latest version of each of them
 // and an `AsyncReadable` for all the post hashes in the app
 export function latestVersionOfAllPosts(
-  allPostsStore: AsyncReadable<ActionHash[]>, 
+  allPostsHashesStore: AsyncReadable<ActionHash[]>, 
   latestVersionOfPostsMap: LazyHoloHashMap<ActionHash, AsyncReadable<Post>>
 ): AsyncReadable<ReadonlyMap<ActionHash, Posts>> {
   return pipe(allPostsStore, // We pipe from the `allPostsStore`
@@ -864,6 +911,7 @@ 
Reactive stores to build hApps

             #### Complete This Exercise:
           
 
+