diff --git a/sites/stores/index.html b/sites/stores/index.html index a1892e6..86f0b74 100644 --- a/sites/stores/index.html +++ b/sites/stores/index.html @@ -74,6 +74,8 @@

Reactive stores to build hApps

+ +
@@ -158,6 +160,7 @@

Reactive stores to build hApps

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

@@ -223,7 +226,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/" } } @@ -244,10 +251,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" @@ -256,7 +263,17 @@

Reactive stores to build hApps

#### Complete This Exercise: - + @@ -276,6 +293,7 @@

Reactive stores to build hApps

content:'Second Post' } ]} + @@ -333,7 +355,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... @@ -345,7 +367,7 @@

Reactive stores to build hApps

#### Complete This Exercise: - + @@ -431,14 +457,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
@@ -476,7 +502,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 @@ -531,7 +561,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 ); @@ -585,7 +615,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/" } } @@ -659,7 +693,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/" } } @@ -680,7 +718,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 ); @@ -740,7 +779,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/" } } @@ -765,9 +808,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 @@ -828,7 +871,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/" } } @@ -851,7 +898,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` @@ -867,6 +914,7 @@

Reactive stores to build hApps

#### Complete This Exercise: +