Merge pull request #622 from Aryex82/develop

Change fetch implementation to RTK Query for Idle Members

__mocks__/handlers/members.handler.js

@@ -2,52 +2,66 @@ import { rest } from 'msw';
 const URL = process.env.NEXT_PUBLIC_BASE_URL;
 
 const membersHandlers = [
-	rest.get(`${URL}/members/idle`, (_, res, ctx) => {
-		return res(
-			ctx.status(200),
-			ctx.json({
-				message: 'Idle members returned successfully!',
-				idleMemberUserNames: [
-					'rohan-rajgupta',
-					'sumit',
-					'swaraj',
-					'rohit',
-					'tanya',
-					'akshay',
-					'shubham',
-					'devashish',
-					'lakshay',
-					'rucha',
-					'swebert',
-					'nikhil',
-					'ishika',
-					'rajakvk',
-					'moses',
-					'prem',
-					'bhavesh',
-					'ankush',
-					'prakash',
-					'deipayan',
-					'mehul',
-					'ashwini',
-					'amanA',
-					'sagar',
-					'shankar',
-					'aman-saxena',
-					'harshith',
-					'pranav',
-					'ankur',
-					'pujarini',
-					'sanyogita',
-					'pavan',
-					'ankita',
-					'shashwat',
-					'vividh',
-					'rahil',
-				],
-			})
-		);
-	}),
+    rest.get(`${URL}/members/idle`, (_, res, ctx) => {
+        return res(
+            ctx.status(200),
+            ctx.json({
+                message: 'Idle members returned successfully!',
+                idleMemberUserNames: [
+                    'rohan-rajgupta',
+                    'sumit',
+                    'swaraj',
+                    'rohit',
+                    'tanya',
+                    'akshay',
+                    'shubham',
+                    'devashish',
+                    'lakshay',
+                    'rucha',
+                    'swebert',
+                    'nikhil',
+                    'ishika',
+                    'rajakvk',
+                    'moses',
+                    'prem',
+                    'bhavesh',
+                    'ankush',
+                    'prakash',
+                    'deipayan',
+                    'mehul',
+                    'ashwini',
+                    'amanA',
+                    'sagar',
+                    'shankar',
+                    'aman-saxena',
+                    'harshith',
+                    'pranav',
+                    'ankur',
+                    'pujarini',
+                    'sanyogita',
+                    'pavan',
+                    'ankita',
+                    'shashwat',
+                    'vividh',
+                    'rahil',
+                ],
+            })
+        );
+    }),
 ];
 
+export const failedIdleMembersHandler = rest.get(
+    `${URL}/members/idle`,
+    (_, res, ctx) => {
+        return res(
+            ctx.status(500),
+            ctx.json({
+                statusCode: 500,
+                error: 'Internal Server Error',
+                message: 'An internal server error occurred',
+            })
+        );
+    }
+);
+
 export default membersHandlers;

__tests__/Unit/hooks/membersApi.test.tsx

@@ -0,0 +1,73 @@
+import { setupServer } from 'msw/node';
+import handlers, {
+    failedIdleMembersHandler,
+} from '../../../__mocks__/handlers/members.handler.js';
+
+import { PropsWithChildren } from 'react';
+import { act, renderHook } from '@testing-library/react-hooks';
+import { Provider } from 'react-redux';
+import { store } from '@/app/store';
+import { useGetIdleMembersQuery } from '@/app/services/membersApi';
+
+const server = setupServer(...handlers);
+
+beforeAll(() => {
+    server.listen();
+});
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+function Wrapper({
+    children,
+}: PropsWithChildren<Record<string, never>>): JSX.Element {
+    return <Provider store={store()}>{children}</Provider>;
+}
+
+describe('useGetIdleMembersQuery', () => {
+    test('returns idle members', async () => {
+        const { result, waitForNextUpdate } = renderHook(
+            () => useGetIdleMembersQuery(),
+            {
+                wrapper: Wrapper,
+            }
+        );
+
+        const initialResponse = result.current;
+        expect(initialResponse.data).toBeUndefined();
+        expect(initialResponse.isLoading).toBe(true);
+
+        await act(() => waitForNextUpdate());
+
+        const nextResponse = result.current;
+        expect(nextResponse.data).not.toBeUndefined();
+        expect(nextResponse.isLoading).toBe(false);
+        expect(nextResponse.isSuccess).toBe(true);
+        expect(nextResponse.data).toBeDefined();
+    });
+
+    test('checks for error response', async () => {
+        server.use(failedIdleMembersHandler);
+        const { result, waitForNextUpdate } = renderHook(
+            () => useGetIdleMembersQuery(),
+            {
+                wrapper: Wrapper,
+            }
+        );
+
+        const initialResponse = result.current;
+        expect(initialResponse.data).toBeUndefined();
+        expect(initialResponse.isLoading).toBe(true);
+
+        await act(() => waitForNextUpdate());
+
+        const nextResponse = result.current;
+        expect(nextResponse.isError).toBe(true);
+        expect(nextResponse.error).toHaveProperty('status', 500);
+
+        expect(nextResponse.error).toHaveProperty('data', {
+            statusCode: 500,
+            error: 'Internal Server Error',
+            message: 'An internal server error occurred',
+        });
+    });
+});

src/app/services/api.ts

@@ -22,6 +22,7 @@ export const api = createApi({
         'User',
         'Tags',
         'Levels',
+        'Idle_Members',
         'User_Standup',
     ],
     /**

src/app/services/membersApi.ts

@@ -0,0 +1,22 @@
+import { MEMBERS_IDLE } from '@/constants/url';
+import { api } from './api';
+
+type IdleMembersResponse = { idleMemberUserNames: string[] };
+export const membersApi = api.injectEndpoints({
+    endpoints: (build) => ({
+        getIdleMembers: build.query<string[], void>({
+            query: () => MEMBERS_IDLE,
+            providesTags: ['Idle_Members'],
+            transformResponse: (response: IdleMembersResponse) => {
+                const filterMembers = response.idleMemberUserNames.filter(
+                    (username: string) => username
+                );
+                const sortedIdleMembers = filterMembers.sort();
+
+                return sortedIdleMembers;
+            },
+        }),
+    }),
+});
+
+export const { useGetIdleMembersQuery } = membersApi;

src/constants/url.ts

@@ -11,6 +11,7 @@ export const LOGIN_URL = `https://github.com/login/oauth/authorize?client_id=23c
 export const MEMBERS_URL = 'https://members.realdevsquad.com';
 export const CHALLENGES_URL = `${BASE_URL}/challenges`;
 export const USER_SELF = `${BASE_URL}/users/self`;
+export const MEMBERS_IDLE = `${BASE_URL}/members/idle`;
 export const DEFAULT_AVATAR = '/Avatar.png';
 export const RDS_LOGO = '/RDSLogo.png';
 export const GITHUB_LOGO = '/github-white.png';

src/pages/availability-panel/index.tsx

@@ -9,14 +9,19 @@ import updateTasksStatus from '@/helperFunctions/updateTasksStatus';
 import { AVAILABLE } from '@/constants/task-status';
 import { FEATURE } from '@/constants/task-type';
 import { BASE_URL } from '@/constants/url';
+import { useGetIdleMembersQuery } from '@/app/services/membersApi';
 
 const AvailabilityPanel: FC = () => {
-    const [idleMembersList, setIdleMembersList] = useState<string[]>([]);
     const [unAssignedTasks, setUnAssignedTasks] = useState<task[]>([]);
     const [error, setError] = useState<boolean>(false);
     const [isTaskLoading, setIsTaskLoading] = useState<boolean>(true);
-    const [isMemberLoading, setIsMemberLoading] = useState<boolean>(true);
     const [refreshData, setRefreshData] = useState<boolean>(false);
+    const {
+        data: idleMembersList = [],
+        isError: isIdleMembersError,
+        isLoading: isIdleMemberLoading,
+        refetch: refreshMemberList,
+    } = useGetIdleMembersQuery();
 
     useEffect(() => {
         const fetchTasks = async () => {
@@ -36,42 +41,24 @@ const AvailabilityPanel: FC = () => {
                 setIsTaskLoading(false);
             }
         };
-        const fetchIdleUsers = async () => {
-            try {
-                const url = `${process.env.NEXT_PUBLIC_BASE_URL}/members/idle`;
-                const { requestPromise } = fetch({ url });
-                const fetchPromise = await requestPromise;
-                const { idleMemberUserNames } = fetchPromise.data;
-                const filterMembers = idleMemberUserNames.filter(
-                    (username: string) => username
-                );
-                const sortedIdleMembers = filterMembers.sort();
-                setIdleMembersList(sortedIdleMembers);
-                setError(false);
-            } catch (Error) {
-                setError(true);
-            } finally {
-                setIsMemberLoading(false);
-            }
-        };
         fetchTasks();
-        fetchIdleUsers();
     }, [refreshData]);
 
     let isErrorOrIsLoading;
-    if (error) {
+    if (error || isIdleMembersError) {
         isErrorOrIsLoading = (
             <span className={classNames.statusMessage}>
                 Something went wrong, please contact admin!
             </span>
         );
-    } else if (isTaskLoading || isMemberLoading) {
+    } else if (isTaskLoading || isIdleMemberLoading) {
         isErrorOrIsLoading = (
             <span className={classNames.statusMessage}>Loading...</span>
         );
     }
 
     const getData = () => {
+        refreshMemberList();
         setRefreshData(!refreshData);
     };