Skip to content

Commit 55a79fd

Browse files
ntuckerntucker
committed
docs: Add candle api to coin example
docs: Add CORP headers to images
1 parent 6d6fc88 commit 55a79fd

File tree

12 files changed

+375
-24
lines changed

12 files changed

+375
-24
lines changed

‎docs/core/api/useDLE.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import PkgTabs from '@site/src/components/PkgTabs';
1010
import GenericsTabs from '@site/src/components/GenericsTabs';
1111
import ConditionalDependencies from '../shared/\_conditional_dependencies.mdx';
1212
import TypeScriptEditor from '@site/src/components/TypeScriptEditor';
13+
import StackBlitz from '@site/src/components/StackBlitz';
1314

1415
<head>
1516
<title>useDLE() - [D]ata [L]oading [E]rror React State</title>
@@ -309,3 +310,13 @@ export default function ArticleList({ page }: { page: string }) {
309310
```
310311

311312
</TypeScriptEditor>
313+
314+
### Github Reactions
315+
316+
`useDLE()` allows us to declaratively fetch reactions on any issue page the moment we navigate to it. This allows
317+
us to not block the issues page from showing if the reactions are not completed loading.
318+
319+
It's usually better to wrap cases like this in new [Suspense Boundaries](../getting-started/data-dependency.md#boundaries).
320+
However, our component library `ant design` does not allow this.
321+
322+
<StackBlitz app="github-app" file="src/resources/Reaction.tsx,src/pages/IssueDetail/index.tsx" view="editor" initialpath="/reactive/data-client/issue/1113" height={750} />

‎docs/core/api/useFetch.md‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ title: useFetch()
44

55
import GenericsTabs from '@site/src/components/GenericsTabs';
66
import ConditionalDependencies from '../shared/\_conditional_dependencies.mdx';
7-
import StackBlitz from '@site/src/components/StackBlitz';
87

98
<head>
109
<title>useFetch() - Declarative fetch triggers for React</title>
@@ -78,15 +77,3 @@ function useFetch<
7877
```
7978

8079
</GenericsTabs>
81-
82-
## Examples
83-
84-
### Github Reactions
85-
86-
`useFetch()` allows us to declaratively fetch reactions on any issue page the moment we navigate to it. This allows
87-
us to not block the issues page from showing if the reactions are not completed loading.
88-
89-
It's usually better to wrap cases like this in new [Suspense Boundaries](../getting-started/data-dependency.md#boundaries).
90-
However, our component library `ant design` does not allow this.
91-
92-
<StackBlitz app="github-app" file="src/resources/Reaction.tsx,src/pages/IssueDetail/index.tsx" view="editor" initialpath="/reactive/data-client/issue/1113" height={750} />

‎examples/coin-app/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"@linaria/core": "*",
3030
"@linaria/react": "*",
3131
"@linaria/shaker": "*",
32+
"@types/d3": "^7",
3233
"@types/react": "*",
3334
"@types/react-dom": "*",
3435
"react-refresh": "*",
@@ -45,6 +46,7 @@
4546
"@data-client/react": "^0.11.0",
4647
"@data-client/redux": "^0.11.0",
4748
"@data-client/rest": "^0.11.0",
49+
"d3": "^7.9.0",
4850
"history": "*",
4951
"react": "^18.2.0",
5052
"react-dom": "^18.2.0",

‎examples/coin-app/src/pages/AssetDetail/AssetChart.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { useDLE } from '@data-client/react';
2+
import { useMemo } from 'react';
3+
import { getCandles } from 'resources/Candles';
4+
5+
import { formatPrice } from '../../components/formatPrice';
6+
7+
export default function AssetChart({ product_id }: Props) {
8+
const { data: candles, loading } = useDLE(getCandles, { product_id });
9+
// Don't block page from loading
10+
// TODO: put correct height item here
11+
if (loading || !candles) return <span>&nbsp;</span>;
12+
13+
return <span>&nbsp;</span>;
14+
}
15+
16+
interface Props {
17+
product_id: string;
18+
}

‎examples/coin-app/src/pages/AssetDetail/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useSuspense } from '@data-client/react';
22
import { CurrencyResource } from 'resources/Currency';
33

4+
import AssetChart from './AssetChart';
45
import AssetPrice from './AssetPrice';
56
import Stats from './Stats';
67

@@ -11,6 +12,7 @@ export default function AssetDetail({ id }: { id: string }) {
1112
<h1>{currency.name}</h1>
1213
<AssetPrice product_id={`${currency.id}-USD`} />
1314
<Stats id={`${currency.id}-USD`} />
15+
<AssetChart product_id={`${currency.id}-USD`} />
1416
</>
1517
);
1618
}

‎examples/coin-app/src/resources/Candles.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { RestEndpoint } from '@data-client/rest';
2+
3+
// docs: https://docs.cloud.coinbase.com/exchange/reference/exchangerestapi_getproductcandles
4+
export const getCandles = new RestEndpoint({
5+
urlPrefix: 'https://api.exchange.coinbase.com',
6+
path: '/products/:product_id/candles',
7+
searchParams: {} as {
8+
granularity?: 60 | 300 | 900 | 3600 | 21600 | 86400;
9+
start?: string | number;
10+
end?: string | number;
11+
},
12+
process(value: CandleTuple[]) {
13+
return value.map(candle => ({
14+
timestamp: candle[0],
15+
price_open: candle[3],
16+
}));
17+
},
18+
});
19+
20+
type CandleTuple = [
21+
timestamp: number,
22+
price_low: number,
23+
price_high: number,
24+
price_open: number,
25+
price_close: number,
26+
];

‎examples/coin-app/src/resources/Product.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,9 @@ export const queryProduct = new schema.Query(
4343
product => product.quote_currency === quote_currency,
4444
);
4545

46-
sorted = sorted.sort((a, b) => {
46+
return sorted.sort((a, b) => {
4747
return b.stats.volume_30day - a.stats.volume_30day;
4848
});
49-
const btc = sorted.find(product => product.base_currency === 'BTC');
50-
if (btc) sorted.unshift(btc);
51-
return sorted;
5249
},
5350
);
5451

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Route } from '@anansi/router';
22
import { Controller } from '@data-client/react';
3+
import { getCandles } from 'resources/Candles';
34
import { CurrencyResource } from 'resources/Currency';
45
import { StatsResource } from 'resources/Stats';
56
import { getTicker } from 'resources/Ticker';
@@ -22,6 +23,7 @@ export const routes: Route<Controller>[] = [
2223
component: lazyPage('AssetDetail'),
2324
async resolveData(controller, { id }) {
2425
const product_id = `${id}-USD`;
26+
controller.fetchIfStale(getCandles, { product_id });
2527
await Promise.allSettled([
2628
controller.fetchIfStale(getTicker, { product_id }),
2729
controller.fetchIfStale(CurrencyResource.get, { id }),

‎examples/github-app/src/pages/IssueDetail/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Link } from '@anansi/router';
2-
import { useSuspense, useFetch, useCache } from '@data-client/react';
2+
import { useSuspense, useCache, useDLE } from '@data-client/react';
33
import { Card, Avatar, Popover } from 'antd';
44
import { Tag } from 'antd';
55
import Boundary from 'Boundary';
@@ -25,9 +25,10 @@ const { Meta } = Card;
2525

2626
function IssueDetail({ number, repo, owner }: Props) {
2727
const params = { number, repo, owner };
28-
useFetch(ReactionResource.getList, params);
28+
const {
29+
data: { results: reactions },
30+
} = useDLE(ReactionResource.getList, params);
2931
const issue = useSuspense(IssueResource.get, params);
30-
const { results: reactions } = useCache(ReactionResource.getList, params);
3132
const currentUser = useCache(UserResource.current);
3233

3334
const actions: JSX.Element[] = useMemo(() => {

‎website/sidebars-endpoint.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,15 @@
3737
},
3838
{
3939
"type": "doc",
40-
"id": "api/Invalidate"
40+
"id": "api/Query"
4141
},
4242
{
4343
"type": "doc",
4444
"id": "api/All"
4545
},
4646
{
4747
"type": "doc",
48-
"id": "api/Query"
48+
"id": "api/Invalidate"
4949
},
5050
{
5151
"type": "doc",

0 commit comments

Comments
 (0)