chore: improving querykeys

Author: diana-villalvazo-wgu

package.json

@@ -18,7 +18,7 @@
     "*.scss"
   ],
   "scripts": {
-    "dev": "PORT=8081 PUBLIC_PATH=/instructor openedx dev",
+    "dev": "PORT=8080 PUBLIC_PATH=/instructor openedx dev",
     "i18n_extract": "openedx formatjs extract",
     "lint": "openedx lint .",
     "lint:fix": "openedx lint --fix .",

src/dateExtensions/DateExtensionsPage.test.tsx

@@ -2,9 +2,9 @@ import { render, screen } from '@testing-library/react';
 import { IntlProvider } from '@openedx/frontend-base';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import DateExtensionsPage from './DateExtensionsPage';
-import { useDateExtensions } from '../data/apiHook';
+import { useDateExtensions } from './data/apiHook';
 
-jest.mock('../data/apiHook', () => ({
+jest.mock('./data/apiHook', () => ({
   useDateExtensions: jest.fn(),
 }));
 

src/dateExtensions/components/DateExtensionsList.test.tsx

@@ -2,7 +2,7 @@ import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import DateExtensionsList, { DateExtensionListProps } from './DateExtensionsList';
 import { renderWithIntl } from '../../testUtils';
-import { useDateExtensions } from '../../data/apiHook';
+import { useDateExtensions } from '../data/apiHook';
 
 const mockData = [
   {
@@ -15,7 +15,7 @@ const mockData = [
   }
 ];
 
-jest.mock('../../data/apiHook', () => ({
+jest.mock('../data/apiHook', () => ({
   useDateExtensions: jest.fn(),
 }));
 

src/dateExtensions/components/DateExtensionsList.tsx

@@ -2,7 +2,7 @@ import { useIntl } from '@openedx/frontend-base';
 import { Button, DataTable } from '@openedx/paragon';
 import messages from '../messages';
 import { LearnerDateExtension } from '../types';
-import { useDateExtensions } from '../../data/apiHook';
+import { useDateExtensions } from '../data/apiHook';
 import { useParams } from 'react-router-dom';
 import { useState } from 'react';
 
@@ -12,7 +12,7 @@ import { useState } from 'react';
 //   { id: 2, username: 'dianaSalas', fullname: 'Diana Villalvazo', email: 'diana.villalvazo@example.com', graded_subsection: 'Three body diagrams', extended_due_date: '2026-07-15' },
 // ];
 
-export const DATE_EXTENSIONS_PAGE_SIZE = 25;
+const DATE_EXTENSIONS_PAGE_SIZE = 25;
 
 export interface DateExtensionListProps {
   onResetExtensions?: (user: LearnerDateExtension) => void,

src/dateExtensions/data/apiHook.ts

@@ -4,7 +4,7 @@ import { dateExtensionsQueryKeys } from './queryKeys';
 
 export const useDateExtensions = (courseId: string, pagination: PaginationQueryKeys) => (
   useQuery({
-    queryKey: dateExtensionsQueryKeys.byCourse(courseId),
+    queryKey: dateExtensionsQueryKeys.byCoursePaginated(courseId, pagination),
     queryFn: () => getDateExtensions(courseId, pagination),
   })
 );

src/dateExtensions/data/queryKeys.ts

@@ -1,6 +1,8 @@
 import { appId } from '../../constants';
+import { PaginationQueryKeys } from './api';
 
 export const dateExtensionsQueryKeys = {
   all: [appId, 'dateExtensions'] as const,
-  byCourse: (courseId: string) => [appId, 'dateExtensions', courseId] as const,
+  byCourse: (courseId: string) => [...dateExtensionsQueryKeys.all, courseId] as const,
+  byCoursePaginated: (courseId: string, pagination: PaginationQueryKeys) => [...dateExtensionsQueryKeys.byCourse(courseId), pagination.page] as const,
 };