fix/performance-issues: home page api changes

app/actions/members.actions.ts

@@ -0,0 +1,46 @@
+'use server'
+
+import { IMemberListOptions } from "@/types/members.types";
+import { getHeader } from "@/utils/common.utils";
+
+export const getMemberListForQuery = async (options: IMemberListOptions, currentPage: number, limit: number, authToken?: string) => {
+    const response = await fetch(`${process.env.DIRECTORY_API_URL}/v1/members?page=${currentPage}&limit=${limit}${options ? '&' + new URLSearchParams(options as any) : ''}`, {
+      cache: 'force-cache',
+      method: 'GET',
+      next: { tags: ['member-list'] },
+      headers: getHeader(authToken?? ''),
+    });
+
+    if(!response.ok){
+      return { isError: true, error: { status: response.status, statusText: response.statusText } };
+    }
+    const result = await response.json();
+    const formattedMembers: any = result?.members?.map((member: any) => {
+      const teams = member?.teamMemberRoles?.map((teamMemberRole: any) => ({
+        id: teamMemberRole.team?.uid || '',
+        name: teamMemberRole.team?.name || '',
+        role: teamMemberRole.role || 'Contributor',
+        teamLead: !!teamMemberRole.teamLead,
+        mainTeam: !!teamMemberRole.mainTeam,
+      })) || [];
+      const mainTeam = teams.find((team: any) => team.mainTeam);
+      const teamLead = teams.some((team: any) => team.teamLead);
+      return {
+        id: member.uid,
+        name: member.name,
+        profile: member.image?.url || null,
+        officeHours: member.officeHours || null,
+        skills: member.skills || [],
+        teams,
+        location: member?.location,
+        mainTeam,
+        teamLead,
+        openToWork: member.openToWork || false,
+      }
+    })
+    return {
+      total: result?.count,
+      items: formattedMembers,
+    };
+  }
+

app/actions/teams.actions.ts

@@ -2,10 +2,11 @@
 
 import { ITeamResponse } from "@/types/teams.types";
 import { getHeader } from "@/utils/common.utils";
+import { ITEMS_PER_PAGE } from "@/utils/constants";
 
 const teamsAPI = `${process.env.DIRECTORY_API_URL}/v1/teams`;
 
-export const getTeamList = async (queryParams: any, currentPage = 1, limit = 50) => {
+export const getTeamList = async (queryParams: any, currentPage = 1, limit = ITEMS_PER_PAGE) => {
     const requestOptions: RequestInit = { method: 'GET', headers: getHeader(''), cache: 'force-cache', next: { tags: ['team-list'] } };
     const response = await fetch(`${teamsAPI}?page=${currentPage}&limit=${limit}&${new URLSearchParams(queryParams)}`, requestOptions);
     const result = await response.json();

app/members/page.tsx

@@ -2,16 +2,16 @@ import { getCookiesFromHeaders } from '@/utils/next-helpers';
 import styles from './page.module.css';
 import { IMember, IMembersSearchParams } from '@/types/members.types';
 import { IUserInfo } from '@/types/shared.types';
-import { getFormattedFilters, getMembersListOptions, getMembersOptionsFromQuery, getRoleTagsFromValues, parseMemberFilters } from '@/utils/member.utils';
-import { getFilterValuesForQuery, getMemberListForQuery, getMemberRoles, getMembersFilters } from '@/services/members.service';
+import { getFormattedFilters, getMembersListOptions, getMembersOptionsFromQuery, getRoleTagsFromValues } from '@/utils/member.utils';
+import { getFilterValuesForQuery, getMemberRoles, } from '@/services/members.service';
 import Error from '@/components/core/error';
 import MembersToolbar from '@/components/page/members/members-toolbar';
 import FilterWrapper from '@/components/page/members/filter-wrapper';
 import EmptyResult from '@/components/core/empty-result';
-import MemberListWrapper from '@/components/page/members/member-list-wrapper';
 import { Metadata } from 'next';
-import { SOCIAL_IMAGE_URL } from '@/utils/constants';
+import { ITEMS_PER_PAGE, SOCIAL_IMAGE_URL } from '@/utils/constants';
 import MemberInfiniteList from '@/components/page/members/member-infinite-list';
+import { getMemberListForQuery } from '../actions/members.actions';
 
 async function Page({ searchParams }: { searchParams: IMembersSearchParams }) {
   const { userInfo } = getCookiesFromHeaders();
@@ -59,7 +59,7 @@ const getPageData = async (searchParams: IMembersSearchParams) => {
     const [rawFilterValues, availableFilters, memberList, memberRoles] = await Promise.all([
       getFilterValuesForQuery(null, authToken),
       getFilterValuesForQuery(filtersFromQueryParams, authToken),
-      getMemberListForQuery(memberFilterQuery, 1, 6, authToken),
+      getMemberListForQuery(memberFilterQuery, 1, ITEMS_PER_PAGE, authToken),
       getMemberRoles(filtersFromQueryParams)
     ]);
 

app/page.tsx

@@ -87,6 +87,7 @@ const getPageData = async () => {
         discoverData
     }
   } catch (error) {
+    console.log(error)
     isError = true;
     return {
       isError,

components/page/members/member-infinite-list.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { PAGE_ROUTES, TOAST_MESSAGES, VIEW_TYPE_OPTIONS } from '@/utils/constants';
-import MembersList from './members-list';
+import { ITEMS_PER_PAGE, PAGE_ROUTES, TOAST_MESSAGES, VIEW_TYPE_OPTIONS } from '@/utils/constants';
 import MemberGridView from './member-grid-view';
 import MemberListView from './member-list-view';
 import { IMember, IMemberListOptions } from '@/types/members.types';
@@ -10,10 +9,10 @@ import { useMemberAnalytics } from '@/analytics/members.analytics';
 import Link from 'next/link';
 import usePagination from '@/hooks/irl/use-pagination';
 import { useEffect, useRef, useState } from 'react';
-import { getMemberListForQuery } from '@/services/members.service';
 import { getMembersListOptions, getMembersOptionsFromQuery } from '@/utils/member.utils';
 import cookies from 'js-cookie';
 import TableLoader from '@/components/core/table-loader';
+import { getMemberListForQuery } from '@/app/actions/members.actions';
 
 const MemberInfiniteList = (props: any) => {
   const members = props?.members ?? [];
@@ -47,7 +46,7 @@ const MemberInfiniteList = (props: any) => {
       const authToken = cookies.get('authToken');
       const optionsFromQuery = getMembersOptionsFromQuery(searchParams);
       const listOptions: IMemberListOptions = getMembersListOptions(optionsFromQuery);
-      const teamsRes = await getMemberListForQuery(listOptions, currentPage, 6, authToken);
+      const teamsRes = await getMemberListForQuery(listOptions, currentPage, ITEMS_PER_PAGE, authToken);
       if (teamsRes.isError) {
         setIsLoading(false);
         toast.error(TOAST_MESSAGES.SOMETHING_WENT_WRONG);
@@ -75,7 +74,7 @@ const MemberInfiniteList = (props: any) => {
 
     // Sync team list
     useEffect(() => {
-    setPagination({ page: 1, limit: 6 });
+    setPagination({ page: 1, limit: ITEMS_PER_PAGE});
     setUserList({ users: members, totalItems: totalItems });
   }, [members]);
 

components/page/teams/team-list.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ITeam, ITeamListOptions, ITeamsSearchParams } from '@/types/teams.types';
-import { PAGE_ROUTES, TOAST_MESSAGES, VIEW_TYPE_OPTIONS } from '@/utils/constants';
+import { ITEMS_PER_PAGE, PAGE_ROUTES, TOAST_MESSAGES, VIEW_TYPE_OPTIONS } from '@/utils/constants';
 import { useEffect, useRef, useState } from 'react';
 import { getAnalyticsTeamInfo, getAnalyticsUserInfo, triggerLoader } from '@/utils/common.utils';
 import TeamGridView from './team-grid-view';
@@ -43,7 +43,7 @@ const TeamList = (props: any) => {
       setIsLoading(true);
       const optionsFromQuery = getTeamsOptionsFromQuery(searchParams);
       const listOptions: ITeamListOptions = getTeamsListOptions(optionsFromQuery);
-      const teamsRes = await getTeamList(listOptions, currentPage, 50);
+      const teamsRes = await getTeamList(listOptions, currentPage);
       if (teamsRes.isError) {
         setIsLoading(false);
         toast.error(TOAST_MESSAGES.SOMETHING_WENT_WRONG);
@@ -77,7 +77,7 @@ const TeamList = (props: any) => {
 
   // Sync team list
   useEffect(() => {
-    setPagination({ page: 1, limit: 50 });
+    setPagination({ page: 1, limit: ITEMS_PER_PAGE });
     setTeamList({ teams: allTeams, totalTeams: totalTeams });
   }, [allTeams]);
 

services/home.service.ts

@@ -13,10 +13,10 @@ export const getFeaturedData = async () => {
 
   const result = await response.json();
 
-  const formattedMembers = getformattedMembers(result?.members || []);
-  const formattedTeams = getFormattedTeams(result?.teams || []);
+  const formattedMembers = getformattedMembers(result?.members?.members || []);
+  const formattedTeams = getFormattedTeams(result?.teams?.teams || []);
   const formattedEvents = getFormattedEvents(result?.events || []);
-  const formattedProjects = getFormattedProjects(result.projects || []);
+  const formattedProjects = getFormattedProjects(result.projects?.projects || []);
 
   const maxLength = Math.max(formattedMembers.length, formattedTeams.length, formattedEvents.length, formattedProjects.length);