this repo has no description
Fix using screen names in `Link` (#8473)
* use our router in favour of useLinkBuilder
* test feature using Home header feeds button
* handle non-string params properly
authored by
Samuel Newman
and committed by
GitHub
7341294d
26910537
+11
-21
+3
-5
src/components/Link.tsx
+3
-5
src/components/Link.tsx
···
4
4
import {
5
5
type LinkProps as RNLinkProps,
6
6
StackActions,
7
-
useLinkBuilder,
8
7
} from '@react-navigation/native'
9
8
10
9
import {BSKY_DOWNLOAD_URL} from '#/lib/constants'
···
95
94
shouldProxy?: boolean
96
95
}) {
97
96
const navigation = useNavigationDeduped()
98
-
const {buildHref} = useLinkBuilder()
99
97
const href = useMemo(() => {
100
98
return typeof to === 'string'
101
99
? convertBskyAppUrlIfNeeded(sanitizeUrl(to))
102
100
: to.screen
103
-
? buildHref(to.screen, to.params)
101
+
? router.matchName(to.screen)?.build(to.params)
104
102
: to.href
105
103
? convertBskyAppUrlIfNeeded(sanitizeUrl(to.href))
106
104
: undefined
107
-
}, [to, buildHref])
105
+
}, [to])
108
106
109
107
if (!href) {
110
108
throw new Error(
111
-
'Link `to` prop must be a string or an object with `screen` and `params` properties',
109
+
'Could not resolve screen. Link `to` prop must be a string or an object with `screen` and `params` properties',
112
110
)
113
111
}
114
112
+4
-4
src/lib/routes/router.ts
+4
-4
src/lib/routes/router.ts
···
1
-
import {Route, RouteParams} from './types'
1
+
import {type Route, type RouteParams} from './types'
2
2
3
3
export class Router {
4
4
routes: [string, Route][] = []
···
45
45
})
46
46
const matcherRe = new RegExp(`^${matcherReInternal}([?]|$)`, 'i')
47
47
return {
48
-
match(path: string) {
48
+
match(path) {
49
49
const {pathname, searchParams} = new URL(path, 'http://throwaway.com')
50
50
const addedParams = Object.fromEntries(searchParams.entries())
51
51
···
55
55
}
56
56
return undefined
57
57
},
58
-
build(params: Record<string, string>) {
58
+
build(params = {}) {
59
59
const str = pattern.replace(
60
60
/:([\w]+)/g,
61
-
(_m, name) => params[name] || 'undefined',
61
+
(_m, name) => params[encodeURIComponent(name)] || 'undefined',
62
62
)
63
63
64
64
let hasQp = false
+1
-1
src/lib/routes/types.ts
+1
-1
src/lib/routes/types.ts
+3
-11
src/view/com/home/HomeHeaderLayoutMobile.tsx
+3
-11
src/view/com/home/HomeHeaderLayoutMobile.tsx
···
1
-
import React from 'react'
2
1
import {View} from 'react-native'
3
2
import Animated from 'react-native-reanimated'
4
3
import {msg} from '@lingui/macro'
···
56
55
<PressableScale
57
56
targetScale={0.9}
58
57
onPress={() => {
58
+
playHaptic('Light')
59
59
emitSoftReset()
60
-
}}
61
-
onPressIn={() => {
62
-
playHaptic('Heavy')
63
-
}}
64
-
onPressOut={() => {
65
-
playHaptic('Light')
66
60
}}>
67
61
<Logo width={30} />
68
62
</PressableScale>
···
72
66
{hasSession && (
73
67
<Link
74
68
testID="viewHeaderHomeFeedPrefsBtn"
75
-
to="/feeds"
69
+
to={{screen: 'Feeds'}}
76
70
hitSlop={HITSLOP_10}
77
71
label={_(msg`View your feeds and explore more`)}
78
72
size="small"
···
81
75
shape="square"
82
76
style={[
83
77
a.justify_center,
84
-
{
85
-
marginRight: -Layout.BUTTON_VISUAL_ALIGNMENT_OFFSET,
86
-
},
78
+
{marginRight: -Layout.BUTTON_VISUAL_ALIGNMENT_OFFSET},
87
79
]}>
88
80
<ButtonIcon icon={FeedsIcon} size="lg" />
89
81
</Link>