docs: Minor improvements to coin-app demo

docs/core/concepts/managers.md

@@ -123,4 +123,4 @@ with `event.data`.
 
 ### Coin App
 
-<StackBlitz app="coin-app" file="src/index.tsx,src/resources/Ticker.ts,src/pages/Home/AssetPrice.tsx,src/resources/StreamManager.ts" height="600" />
+<StackBlitz app="coin-app" file="src/index.tsx,src/resources/Ticker.ts,src/pages/AssetDetail/AssetPrice.tsx,src/resources/StreamManager.ts" height="600" />

examples/coin-app/src/pages/Home/AssetPrice.tsx

@@ -5,15 +5,20 @@ import { getTicker } from 'resources/Ticker';
 import { formatPrice } from '../../components/formatPrice';
 
 export default function AssetPrice({ product_id }: Props) {
-  useSubscription(getTicker, { product_id });
-  const ticker = useCache(getTicker, { product_id });
-  const stats = useCache(StatsResource.get, { id: product_id });
-  // fallback to stats, as we can load those in a bulk fetch for SSR
-  const price = ticker?.price ?? stats?.last;
+  const price = useLivePrice(product_id);
   if (!price) return <span></span>;
   return <span>{formatPrice.format(price)}</span>;
 }
 
 interface Props {
   product_id: string;
 }
+
+function useLivePrice(product_id: string) {
+  useSubscription(getTicker, { product_id });
+  const ticker = useCache(getTicker, { product_id });
+  const stats = useCache(StatsResource.get, { id: product_id });
+  // fallback to stats, as we can load those in a bulk fetch for SSR
+  // it would be preferable to simply provide bulk fetch of ticker to simplify code here
+  return ticker?.price ?? stats?.last;
+}

examples/coin-app/src/pages/Home/CurrencyList.tsx

@@ -1,7 +1,6 @@
 import { Link } from '@anansi/router';
 import {
   AsyncBoundary,
-  NetworkError,
   useFetch,
   useQuery,
   useSuspense,
@@ -16,7 +15,7 @@ export default function CurrencyList() {
   useFetch(StatsResource.getList);
   useSuspense(CurrencyResource.getList);
   useSuspense(StatsResource.getList);
-  const currencies = useQuery(queryCurrency, {});
+  const currencies = useQuery(queryCurrency);
   if (!currencies) return null;
   return (
     <table>
@@ -45,7 +44,7 @@ export default function CurrencyList() {
               {formatLargePrice.format(currency?.stats?.volume_usd)}
             </td>
             <td align="right" width="100">
-              <AsyncBoundary errorComponent={ErrorComponent}>
+              <AsyncBoundary>
                 <AssetPrice product_id={`${currency.id}-USD`} />
               </AsyncBoundary>
             </td>
@@ -55,9 +54,3 @@ export default function CurrencyList() {
     </table>
   );
 }
-
-const ErrorComponent = ({ error }: { error: NetworkError }) => (
-  <div style={{ color: 'red' }}>
-    {error.status} {error.response?.statusText}
-  </div>
-);

examples/coin-app/src/resources/Currency.ts

@@ -68,7 +68,7 @@ interface Args {
 }
 export const queryCurrency = new schema.Query(
   new schema.All(Currency),
-  (entries, { type = 'crypto' }: Args) => {
+  (entries, { type = 'crypto' }: Args = {}) => {
     let sorted = entries.filter(
       currency =>
         currency.details.type === type && currency.status === 'online',

examples/coin-app/src/routing/routes.tsx

@@ -11,6 +11,7 @@ export const routes: Route<Controller>[] = [
   {
     name: 'Home',
     component: lazyPage('Home'),
+    // purely for performance - eliminates network waterfalls
     async resolveData(controller) {
       await Promise.allSettled([
         controller.fetchIfStale(CurrencyResource.getList),
@@ -21,6 +22,7 @@ export const routes: Route<Controller>[] = [
   {
     name: 'AssetDetail',
     component: lazyPage('AssetDetail'),
+    // purely for performance - eliminates network waterfalls
     async resolveData(controller, { id }) {
       const product_id = `${id}-USD`;
       controller.fetchIfStale(getCandles, { product_id });