Skip to content

Commit

Permalink
Remove outdated doc page
Browse files Browse the repository at this point in the history
  • Loading branch information
jho406 committed Jan 14, 2025
1 parent bc7e6ce commit 1ac0521
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 61 deletions.
59 changes: 0 additions & 59 deletions docs/functions-passed.md

This file was deleted.

77 changes: 77 additions & 0 deletions docs/navigation-context.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
# NavigationContext

In addition to `visit` and `remote`, the `NavigationContext` provides a few
other methods and properties that are best decribed in the context of
`navigateTo`.

```
import { NavigationContext } from '@thoughtbot/superglue'
const {
navigateTo,
visit,
remote,
pageKey,
search
} = useContext(NavigationContext)
```

<div class="grid cards" markdown>
- [:octicons-arrow-right-24: See complete reference](../reference/types/#navigationcontextprops)
for `NavigationContext`
</div>

## `navigateTo`

Fundamentally, `visit` is responsible for `fetch`ing a page, [saving] it, and
lastly use `navigateTo` to load the page, update the url, and swap the page
component. The NavigationContext exposes `navigateTo` for you to use
use independently. For example:

```javascript
navigateTo('/posts')
```

!!! Note
The page must exist in the store, or `navigateTo` will throw a error. Use [copyPage]
to prepopulate before navigating.


`navigateTo` is especially useful for optimistic navigation like local facted
search and works best when combined with `search` and `pageKey` from the same
NavigationContext, and the [copyPage] action.

In this example, we'll assume we're on pageKey "/posts":

```
import { copyPage, NavigationContext } from '@thoughtbot/superglue'
import { myAppDispatch } from '@myJavascript/store'
// In your component somewhere
const {
navigateTo,
pageKey,
search
} = useContext(NavigationContext)
const nextPageKey = pageKey + "?active=true"
dispatch(copyPage({from: pageKey, to: nextPageKey}))
// On a click handler
navigateTo(nextPageKey, { action: 'push'})
// later after navigation.
console.log(search) // would return {active: "true"}
```

With the above, we're able to make use of the URL search param as a source of
state. And by using `navigateTo`, we're able to filter local results while updating
the URL.

<div class="grid cards" markdown>
- [:octicons-arrow-right-24: See complete reference](reference/types.md#navigateto-1)
for `navigateTo`
</div>

[saving]: ../reference/#saveandprocesspage
[copyPage]: ../reference/#copypage
3 changes: 1 addition & 2 deletions mkdocs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ nav:
- Navigation:
- The return of Rails UJS: ujs.md
- Advanced requests: requests.md
- navigateTo: navigation-context.md

- Partial updates:
- Digging: digging.md
Expand All @@ -124,11 +125,9 @@ nav:

- Reference:
- Rails Utilities: rails-utils.md
- Page utilities: functions-passed.md
- Hooks: reference/hooks.md
- Navigation: reference/components.Navigation.md
- Superglue: reference/index.md
- Types: reference/types.md
- Requests: reference/types.requests.md
- Actions: reference/types.actions.md

0 comments on commit 1ac0521

Please sign in to comment.