Skip to content
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.

Sign up for GitHub

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

Jump to bottom

useSelectedLayoutSegment at the current level #42299

Merged
merged 7 commits into from Nov 2, 2022
Merged

useSelectedLayoutSegment at the current level #42299

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a79aa50
Return empty string instead of throwing
Nov 1, 2022
03fc39b
Add tests
Nov 1, 2022
7e3fcb2
Return null instead
Nov 2, 2022
4a570cd
Merge branch 'canary' into use-selected-segment-root
Nov 2, 2022
4047945
test names fixed
Nov 2, 2022
0714625
Merge branch 'canary' into use-selected-segment-root
Nov 2, 2022
619e801
Merge branch 'canary' into use-selected-segment-root
Nov 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/next/client/components/navigation.ts
View file
Open in desktop
Expand Up @@ -174,10 +174,10 @@ export function useSelectedLayoutSegments(
*/
export function useSelectedLayoutSegment(
parallelRouteKey: string = 'children'
): string {
): string | null {
const selectedLayoutSegments = useSelectedLayoutSegments(parallelRouteKey)
if (selectedLayoutSegments.length === 0) {
throw new Error('No selected layout segment below the current level')
return null
}

return selectedLayoutSegments[0]
Expand Down
13 changes: 10 additions & 3 deletions ...pp/hooks/use-selected-layout-segment/first/[dynamic]/(group)/second/[...catchall]/page.js
View file
Open in desktop
@@ -1,11 +1,18 @@
'use client'

import { useSelectedLayoutSegments } from 'next/navigation'
import {
useSelectedLayoutSegments,
useSelectedLayoutSegment,
} from 'next/navigation'

export default function Page() {
const selectedLayoutSegment = useSelectedLayoutSegments()
const selectedLayoutSegments = useSelectedLayoutSegments()
const selectedLayoutSegment = useSelectedLayoutSegment()

return (
<p id="page-layout-segments">{JSON.stringify(selectedLayoutSegment)}</p>
<>
<p id="page-layout-segments">{JSON.stringify(selectedLayoutSegments)}</p>
<p id="page-layout-segment">{JSON.stringify(selectedLayoutSegment)}</p>
</>
)
}
11 changes: 8 additions & 3 deletions test/e2e/app-dir/app/app/hooks/use-selected-layout-segment/first/layout.js
View file
Open in desktop
@@ -1,13 +1,18 @@
'use client'

import { useSelectedLayoutSegments } from 'next/navigation'
import {
useSelectedLayoutSegments,
useSelectedLayoutSegment,
} from 'next/navigation'

export default function Layout({ children }) {
const selectedLayoutSegment = useSelectedLayoutSegments()
const selectedLayoutSegments = useSelectedLayoutSegments()
const selectedLayoutSegment = useSelectedLayoutSegment()

return (
<>
<p id="inner-layout">{JSON.stringify(selectedLayoutSegment)}</p>
<p id="inner-layout">{JSON.stringify(selectedLayoutSegments)}</p>
<p id="inner-layout-segment">{JSON.stringify(selectedLayoutSegment)}</p>
{children}
</>
)
Expand Down
11 changes: 8 additions & 3 deletions test/e2e/app-dir/app/app/hooks/use-selected-layout-segment/layout.js
View file
Open in desktop
@@ -1,13 +1,18 @@
'use client'

import { useSelectedLayoutSegments } from 'next/navigation'
import {
useSelectedLayoutSegments,
useSelectedLayoutSegment,
} from 'next/navigation'

export default function Layout({ children }) {
const selectedLayoutSegment = useSelectedLayoutSegments()
const selectedLayoutSegments = useSelectedLayoutSegments()
const selectedLayoutSegment = useSelectedLayoutSegment()

return (
<>
<p id="outer-layout">{JSON.stringify(selectedLayoutSegment)}</p>
<p id="outer-layout">{JSON.stringify(selectedLayoutSegments)}</p>
<p id="outer-layout-segment">{JSON.stringify(selectedLayoutSegment)}</p>
{children}
</>
)
Expand Down
34 changes: 33 additions & 1 deletion test/e2e/app-dir/index.test.ts
View file
Open in desktop
Expand Up @@ -1273,7 +1273,7 @@ describe('app dir', () => {
}
})

describe('useSelectedLayoutSegment', () => {
describe('useSelectedLayoutSegments', () => {
it.each`
path | outerLayout | innerLayout
${'/hooks/use-selected-layout-segment/first'} | ${['first']} | ${[]}
Expand Down Expand Up @@ -1303,6 +1303,38 @@ describe('app dir', () => {
expect(JSON.parse($('#page-layout-segments').text())).toEqual([])
})
})

describe('useSelectedLayoutSegment', () => {
it.each`
path | outerLayout | innerLayout
${'/hooks/use-selected-layout-segment/first'} | ${'first'} | ${null}
${'/hooks/use-selected-layout-segment/first/slug1'} | ${'first'} | ${'slug1'}
${'/hooks/use-selected-layout-segment/first/slug2/second/a/b'} | ${'first'} | ${'slug2'}
`(
'should have the correct layout segment at $path',
async ({ path, outerLayout, innerLayout }) => {
const html = await renderViaHTTP(next.url, path)
const $ = cheerio.load(html)

expect(JSON.parse($('#outer-layout-segment').text())).toEqual(
outerLayout
)
expect(JSON.parse($('#inner-layout-segment').text())).toEqual(
innerLayout
)
}
)

it('should return null in pages', async () => {
const html = await renderViaHTTP(
next.url,
'/hooks/use-selected-layout-segment/first/slug2/second/a/b'
)
const $ = cheerio.load(html)

expect(JSON.parse($('#page-layout-segment').text())).toEqual(null)
})
})
})

if (isDev) {
Expand Down