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