Add stage filters to main concepts listing

Author: axlewin

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

@@ -429,11 +429,23 @@ export const SubjectSpecificConceptListSidebar = (props: ConceptListSidebarProps
     </ContentSidebar>;
 };
 
-export const GenericConceptsSidebar = (props: ConceptListSidebarProps) => {
-    const { searchText, setSearchText, conceptFilters, setConceptFilters, applicableTags, tagCounts, ...rest } = props;
+interface GenericConceptsSidebarProps extends ConceptListSidebarProps {
+    searchStages: STAGE[];
+    setSearchStages: React.Dispatch<React.SetStateAction<STAGE[]>>;
+    stageCounts: Record<string, number>;
+}
 
-    const pageContext = useAppSelector(selectors.pageContext.context);
+export const GenericConceptsSidebar = (props: GenericConceptsSidebarProps) => {
+    const { searchText, setSearchText, conceptFilters, setConceptFilters, applicableTags, tagCounts, searchStages, setSearchStages, stageCounts, ...rest } = props;
 
+    const updateSearchStages = (stage: STAGE) => {
+        if (searchStages.includes(stage)) {
+            setSearchStages(searchStages.filter(s => s !== stage));
+        } else {
+            setSearchStages([...(searchStages ?? []), stage]);
+        }
+    };
+    
     return <ContentSidebar {...rest}>
         <div className="section-divider"/>
         <search>
@@ -473,6 +485,17 @@ export const GenericConceptsSidebar = (props: ConceptListSidebarProps) => {
                         </div>}
                     </div>;
                 })}
+                <div className="section-divider"/>
+                <h5>Filter by stage</h5>
+                <ul className="ps-2">
+                    {getFilteredStageOptions().map((stage, i) =>
+                        <li key={i}>
+                            <StyledCheckbox checked={searchStages.includes(stage.value)}
+                                label={<>{stage.label} <span className="text-muted">({stageCounts[stage.value]})</span></>}
+                                data-bs-theme={conceptFilters.length === 1 ? conceptFilters[0].id : undefined}
+                                color="theme" onChange={() => {updateSearchStages(stage.value);}}/>
+                        </li>)}
+                </ul>
             </div>
         </search>
 

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 {isAda, isPhy, isRelevantToPageContext, matchesAllWordsInAnyOrder, pushConceptsToHistory, searchResultIsPublic, shortcuts, TAG_ID, tags} from "../../services";
+import {getFilteredStageOptions, isAda, isPhy, isRelevantToPageContext, matchesAllWordsInAnyOrder, pushConceptsToHistory, searchResultIsPublic, shortcuts, STAGE, STAGE_TO_LEARNING_STAGE, TAG_ID, tags} from "../../services";
 import {generateSubjectLandingPageCrumbFromContext, TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
 import {ShortcutResponse, Tag} from "../../../IsaacAppTypes";
 import {IsaacSpinner} from "../handlers/IsaacSpinner";
@@ -49,6 +49,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 [shortcutResponse, setShortcutResponse] = useState<ShortcutResponse[]>();
 
     const listConceptsQuery = useListConceptsQuery(pageContext 
@@ -58,8 +59,8 @@ export const Concepts = withRouter((props: RouteComponentProps) => {
 
     const shortcutAndFilter = (concepts?: ContentSummaryDTO[], excludeTopicFiltering?: boolean) => {
         const searchResults = concepts?.filter(c =>
-            matchesAllWordsInAnyOrder(c.title, searchText || "") ||
-            matchesAllWordsInAnyOrder(c.summary, searchText || "")
+            (matchesAllWordsInAnyOrder(c.title, searchText || "") || matchesAllWordsInAnyOrder(c.summary, searchText || ""))
+            && (searchStages.length === 0 || searchStages.some(s => c.audience?.some(a => a.stage?.includes(s))))
         );
 
         const filteredSearchResults = searchResults
@@ -81,6 +82,11 @@ export const Concepts = withRouter((props: RouteComponentProps) => {
         [t.id]: shortcutAndFilter(listConceptsQuery?.data?.results, true)?.filter(c => c.tags?.includes(t.id)).length || 0
     }), {});
 
+    const stageCounts = getFilteredStageOptions().reduce((acc, s) => ({
+        ...acc, 
+        [s.value]: shortcutAndFilter(listConceptsQuery?.data?.results, true)?.filter(c => c.audience?.some(a => a.stage?.includes(s.value))).length || 0
+    }), {});
+
     function doSearch(e?: FormEvent<HTMLFormElement>) {
         if (e) {
             e.preventDefault();
@@ -119,7 +125,7 @@ export const Concepts = withRouter((props: RouteComponentProps) => {
             <SidebarLayout>
                 {pageContext?.subject 
                     ? <SubjectSpecificConceptListSidebar {...sidebarProps}/> 
-                    : <GenericConceptsSidebar {...sidebarProps}/>
+                    : <GenericConceptsSidebar {...sidebarProps} searchStages={searchStages} setSearchStages={setSearchStages} stageCounts={stageCounts}/>
                 }
                 <MainContent>
                     {pageContext?.subject && <div className="d-flex align-items-baseline flex-wrap flex-md-nowrap">