Merge pull request #1332 from isaacphysics/redesign/subject-landing-pages

Implement subject landing pages

Author: axlewin

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

@@ -120,7 +120,7 @@ export const PageTitle = ({currentPageTitle, subTitle, description, disallowLaTe
         }));
     }
 
-    return <h1 id="main-heading" tabIndex={-1} ref={headerRef} className={classNames("h-title h-secondary d-sm-flex", {"align-items-center py-4": isPhy}, className)}>
+    return <h1 id="main-heading" tabIndex={-1} ref={headerRef} className={classNames("h-title h-secondary d-sm-flex", {"align-items-center py-4 mb-0": isPhy}, className)}>
         <div className="me-auto">
             <div className="d-sm-flex align-items-center">
                 {icon && (

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

@@ -4,17 +4,18 @@ import {Link} from "react-router-dom";
 import {AugmentedEvent} from "../../../../IsaacAppTypes";
 import {DateString} from "../DateString";
 import {formatEventCardDate, siteSpecific} from "../../../services";
-import { Card, CardImg, CardBody, CardTitle, Badge, CardText } from "reactstrap";
+import { Card, CardImg, CardBody, CardTitle, Badge, CardText, CardProps } from "reactstrap";
 import { Spacer } from "../Spacer";
+import classNames from "classnames";
 
-export const PhysicsEventCard = ({event}: {event: AugmentedEvent}) => {
+export const PhysicsEventCard = ({event, ...rest}: {event: AugmentedEvent} & CardProps) => {
     const {id, title, subtitle, eventThumbnail, location, date} = event;
 
     const isVirtualEvent = event.tags?.includes("virtual");
     const isTeacherEvent = event.tags?.includes("teacher") && !event.tags?.includes("student");
     const isStudentEvent = event.tags?.includes("student") && !event.tags?.includes("teacher");
 
-    return <Card className="pod">
+    return <Card {...rest} className={classNames("pod", rest.className)}>
         {eventThumbnail &&
             <a className={"pod-img event-pod-img"} href={`/events/${id}`}>
                 <CardImg aria-hidden={true} top src={eventThumbnail.src} alt={"" /* Decorative image, should be hidden from screenreaders */} />

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

@@ -146,7 +146,7 @@ export const AbstractListViewItem = ({icon, title, subject, subtitle, breadcrumb
 
     return <ListGroupItem {...rest} className={classNames("content-summary-item", rest.className)} data-bs-theme={subject}>
         {url ? 
-            <Link to={{pathname: url}}> {cardBody} </Link> : 
+            <Link to={{pathname: url}} className="w-100"> {cardBody} </Link> : 
             <div> {cardBody} </div>}
     </ListGroupItem>;
 };

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

@@ -1,14 +1,15 @@
 import React from "react";
-import { AbstractListViewItem, ListViewTagProps } from "./AbstractListViewItem";
+import { AbstractListViewItem, AbstractListViewItemProps, ListViewTagProps } from "./AbstractListViewItem";
 import { ShortcutResponse, ViewingContext } from "../../../../IsaacAppTypes";
 import { determineAudienceViews } from "../../../services/userViewingContext";
 import { DOCUMENT_TYPE, documentTypePathPrefix, SEARCH_RESULT_TYPE, Subject, TAG_ID, TAG_LEVEL, tags } from "../../../services";
-import { ListGroup, ListGroupItemProps } from "reactstrap";
+import { ListGroup, ListGroupItem, ListGroupItemProps, ListGroupProps } from "reactstrap";
 import { TitleIconProps } from "../PageTitle";
 import { AffixButton } from "../AffixButton";
 import { QuizSummaryDTO } from "../../../../IsaacApiTypes";
 import { Link } from "react-router-dom";
 import { showQuizSettingModal, useAppDispatch } from "../../../state";
+import classNames from "classnames";
 
 export interface ListViewCardProps extends ListGroupItemProps {
     item: ShortcutResponse;
@@ -30,13 +31,17 @@ export const ListViewCard = ({item, icon, subject, linkTags, ...rest}: ListViewC
     />;
 };
 
-export const QuestionListViewItem = ({item, ...rest} : {item: ShortcutResponse}) => {
+type QuestionListViewItemProps = {item: ShortcutResponse} & Omit<AbstractListViewItemProps, "icon" | "title" | "subject" | "tags" | "supersededBy" | "subtitle" | "breadcrumb" | "status" | "url" | "audienceViews">;
+
+export const QuestionListViewItem = (props : QuestionListViewItemProps) => {
+    const { item, ...rest } = props;
     const breadcrumb = tags.getByIdsAsHierarchy((item.tags || []) as TAG_ID[]).map(tag => tag.title);
     const audienceViews: ViewingContext[] = determineAudienceViews(item.audience);
     const itemSubject = tags.getSpecifiedTag(TAG_LEVEL.subject, item.tags as TAG_ID[])?.id as Subject;
     const url = `/${documentTypePathPrefix[DOCUMENT_TYPE.QUESTION]}/${item.id}`;
 
     return <AbstractListViewItem
+        {...rest}
         icon={{type: "hex", icon: "list-icon-question", size: "sm"}}
         title={item.title ?? ""}
         subject={itemSubject}
@@ -47,7 +52,6 @@ export const QuestionListViewItem = ({item, ...rest} : {item: ShortcutResponse})
         status={item.state}
         url={url}
         audienceViews={audienceViews}
-        {...rest}
     />;
 };
 
@@ -157,9 +161,10 @@ export const GenericListViewItem = ({item, ...rest}: {item: ShortcutResponse}) =
     />;
 };
 
-export const ListViewCards = ({cards}: {cards: ListViewCardProps[]}) => {
-    return <ListGroup className="list-view-card-container link-list list-group-links p-0 m-0 flex-row row-cols-1 row-cols-lg-2 row">
-        {cards.map((card, index) => <ListViewCard key={index} {...card}/>)}
+export const ListViewCards = (props: {cards: (ListViewCardProps | null)[]} & {showBlanks?: boolean} & ListGroupProps) => {
+    const { cards, showBlanks, ...rest } = props;
+    return <ListGroup {...rest} className={classNames("list-view-card-container link-list list-group-links p-0 m-0 flex-row row-cols-1 row-cols-lg-2 row", rest.className)}>
+        {cards.map((card, index) => card ? <ListViewCard key={index} {...card}/> : (showBlanks ? <ListGroupItem key={index}/> : null))}
     </ListGroup>;
 };
 

public/assets/phy/icons/redesign/refresh.svg

@@ -24,7 +24,7 @@ export const ActiveModal = ({activeModal}: ActiveModalProps) => {
         };
     });
 
-    return <Modal data-testid={"active-modal"} toggle={toggle} isOpen={true} size={(activeModal && activeModal.size) || "lg"} centered={activeModal?.centered}>
+    return <Modal data-testid={"active-modal"} toggle={toggle} isOpen={true} size={(activeModal && activeModal.size) || "lg"} centered={activeModal?.centered} data-bs-theme="neutral">
         {activeModal && <React.Fragment>
             {<ModalHeader
                 data-testid={"modal-header"}

src/app/components/elements/PageTitle.tsx

@@ -169,7 +169,7 @@ export const QuestionSearchModal = (
                 type="button"
                 value={siteSpecific("Add Selections to Gameboard", "Add selections to quiz")}
                 disabled={isEqual(new Set(modalQuestions.selectedQuestions.keys()), new Set(currentQuestions.selectedQuestions.keys()))}
-                className={classNames("btn w-100 border-0", siteSpecific("btn-keyline", "btn-secondary"))}
+                className={classNames("btn w-100", siteSpecific("btn-keyline", "btn-secondary border-0"))}
                 onClick={() => {
                     undoStack.push({questionOrder: currentQuestions.questionOrder, selectedQuestions: currentQuestions.selectedQuestions});
                     currentQuestions.setSelectedQuestions(modalQuestions.selectedQuestions);

src/app/components/elements/cards/EventCard.tsx

@@ -1,11 +1,123 @@
-import React from "react";
+import React, { useCallback, useEffect } from "react";
 import { RouteComponentProps, withRouter } from "react-router";
-import { Container } from "reactstrap";
+import { Card, Col, Container, Row } from "reactstrap";
 import { TitleAndBreadcrumb } from "../elements/TitleAndBreadcrumb";
-import { getHumanContext, useUrlPageTheme } from "../../services/pageContext";
+import { getHumanContext, isDefinedContext, isSingleStageContext, useUrlPageTheme } from "../../services/pageContext";
+import { ListView, ListViewCards } from "../elements/list-groups/ListView";
+import { getBooksForContext, getLandingPageCardsForContext } from "./subjectLandingPageComponents";
+import { above, below, DOCUMENT_TYPE, EventStatusFilter, EventTypeFilter, STAGE, useDeviceSize } from "../../services";
+import { PageContextState } from "../../../IsaacAppTypes";
+import { PhyHexIcon } from "../elements/svg/PhyHexIcon";
+import { Link } from "react-router-dom";
+import { ShowLoadingQuery } from "../handlers/ShowLoadingQuery";
+import { searchQuestions, useAppDispatch, useAppSelector, useGetNewsPodListQuery, useLazyGetEventsQuery } from "../../state";
+import { EventCard } from "../elements/cards/EventCard";
+import { debounce } from "lodash";
+import { Loading } from "../handlers/IsaacSpinner";
+import classNames from "classnames";
+import { NewsCard } from "../elements/cards/NewsCard";
+
+const handleGetDifferentQuestion = () => {
+    // TODO
+};
+
+const RandomQuestionBanner = ({context}: {context?: PageContextState}) => {
+    const deviceSize = useDeviceSize();
+    const dispatch = useAppDispatch();
+
+    const searchDebounce = useCallback(debounce(() => {
+        dispatch(searchQuestions({
+            searchString: "",
+            tags: "",
+            fields: undefined,
+            subjects: context?.subject,
+            topics: undefined,
+            books: undefined,
+            stages: context?.stage?.map(s => s === "11_14" ? "year_7_and_8,year_9" : s).join(','),
+            difficulties: undefined,
+            examBoards: undefined,
+            questionCategories: "problem_solving,book",
+            statuses: undefined,
+            fasttrack: false,
+            startIndex: undefined,
+            limit: 1
+        }));
+    }), [dispatch, context]);
+
+    const {results: questions} = useAppSelector((state) => state && state.questionSearchResult) || {};
+
+    useEffect(() => {
+        searchDebounce();
+    }, [searchDebounce]);
+
+    if (!context || !isDefinedContext(context) || !isSingleStageContext(context)) {
+        return null;
+    }
+
+    const question = questions?.[0];
+
+    return <div className="py-4 container-override random-question-panel">
+        <Row className="my-3">
+            <Col lg={7}>
+                <div className="d-flex justify-content-between align-items-center">
+                    <h4 className="m-0">Try a random question!</h4>
+                    <button className="btn btn-link invert-underline d-flex align-items-center gap-2" onClick={handleGetDifferentQuestion}>
+                        Get a different question
+                        <i className="icon icon-refresh icon-color-black"/>
+                    </button>
+                </div>
+            </Col>
+        </Row>
+        <Row>
+            <Col lg={7}>
+                <Card>
+                    {question 
+                        ? <ListView items={[{
+                            type: DOCUMENT_TYPE.QUESTION,
+                            title: question.title,
+                            tags: question.tags,
+                            id: question.id,
+                            audience: question.audience,
+                        }]}/>
+                        : <Loading />}
+                </Card>
+            </Col>
+            <Col lg={5} className="ps-lg-5 m-3 m-lg-0">
+                <div className="d-flex align-items-center">
+                    {above['lg'](deviceSize) && <PhyHexIcon className="w-min-content" icon={"page-icon-concept"} />}
+                    <h5 className="m-0">Explore related concepts:</h5>
+                </div>
+                <div className="d-flex flex-wrap gap-2 mt-3">
+                    {/* TODO: replace this with "recommended content" or similar */}
+                    {/* {question?.relatedContent.filter(rc => rc.type === "isaacConceptPage").slice(0, 5).map((rc, i) => (
+                        <Link to={`/concepts/${rc.id}`} key={i}>
+                            <AffixButton key={i} color="keyline" className="px-3 py-2" affix={{
+                                affix: "icon-lightbulb",
+                                position: "prefix",
+                                type: "icon"
+                            }}>
+                                {rc.title}
+                            </AffixButton>
+                        </Link>
+                    ))} */}
+                </div>
+            </Col>
+        </Row>
+    </div>;
+};
 
 export const SubjectLandingPage = withRouter((props: RouteComponentProps) => {
     const pageContext = useUrlPageTheme();
+    const deviceSize = useDeviceSize();
+
+    const [getEventsList, eventsQuery] = useLazyGetEventsQuery();
+    useEffect(() => {
+        getEventsList({startIndex: 0, limit: 10, typeFilter: EventTypeFilter["All events"], statusFilter: EventStatusFilter["Upcoming events"], stageFilter: [STAGE.ALL]});
+    }, []);
+
+    const books = getBooksForContext(pageContext);
+    // TODO: are we going to make subject-specific news?
+    const {data: news} = useGetNewsPodListQuery({subject: "physics"});
 
     return <Container data-bs-theme={pageContext?.subject}>
         <TitleAndBreadcrumb 
@@ -16,6 +128,74 @@ export const SubjectLandingPage = withRouter((props: RouteComponentProps) => {
                 icon: `/assets/phy/icons/redesign/subject-${pageContext.subject}.svg`
             } : undefined}
         />
-        <div className="mt-5">This is a subject landing page for {getHumanContext(pageContext)}!</div>
+
+        <RandomQuestionBanner context={pageContext} />
+
+        <ListViewCards cards={getLandingPageCardsForContext(pageContext, below['md'](deviceSize))} showBlanks={!below['md'](deviceSize)} className="my-5" />
+
+        <Row className={classNames("mt-5 py-4 row-cols-1 row-cols-md-2")}>
+            <div className="d-flex flex-column mt-3"> 
+                {/* if there are books, display books. otherwise, display news */}
+                {books.length > 0
+                    ? <>
+                        <div className="d-flex mb-3 align-items-center gap-4 white-space-pre">
+                            <h4 className="m-0">{getHumanContext(pageContext)} books</h4>
+                            <div className="section-divider-bold"/>
+                        </div>
+                        <Col className="d-flex flex-column">
+                            {books.slice(0, 4).map((book, index) => <Link key={index} to={book.path} className="book-container d-flex p-2 gap-3">
+                                <div className="book-image-container">
+                                    <img src={book.image} alt={book.title} className="h-100"/>
+                                </div>
+                                <div className="d-flex flex-column">
+                                    <h5 className="pt-2 pt-2 pb-1 m-0">{book.title}</h5>
+                                    <div className="section-divider"/>
+                                    <span className="text-decoration-none">
+                                        This is some explanatory text about the book. It could be a brief description of the book, or a list of topics covered.
+                                    </span>
+                                </div>
+                            </Link>)}
+                        </Col>
+                    </> 
+                    : <>
+                        <div className="d-flex flex-column"> 
+                            <div className="d-flex mb-3 align-items-center gap-4 white-space-pre">
+                                <h4>News & Features</h4>
+                                <div className="section-divider-bold"/>
+                            </div>
+                            {news && <Row className="h-100">
+                                {news.slice(0, 2).map(newsItem => <Col xs={12} key={newsItem.id}>
+                                    <NewsCard newsItem={newsItem} className="force-horizontal p-2" />
+                                </Col>)}
+                            </Row>}
+                        </div>
+                    </>
+                }
+            </div>
+            <div className="d-flex flex-column mt-3">
+                <div className="d-flex mb-3 align-items-center gap-4 white-space-pre">
+                    <h4 className="m-0">Events</h4>
+                    <div className="section-divider-bold"/>
+                </div>
+                <ShowLoadingQuery
+                    query={eventsQuery}
+                    defaultErrorTitle={"Error loading events list"}
+                    thenRender={({events}) => {
+                        // TODO: filter by audience, once that data is available
+                        const relevantEvents = events.filter(event => pageContext?.subject && event.tags?.includes(pageContext.subject)).slice(0, 2);
+                        return <Row className="h-100">
+                            {relevantEvents.length 
+                                ? relevantEvents.map((event, i) => 
+                                    <Col key={i}>
+                                        {event && <EventCard event={event} className="force-horizontal p-2" />}
+                                    </Col>
+                                ) 
+                                : <Col className="pt-3 pb-5">No events found for {getHumanContext(pageContext)}. Check back soon!</Col>
+                            }
+                        </Row>;
+                    }}
+                />
+            </div>
+        </Row>
     </Container>;
 });