From 353c79e8239c210880db1f16cfe20276bd319336 Mon Sep 17 00:00:00 2001 From: yash raj Date: Sun, 18 Aug 2024 00:48:15 +0530 Subject: [PATCH 1/2] integrate api to get only members list --- pages/index.tsx | 7 ------- src/services/serverApi.ts | 21 +++++++++++++++------ 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index f93d3ae..41b0157 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -33,13 +33,6 @@ type PropsType = { }; export default function Home(props: PropsType) { - // TODO: Remove this once the /users api has support for `role` query param - if (true) { - return ( - - ) - } - return (
diff --git a/src/services/serverApi.ts b/src/services/serverApi.ts index 77decf3..889f06f 100644 --- a/src/services/serverApi.ts +++ b/src/services/serverApi.ts @@ -20,13 +20,24 @@ export const serverApi = createApi({ return action.payload[reducerPath]; } }, - tagTypes: ['Skill', 'Contributions', 'ActiveTasks', 'AllUsers', 'User'], + tagTypes: [ + 'Skill', + 'Contributions', + 'ActiveTasks', + 'AllUsers', + 'User', + 'AllMembers', + ], endpoints: (builder) => ({ // Queries getAllUsers: builder.query({ query: () => BASE_URL + '/users?size=100', providesTags: ['AllUsers'], }), + getAllMembers: builder.query({ + query: () => BASE_URL + '/users?roles=member', + providesTags: ['AllMembers'], + }), getUser: builder.query({ query: (userName) => `${BASE_URL}/users/${userName}`, providesTags: ['User'], @@ -87,17 +98,15 @@ export const { useUpdateMemberRoleMutation, useUpdateTaskStatusMutation, useUpdateUserRoleMutation, + useGetAllMembersQuery, } = serverApi; export const useGetMembers = () => { const { data, isLoading, isFetching, error } = - serverApi.useGetAllUsersQuery(); + serverApi.useGetAllMembersQuery(); const usersWithMemberRole = data?.users?.filter( - (member: UserType) => - member?.roles.member === true && - member?.first_name && - !member.roles.archived, + (member: UserType) => member?.first_name && !member.roles.archived, ); // To show the members in an Alphabetical Order w.r.t their first name. const sortedMembers = usersWithMemberRole?.sort((a, b) => From a4056e85dedb47b922b51fe491e3c9247c12a58d Mon Sep 17 00:00:00 2001 From: yash raj Date: Sun, 18 Aug 2024 02:14:59 +0530 Subject: [PATCH 2/2] add a load more button to load non members --- pages/index.tsx | 34 +++++++---- src/components/NewMemberSection/index.tsx | 33 ++++++++--- .../newMemberSection.module.css | 35 ++++++++++++ src/services/serverApi.ts | 56 +++++++++++++++++-- src/types/user.ts | 4 ++ 5 files changed, 138 insertions(+), 24 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 41b0157..1dc9b8f 100644 --- a/pages/index.tsx +++ b/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 ( -
-
-

Real Dev Squad Members

- -
-
-

{NEW_USER}

- +export default function Home() { + const { query } = useRouter() + + if (query.dev === "true") { + return ( +
+
+

Real Dev Squad Members

+ +
+
+

{NEW_USER}

+ +
-
- ); + ); + } + + // TODO: Remove this once the /users api has support for `role` query param + return ( + + ) } diff --git a/src/components/NewMemberSection/index.tsx b/src/components/NewMemberSection/index.tsx index 98b2f39..161935c 100644 --- a/src/components/NewMemberSection/index.tsx +++ b/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 ( - +
+ + + {links?.next && links.next.length && +
+ + +
+ } +
); } diff --git a/src/components/NewMemberSection/newMemberSection.module.css b/src/components/NewMemberSection/newMemberSection.module.css index 6625f0e..e07d2d3 100644 --- a/src/components/NewMemberSection/newMemberSection.module.css +++ b/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; +} \ No newline at end of file diff --git a/src/services/serverApi.ts b/src/services/serverApi.ts index 889f06f..cd809fa 100644 --- a/src/services/serverApi.ts +++ b/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({ + 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(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) => ({ diff --git a/src/types/user.ts b/src/types/user.ts index 787332f..d6ffab5 100644 --- a/src/types/user.ts +++ b/src/types/user.ts @@ -13,4 +13,8 @@ type RolesType = { export type UsersResponseType = { message: string; users: UserType[]; + links: { + prev: string; + next: string; + }; };