Keep pager feeds in sync with the right pane (#2775)
* Hoist selected feed state * Seed state from params * Refine and fix logic * Fix scroll restoration * Soft reset on second click
This commit is contained in:
parent
80c482b026
commit
06f81d6948
6 changed files with 148 additions and 63 deletions
61
src/state/shell/selected-feed.tsx
Normal file
61
src/state/shell/selected-feed.tsx
Normal file
|
@ -0,0 +1,61 @@
|
|||
import React from 'react'
|
||||
import * as persisted from '#/state/persisted'
|
||||
import {isWeb} from '#/platform/detection'
|
||||
|
||||
type StateContext = string
|
||||
type SetContext = (v: string) => void
|
||||
|
||||
const stateContext = React.createContext<StateContext>('home')
|
||||
const setContext = React.createContext<SetContext>((_: string) => {})
|
||||
|
||||
function getInitialFeed() {
|
||||
if (isWeb) {
|
||||
if (window.location.pathname === '/') {
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
const feedFromUrl = params.get('feed')
|
||||
if (feedFromUrl) {
|
||||
// If explicitly booted from a link like /?feed=..., prefer that.
|
||||
return feedFromUrl
|
||||
}
|
||||
}
|
||||
const feedFromSession = sessionStorage.getItem('lastSelectedHomeFeed')
|
||||
if (feedFromSession) {
|
||||
// Fall back to a previously chosen feed for this browser tab.
|
||||
return feedFromSession
|
||||
}
|
||||
}
|
||||
const feedFromPersisted = persisted.get('lastSelectedHomeFeed')
|
||||
if (feedFromPersisted) {
|
||||
// Fall back to the last chosen one across all tabs.
|
||||
return feedFromPersisted
|
||||
}
|
||||
return 'home'
|
||||
}
|
||||
|
||||
export function Provider({children}: React.PropsWithChildren<{}>) {
|
||||
const [state, setState] = React.useState(getInitialFeed)
|
||||
|
||||
const saveState = React.useCallback((feed: string) => {
|
||||
setState(feed)
|
||||
if (isWeb) {
|
||||
try {
|
||||
sessionStorage.setItem('lastSelectedHomeFeed', feed)
|
||||
} catch {}
|
||||
}
|
||||
persisted.write('lastSelectedHomeFeed', feed)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<stateContext.Provider value={state}>
|
||||
<setContext.Provider value={saveState}>{children}</setContext.Provider>
|
||||
</stateContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useSelectedFeed() {
|
||||
return React.useContext(stateContext)
|
||||
}
|
||||
|
||||
export function useSetSelectedFeed() {
|
||||
return React.useContext(setContext)
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue