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 @@
@@ -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:
+