diff --git a/extensions/apps/profile/src/components/app-routes/index.tsx b/extensions/apps/profile/src/components/app-routes/index.tsx index 9ec57a82eb..84e24ef451 100644 --- a/extensions/apps/profile/src/components/app-routes/index.tsx +++ b/extensions/apps/profile/src/components/app-routes/index.tsx @@ -20,14 +20,9 @@ import { ScrollRestoration, redirect, } from '@tanstack/react-router'; -import { - GetProfileByDidDocument, - GetFollowersListByDidDocument, - GetFollowingListByDidDocument, -} from '@akashaorg/ui-awf-hooks/lib/generated/apollo'; +import { GetProfileByDidDocument } from '@akashaorg/ui-awf-hooks/lib/generated/apollo'; import { ICreateRouter, IRouterContext } from '@akashaorg/typings/lib/ui'; import { NotFoundComponent } from './not-found-component'; -import { ENTRY_PER_PAGE } from '../pages/constants'; const rootRoute = createRootRouteWithContext()({ component: () => ( @@ -52,7 +47,13 @@ const defaultRoute = createRoute({ const profileInfoRoute = createRoute({ getParentRoute: () => rootRoute, - path: '$profileDID', + path: '/$profileDID', + component: Outlet, +}); + +const profileInfoIndexRoute = createRoute({ + getParentRoute: () => profileInfoRoute, + path: '/', loader: ({ context, params }) => { context.apolloClient.query({ query: GetProfileByDidDocument, @@ -74,8 +75,8 @@ const profileInfoRoute = createRoute({ }); const profileEditRoute = createRoute({ - getParentRoute: () => rootRoute, - path: `$profileDID${menuRoute[EDIT]}`, + getParentRoute: () => profileInfoRoute, + path: `${menuRoute[EDIT]}`, component: () => { const { profileDID } = profileEditRoute.useParams(); return ( @@ -91,17 +92,8 @@ const profileEditRoute = createRoute({ }); const followersRoute = createRoute({ - getParentRoute: () => rootRoute, - path: `$profileDID${menuRoute[FOLLOWERS]}`, - loader: ({ context, params }) => { - context.apolloClient.query({ - query: GetFollowersListByDidDocument, - variables: { - id: params.profileDID, - first: ENTRY_PER_PAGE, - }, - }); - }, + getParentRoute: () => profileInfoRoute, + path: `${menuRoute[FOLLOWERS]}`, component: () => { const { profileDID } = followersRoute.useParams(); return ( @@ -118,17 +110,8 @@ const followersRoute = createRoute({ }); const followingRoute = createRoute({ - getParentRoute: () => rootRoute, - path: `$profileDID${menuRoute[FOLLOWING]}`, - loader: ({ context, params }) => { - context.apolloClient.query({ - query: GetFollowingListByDidDocument, - variables: { - id: params.profileDID, - first: ENTRY_PER_PAGE, - }, - }); - }, + getParentRoute: () => profileInfoRoute, + path: `${menuRoute[FOLLOWING]}`, component: () => { const { profileDID } = followingRoute.useParams(); return ( @@ -145,8 +128,8 @@ const followingRoute = createRoute({ }); const interestsRoute = createRoute({ - getParentRoute: () => rootRoute, - path: `$profileDID${menuRoute[INTERESTS]}`, + getParentRoute: () => profileInfoRoute, + path: `${menuRoute[INTERESTS]}`, component: () => { const { profileDID } = interestsRoute.useParams(); return ( @@ -161,8 +144,8 @@ const interestsRoute = createRoute({ }); const beamsRoute = createRoute({ - getParentRoute: () => rootRoute, - path: `$profileDID${menuRoute[BEAMS]}`, + getParentRoute: () => profileInfoRoute, + path: `${menuRoute[BEAMS]}`, component: () => { const { profileDID } = beamsRoute.useParams(); return ( @@ -178,12 +161,14 @@ const beamsRoute = createRoute({ const routeTree = rootRoute.addChildren([ defaultRoute, - profileInfoRoute, - profileEditRoute, - followersRoute, - followingRoute, - interestsRoute, - beamsRoute, + profileInfoRoute.addChildren([ + profileInfoIndexRoute, + profileEditRoute, + followersRoute, + followingRoute, + interestsRoute, + beamsRoute, + ]), ]); export const router = ({ baseRouteName, apolloClient }: ICreateRouter) => diff --git a/extensions/apps/profile/src/components/pages/constants.ts b/extensions/apps/profile/src/components/pages/constants.ts index bccb5c2489..8681f728ef 100644 --- a/extensions/apps/profile/src/components/pages/constants.ts +++ b/extensions/apps/profile/src/components/pages/constants.ts @@ -1,3 +1,3 @@ export const ENTRY_PER_PAGE = 10; -export const ENTRY_HEIGHT = 72; +export const ENTRY_HEIGHT = 57; export const ITEM_SPACING = 16; diff --git a/extensions/apps/profile/src/components/pages/followers/index.tsx b/extensions/apps/profile/src/components/pages/followers/index.tsx index 62471d0f8e..de0a11f34f 100644 --- a/extensions/apps/profile/src/components/pages/followers/index.tsx +++ b/extensions/apps/profile/src/components/pages/followers/index.tsx @@ -41,13 +41,13 @@ const FollowersPage: React.FC = props => { const profileData = selectProfileData(profileDataReq.data); const { data, loading, error, fetchMore } = useGetFollowersListByDidQuery({ - fetchPolicy: - 'cache-only' /* data is prefetched during route matching as a result we read from cache here */, + fetchPolicy: 'cache-first', variables: { id: profileDID, first: ENTRY_PER_PAGE, }, skip: !isLoggedIn, + notifyOnNetworkStatusChange: true, }); const pageInfo = selectPageInfo(data); diff --git a/extensions/apps/profile/src/components/pages/following/index.tsx b/extensions/apps/profile/src/components/pages/following/index.tsx index 93674d7042..f67839db59 100644 --- a/extensions/apps/profile/src/components/pages/following/index.tsx +++ b/extensions/apps/profile/src/components/pages/following/index.tsx @@ -14,7 +14,7 @@ import { useRootComponentProps, useAkashaStore, useNsfwToggling } from '@akashao import { useTranslation } from 'react-i18next'; import { ENTRY_PER_PAGE, ITEM_SPACING } from '../constants'; import { selectProfileData } from '@akashaorg/ui-awf-hooks/lib/selectors/get-profile-by-did-query'; -import { selectPageInfo } from '@akashaorg/ui-awf-hooks/lib/selectors/get-followers-list-by-did-query'; +import { selectPageInfo } from '@akashaorg/ui-awf-hooks/lib/selectors/get-followings-list-by-did-query'; type FollowingPageProps = { profileDID: string; @@ -41,13 +41,13 @@ const FollowingPage: React.FC = props => { const profileData = selectProfileData(profileDataReq.data); const { data, loading, error, fetchMore } = useGetFollowingListByDidQuery({ - fetchPolicy: - 'cache-only' /* data is prefetched during route matching as a result we read from cache here */, + fetchPolicy: 'cache-first', variables: { id: profileDID, first: ENTRY_PER_PAGE, }, skip: !isLoggedIn, + notifyOnNetworkStatusChange: true, }); const pageInfo = selectPageInfo(data);