docs: Add candle api to coin example

docs: Add CORP headers to images
reactive · Apr 12, 2024 · 763b401 · 763b401
1 parent 6d6fc88
commit 763b401
Show file tree

Hide file tree

Showing 12 changed files with 376 additions and 24 deletions.
diff --git a/docs/core/api/useDLE.md b/docs/core/api/useDLE.md
@@ -10,6 +10,7 @@ import PkgTabs from '@site/src/components/PkgTabs';
 import GenericsTabs from '@site/src/components/GenericsTabs';
 import ConditionalDependencies from '../shared/\_conditional_dependencies.mdx';
 import TypeScriptEditor from '@site/src/components/TypeScriptEditor';
+import StackBlitz from '@site/src/components/StackBlitz';
 
 <head>
   <title>useDLE() - [D]ata [L]oading [E]rror React State</title>
@@ -309,3 +310,13 @@ export default function ArticleList({ page }: { page: string }) {
 ```
 
 </TypeScriptEditor>
+
+### Github Reactions
+
+`useDLE()` allows us to declaratively fetch reactions on any issue page the moment we navigate to it. This allows
+us to not block the issues page from showing if the reactions are not completed loading.
+
+It's usually better to wrap cases like this in new [Suspense Boundaries](../getting-started/data-dependency.md#boundaries).
+However, our component library `ant design` does not allow this.
+
+<StackBlitz app="github-app" file="src/resources/Reaction.tsx,src/pages/IssueDetail/index.tsx" view="editor" initialpath="/reactive/data-client/issue/1113" height={750} />
diff --git a/docs/core/api/useFetch.md b/docs/core/api/useFetch.md
@@ -4,7 +4,6 @@ title: useFetch()
 
 import GenericsTabs from '@site/src/components/GenericsTabs';
 import ConditionalDependencies from '../shared/\_conditional_dependencies.mdx';
-import StackBlitz from '@site/src/components/StackBlitz';
 
 <head>
   <title>useFetch() - Declarative fetch triggers for React</title>
@@ -78,15 +77,3 @@ function useFetch<
 ```
 
 </GenericsTabs>
-
-## Examples
-
-### Github Reactions
-
-`useFetch()` allows us to declaratively fetch reactions on any issue page the moment we navigate to it. This allows
-us to not block the issues page from showing if the reactions are not completed loading.
-
-It's usually better to wrap cases like this in new [Suspense Boundaries](../getting-started/data-dependency.md#boundaries).
-However, our component library `ant design` does not allow this.
-
-<StackBlitz app="github-app" file="src/resources/Reaction.tsx,src/pages/IssueDetail/index.tsx" view="editor" initialpath="/reactive/data-client/issue/1113" height={750} />
diff --git a/examples/coin-app/package.json b/examples/coin-app/package.json
@@ -29,6 +29,7 @@
     "@linaria/core": "*",
     "@linaria/react": "*",
     "@linaria/shaker": "*",
+    "@types/d3": "^7",
     "@types/react": "*",
     "@types/react-dom": "*",
     "react-refresh": "*",
@@ -45,6 +46,7 @@
     "@data-client/react": "^0.11.0",
     "@data-client/redux": "^0.11.0",
     "@data-client/rest": "^0.11.0",
+    "d3": "^7.9.0",
     "history": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/examples/coin-app/src/pages/AssetDetail/AssetChart.tsx b/examples/coin-app/src/pages/AssetDetail/AssetChart.tsx
@@ -0,0 +1,18 @@
+import { useDLE } from '@data-client/react';
+import { useMemo } from 'react';
+import { getCandles } from 'resources/Candles';
+
+import { formatPrice } from '../../components/formatPrice';
+
+export default function AssetChart({ product_id }: Props) {
+  const { data: candles, loading } = useDLE(getCandles, { product_id });
+  // Don't block page from loading
+  // TODO: put correct height item here
+  if (loading || !candles) return <span>&nbsp;</span>;
+
+  return <span>&nbsp;</span>;
+}
+
+interface Props {
+  product_id: string;
+}
diff --git a/examples/coin-app/src/pages/AssetDetail/index.tsx b/examples/coin-app/src/pages/AssetDetail/index.tsx
@@ -1,6 +1,7 @@
 import { useSuspense } from '@data-client/react';
 import { CurrencyResource } from 'resources/Currency';
 
+import AssetChart from './AssetChart';
 import AssetPrice from './AssetPrice';
 import Stats from './Stats';
 
@@ -11,6 +12,7 @@ export default function AssetDetail({ id }: { id: string }) {
       <h1>{currency.name}</h1>
       <AssetPrice product_id={`${currency.id}-USD`} />
       <Stats id={`${currency.id}-USD`} />
+      <AssetChart product_id={`${currency.id}-USD`} />
     </>
   );
 }
diff --git a/examples/coin-app/src/resources/Candles.ts b/examples/coin-app/src/resources/Candles.ts
@@ -0,0 +1,26 @@
+import { RestEndpoint } from '@data-client/rest';
+
+// docs: https://docs.cloud.coinbase.com/exchange/reference/exchangerestapi_getproductcandles
+export const getCandles = new RestEndpoint({
+  urlPrefix: 'https://api.exchange.coinbase.com',
+  path: '/products/:product_id/candles',
+  searchParams: {} as {
+    granularity?: 60 | 300 | 900 | 3600 | 21600 | 86400;
+    start?: string | number;
+    end?: string | number;
+  },
+  process(value: CandleTuple[]) {
+    return value.map(candle => ({
+      timestamp: candle[0],
+      price_open: candle[3],
+    }));
+  },
+});
+
+type CandleTuple = [
+  timestamp: number,
+  price_low: number,
+  price_high: number,
+  price_open: number,
+  price_close: number,
+];
diff --git a/examples/coin-app/src/resources/Product.ts b/examples/coin-app/src/resources/Product.ts
@@ -43,12 +43,9 @@ export const queryProduct = new schema.Query(
         product => product.quote_currency === quote_currency,
       );
 
-    sorted = sorted.sort((a, b) => {
+    return sorted.sort((a, b) => {
       return b.stats.volume_30day - a.stats.volume_30day;
     });
-    const btc = sorted.find(product => product.base_currency === 'BTC');
-    if (btc) sorted.unshift(btc);
-    return sorted;
   },
 );
 

diff --git a/examples/coin-app/src/routing/routes.tsx b/examples/coin-app/src/routing/routes.tsx
@@ -1,5 +1,6 @@
 import { Route } from '@anansi/router';
 import { Controller } from '@data-client/react';
+import { getCandles } from 'resources/Candles';
 import { CurrencyResource } from 'resources/Currency';
 import { StatsResource } from 'resources/Stats';
 import { getTicker } from 'resources/Ticker';
@@ -22,6 +23,7 @@ export const routes: Route<Controller>[] = [
     component: lazyPage('AssetDetail'),
     async resolveData(controller, { id }) {
       const product_id = `${id}-USD`;
+      controller.fetchIfStale(getCandles, { product_id });
       await Promise.allSettled([
         controller.fetchIfStale(getTicker, { product_id }),
         controller.fetchIfStale(CurrencyResource.get, { id }),

diff --git a/examples/github-app/src/pages/IssueDetail/index.tsx b/examples/github-app/src/pages/IssueDetail/index.tsx
@@ -1,5 +1,5 @@
 import { Link } from '@anansi/router';
-import { useSuspense, useFetch, useCache } from '@data-client/react';
+import { useSuspense, useCache, useDLE } from '@data-client/react';
 import { Card, Avatar, Popover } from 'antd';
 import { Tag } from 'antd';
 import Boundary from 'Boundary';
@@ -25,9 +25,10 @@ const { Meta } = Card;
 
 function IssueDetail({ number, repo, owner }: Props) {
   const params = { number, repo, owner };
-  useFetch(ReactionResource.getList, params);
+  const {
+    data: { results: reactions },
+  } = useDLE(ReactionResource.getList, params);
   const issue = useSuspense(IssueResource.get, params);
-  const { results: reactions } = useCache(ReactionResource.getList, params);
   const currentUser = useCache(UserResource.current);
 
   const actions: JSX.Element[] = useMemo(() => {

diff --git a/website/sidebars-endpoint.json b/website/sidebars-endpoint.json
@@ -37,15 +37,15 @@
   },
   {
     "type": "doc",
-    "id": "api/Invalidate"
+    "id": "api/Query"
   },
   {
     "type": "doc",
     "id": "api/All"
   },
   {
     "type": "doc",
-    "id": "api/Query"
+    "id": "api/Invalidate"
   },
   {
     "type": "doc",

diff --git a/website/static/_headers b/website/static/_headers
@@ -0,0 +1,10 @@
+# Cloudflare headers - https://developers.cloudflare.com/pages/configuration/headers/
+/img/client-logo.svg
+  Cross-Origin-Resource-Policy: cross-origin
+  Access-Control-Allow-Origin: *
+  Cross-Origin-Embedder-Policy: credentialless
+
+/img/cancel.svg
+  Cross-Origin-Resource-Policy: cross-origin
+  Access-Control-Allow-Origin: *
+  Cross-Origin-Embedder-Policy: credentialless