Web login/signup and shell

src/view/shell/desktop/LeftNav.tsx

@@ -41,18 +41,31 @@ import {router} from '../../../routes'
 import {makeProfileLink} from 'lib/routes/links'
 import {useLingui} from '@lingui/react'
 import {Trans, msg} from '@lingui/macro'
+import {useGetProfile} from '#/data/useGetProfile'
+import {useSession} from '#/state/session'
 
 const ProfileCard = observer(function ProfileCardImpl() {
-  const store = useStores()
+  const {currentAccount} = useSession()
+  const {
+    isLoading,
+    isError,
+    data: profile,
+  } = useGetProfile({did: currentAccount!.did})
   const {isDesktop} = useWebMediaQueries()
   const size = 48
-  return store.me.handle ? (
+
+  if (isError || !profile || !currentAccount) return null
+
+  return !isLoading ? (
     <Link
-      href={makeProfileLink(store.me)}
+      href={makeProfileLink({
+        did: currentAccount.did,
+        handle: currentAccount.handle,
+      })}
       style={[styles.profileCard, !isDesktop && styles.profileCardTablet]}
       title="My Profile"
       asAnchor>
-      <UserAvatar avatar={store.me.avatar} size={size} />
+      <UserAvatar avatar={profile.avatar} size={size} />
     </Link>
   ) : (
     <View style={[styles.profileCard, !isDesktop && styles.profileCardTablet]}>
@@ -255,7 +268,7 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
         pal.view,
         pal.border,
       ]}>
-      {store.session.hasSession && <ProfileCard />}
+      <ProfileCard />
       <BackBtn />
       <NavItem
         href="/"
@@ -360,26 +373,24 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
         }
         label="Moderation"
       />
-      {store.session.hasSession && (
-        <NavItem
-          href={makeProfileLink(store.me)}
-          icon={
-            <UserIcon
-              strokeWidth={1.75}
-              size={isDesktop ? 28 : 30}
-              style={pal.text}
-            />
-          }
-          iconFilled={
-            <UserIconSolid
-              strokeWidth={1.75}
-              size={isDesktop ? 28 : 30}
-              style={pal.text}
-            />
-          }
-          label="Profile"
-        />
-      )}
+      <NavItem
+        href={makeProfileLink(store.me)}
+        icon={
+          <UserIcon
+            strokeWidth={1.75}
+            size={isDesktop ? 28 : 30}
+            style={pal.text}
+          />
+        }
+        iconFilled={
+          <UserIconSolid
+            strokeWidth={1.75}
+            size={isDesktop ? 28 : 30}
+            style={pal.text}
+          />
+        }
+        label="Profile"
+      />
       <NavItem
         href="/settings"
         icon={
@@ -398,7 +409,7 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
         }
         label="Settings"
       />
-      {store.session.hasSession && <ComposeBtn />}
+      <ComposeBtn />
     </View>
   )
 })

src/view/shell/desktop/RightNav.tsx

@@ -14,11 +14,13 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {pluralize} from 'lib/strings/helpers'
 import {formatCount} from 'view/com/util/numeric/format'
 import {useModalControls} from '#/state/modals'
+import {useSession} from '#/state/session'
 
 export const DesktopRightNav = observer(function DesktopRightNavImpl() {
   const store = useStores()
   const pal = usePalette('default')
   const palError = usePalette('error')
+  const {hasSession, currentAccount} = useSession()
 
   const {isTablet} = useWebMediaQueries()
   if (isTablet) {
@@ -27,8 +29,8 @@ export const DesktopRightNav = observer(function DesktopRightNavImpl() {
 
   return (
     <View style={[styles.rightNav, pal.view]}>
-      {store.session.hasSession && <DesktopSearch />}
-      {store.session.hasSession && <DesktopFeeds />}
+      {hasSession && <DesktopSearch />}
+      {hasSession && <DesktopFeeds />}
       <View style={styles.message}>
         {store.session.isSandbox ? (
           <View style={[palError.view, styles.messageLine, s.p10]}>
@@ -42,8 +44,8 @@ export const DesktopRightNav = observer(function DesktopRightNavImpl() {
             type="md"
             style={pal.link}
             href={FEEDBACK_FORM_URL({
-              email: store.session.currentSession?.email,
-              handle: store.session.currentSession?.handle,
+              email: currentAccount!.email,
+              handle: currentAccount!.handle,
             })}
             text="Send feedback"
           />

src/view/shell/index.tsx

@@ -33,6 +33,7 @@ import {
 } from '#/state/shell'
 import {isAndroid} from 'platform/detection'
 import {useModalControls} from '#/state/modals'
+import {useSession} from '#/state/session'
 
 const ShellInner = observer(function ShellInnerImpl() {
   const store = useStores()
@@ -57,6 +58,8 @@ const ShellInner = observer(function ShellInnerImpl() {
     [setIsDrawerOpen],
   )
   const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
+  const {hasSession} = useSession()
+
   React.useEffect(() => {
     let listener = {remove() {}}
     if (isAndroid) {
@@ -81,9 +84,7 @@ const ShellInner = observer(function ShellInnerImpl() {
             onOpen={onOpenDrawer}
             onClose={onCloseDrawer}
             swipeEdgeWidth={winDim.width / 2}
-            swipeEnabled={
-              !canGoBack && store.session.hasSession && !isDrawerSwipeDisabled
-            }>
+            swipeEnabled={!canGoBack && hasSession && !isDrawerSwipeDisabled}>
             <TabsNavigator />
           </Drawer>
         </ErrorBoundary>

src/view/shell/index.web.tsx

@@ -24,6 +24,7 @@ import {
   useOnboardingState,
 } from '#/state/shell'
 import {useModalControls} from '#/state/modals'
+import {useSession} from '#/state/session'
 
 const ShellInner = observer(function ShellInnerImpl() {
   const store = useStores()
@@ -33,6 +34,8 @@ const ShellInner = observer(function ShellInnerImpl() {
   const onboardingState = useOnboardingState()
   const {isDesktop, isMobile} = useWebMediaQueries()
   const navigator = useNavigation<NavigationProp>()
+  const {hasSession} = useSession()
+
   useAuxClick()
 
   useEffect(() => {
@@ -44,8 +47,7 @@ const ShellInner = observer(function ShellInnerImpl() {
   }, [navigator, store.shell, setDrawerOpen, closeModal])
 
   const showBottomBar = isMobile && !onboardingState.isActive
-  const showSideNavs =
-    !isMobile && store.session.hasSession && !onboardingState.isActive
+  const showSideNavs = !isMobile && hasSession && !onboardingState.isActive
   return (
     <View style={[s.hContentRegion, {overflow: 'hidden'}]}>
       <View style={s.hContentRegion}>