-
Notifications
You must be signed in to change notification settings - Fork 34
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
add createMatchSelector function from connected-react-router #55
base: master
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import { createMatchSelector } from '../index'; | ||
|
||
describe('react-router function', () => { | ||
const getFakeState = (key: string = 'router') => ({ | ||
[key]: { | ||
location: { | ||
pathname: '/just/svv123/test/nrj123' | ||
} | ||
} | ||
} as any); | ||
const expectedOutput = { | ||
isExact: true, | ||
params: { | ||
idOne: 'svv123', | ||
idTwo: 'nrj123', | ||
}, | ||
path: '/just/:idOne/test/:idTwo', | ||
url: '/just/svv123/test/nrj123' | ||
}; | ||
it('createMatchSelector return matching object when options not passed', () => { | ||
const fakeState = getFakeState(); | ||
const matchingFunction = createMatchSelector('/just/:idOne/test/:idTwo'); | ||
const matchingObject = matchingFunction(fakeState); | ||
expect(matchingObject).toEqual(expectedOutput); | ||
}); | ||
it('createMatchSelector return matching object when selectRouterState function passed', () => { | ||
const selectRouterState = (state: any) => state.ownrouterkey; | ||
const fakeState = getFakeState('ownrouterkey'); | ||
const matchingFunction = createMatchSelector('/just/:idOne/test/:idTwo', { selectRouterState }); | ||
const matchingObject = matchingFunction(fakeState); | ||
expect(matchingObject).toEqual(expectedOutput); | ||
}); | ||
it('createMatchSelector return matching object when routerReducerKey passed', () => { | ||
const routerReducerKey = 'ownrouterkey'; | ||
const fakeState = getFakeState(routerReducerKey); | ||
const matchingFunction = createMatchSelector('/just/:idOne/test/:idTwo', { routerReducerKey }); | ||
const matchingObject = matchingFunction(fakeState); | ||
expect(matchingObject).toEqual(expectedOutput); | ||
}); | ||
it('createMatchSelector return matching object when empty object passed', () => { | ||
const fakeState = getFakeState(); | ||
const matchingFunction = createMatchSelector('/just/:idOne/test/:idTwo', {}); | ||
const matchingObject = matchingFunction(fakeState); | ||
expect(matchingObject).toEqual(expectedOutput); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import { match, matchPath } from 'react-router'; | ||
import { RouterState } from '../src/reducer'; | ||
|
||
interface Options { | ||
selectRouterState?: <S>(state: S) => RouterState; | ||
routerReducerKey?: string; | ||
} | ||
|
||
export const createMatchSelector = (path: string, options?: Options) => { | ||
let lastPathname: string | null = null; | ||
let lastMatch: match<{}> | null = null; | ||
let { selectRouterState, routerReducerKey = 'router' } = options ?? {}; | ||
if (typeof selectRouterState !== 'function') { | ||
selectRouterState = <S>(state: S): RouterState => state[routerReducerKey]; | ||
} | ||
return <S>(state: S): match<{}> | null => { | ||
const routerState = selectRouterState!(state); | ||
const pathname = routerState?.location?.pathname ?? ''; | ||
if (pathname === lastPathname) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should use selectRouterState There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hi, thanks for response! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Does it apply only to react router v5? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. v5 and v6, used function exists in both |
||
return lastMatch; | ||
} | ||
lastPathname = pathname; | ||
const match = matchPath(pathname, path); | ||
if (!match || !lastMatch || (match.url !== lastMatch.url) || (match.isExact !== lastMatch.isExact)) { | ||
lastMatch = match; | ||
} | ||
return lastMatch; | ||
} | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The signature should also allow an array of strings (as the
connected-react-router
signature does)