add a load more button to load non members

pages/index.tsx

@@ -9,6 +9,7 @@ import MembersSectionMain from '@/src/components/MembersSectionNew/MembersSectio
 import NewMemberSection from '@/src/components/NewMemberSection';
 import { UserType } from '../src/components/MembersSectionNew/types/MembersSection.type';
 import { MaintenancePage } from '@/src/components/MaintenancePage/MaintenancePage';
+import { useRouter } from 'next/router';
 type PictureType = {
   publicId: string;
   url: string;
@@ -32,17 +33,26 @@ type PropsType = {
   pageProps: PagePropsType;
 };
 
-export default function Home(props: PropsType) {
-  return (
-    <div className={styles.container}>
-      <div>
-        <h1 className={styles.heading}>Real Dev Squad Members</h1>
-        <MembersSectionMain />
-      </div>
-      <div>
-        <h1 className={styles.heading}>{NEW_USER}</h1>
-        <NewMemberSection />
+export default function Home() {
+  const { query } = useRouter()
+
+  if (query.dev === "true") {
+    return (
+      <div className={styles.container}>
+        <div>
+          <h1 className={styles.heading}>Real Dev Squad Members</h1>
+          <MembersSectionMain />
+        </div>
+        <div>
+          <h1 className={styles.heading}>{NEW_USER}</h1>
+          <NewMemberSection />
+        </div>
       </div>
-    </div>
-  );
+    );
+  }
+
+  // TODO: Remove this once the /users api has support for `role` query param
+  return (
+    <MaintenancePage />
+  )
 }

src/components/NewMemberSection/index.tsx

@@ -1,14 +1,31 @@
-import { Avatar, Box } from '@chakra-ui/react';
+import { useGetUserWithLoadMore } from '@/src/services/serverApi';
 import NewMemberSectionPresentation from './Presentation';
-import { useGetUsers } from '@/src/services/serverApi';
+import { Button } from '@chakra-ui/react';
+import styles from './newMemberSection.module.css'
 
 export default function NewMemberSection() {
-  // we will make the api call here
-  const { data, isLoading, isFetching } = useGetUsers();
+  const { data, isLoading, isFetching, loadMore, links } = useGetUserWithLoadMore()
+
   return (
-    <NewMemberSectionPresentation
-      data={data}
-      isLoading={isLoading || isFetching}
-    />
+    <div>
+      <NewMemberSectionPresentation
+        data={data}
+        isLoading={isLoading}
+      />
+
+      {links?.next && links.next.length &&
+        <div className={styles.newMemberSectionLoadMore__container}>
+
+          <Button
+            onClick={loadMore}
+            isLoading={isFetching}
+            loadingText="Loading..."
+            className={styles.newMemberSectionLoadMore__button}
+          >
+            Load More
+          </Button>
+        </div>
+      }
+    </div>
   );
 }

src/components/NewMemberSection/newMemberSection.module.css

@@ -6,3 +6,38 @@
   gap: 10px;
   justify-content: center;
 }
+
+.newMemberSectionLoadMore__container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.newMemberSectionLoadMore__button {
+  height: 32px;
+  margin: 0 auto;
+  color: #fff;
+  font-size: 0.875rem;
+  border-radius: 100px;
+  padding: 0 0.75rem;
+  background-color: var(--primary-color);
+  transition: all 0.2s ease-in-out;
+}
+
+.newMemberSectionLoadMore__button:hover {
+  opacity: 0.8;
+}
+
+.newMemberSectionLoadMore__button:active {
+  scale: 0.95;
+}
+
+.newMemberSectionLoadMore__button:disabled {
+  color: #020617;
+  background-color: #e2e8f0;
+}
+
+.newMemberSectionLoadMore__button:disabled:hover {
+  color: #020617;
+  background-color: #e2e8f0;
+}

src/services/serverApi.ts

@@ -1,15 +1,16 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import { HYDRATE } from 'next-redux-wrapper';
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { UserType } from '../components/MembersSectionNew/types/MembersSection.type';
 import {
-  tags,
   levels,
-  tagsWithLevelType,
   skills,
+  tags,
+  tagsWithLevelType,
   updateSkills,
 } from '../components/Modals/MembersSkillUpdateModal/types/memberSkills';
-import { UserType } from '../components/MembersSectionNew/types/MembersSection.type';
 import { UsersResponseType } from '../types/user';
-import { useDispatch } from 'react-redux';
 import { notifyError, notifySuccess } from '../utils/toast';
 const BASE_URL = 'https://api.realdevsquad.com';
 
@@ -53,6 +54,18 @@ export const serverApi = createApi({
       query: (userName) => `${BASE_URL}/tasks/${userName}?status=IN_PROGRESS`,
       providesTags: ['ActiveTasks'],
     }),
+    getUsersWithLoadMore: builder.query<UsersResponseType, string | void>({
+      query: (nextUrl) => (nextUrl ? nextUrl : `${BASE_URL}/users?size=100`),
+      serializeQueryArgs: ({ endpointName }) => endpointName,
+      merge: (currentCache, newItems) => {
+        currentCache.users.push(...newItems.users);
+        currentCache.links = newItems.links;
+      },
+      forceRefetch({ currentArg, previousArg }) {
+        return currentArg !== previousArg;
+      },
+      providesTags: ['AllUsers'],
+    }),
     // Mutations
     // TODO add types for mutations
     updateMemberRole: builder.mutation({
@@ -143,6 +156,41 @@ export const useGetUsers = () => {
   };
 };
 
+export const useGetUserWithLoadMore = () => {
+  const [nextUrl, setNextUrl] = useState<string | void>(undefined);
+  const { data, isLoading, isFetching, error } =
+    serverApi.useGetUsersWithLoadMoreQuery(nextUrl);
+
+  const usersWithoutMemberRole = data?.users?.filter(
+    (user: UserType) =>
+      !user?.roles.member &&
+      user?.first_name &&
+      !user.roles.archived &&
+      user.roles.in_discord,
+  );
+
+  const sortedNonMembers = usersWithoutMemberRole?.sort((a, b) =>
+    a.first_name.toLowerCase() > b.first_name.toLowerCase() ? 1 : -1,
+  );
+
+  const nextUrlLink = data?.links?.next;
+
+  const loadMore = () => {
+    if (nextUrlLink && !!nextUrlLink.length) {
+      setNextUrl(data.links.next);
+    }
+  };
+
+  return {
+    data: sortedNonMembers,
+    isLoading,
+    isFetching,
+    error,
+    loadMore,
+    links: data?.links,
+  };
+};
+
 //this is used for getting tags for membersSkillUpdateModal
 export const tagsApi = serverApi.injectEndpoints({
   endpoints: (builder) => ({

src/types/user.ts

@@ -13,4 +13,8 @@ type RolesType = {
 export type UsersResponseType = {
   message: string;
   users: UserType[];
+  links: {
+    prev: string;
+    next: string;
+  };
 };