Merge pull request #1273 from isaacphysics/redesign/subject-specific-pages

Subject-specific pages

Author: sjd210

public/assets/phy/icons/redesign/page-lessons-bg.svg

@@ -9,7 +9,7 @@ import { selectors, useAppSelector } from "../../../state";
 import { Link } from "react-router-dom";
 import { Tag } from "../../../../IsaacAppTypes";
 import { AffixButton } from "../AffixButton";
-import { getHumanContext } from "../../../services/context";
+import { getHumanContext } from "../../../services/pageContext";
 
 export const SidebarLayout = (props: RowProps) => {
     const { className, ...rest } = props;

public/assets/phy/icons/redesign/page-lessons-fg.svg

@@ -9,14 +9,16 @@ import {matchesAllWordsInAnyOrder, pushConceptsToHistory, searchResultIsPublic,
 import {TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
 import {ShortcutResponse, Tag} from "../../../IsaacAppTypes";
 import {IsaacSpinner} from "../handlers/IsaacSpinner";
-import { SubjectSpecificConceptListSidebar, MainContent, SidebarLayout } from "../elements/layout/SidebarLayout";
+import { SubjectSpecificConceptListSidebar, MainContent, SidebarLayout, GenericConceptsSidebar } from "../elements/layout/SidebarLayout";
+import { useUrlPageTheme } from "../../services/pageContext";
 
 // This component is Isaac Physics only (currently)
 export const Concepts = withRouter((props: RouteComponentProps) => {
     const {location, history} = props;
     const dispatch = useAppDispatch();
     const user = useAppSelector(selectors.user.orNull);
     const concepts = useAppSelector((state: AppState) => state?.concepts?.results || null);
+    const pageContext = useUrlPageTheme();
 
     const subject = useAppSelector(selectors.pageContext.subject);
 
@@ -83,17 +85,17 @@ export const Concepts = withRouter((props: RouteComponentProps) => {
     const shortcutAndFilteredSearchResults = (shortcutResponse || []).concat(filteredSearchResults || []);
 
     return (
-        <Container id="search-page">
+        <Container id="search-page" { ...(pageContext?.subject && { "data-bs-theme" : pageContext.subject })}>
             <TitleAndBreadcrumb 
                 currentPageTitle="Concepts" 
                 icon={{type: "hex", icon: "page-icon-concept"}}
             />
             <SidebarLayout>
-                <SubjectSpecificConceptListSidebar 
+                {pageContext?.subject ? <SubjectSpecificConceptListSidebar 
                     searchText={searchText} setSearchText={setSearchText} 
                     conceptFilters={conceptFilters} setConceptFilters={setConceptFilters}
                     applicableTags={applicableTags} tagCounts={tagCounts}
-                />
+                /> : <GenericConceptsSidebar />}
                 <MainContent>
                     <Card>
                         <CardHeader className="search-header">

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { RouteComponentProps, withRouter } from "react-router";
+import { Container } from "reactstrap";
+import { TitleAndBreadcrumb } from "../elements/TitleAndBreadcrumb";
+import { getHumanContext, useUrlPageTheme } from "../../services/pageContext";
+
+export const LessonsAndRevision = withRouter((props: RouteComponentProps) => {
+    const pageContext = useUrlPageTheme();
+
+    return <Container data-bs-theme={pageContext?.subject}>
+        <TitleAndBreadcrumb 
+            currentPageTitle="Lessons and revision"
+            icon={pageContext?.subject ? {
+                type: "hex", 
+                subject: pageContext.subject,
+                icon: "page-icon-lessons"
+            } : undefined}
+        />
+        <div className="mt-5">This is a lessons and revision page for {getHumanContext(pageContext)}!</div>
+    </Container>;
+});

src/app/components/pages/Concepts.tsx

@@ -1,5 +1,5 @@
 import React, {ReactNode, useCallback, useEffect, useMemo, useState} from "react";
-import {AppState, clearQuestionSearch, searchQuestions, selectors, useAppDispatch, useAppSelector} from "../../state";
+import {AppState, clearQuestionSearch, searchQuestions, useAppDispatch, useAppSelector} from "../../state";
 import debounce from "lodash/debounce";
 import {
     arrayFromPossibleCsv,
@@ -21,6 +21,7 @@ import {
     tags,
     toSimpleCSV,
     useQueryParams,
+    useUrlPageTheme,
 } from "../../services";
 import {ContentSummaryDTO, Difficulty, ExamBoard} from "../../../IsaacApiTypes";
 import {IsaacSpinner} from "../handlers/IsaacSpinner";
@@ -105,7 +106,7 @@ export const QuestionFinder = withRouter(({location}: RouteComponentProps) => {
     const user = useAppSelector((state: AppState) => state && state.user);
     const params = useQueryParams<FilterParams, false>(false);
     const history = useHistory();
-    const pageContext = useAppSelector(selectors.pageContext.context);
+    const pageContext = useUrlPageTheme();
 
     const [searchTopics, setSearchTopics] = useState<string[]>(arrayFromPossibleCsv(params.topics));
     const [searchQuery, setSearchQuery] = useState<string>(params.query ? (params.query instanceof Array ? params.query[0] : params.query) : "");
@@ -391,12 +392,11 @@ export const QuestionFinder = withRouter(({location}: RouteComponentProps) => {
         <IsaacSpinner />
     </div>;
 
-    return <Container id="finder-page" className={classNames("mb-5")}>
+    return <Container id="finder-page" className={classNames("mb-5")} { ...(pageContext?.subject && { "data-bs-theme" : pageContext.subject })}>
         <TitleAndBreadcrumb 
             currentPageTitle={siteSpecific("Question Finder", "Questions")} 
             help={pageHelp}
             icon={{type: "hex", icon: "page-icon-finder"}}
-            // TODO: add a subject field to icon if this is a context-specific QF
         />
         <SidebarLayout>
             <QuestionFinderSidebar />

src/app/components/pages/LessonsAndRevision.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { RouteComponentProps, withRouter } from "react-router";
+import { Container } from "reactstrap";
+import { TitleAndBreadcrumb } from "../elements/TitleAndBreadcrumb";
+import { getHumanContext, useUrlPageTheme } from "../../services/pageContext";
+
+export const QuestionPacks = withRouter((props: RouteComponentProps) => {
+    const pageContext = useUrlPageTheme();
+
+    return <Container data-bs-theme={pageContext?.subject}>
+        <TitleAndBreadcrumb 
+            currentPageTitle="Question packs"
+            icon={pageContext?.subject ? {
+                type: "hex", 
+                subject: pageContext.subject,
+                icon: "page-icon-finder"
+            } : undefined}
+        />
+        <div className="mt-5">This is a question packs listing page for {getHumanContext(pageContext)}!</div>
+    </Container>;
+});

src/app/components/pages/QuestionFinder.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { RouteComponentProps, withRouter } from "react-router";
+import { Container } from "reactstrap";
+import { TitleAndBreadcrumb } from "../elements/TitleAndBreadcrumb";
+import { getHumanContext, useUrlPageTheme } from "../../services/pageContext";
+
+export const QuickQuizzes = withRouter((props: RouteComponentProps) => {
+    const pageContext = useUrlPageTheme();
+
+    return <Container data-bs-theme={pageContext?.subject}>
+        <TitleAndBreadcrumb 
+            currentPageTitle="Quick quizzes"
+            icon={pageContext?.subject ? {
+                type: "hex", 
+                subject: pageContext.subject,
+                icon: "page-icon-finder"
+            } : undefined}
+        />
+        <div className="mt-5">This is a quick quizzes listing page for {getHumanContext(pageContext)}!</div>
+    </Container>;
+});

src/app/components/pages/QuestionPacks.tsx

@@ -1,22 +1,11 @@
-import React, { useEffect } from "react";
-import { pageContextSlice, selectors, useAppSelector } from "../../state";
-import { useDispatch } from "react-redux";
+import React from "react";
 import { RouteComponentProps, withRouter } from "react-router";
-import { Subject } from "../../../IsaacAppTypes";
-import { Stage } from "../../../IsaacApiTypes";
 import { Container } from "reactstrap";
 import { TitleAndBreadcrumb } from "../elements/TitleAndBreadcrumb";
-import { getHumanContext } from "../../services/context";
+import { getHumanContext, useUrlPageTheme } from "../../services/pageContext";
 
 export const SubjectLandingPage = withRouter((props: RouteComponentProps) => {
-    const {location} = props;
-    const pageContext = useAppSelector(selectors.pageContext.context);
-    const dispatch = useDispatch();
-
-    useEffect(() => {
-        const [subject, stage] = location.pathname.split("/").filter(Boolean);
-        dispatch(pageContextSlice.actions.updatePageContext({subject: subject as Subject, stage: stage as Stage}));
-    }, [dispatch, location.pathname]);
+    const pageContext = useUrlPageTheme();
 
     return <Container data-bs-theme={pageContext?.subject}>
         <TitleAndBreadcrumb 

src/app/components/pages/QuickQuizzes.tsx

@@ -2,7 +2,7 @@ import { withRouter } from "react-router-dom";
 import React, { useEffect, useState } from "react";
 import { Button, ListGroupItem, Input, ListGroup, Col, Container } from "reactstrap";
 import { TitleAndBreadcrumb } from "../../elements/TitleAndBreadcrumb";
-import { isEventLeaderOrStaff, isTutorOrAbove, siteSpecific } from "../../../services";
+import { isEventLeaderOrStaff, isLoggedIn, isTutorOrAbove, siteSpecific } from "../../../services";
 import { QuizSummaryDTO } from "../../../../IsaacApiTypes";
 import { ShowLoading } from "../../handlers/ShowLoading";
 import { useGetAvailableQuizzesQuery } from "../../../state/slices/api/quizApi";
@@ -11,23 +11,26 @@ import { Spacer } from "../../elements/Spacer";
 import { Link } from "react-router-dom";
 import { PageFragment } from "../../elements/PageFragment";
 import { MainContent, PracticeQuizzesSidebar, SidebarLayout } from "../../elements/layout/SidebarLayout";
+import { useUrlPageTheme } from "../../../services/pageContext";
+import { selectors, useAppSelector } from "../../../state";
 
-const PracticeQuizzesComponent = ({user}: QuizzesPageProps) => {
+const PracticeQuizzesComponent = (props: QuizzesPageProps) => {
     const {data: quizzes} = useGetAvailableQuizzesQuery(0);
     const [filterText, setFilterText] = useState<string>("");
     const [copied, setCopied] = useState(false);
 
+    const user = useAppSelector(selectors.user.orNull);
+
+    const pageContext = useUrlPageTheme();
+
     useEffect(() => {
         if (location.search.includes("filter")) {
             setFilterText(new URLSearchParams(location.search).get("filter") || "");
         }
     }, []);
 
-    if (!user) {
-        return <p>You must be logged in to view practice tests.</p>;
-    }
-
     const showQuiz = (quiz: QuizSummaryDTO) => {
+        if (!user || !isLoggedIn(user)) return false; 
         switch (user.role) {
             case "STUDENT":
             case "TUTOR":
@@ -47,46 +50,49 @@ const PracticeQuizzesComponent = ({user}: QuizzesPageProps) => {
         {isTutorOrAbove(user) && ((quiz.hiddenFromRoles && !quiz.hiddenFromRoles?.includes("STUDENT")) || quiz.visibleToStudents) && <div className="small text-muted d-block ms-2">visible to students</div>}
     </>;
 
-    return <Container>
+    return <Container { ...(pageContext?.subject && { "data-bs-theme" : pageContext.subject })}>
         <TitleAndBreadcrumb currentPageTitle={siteSpecific("Practice Tests", "Practice tests")} />
         <SidebarLayout>
             <PracticeQuizzesSidebar />
             <MainContent>
                 <PageFragment fragmentId="help_toptext_practice_tests" />
-                <ShowLoading until={quizzes}>
-                    {quizzes && <>
-                        {quizzes.length === 0 && <p><em>There are no practice tests currently available.</em></p>}
-                        <Col xs={12} className="mb-4">
-                            <Input type="text" placeholder="Filter tests by name..." value={filterText} onChange={(e) => setFilterText(e.target.value)} />
-                            <button className={`copy-test-filter-link m-0 ${copied ? "clicked" : ""}`} tabIndex={-1} onClick={() => {
-                                if (filterText.trim()) {
-                                    navigator.clipboard.writeText(`${window.location.host}${window.location.pathname}?filter=${filterText.trim()}#practice`);
-                                }
-                                setCopied(true);
-                            }} onMouseLeave={() => setCopied(false)} />
-                        </Col>
-                        <ListGroup className="mb-3 quiz-list">
-                            {quizzes.filter((quiz) => showQuiz(quiz) && quiz.title?.toLowerCase().includes(filterText.toLowerCase())).map(quiz => <ListGroupItem className="p-0 bg-transparent" key={quiz.id}>
-                                <div className="d-flex flex-grow-1 flex-column flex-sm-row align-items-center p-3">
-                                    <div>
-                                        <span className="mb-2 mb-sm-0 pe-2">{quiz.title}</span>
-                                        {roleVisibilitySummary(quiz)}
-                                        {quiz.summary && <div className="small text-muted d-none d-md-block">{quiz.summary}</div>}
+                {!user 
+                    ? <b>You must be logged in to view practice tests.</b> 
+                    : <ShowLoading until={quizzes}>
+                        {quizzes && <>
+                            {quizzes.length === 0 && <p><em>There are no practice tests currently available.</em></p>}
+                            <Col xs={12} className="mb-4">
+                                <Input type="text" placeholder="Filter tests by name..." value={filterText} onChange={(e) => setFilterText(e.target.value)} />
+                                <button className={`copy-test-filter-link m-0 ${copied ? "clicked" : ""}`} tabIndex={-1} onClick={() => {
+                                    if (filterText.trim()) {
+                                        navigator.clipboard.writeText(`${window.location.host}${window.location.pathname}?filter=${filterText.trim()}#practice`);
+                                    }
+                                    setCopied(true);
+                                }} onMouseLeave={() => setCopied(false)} />
+                            </Col>
+                            <ListGroup className="mb-3 quiz-list">
+                                {quizzes.filter((quiz) => showQuiz(quiz) && quiz.title?.toLowerCase().includes(filterText.toLowerCase())).map(quiz => <ListGroupItem className="p-0 bg-transparent" key={quiz.id}>
+                                    <div className="d-flex flex-grow-1 flex-column flex-sm-row align-items-center p-3">
+                                        <div>
+                                            <span className="mb-2 mb-sm-0 pe-2">{quiz.title}</span>
+                                            {roleVisibilitySummary(quiz)}
+                                            {quiz.summary && <div className="small text-muted d-none d-md-block">{quiz.summary}</div>}
+                                        </div>
+                                        <Spacer />
+                                        {isTutorOrAbove(user) && <div className="d-none d-md-flex align-items-center me-4">
+                                            <Link to={{pathname: `/test/preview/${quiz.id}`}}>
+                                                <span>Preview</span>
+                                            </Link>
+                                        </div>}
+                                        <Button tag={Link} to={{pathname: `/test/attempt/${quiz.id}`}}>
+                                            {siteSpecific("Take Test", "Take test")}
+                                        </Button>
                                     </div>
-                                    <Spacer />
-                                    {isTutorOrAbove(user) && <div className="d-none d-md-flex align-items-center me-4">
-                                        <Link to={{pathname: `/test/preview/${quiz.id}`}}>
-                                            <span>Preview</span>
-                                        </Link>
-                                    </div>}
-                                    <Button tag={Link} to={{pathname: `/test/attempt/${quiz.id}`}}>
-                                        {siteSpecific("Take Test", "Take test")}
-                                    </Button>
-                                </div>
-                            </ListGroupItem>)}
-                        </ListGroup>
-                    </>}
-                </ShowLoading>
+                                </ListGroupItem>)}
+                            </ListGroup>
+                        </>}
+                    </ShowLoading>
+                }
             </MainContent>
         </SidebarLayout>
     </Container>;