Add stage filters to concept finder URL

Author: axlewin

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

@@ -430,15 +430,15 @@ export const SubjectSpecificConceptListSidebar = (props: ConceptListSidebarProps
 };
 
 interface GenericConceptsSidebarProps extends ConceptListSidebarProps {
-    searchStages: STAGE[];
-    setSearchStages: React.Dispatch<React.SetStateAction<STAGE[]>>;
+    searchStages: Stage[];
+    setSearchStages: React.Dispatch<React.SetStateAction<Stage[]>>;
     stageCounts: Record<string, number>;
 }
 
 export const GenericConceptsSidebar = (props: GenericConceptsSidebarProps) => {
     const { searchText, setSearchText, conceptFilters, setConceptFilters, applicableTags, tagCounts, searchStages, setSearchStages, stageCounts, ...rest } = props;
 
-    const updateSearchStages = (stage: STAGE) => {
+    const updateSearchStages = (stage: Stage) => {
         if (searchStages.includes(stage)) {
             setSearchStages(searchStages.filter(s => s !== stage));
         } else {

src/app/components/pages/Concepts.tsx

@@ -3,7 +3,7 @@ import {Link, RouteComponentProps, withRouter} from "react-router-dom";
 import {selectors, useAppSelector} from "../../state";
 import {Badge, Card, CardBody, CardHeader, Container} from "reactstrap";
 import queryString from "query-string";
-import {getFilteredStageOptions, isAda, isPhy, isRelevantToPageContext, matchesAllWordsInAnyOrder, pushConceptsToHistory, searchResultIsPublic, shortcuts, STAGE, STAGE_TO_LEARNING_STAGE, TAG_ID, tags} from "../../services";
+import {getFilteredStageOptions, isAda, isPhy, isRelevantToPageContext, matchesAllWordsInAnyOrder, pushConceptsToHistory, searchResultIsPublic, shortcuts, TAG_ID, tags} from "../../services";
 import {generateSubjectLandingPageCrumbFromContext, TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
 import {ShortcutResponse, Tag} from "../../../IsaacAppTypes";
 import {IsaacSpinner} from "../handlers/IsaacSpinner";
@@ -13,7 +13,7 @@ import { SubjectSpecificConceptListSidebar, MainContent, SidebarLayout, GenericC
 import { getHumanContext, isFullyDefinedContext, useUrlPageTheme } from "../../services/pageContext";
 import { useListConceptsQuery } from "../../state/slices/api/conceptsApi";
 import { ShowLoadingQuery } from "../handlers/ShowLoadingQuery";
-import { ContentSummaryDTO } from "../../../IsaacApiTypes";
+import { ContentSummaryDTO, Stage } from "../../../IsaacApiTypes";
 import { skipToken } from "@reduxjs/toolkit/query";
 import { AffixButton } from "../elements/AffixButton";
 
@@ -32,13 +32,17 @@ export const Concepts = withRouter((props: RouteComponentProps) => {
 
     const searchParsed = queryString.parse(location.search, {arrayFormat: "comma"});
 
-    const [query, filters] = useMemo(() => {
+    const [query, filters, stages] = useMemo(() => {
         const queryParsed = searchParsed.query || null;
         const query = Array.isArray(queryParsed) ? queryParsed.join(",") : queryParsed;
 
         const filterParsed = searchParsed.types || null;
         const filters = Array.isArray(filterParsed) ? filterParsed.filter(x => !!x) as string[] : filterParsed?.split(",") ?? [];
-        return [query, filters];
+
+        const stagesParsed = searchParsed.stages || null;
+        const stages = Array.isArray(stagesParsed) ? stagesParsed.filter(x => !!x) as string[] : stagesParsed?.split(",") ?? [];
+
+        return [query, filters, stages];
     }, [searchParsed]);
 
     const applicableTags = pageContext?.subject
@@ -49,7 +53,7 @@ export const Concepts = withRouter((props: RouteComponentProps) => {
     const [conceptFilters, setConceptFilters] = useState<Tag[]>(
         applicableTags.filter(f => filters.includes(f.id))
     );
-    const [searchStages, setSearchStages] = useState<STAGE[]>([]);
+    const [searchStages, setSearchStages] = useState<Stage[]>(stages as Stage[]);
     const [shortcutResponse, setShortcutResponse] = useState<ShortcutResponse[]>();
 
     const listConceptsQuery = useListConceptsQuery(pageContext 
@@ -91,7 +95,7 @@ export const Concepts = withRouter((props: RouteComponentProps) => {
         if (e) {
             e.preventDefault();
         }
-        pushConceptsToHistory(history, searchText || "", [...conceptFilters.map(f => f.id)]);
+        pushConceptsToHistory(history, searchText || "", [...conceptFilters.map(f => f.id)], searchStages);
 
         if (searchText) {
             setShortcutResponse(shortcuts(searchText));
@@ -108,7 +112,7 @@ export const Concepts = withRouter((props: RouteComponentProps) => {
         };
     }, [searchText]);
 
-    useEffect(() => {doSearch();}, [conceptFilters]);
+    useEffect(() => {doSearch();}, [conceptFilters, searchStages]);
 
     const crumb = isPhy && isFullyDefinedContext(pageContext) && generateSubjectLandingPageCrumbFromContext(pageContext);
 

src/app/services/search.ts

@@ -1,6 +1,6 @@
 import {History} from "history";
 import {DOCUMENT_TYPE, isStaff, TAG_ID} from ".";
-import {ContentSummaryDTO} from "../../IsaacApiTypes";
+import {ContentSummaryDTO, Stage} from "../../IsaacApiTypes";
 import {PotentialUser} from "../../IsaacAppTypes";
 import queryString from "query-string";
 import {Immutable} from "immer";
@@ -18,10 +18,11 @@ export const pushSearchToHistory = function(history: History, searchQuery: strin
     });
 };
 
-export const pushConceptsToHistory = function(history: History, searchText: string, subjects: TAG_ID[]) {
+export const pushConceptsToHistory = function(history: History, searchText: string, subjects: TAG_ID[], stages: Stage[]) {
     const queryOptions = {
         "query": encodeURIComponent(searchText),
         "types": subjects.join(","),
+        "stages": stages.join(","),
     };
     history.push({
         pathname: history.location.pathname,