chore(): adjust profile app routes (#2506)

AKASHAorg · Dec 4, 2024 · 13ba21f · 13ba21f
1 parent 0fd1a27
commit 13ba21f
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 47 deletions.
diff --git 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<IRouterContext>()({
   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
@@ -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
@@ -41,13 +41,13 @@ const FollowersPage: React.FC<FollowersPageProps> = 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
@@ -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<FollowingPageProps> = 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);