Fix Profile link from drawer on Mobile Web (#1437)
* 🗺️ fix an issue where web devices that see the Drawer couldn't access Profile from said Drawer
* fix routes on web
* handle profile button active state
* add hack for web navigation
* fix comment
---------
Co-authored-by: Micah Maligie <kerosuppi@gmail.com>
zio/stable
parent
e643c43459
commit
50f811666a
|
@ -348,7 +348,6 @@ const MyProfileTabNavigator = observer(function MyProfileTabNavigatorImpl() {
|
|||
component={ProfileScreen}
|
||||
initialParams={{
|
||||
name: store.me.did,
|
||||
hideBackButton: true,
|
||||
}}
|
||||
/>
|
||||
{commonScreens(MyProfileTab as typeof HomeTab)}
|
||||
|
@ -362,7 +361,9 @@ const MyProfileTabNavigator = observer(function MyProfileTabNavigatorImpl() {
|
|||
*/
|
||||
const FlatNavigator = observer(function FlatNavigatorImpl() {
|
||||
const pal = usePalette('default')
|
||||
const unreadCountLabel = useStores().me.notifications.unreadCountLabel
|
||||
const store = useStores()
|
||||
const unreadCountLabel = store.me.notifications.unreadCountLabel
|
||||
|
||||
const title = (page: string) => bskyTitle(page, unreadCountLabel)
|
||||
return (
|
||||
<Flat.Navigator
|
||||
|
|
|
@ -64,8 +64,13 @@ export const DrawerContent = observer(function DrawerContentImpl() {
|
|||
const state = navigation.getState()
|
||||
store.shell.closeDrawer()
|
||||
if (isWeb) {
|
||||
// @ts-ignore must be Home, Search, Notifications, or MyProfile
|
||||
navigation.navigate(tab)
|
||||
// hack because we have flat navigator for web and MyProfile does not exist on the web navigator -ansh
|
||||
if (tab === 'MyProfile') {
|
||||
navigation.navigate('Profile', {name: store.me.handle})
|
||||
} else {
|
||||
// @ts-ignore must be Home, Search, Notifications, or MyProfile
|
||||
navigation.navigate(tab)
|
||||
}
|
||||
} else {
|
||||
const tabState = getTabState(state, tab)
|
||||
if (tabState === TabState.InsideAtRoot) {
|
||||
|
|
|
@ -18,10 +18,12 @@ import {
|
|||
SatelliteDishIcon,
|
||||
SatelliteDishIconSolid,
|
||||
UserIcon,
|
||||
UserIconSolid,
|
||||
} from 'lib/icons'
|
||||
import {Link} from 'view/com/util/Link'
|
||||
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
|
||||
import {makeProfileLink} from 'lib/routes/links'
|
||||
import {CommonNavigatorParams} from 'lib/routes/types'
|
||||
|
||||
export const BottomBarWeb = observer(function BottomBarWebImpl() {
|
||||
const store = useStores()
|
||||
|
@ -89,13 +91,16 @@ export const BottomBarWeb = observer(function BottomBarWebImpl() {
|
|||
}}
|
||||
</NavItem>
|
||||
<NavItem routeName="Profile" href={makeProfileLink(store.me)}>
|
||||
{() => (
|
||||
<UserIcon
|
||||
size={28}
|
||||
strokeWidth={1.5}
|
||||
style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
|
||||
/>
|
||||
)}
|
||||
{({isActive}) => {
|
||||
const Icon = isActive ? UserIconSolid : UserIcon
|
||||
return (
|
||||
<Icon
|
||||
size={28}
|
||||
strokeWidth={1.5}
|
||||
style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
</NavItem>
|
||||
</Animated.View>
|
||||
)
|
||||
|
@ -107,7 +112,14 @@ const NavItem: React.FC<{
|
|||
routeName: string
|
||||
}> = ({children, href, routeName}) => {
|
||||
const currentRoute = useNavigationState(getCurrentRoute)
|
||||
const isActive = isTab(currentRoute.name, routeName)
|
||||
const store = useStores()
|
||||
const isActive =
|
||||
currentRoute.name === 'Profile'
|
||||
? isTab(currentRoute.name, routeName) &&
|
||||
(currentRoute.params as CommonNavigatorParams['Profile']).name ===
|
||||
store.me.handle
|
||||
: isTab(currentRoute.name, routeName)
|
||||
|
||||
return (
|
||||
<Link href={href} style={styles.ctrl}>
|
||||
{children({isActive})}
|
||||
|
|
Loading…
Reference in New Issue