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
Ansh 2023-09-15 04:40:59 +05:30 committed by GitHub
parent e643c43459
commit 50f811666a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 12 deletions

View File

@ -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

View File

@ -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) {

View File

@ -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})}