jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix relative links

Browse Source 
Summary: Translated all cases where we had a parent-relative link to use the base URL instead.

Reviewed By: jknoxville

Differential Revision: D22256229

fbshipit-source-id: 81ee6fecb77dbaa19d112cb319771c22ff66d02a
This commit is contained in:
Pascal Hartig
2020-06-26 05:11:32 -07:00
committed by Facebook GitHub Bot
parent 419691da97
commit b2e8070af2
19 changed files with 51 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/tutorial/js-custom.mdx
View File

@@ -4,6 +4,7 @@ title: Building Custom UI
sidebar_label: Custom UI
---
import useBaseUrl from '@docusaurus/useBaseUrl';
import Link from '@docusaurus/Link';
Displaying your data in a table might work for many use-cases. However, depending on your plugin and data it might make sense to customize the way your data is visualized. Flipper uses React to render the plugins and provides a variety of ready-to-use UI components that can be used to build custom plugin UIs.
@@ -35,13 +36,13 @@ export default class SeaMammals extends FlipperPlugin<State, any, PersistedState
}
```
You can see how we are styling our components using [emotion](https://emotion.sh/). To learn more about this, make sure to read our guide on [styling components](../extending/styling-components).
You can see how we are styling our components using [emotion](https://emotion.sh/). To learn more about this, make sure to read our guide on <Link to={useBaseUrl("/docs/extending/styling-components")}>styling components</Link>.
## Adding data handling
The plugin is quite useless when we don't display any actual data. We are adding two static properties to our plugin class for data handling. `defaultPersistedState` defines the default state before we received any data. In `persistedStateReducer` we define how new data is merged with the existing data.
For the default state we define an empty object because we don't have any data, yet. When receiving data, we simply add it to the existing object, using the ID as a key. Learn more about [persistedState](../extending/js-plugin-api#persistedstate) in our guide.
For the default state we define an empty object because we don't have any data, yet. When receiving data, we simply add it to the existing object, using the ID as a key. Learn more about <Link to={useBaseUrl("/docs/extending/js-plugin-api#persistedstate")}>persistedState</Link> in our guide.
```js
static defaultPersistedState: PersistedState = {