Skip to content

Commit

Permalink
refactor: use named function for top level functions
Browse files Browse the repository at this point in the history
  • Loading branch information
@tien
tien committed Jul 3, 2024
1 parent 631bb5f commit d19c5be
Show file tree
Hide file tree
Showing 32 changed files with 292 additions and 250 deletions.
8 changes: 4 additions & 4 deletions apps/docs/docs/getting-started/connect-wallets.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ import {
useConnectWallet,
} from "@reactive-dot/react";

const Wallets = () => {
function Wallets() {
const wallets = useWallets();
const connectedWallets = useConnectedWallets();

Expand Down Expand Up @@ -114,7 +114,7 @@ const Wallets = () => {
</article>
</section>
);
};
}

export default Wallet;
```
Expand All @@ -124,7 +124,7 @@ export default Wallet;
```tsx title="Accounts.tsx"
import { useAccounts } from "@reactive-dot/react";

const Accounts = () => {
function Accounts() {
const accounts = useAccounts();

return (
Expand All @@ -142,7 +142,7 @@ const Accounts = () => {
</ul>
</section>
);
};
}

export default Accounts;
```
36 changes: 19 additions & 17 deletions apps/docs/docs/getting-started/multichain.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,15 +73,15 @@ One active chain at a time.
import type { ChainId } from "@reactive-dot/core";
import type { ReDotChainProvider } from "@reactive-dot/react";

const App = () => {
function App() {
const [currentChainId, setCurrentChainId] = useState<ChainId>("polkadot");

return (
<ReDotChainProvider chainId={currentChainId}>
<MyDApp />
</ReDotChainProvider>
);
};
}
```

Multiple active chains at the same time.
Expand All @@ -90,19 +90,21 @@ Multiple active chains at the same time.
// ...
import type { ReDotChainProvider } from "@reactive-dot/react";

const App = () => (
<>
<ReDotChainProvider chainId="polkadot">
<MyDApp />
</ReDotChainProvider>
<ReDotChainProvider chainId="kusama">
<MyDApp />
</ReDotChainProvider>
<ReDotChainProvider chainId="westend">
<MyDApp />
</ReDotChainProvider>
</>
);
function App() {
return (
<>
<ReDotChainProvider chainId="polkadot">
<MyDApp />
</ReDotChainProvider>
<ReDotChainProvider chainId="kusama">
<MyDApp />
</ReDotChainProvider>
<ReDotChainProvider chainId="westend">
<MyDApp />
</ReDotChainProvider>
</>
);
}
```

### Hook
Expand All @@ -112,9 +114,9 @@ All hooks provide an option to specify which chain to target.
```tsx
import { useBlock } from "@reactive-dot/react";

const Component = () => {
function Component() {
const polkadotBlock = useBlock({ chainId: "polkadot" });
const kusamaBlock = useBlock({ chainId: "kusama" });
const westendBlock = useBlock({ chainId: "westend" });
};
}
```
12 changes: 7 additions & 5 deletions apps/docs/docs/getting-started/mutation.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,11 @@ There are multiple way to select the account used for signing.
```tsx
import { ReDotSignerProvider } from "@reactive-dot/react";

const App = () => (
<ReDotSignerProvider signer={someSigner}>{/* ... */}</ReDotSignerProvider>
);
function App() {
return (
<ReDotSignerProvider signer={someSigner}>{/* ... */}</ReDotSignerProvider>
);
}
```

### 2. Passing signer to the hook
Expand Down Expand Up @@ -58,7 +60,7 @@ import { IDLE, MutationError, PENDING } from "@reactive-dot/core";
import { useMutation } from "@reactive-dot/react";
import { Binary } from "polkadot-api";

const Component = () => {
function Component() {
const [transactionState, submit] = useMutation((tx) =>
tx.System.remark({ remark: Binary.fromText("Hello from reactive-dot!") }),
);
Expand All @@ -80,5 +82,5 @@ const Component = () => {
</div>
);
}
};
}
```
44 changes: 24 additions & 20 deletions apps/docs/docs/getting-started/query.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,31 +11,31 @@ The [`useLazyLoadQuery`](/api/react/function/useLazyLoadQuery) hook allow you to
[`useLazyLoadQuery`](/api/react/function/useLazyLoadQuery) utilize React's Suspense API for data fetching & error handling.

```tsx
const ActiveEra = () => {
function ActiveEra() {
const activeEra = useLazyLoadQuery((builder) =>
builder.readStorage("Staking", "ActiveEra", []),
);

return <div>Active era: {activeEra}</div>;
};
}

const App = () => {
function App() {
return (
<ErrorBoundary fallback="Error fetching active era!">
<Suspense fallback="Fetching active era...">
<ActiveEra />
</Suspense>
</ErrorBoundary>
);
};
}
```

## Fetching multiple data

Fetching multiple data can be done by chaining queries together, [`useLazyLoadQuery`](/api/react/function/useLazyLoadQuery) (with TypeScript) will automatically infer that you want to fetch multiple data concurrently & will return an array of data instead.

```tsx
const MultiQuery = () => {
function MultiQuery() {
const [expectedBlockTime, epochDuration, proposalCount] = useLazyLoadQuery(
(builder) =>
builder
Expand All @@ -56,7 +56,7 @@ const MultiQuery = () => {
<dd>{proposalCount}</dd>
</dl>
);
};
}
```

Multiple queries of the same type can also be fetched using [`callApis`](/api/core/class/Query#callApis) & [`readStorages`](/api/core/class/Query#readStorages).
Expand All @@ -82,7 +82,7 @@ const [rewards, metadatum] = useLazyLoadQuery((builder) =>
Result of a query can be used as variables in subsequent queries.

```tsx
const Query = () => {
function Query() {
const pools = useLazyLoadQuery((builder) =>
builder.readStorageEntries("NominationPools", "BondedPools", []),
);
Expand All @@ -105,7 +105,7 @@ const Query = () => {
</ul>
</section>
);
};
}
```

## Conditional query
Expand Down Expand Up @@ -147,7 +147,7 @@ Certain query, like runtime API calls & reading of storage entries doesn't creat
```tsx
import { useTransition } from "react";

const QueryWithRefresh = () => {
function QueryWithRefresh() {
const [isPending, startTransition] = useTransition();
const [pendingRewards, refreshPendingRewards] = useLazyLoadQueryWithRefresh(
(builder) =>
Expand All @@ -167,13 +167,13 @@ const QueryWithRefresh = () => {
</button>
</div>
);
};
}
```

The above will refresh all refreshable data in the query. If you want to target specific data to refresh, a separate [`useQueryRefresher`](/api/react/function/useQueryRefresher) hook can be used.

```tsx
const QueryWithRefresh = () => {
function QueryWithRefresh() {
const [isPending, startTransition] = useTransition();
const [account1Rewards, account2Rewards] = useLazyLoadQuery((builder) =>
builder
Expand All @@ -198,7 +198,7 @@ const QueryWithRefresh = () => {
</button>
</div>
);
};
}
```

## Retry failed query
Expand All @@ -209,14 +209,18 @@ Error from queries can be caught and reset using `ErrorBoundary` & [`useResetQue
import { useResetQueryError } from "@reactive-dot/react";
import { ErrorBoundary, type FallbackProps } from "react-error-boundary";

const ErrorFallback = (props: FallbackProps) => (
<article>
<header>Oops, something went wrong!</header>
<button onClick={() => props.resetErrorBoundary(props.error)}>Retry</button>
</article>
);
function ErrorFallback(props: FallbackProps) {
return (
<article>
<header>Oops, something went wrong!</header>
<button onClick={() => props.resetErrorBoundary(props.error)}>
Retry
</button>
</article>
);
}

const AppErrorBoundary = () => {
function AppErrorBoundary() {
const resetQueryError = useResetQueryError();

return (
Expand All @@ -232,5 +236,5 @@ const AppErrorBoundary = () => {
{/* ... */}
</ErrorBoundary>
);
};
}
```
24 changes: 13 additions & 11 deletions apps/docs/docs/getting-started/setup.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,15 +142,17 @@ import config from "./config";
import { ReDotChainProvider, ReDotProvider } from "@reactive-dot/react";
import { Suspense } from "react";

const App = () => (
<ReDotProvider config={config}>
{/* `chainId` match the ID previously specified via `polkadot: typeof dot` */}
<ReDotChainProvider chainId="polkadot">
{/* Make sure there is at least one Suspense boundary wrapping the app */}
<Suspense>{/* ... */}</Suspense>
</ReDotChainProvider>
</ReDotProvider>
);
function App() {
return (
<ReDotProvider config={config}>
{/* `chainId` match the ID previously specified via `polkadot: typeof dot` */}
<ReDotChainProvider chainId="polkadot">
{/* Make sure there is at least one Suspense boundary wrapping the app */}
<Suspense>{/* ... */}</Suspense>
</ReDotChainProvider>
</ReDotProvider>
);
}

export default App;
```
Expand All @@ -161,7 +163,7 @@ export default App;
import { config } from "./config";
import { useAccounts, useLazyLoadQuery } from "@reactive-dot/react";

const MyComponent = () => {
function MyComponent() {
const accounts = useAccounts();
const [timestamp, totalIssuance] = useLazyLoadQuery((builder) =>
builder
Expand All @@ -187,7 +189,7 @@ const MyComponent = () => {
</section>
</div>
);
};
}

export default MyComponent;
```
2 changes: 1 addition & 1 deletion apps/docs/src/components/HomepageFeatures/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ function Feature({ title, emoji, description }: FeatureItem) {
);
}

export default function HomepageFeatures(): JSX.Element {
export default function HomepageFeatures() {
return (
<section className={styles.features}>
<div className="container">
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ function HomepageHeader() {
);
}

export default function Home(): JSX.Element {
export default function Home() {
return (
<Layout description="A reactive library for building Substrate front-ends">
<HomepageHeader />
Expand Down
Loading

0 comments on commit d19c5be

Please sign in to comment.