Skip to content
This repository has been archived by the owner on Nov 11, 2023. It is now read-only.

Commit

Permalink
feat: add displayName to Context component
Browse files Browse the repository at this point in the history
  • Loading branch information
@alfdocimotvp @fabien0102
alfdocimotvp authored and fabien0102 committed Nov 19, 2019
1 parent 225318b commit b41a230
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 31 deletions.
108 changes: 77 additions & 31 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,15 @@ import { useGet } from "restful-react";

const MyComponent = () => {
const { data: randomDogImage } = useGet({
path: "https://dog.ceo/api/breeds/image/random",
path: "https://dog.ceo/api/breeds/image/random"
});

return <img alt="Here's a good boye!" src={randomDogImage && randomDogImage.message} />;
return (
<img
alt="Here's a good boye!"
src={randomDogImage && randomDogImage.message}
/>
);
};

export default MyComponent;
Expand All @@ -70,15 +75,15 @@ import { useGet } from "restful-react";

const App = () => {
const { data: randomDogImage } = useGet({
path: "https://dog.ceo/api/breeds/image/random",
path: "https://dog.ceo/api/breeds/image/random"
});
return (
<>
{randomDogImage && (
<Image
style={{ width: 250, height: 250 }}
source={{
uri: randomDogImage.message,
uri: randomDogImage.message
}}
/>
)}
Expand Down Expand Up @@ -133,16 +138,21 @@ import { useGet } from "restful-react";
const MyComponent = () => {
const { data: randomDogImage } = useGet({
// Inferred from RestfulProvider in index.js
path: "breeds/image/random",
path: "breeds/image/random"
});

return <img alt="Here's a good boye!" src={randomDogImage && randomDogImage.message} />;
return (
<img
alt="Here's a good boye!"
src={randomDogImage && randomDogImage.message}
/>
);
};

export default MyComponent;
```

Naturally, the request will be sent to the full path `https://dog.ceo/api/breeds/image/random`. The full API of the `RestfulProvider` is outlined below. Each configuration option is composable and _can be_ overriden by `Get` components further down the tree.
Naturally, the request will be sent to the full path `https://dog.ceo/api/breeds/image/random`. The full API of the `RestfulProvider` is outlined below. Each configuration option is composable and _can be_ overridden by `Get` components further down the tree.

#### `RestfulProvider` API

Expand Down Expand Up @@ -174,14 +184,29 @@ export interface RestfulReactProviderProps<T = any> {
* Depending of your case, it can be easier to add a `localErrorOnly` on your `Mutate` component
* to deal with your retry locally instead of in the provider scope.
*/
onError?: (err: any, retry: () => Promise<T | null>, response?: Response) => void;
onError?: (
err: any,
retry: () => Promise<T | null>,
response?: Response
) => void;
/**
* Any global level query params?
* **Warning:** it's probably not a good idea to put API keys here. Consider headers instead.
*/
queryParams?: { [key: string]: any };
/*
* Allows to obtain the Provider and/or the Consumer name
*/
displayName?: String;
}

// Usage
<RestfulProvider
base="String!"
resolve={data => data}
requestOptions={authToken => ({ headers: { Authorization: authToken } })}
queryParams={{ myParam: true }}
displayName="MyAwesomeProvider"
/>;
```

Expand All @@ -199,10 +224,14 @@ import { useGet } from "restful-react";

const MyComponent = () => {
const { data: randomDogImage, loading } = useGet({
path: "https://dog.ceo/api/breeds/image/random",
path: "https://dog.ceo/api/breeds/image/random"
});

return loading ? <h1>Loading...</h1> : <img alt="Here's a good boye!" src={randomDogImage.message} />;
return loading ? (
<h1>Loading...</h1>
) : (
<img alt="Here's a good boye!" src={randomDogImage.message} />
);
};

export default MyComponent;
Expand All @@ -221,7 +250,7 @@ import { useGet } from "restful-react";
const MyComponent = () => {
const { data: randomDogImage, loading, refetch } = useGet({
path: "https://dog.ceo/api/breeds/image/random",
lazy: true,
lazy: true
});

return !randomDogImage && loading ? (
Expand All @@ -232,7 +261,11 @@ const MyComponent = () => {
<h1>Welcome to my image getter!</h1>
<button onClick={() => refetch()}>Get a good boye!</button>
</div>
<div>{randomDogImage && <img alt="Here's a good boye!" src={randomDogImage.message} />}</div>
<div>
{randomDogImage && (
<img alt="Here's a good boye!" src={randomDogImage.message} />
)}
</div>
</div>
);
};
Expand All @@ -257,7 +290,7 @@ import { useGet } from "restful-react";
const MyComponent = () => {
const { data: imageUrl } = useGet({
path: "https://dog.ceo/api/breeds/image/random",
resolve: image => image && image.message,
resolve: image => image && image.message
});

return imageUrl && <img alt="Here's a good boye!" src={imageUrl} />;
Expand All @@ -278,7 +311,7 @@ Here's an example:
const SearchThis = props => {
const { data } = useGet({
path: "/hello/world",
debounce: true,
debounce: true
});

return (
Expand Down Expand Up @@ -339,7 +372,7 @@ const SearchThis = props => {
### TypeScript Integration
One of the most poweful features of `restful-react` is that each component exported is strongly typed, empowering developers through self-documenting APIs.
One of the most powerful features of `restful-react` is that each component exported is strongly typed, empowering developers through self-documenting APIs.
![Using restful-react in VS Code](assets/labs.gif)
Expand Down Expand Up @@ -367,15 +400,23 @@ const ListItem = ({ id, children }) => {
const { mutate: del, loading } = useMutate({
verb: "DELETE",
path: `/posts/`,
base,
base
});
return (
<li key={id}>
{loading ? (
"Deleting..."
) : (
<button onClick={() => del(id).then(() => alert("Deleted successfully. Pretend it got removed from the DOM."))}>
<button
onClick={() =>
del(id).then(() =>
alert(
"Deleted successfully. Pretend it got removed from the DOM."
)
)
}
>
❌
</button>
)}
Expand All @@ -387,7 +428,7 @@ const ListItem = ({ id, children }) => {
const MyHugeList = () => {
const { data: posts } = useGet({
path: "/posts",
base,
base
});
return (
<div>
Expand Down Expand Up @@ -448,7 +489,12 @@ import { Poll } from "restful-react"
Below is a more convoluted example that employs nearly the full power of the `Poll` component.

```jsx
<Poll path="/status" until={(_, response) => response && response.ok} interval={0} lazy>
<Poll
path="/status"
until={(_, response) => response && response.ok}
interval={0}
lazy
>
{(_, { loading, error, finished, polling }, { start }) => {
return loading ? (
<Progress error={error} />
Expand All @@ -473,7 +519,7 @@ Below is a more convoluted example that employs nearly the full power of the `Po
</Poll>
```

Note from the previous example, `Poll` also exposes more states: `finished`, and `polling` that allow better flow control, as well as lazy-start polls that can also be programatically stopped at a later stage.
Note from the previous example, `Poll` also exposes more states: `finished`, and `polling` that allow better flow control, as well as lazy-start polls that can also be programmatically stopped at a later stage.

#### Long Polling

Expand Down Expand Up @@ -600,14 +646,14 @@ module.exports = inputSchema => ({
(pathItemMem, [verb, operation]) => ({
...pathItemMem,
[verb]: {
...fixOperationId(path, verb, operation),
},
...fixOperationId(path, verb, operation)
}
}),
{},
),
{}
)
}),
{},
),
{}
)
});
```

Expand Down Expand Up @@ -649,17 +695,17 @@ module.exports = {
output: "src/queries/myFirstBackend.tsx",
file: "specs/my-first-backend.yaml",
customProps: {
base: `"http://my-first-backend.com"`,
},
base: `"http://my-first-backend.com"`
}
},
configurableBackend: {
output: "src/queries/configurableBackend.tsx",
github: "contiamo:restful-react:master:docs/swagger.json",
customImport: `import { getConfig } from "../components/Config.tsx";`,
customProps: {
base: `{getConfig("backendBasePath")}`,
},
},
base: `{getConfig("backendBasePath")}`
}
}
};
```
Expand Down
6 changes: 6 additions & 0 deletions src/Context.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@ export interface RestfulReactProviderProps<T = any> {
* **Warning:** it's probably not a good idea to put API keys here. Consider headers instead.
*/
queryParams?: { [key: string]: any };
/*
* Allows to obtain the Provider and/or the Consumer name
*/
displayName?: String;
}

export const Context = React.createContext<Required<RestfulReactProviderProps>>({
Expand All @@ -41,6 +45,7 @@ export const Context = React.createContext<Required<RestfulReactProviderProps>>(
requestOptions: {},
onError: noop,
queryParams: {},
displayName: "",
});

export interface InjectedProps {
Expand All @@ -58,6 +63,7 @@ export default class RestfulReactProvider<T> extends React.Component<RestfulReac
requestOptions: {},
parentPath: "",
queryParams: value.queryParams || {},
displayName: value.displayName || "",
...value,
}}
>
Expand Down

0 comments on commit b41a230

Please sign in to comment.