RTKQ Migration: Question search

config/jest/jest.config.common.js

@@ -24,7 +24,10 @@ module.exports = {
     "transform": {
         "^.+\\.css$": "<rootDir>config/jest/cssTransform.js",
         "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>config/jest/fileTransform.js",
-        '^.+\\.[jt]sx?$': "<rootDir>config/jest/tsTransform.js",
+        "^.+\\.[jt]sx?$": ["ts-jest", {
+            tsconfig: "<rootDir>/tsconfig.json",
+        }],
+
     },
     "transformIgnorePatterns": [
         "/node_modules/(?!@popperjs|katex|leaflet)",

eslint-suppressions.json

@@ -350,9 +350,6 @@
     }
   },
   "src/app/components/elements/layout/SidebarLayout.tsx": {
-    "@stylistic/indent": {
-      "count": 1
-    },
     "@typescript-eslint/no-explicit-any": {
       "count": 4
     },
@@ -439,11 +436,8 @@
     }
   },
   "src/app/components/elements/modals/QuestionSearchModal.tsx": {
-    "@typescript-eslint/no-floating-promises": {
-      "count": 2
-    },
     "react-hooks/exhaustive-deps": {
-      "count": 3
+      "count": 2
     }
   },
   "src/app/components/elements/modals/QuizSettingModal.tsx": {
@@ -731,7 +725,7 @@
       "count": 4
     },
     "@typescript-eslint/no-unused-vars": {
-      "count": 3
+      "count": 2
     },
     "jsx-a11y/anchor-is-valid": {
       "count": 1
@@ -869,7 +863,7 @@
       "count": 2
     },
     "@typescript-eslint/no-floating-promises": {
-      "count": 10
+      "count": 9
     },
     "react-hooks/exhaustive-deps": {
       "count": 2
@@ -924,7 +918,7 @@
   },
   "src/app/components/pages/QuestionFinder.tsx": {
     "react-hooks/exhaustive-deps": {
-      "count": 2
+      "count": 1
     }
   },
   "src/app/components/pages/QuickQuizzes.tsx": {
@@ -983,14 +977,6 @@
       "count": 1
     }
   },
-  "src/app/components/pages/SubjectLandingPage.tsx": {
-    "@typescript-eslint/no-floating-promises": {
-      "count": 1
-    },
-    "react-hooks/exhaustive-deps": {
-      "count": 1
-    }
-  },
   "src/app/components/pages/SubjectOverviewPage.tsx": {
     "@typescript-eslint/no-unused-vars": {
       "count": 2
@@ -1251,11 +1237,6 @@
       "count": 1
     }
   },
-  "src/app/state/slices/api/baseApi.ts": {
-    "@typescript-eslint/no-unused-vars": {
-      "count": 1
-    }
-  },
   "src/app/state/slices/api/contentApi.ts": {
     "@typescript-eslint/no-unused-vars": {
       "count": 2

src/IsaacAppTypes.tsx

@@ -118,10 +118,6 @@ export type Action =
     | {type: ACTION_TYPE.QUESTION_UNLOCK; questionId: string}
     | {type: ACTION_TYPE.QUESTION_SET_CURRENT_ATTEMPT; questionId: string; attempt: Immutable<ApiTypes.ChoiceDTO | ValidatedChoice<ApiTypes.ChoiceDTO>>}
 
-    | {type: ACTION_TYPE.QUESTION_SEARCH_REQUEST}
-    | {type: ACTION_TYPE.QUESTION_SEARCH_RESPONSE_SUCCESS; questionResults: ApiTypes.SearchResultsWrapper<ApiTypes.ContentSummaryDTO>, searchId?: string}
-    | {type: ACTION_TYPE.QUESTION_SEARCH_RESPONSE_FAILURE}
-
     | {type: ACTION_TYPE.MY_QUESTION_ANSWERS_BY_DATE_REQUEST}
     | {type: ACTION_TYPE.MY_QUESTION_ANSWERS_BY_DATE_RESPONSE_SUCCESS; myAnsweredQuestionsByDate: ApiTypes.AnsweredQuestionsByDate}
     | {type: ACTION_TYPE.MY_QUESTION_ANSWERS_BY_DATE_RESPONSE_FAILURE}

src/app/components/elements/layout/SidebarLayout.tsx

@@ -1084,7 +1084,7 @@ export const QuizSidebar = (props: QuizSidebarAttemptProps | QuizSidebarViewProp
                 <div className="section-divider"/>
 
                 <div className="d-flex flex-column sidebar-key">
-                Key
+                    Key
                     <ul>
                         <KeyItem icon="not-started" text="Section not started"/>
                         <KeyItem icon="in-progress" text="Section in progress"/>

src/app/components/elements/modals/QuestionSearchModal.tsx

@@ -1,11 +1,10 @@
-import React, {lazy, Suspense, useCallback, useEffect, useMemo, useReducer, useState} from "react";
+import React, {lazy, useEffect, useMemo, useReducer, useState} from "react";
 import {
     AppState,
-    clearQuestionSearch,
     closeActiveModal,
-    searchQuestions,
     useAppDispatch,
-    useAppSelector
+    useAppSelector,
+    useSearchQuestionsQuery
 } from "../../../state";
 import debounce from "lodash/debounce";
 import isEqual from "lodash/isEqual";
@@ -35,8 +34,8 @@ import {
     useDeviceSize,
     EXAM_BOARD, QUESTIONS_PER_GAMEBOARD
 } from "../../../services";
-import {ContentSummary, GameboardBuilderQuestions, GameboardBuilderQuestionsStackProps} from "../../../../IsaacAppTypes";
-import {AudienceContext, Difficulty, ExamBoard} from "../../../../IsaacApiTypes";
+import {ContentSummary, GameboardBuilderQuestions, GameboardBuilderQuestionsStackProps, QuestionSearchQuery} from "../../../../IsaacAppTypes";
+import {AudienceContext, ContentSummaryDTO, Difficulty, ExamBoard} from "../../../../IsaacApiTypes";
 import {GroupBase} from "react-select/dist/declarations/src/types";
 import {Loading} from "../../handlers/IsaacSpinner";
 import {StyledSelect} from "../inputs/StyledSelect";
@@ -49,6 +48,8 @@ import { CollapsibleList } from "../CollapsibleList";
 import { StyledCheckbox } from "../inputs/StyledCheckbox";
 import { updateTopicChoices, initialiseListState, listStateReducer } from "../../../services";
 import { HorizontalScroller } from "../inputs/HorizontalScroller";
+import { skipToken } from "@reduxjs/toolkit/query";
+import { ShowLoadingQuery } from "../../handlers/ShowLoadingQuery";
 
 // Immediately load GameboardBuilderRow, but allow splitting
 const importGameboardBuilderRow = import("../GameboardBuilderRow");
@@ -72,6 +73,9 @@ export const QuestionSearchModal = (
     const deviceSize = useDeviceSize();
     const sublistDelimiter = " >>> ";
 
+    const [searchParams, setSearchParams] = useState<QuestionSearchQuery | typeof skipToken>(skipToken);
+    const searchQuestionsQuery = useSearchQuestionsQuery(searchParams);
+
     const [topicSelections, setTopicSelections] = useState<ChoiceTree[]>([]);
     const [searchTopics, setSearchTopics] = useState<string[]>([]);
     const [searchQuestionName, setSearchQuestionName] = useState("");
@@ -83,7 +87,6 @@ export const QuestionSearchModal = (
         if (userContext.contexts.length === 1 && !EXAM_BOARD_NULL_OPTIONS.includes(userExamBoard)) setSearchExamBoards([userExamBoard]);
     }, [userContext.contexts[0].examBoard]);
 
-    const [isSearching, setIsSearching] = useState(false);
     const [searchBook, setSearchBook] = useState<string[]>([]);
     const isBookSearch = searchBook.length > 0;
 
@@ -101,30 +104,22 @@ export const QuestionSearchModal = (
 
     const modalQuestions : GameboardBuilderQuestions = {selectedQuestions, questionOrder, setSelectedQuestions, setQuestionOrder};
 
-    const {results: questions} = useAppSelector((state: AppState) => state && state.questionSearchResult) || {};
     const user = useAppSelector((state: AppState) => state && state.user);
 
-    useEffect(() => {
-        setIsSearching(false);
-    }, [questions]);
-
-    const searchDebounce = useCallback(
+    const searchDebounce = useMemo(() => 
         debounce((searchString: string, topics: string[], examBoards: string[], book: string[], stages: string[], difficulties: string[], fasttrack: boolean, startIndex: number) => {
             // Clear front-end sorting so as not to override ElasticSearch's match ranking
             setQuestionsSort({});
 
             const isBookSearch = book.length > 0; // Tasty.
             if ([searchString, topics, book, stages, difficulties, examBoards].every(v => v.length === 0) && !fasttrack) {
                 // Nothing to search for
-                dispatch(clearQuestionSearch);
-                return;
+                return setSearchParams(skipToken);
             }
 
             const tags = (isBookSearch ? book : [...([topics].map((tags) => tags.join(" ")))].filter((query) => query != "")).join(",");
 
-            setIsSearching(true);
-
-            dispatch(searchQuestions({
+            setSearchParams({
                 querySource: "gameboardBuilder",
                 searchString: searchString || undefined,
                 tags: tags || undefined,
@@ -134,12 +129,11 @@ export const QuestionSearchModal = (
                 fasttrack,
                 startIndex,
                 limit: 300
-            }));
+            });
 
             logEvent(eventLog,"SEARCH_QUESTIONS", {searchString, topics, examBoards, book, stages, difficulties, fasttrack, startIndex});
-        }, 250),
-        []
-    );
+        }, 250, { leading: true }),
+    [eventLog]);
 
     const sortableTableHeaderUpdateState = (sortState: Record<string, SortOrder>, setSortState: React.Dispatch<React.SetStateAction<Record<string, SortOrder>>>, key: string) => (order: SortOrder) => {
         const newSortState = {...sortState};
@@ -155,19 +149,17 @@ export const QuestionSearchModal = (
         searchDebounce(searchQuestionName, searchTopics, searchExamBoards, searchBook, searchStages, searchDifficulties, searchFastTrack, 0);
     },[searchDebounce, searchQuestionName, searchTopics, searchExamBoards, searchBook, searchFastTrack, searchStages, searchDifficulties]);
 
-    const sortedQuestions = useMemo(() => {
-        return questions && sortQuestions(isBookSearch ? {title: SortOrder.ASC} : questionsSort, creationContext)(
-            questions.filter(question => {
-                const qIsPublic = searchResultIsPublic(question, user);
-                if (isBookSearch) return qIsPublic;
-                const qTopicsMatch =
-                    searchTopics.length === 0 ||
-                    (question.tags && question.tags.filter((tag) => searchTopics.includes(tag)).length > 0);
+    const sortAndFilterBySearch = (questions: ContentSummaryDTO[]) => questions && sortQuestions(isBookSearch ? {title: SortOrder.ASC} : questionsSort, creationContext)(
+        questions.filter(question => {
+            const qIsPublic = searchResultIsPublic(question, user);
+            if (isBookSearch) return qIsPublic;
+            const qTopicsMatch =
+                searchTopics.length === 0 ||
+                (question.tags && question.tags.filter((tag) => searchTopics.includes(tag)).length > 0);
 
-                return qIsPublic && qTopicsMatch;
-            })
-        );
-    }, [questions, user, searchTopics, isBookSearch, questionsSort, creationContext]);
+            return qIsPublic && qTopicsMatch;
+        })
+    );
 
     const addSelectionsRow = <div className="d-sm-flex flex-xl-column align-items-center mt-2">
         <div className="flex-grow-1 mb-1">
@@ -289,41 +281,48 @@ export const QuestionSearchModal = (
             {addSelectionsRow}
         </Col>
         <Col className="col-12 col-xl-9">
-            <Suspense fallback={<Loading/>}>
-                <HorizontalScroller enabled={sortedQuestions && sortedQuestions.length > 6} className="my-4">
-                    <Table bordered className="my-0">
-                        <thead>
-                            <tr className="search-modal-table-header">
-                                <th className="w-5"> </th>
-                                <SortItemHeader<SortOrder>
-                                    className={siteSpecific("w-40", "w-30")}
-                                    setOrder={sortableTableHeaderUpdateState(questionsSort, setQuestionsSort, "title")}
-                                    defaultOrder={SortOrder.ASC}
-                                    reverseOrder={SortOrder.DESC}
-                                    currentOrder={questionsSort['title']}
-                                    alignment="start"
-                                >Question title</SortItemHeader>
-                                <th className={siteSpecific("w-25", "w-20")}>Topic</th>
-                                <th className="w-15">Stage</th>
-                                <th className="w-15">Difficulty</th>
-                                {isAda && <th className="w-15">Exam boards</th>}
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {isSearching ? <tr><td colSpan={isAda ? 6 : 5}><Loading/></td></tr> : sortedQuestions?.map(question =>
-                                <GameboardBuilderRow
-                                    key={`question-search-modal-row-${question.id}`}
-                                    question={question}
-                                    currentQuestions={modalQuestions}
-                                    undoStack={undoStack}
-                                    redoStack={redoStack}
-                                    creationContext={creationContext}
-                                />
-                            )}
-                        </tbody>
-                    </Table>
-                </HorizontalScroller>
-            </Suspense>
+            <HorizontalScroller enabled className="my-4">
+                <Table bordered className="my-0">
+                    <thead>
+                        <tr className="search-modal-table-header">
+                            <th className="w-5"> </th>
+                            <SortItemHeader<SortOrder>
+                                className={siteSpecific("w-40", "w-30")}
+                                setOrder={sortableTableHeaderUpdateState(questionsSort, setQuestionsSort, "title")}
+                                defaultOrder={SortOrder.ASC}
+                                reverseOrder={SortOrder.DESC}
+                                currentOrder={questionsSort['title']}
+                                alignment="start"
+                            >Question title</SortItemHeader>
+                            <th className={siteSpecific("w-25", "w-20")}>Topic</th>
+                            <th className="w-15">Stage</th>
+                            <th className="w-15">Difficulty</th>
+                            {isAda && <th className="w-15">Exam boards</th>}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <ShowLoadingQuery
+                            query={searchQuestionsQuery}
+                            placeholder={<tr><td colSpan={isAda ? 6 : 5}><Loading/></td></tr>}
+                            defaultErrorTitle="Failed to load questions."
+                            thenRender={({results: questions}) => {
+                                if (!questions) return <></>;
+                                const sortedQuestions = sortAndFilterBySearch(questions);
+                                return sortedQuestions?.map(question =>
+                                    <GameboardBuilderRow
+                                        key={`question-search-modal-row-${question.id}`}
+                                        question={question}
+                                        currentQuestions={modalQuestions}
+                                        undoStack={undoStack}
+                                        redoStack={redoStack}
+                                        creationContext={creationContext}
+                                    />
+                                );
+                            }}
+                        />
+                    </tbody>
+                </Table>
+            </HorizontalScroller>
         </Col>
     </Row>;
 };

src/app/components/handlers/ShowLoadingQuery.tsx

@@ -29,6 +29,7 @@ interface ShowLoadingQueryInfo<T> {
     data?: T | NOT_FOUND_TYPE;
     isLoading: boolean;
     isFetching: boolean;
+    isUninitialized: boolean;
     isError: boolean;
     error?: FetchBaseQueryError | SerializedError;
 }
@@ -38,6 +39,7 @@ export function combineQueries<T, R, S>(firstQuery: ShowLoadingQueryInfo<T>, sec
         data: isFound<T>(firstQuery.data) && isFound<R>(secondQuery.data) ? combineResult(firstQuery.data, secondQuery.data) : undefined,
         isLoading: firstQuery.isLoading || secondQuery.isLoading,
         isFetching: firstQuery.isFetching || secondQuery.isFetching,
+        isUninitialized: firstQuery.isUninitialized || secondQuery.isUninitialized,
         isError: firstQuery.isError || secondQuery.isError,
         error: firstQuery.error ?? secondQuery.error,
     };
@@ -50,6 +52,7 @@ export const discardResults = (): true => true;
 
 interface ShowLoadingQueryBaseProps<T> {
     placeholder?: JSX.Element | JSX.Element[];
+    uninitializedPlaceholder?: JSX.Element | JSX.Element[];
     query: ShowLoadingQueryInfo<T>;
     ifNotFound?: JSX.Element | JSX.Element[];
     maintainOnRefetch?: boolean;
@@ -74,8 +77,8 @@ type ShowLoadingQueryProps<T> = ShowLoadingQueryErrorProps<T> & ({
 //  - `placeholder` (React element to show while loading)
 //  - `maintainOnRefetch` (boolean indicating whether to keep showing the current data while refetching. use second parameter of `thenRender` to modify render tree accordingly)
 //  - `query` (the object returned by a RTKQ useQuery hook)
-export function ShowLoadingQuery<T>({query, thenRender, children, placeholder, ifError, ifNotFound, defaultErrorTitle, maintainOnRefetch}: ShowLoadingQueryProps<T>) {
-    const {data, isLoading, isFetching, isError, error} = query;
+export function ShowLoadingQuery<T>({query, thenRender, children, placeholder, uninitializedPlaceholder, ifError, ifNotFound, defaultErrorTitle, maintainOnRefetch}: ShowLoadingQueryProps<T>) {
+    const {data, isLoading, isFetching, isUninitialized, isError, error} = query;
     const renderError = () => ifError ? <>{ifError(error)}</> : <DefaultQueryError error={error} title={defaultErrorTitle}/>;
     if (isError && error) {
         return "status" in error && typeof error.status === "number" && [NOT_FOUND, NO_CONTENT].includes(error.status) && ifNotFound ? <>{ifNotFound}</> : renderError();
@@ -84,6 +87,10 @@ export function ShowLoadingQuery<T>({query, thenRender, children, placeholder, i
     const isStale = (isLoading || isFetching) && isFound<T>(data);
     const showPlaceholder = (isLoading || isFetching) && (!maintainOnRefetch || !isDefined(data));
 
+    if (isUninitialized) {
+        return uninitializedPlaceholder ? <>{uninitializedPlaceholder}</> : null;
+    }
+
     if (showPlaceholder) {
         return placeholder ? <>{placeholder}</> : <LoadingPlaceholder />;
     }