Teacher onboarding overview

src/app/components/pages/Overview.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import {PageTitle} from "../elements/PageTitle";
+import {Button, Container, Row} from "reactstrap";
+import {ColumnSlice} from "../elements/layout/ColumnSlice";
+import {IconCard} from "../elements/cards/IconCard";
+import {useDeviceSize} from "../../services";
+import {selectors, useAppSelector, useGetNewsPodListQuery} from "../../state";
+import {useLinkableSetting} from "../../services/linkableSetting";
+import {NewsCard} from "../elements/cards/NewsCard";
+
+export const Overview = () => {
+    const {data: news} = useGetNewsPodListQuery({subject: "news"});
+    const deviceSize = useDeviceSize();
+    const userPreferences = useAppSelector(selectors.user.preferences);
+    const showNewsletterPrompts = !userPreferences?.EMAIL_PREFERENCE?.NEWS_AND_UPDATES;
+    const {setLinkedSetting} = useLinkableSetting();
+    return <div id={"overview"}>
+        <section id="browse">
+            <Container className="overview-padding mw-1600">
+                <div id={"page-title"} className={"py-3"}>
+                    <PageTitle currentPageTitle={"Overview"} />
+                </div>
+                <h2>Browse Ada CS</h2>
+                <ColumnSlice className={"row-cols-lg-4 row-cols-md-2"}>
+                    <IconCard className={"without-margin"} card={{
+                        title: "Student groups",
+                        icon: {src: "/assets/cs/icons/group-cyan.svg"},
+                        bodyText: "Organise your students into groups so you can set appropriate work.",
+                        clickUrl: "/groups",
+                        buttonText: "Manage groups",
+                        buttonStyle: "link",
+                    }}/>
+                    <IconCard className={"without-margin"} card={{
+                        title: "Quizzes",
+                        icon: {src: "/assets/cs/icons/file-cyan.svg"},
+                        bodyText: "Create self-marking quizzes and assign them to your students.",
+                        clickUrl: "/quizzes/set",
+                        buttonText: "Assign a quiz",
+                        buttonStyle: "link",
+                    }}/>
+                    <IconCard className={"without-margin"} card={{
+                        title: "Tests",
+                        icon: {src: "/assets/cs/icons/school.svg"},
+                        bodyText: "Set a test curated by the Ada Computer Science team.",
+                        clickUrl: "/set_tests/",
+                        buttonText: "Set a test",
+                        buttonStyle: "link",
+                    }}/>
+                    <IconCard className={"without-margin"} card={{
+                        title: "Review your markbook",
+                        icon: {src: "/assets/cs/icons/done_all.svg"},
+                        bodyText: "Track student progress and pinpoint areas to work on.",
+                        clickUrl: "/my_markbook",
+                        buttonText: "View markbook",
+                        buttonStyle: "link",
+                    }}/>
+                    <IconCard className={"without-margin"} card={{
+                        title: "Assigned to me",
+                        icon: {src: "/assets/cs/icons/person_check.svg"},
+                        bodyText: "If you join a group for your development, this is where you’ll find quizzes assigned to you.",
+                        clickUrl: "/assignments",
+                        buttonText: "Work for you",
+                        buttonStyle: "link",
+                    }}/>
+                    <IconCard className={"without-margin"} card={{
+                        title: "Account",
+                        icon: {src: "/assets/cs/icons/settings.svg"},
+                        bodyText: "Manage all aspects of your account, from content settings to notification preferences.",
+                        clickUrl: "/account",
+                        buttonText: "Account settings",
+                        buttonStyle: "link"
+                    }}/>
+                    <IconCard className={"without-margin"} card={{
+                        title: "Need help?",
+                        icon: {src: "/assets/cs/icons/help-cyan.svg"},
+                        bodyText: "Our teacher support page has useful information for common questions and issues.",
+                        clickUrl: "/support/teacher/general",
+                        buttonText: "Teacher support",
+                        buttonStyle: "link",
+                    }}/>
+                </ColumnSlice>
+            </Container>
+        </section>
+
+        <section id="news">
+            <Container className="overview-padding mw-1600">
+                {news && news.length > 0 && <>
+                    <h2>News</h2>
+                    <Row xs={12}
+                        className="d-flex flex-row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 isaac-cards-body justify-content-around my-3">
+                        {news.slice(0, deviceSize === "lg" ? 3 : 4).map((n, i) => <NewsCard key={i} newsItem={n}
+                            showTitle
+                            cardClassName="bg-cultured-grey"/>)}
+                    </Row>
+                    <div className={"mt-4 mt-lg-7 w-100 text-center"}>
+                        <Button href={"/news"} color={"link"}><h4 className={"mb-0"}>See more news</h4></Button>
+                    </div>
+                </>}
+            </Container>
+        </section>
+
+        <section id="newsletter">
+            <Container className="overview-padding mw-1600">
+                {showNewsletterPrompts &&
+                    <Row xs={12} className="mt-3">
+                        <IconCard
+                            card={{
+                                title: "Stay updated",
+                                icon: {src: "/assets/cs/icons/mail.svg"},
+                                bodyText: "Update your preferences and be the first to hear about new features, challenges, topics, and improvements on the platform.",
+                                clickUrl: "/account#notifications",
+                                buttonText: "Join our newsletter",
+                                onButtonClick: () => {
+                                    setLinkedSetting("news-preference");
+                                }
+                            }}
+                        />
+                    </Row>
+                }
+            </Container>
+        </section>
+    </div>;
+};

src/app/components/pages/RegistrationSetPreferences.tsx

@@ -3,7 +3,15 @@ import {Button, Card, CardBody, Col, Container, Form, Label, Row,} from "reactst
 import {TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
 import {Immutable} from "immer";
 import {BooleanNotation, DisplaySettings, ProgrammingLanguage, ValidationUser} from "../../../IsaacAppTypes";
-import {AppState, errorSlice, selectors, updateCurrentUser, useAppDispatch, useAppSelector} from "../../state";
+import {
+    AppState,
+    errorSlice,
+    continueToAfterAuthPath,
+    selectors,
+    updateCurrentUser,
+    useAppDispatch,
+    useAppSelector
+} from "../../state";
 import {UserContextAccountInput} from "../elements/inputs/UserContextAccountInput";
 import {
     allRequiredInformationIsPresent,
@@ -50,10 +58,6 @@ export const RegistrationSetPreferences = () => {
     const [displaySettings, setDisplaySettings] = useState<DisplaySettings>({...userPreferences?.DISPLAY_SETTING});
     const [programmingLanguage, setProgrammingLanguage] = useState<ProgrammingLanguage>({...userPreferences?.PROGRAMMING_LANGUAGE});
 
-    function continueToAfterAuthPath() {
-        history.push(persistence.pop(KEY.AFTER_AUTH_PATH) || "/");
-    }
-
     const userPreferencesToUpdate = {
         EMAIL_PREFERENCE: emailPreferences, BOOLEAN_NOTATION: booleanNotation, DISPLAY_SETTING: displaySettings
     };
@@ -65,7 +69,7 @@ export const RegistrationSetPreferences = () => {
         if (user && isLoggedIn(user) && allRequiredInformationIsPresent(userToUpdate, userPreferencesToUpdate, userContexts)) {
             dispatch(errorSlice.actions.clearError());
             dispatch(updateCurrentUser(userToUpdate, userPreferencesToUpdate, userContexts, null, user, true));
-            if (isPhy) continueToAfterAuthPath();
+            if (isPhy) continueToAfterAuthPath(user);
         }
     }
 
@@ -116,7 +120,7 @@ export const RegistrationSetPreferences = () => {
                                 {siteSpecific(<div className="section-divider"/>, <hr/>)}
                                 <Row className="justify-content-end">
                                     <Col xs={12} sm={siteSpecific(4,5)} lg={6} className={classNames("d-flex justify-content-end", {"justify-content-lg-end": isAda})}>
-                                        <Button className={`my-2 px-2 w-100 ${siteSpecific("px-lg-0", "px-lg-3")}`}  color={siteSpecific("solid", "keyline")} onClick={continueToAfterAuthPath}>I&apos;ll do this later</Button>
+                                        <Button className={`my-2 px-2 w-100 ${siteSpecific("px-lg-0", "px-lg-3")}`}  color={siteSpecific("solid", "keyline")} onClick={() => {continueToAfterAuthPath(user);}}>I&apos;ll do this later</Button>
                                     </Col>
                                     <Col xs={12} sm={5} lg={6} className="d-flex">
                                         <Button type="submit" className={`btn my-2 px-2 w-100 ${siteSpecific("px-lg-0 btn-keyline", "px-lg-3 btn-solid")}`} disabled={!canSavePreferences}>Save preferences</Button>

src/app/components/site/cs/HeaderCS.tsx

@@ -101,6 +101,7 @@ export const HeaderCS = () => {
                                 <NavigationSection title={<>My Ada {<MenuBadge count={assignmentsCount + quizzesCount} message="incomplete assignments" />}</>}>
                                     {isTutorOrAbove(user) ?
                                         <>
+                                            <LinkItem to="/dashboard">Overview</LinkItem>
                                             <LinkItem to="/groups">Teaching groups</LinkItem>
                                             <LinkItem to={PATHS.SET_ASSIGNMENTS}>Manage assignments</LinkItem>
                                             <LinkItem to="/set_tests">Manage tests</LinkItem>