new settings page with lesson history

src/components/Fieldset.tsx

@@ -7,5 +7,6 @@ export const Fieldset = styled.fieldset`
   min-width: 0;
   legend {
     display: table;
+    width: 100%;
   }
 `;

src/routing/AllRoutes.tsx

@@ -1,14 +1,12 @@
 import { Navigate, Route, Routes } from "react-router-dom";
 import { App } from "../App";
-import { LessonArchive } from "../views/lessons/LessonArchive";
+import { LessonHistoryPage } from "../views/lessons/LessonHistoryPage";
 import { ViewLesson } from "../views/lessons/ViewLesson";
 import { PracticeLesson } from "../views/practice/PracticeLesson";
-import { MyTerms } from "../views/terms/MyTerms";
 import { CoursesPage } from "../views/vocabulary/CoursesPage";
-import { MySets } from "../views/vocabulary/MySets";
 import { ViewCollection } from "../views/vocabulary/ViewCollection";
 import { ViewSet } from "../views/vocabulary/ViewSet";
-import { Settings } from "../views/settings/Settings";
+import { SettingsPage } from "../views/settings/SettingsPage";
 import { SignInPage } from "../views/signin/SignInPage";
 import { CreateAccountPage } from "../views/signin/CreateAccountPage";
 import { ForgotPasswordPage } from "../views/signin/ForgotPasswordPage";
@@ -54,14 +52,14 @@ export function AllRoutes() {
           {/* <Route path="my-sets" element={<MySets />}></Route> */}
           {/* <Route path="terms" element={<MyTerms />} /> */}
           <Route path="lessons">
-            <Route index element={<LessonArchive />} />
+            <Route index element={<LessonHistoryPage />} />
             <Route path=":lessonId" element={<ViewLesson />} />
           </Route>
           <Route path="practice">
             <Route index element={<Navigate to="/lessons/" replace />} />
             <Route path=":lessonId/*" element={<PracticeLesson />}></Route>
           </Route>
-          <Route path="settings" element={<Settings />} />
+          <Route path="settings" element={<SettingsPage />} />
         </Route>
       </Route>
     </Routes>

src/views/lessons/LessonHistoryPage.tsx

@@ -0,0 +1,91 @@
+import React, { ReactElement } from "react";
+import { Duration } from "luxon";
+import { SmallLoader } from "../../components/Loader";
+import { SectionHeading } from "../../components/SectionHeading";
+import { StyledLink } from "../../components/StyledLink";
+import { StyledTable } from "../../components/StyledTable";
+import { VisuallyHidden } from "../../components/VisuallyHidden";
+import { useAuth } from "../../firebase/AuthProvider";
+import {
+  useAnalyticsPageName,
+  useFirebaseAllLessonMetadata,
+} from "../../firebase/hooks";
+import { Lesson, nameForLesson } from "../../state/reducers/lessons";
+import { ViewLessonPath } from "../../routing/paths";
+import { HanehldaView } from "../../components/HanehldaView";
+import { DefaultNav } from "../../components/HanehldaView/HanehldaNav";
+import { Button, ButtonLink } from "../../components/Button";
+import { Link } from "react-router-dom";
+
+type FinishedLesson = Lesson & { completedAt: number };
+
+export function LessonHistoryPage(): ReactElement {
+  useAnalyticsPageName("Lesson archive");
+  const { user } = useAuth();
+
+  const [firebaseResult, _] = useFirebaseAllLessonMetadata(user);
+
+  if (!firebaseResult.ready)
+    return (
+      <div style={{ width: "100%" }}>
+        <SmallLoader below={"Loading lesson data..."} />
+      </div>
+    );
+
+  const lessons = firebaseResult.data ?? {};
+
+  const finishedLessons = Object.values(lessons)
+    .filter((l): l is FinishedLesson => Boolean(l.completedAt))
+    // most recent first
+    .sort((a, b) => b.completedAt - a.completedAt);
+  return (
+    <HanehldaView navControls={<DefaultNav />} collapseNav>
+      <div>
+        <SectionHeading>Lessons archive</SectionHeading>
+        <p>
+          Here, you can review lessons you've already completed. This can help
+          you know how long lessons of different sizes take for you to complete.
+        </p>
+        {finishedLessons.length ? (
+          <StyledTable>
+            <thead>
+              <tr>
+                <th>Date completed</th>
+                <th>
+                  <VisuallyHidden>Link to view lesson details</VisuallyHidden>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {finishedLessons.map((lesson, idx) => (
+                <FinishedLessonRow key={idx} lesson={lesson} />
+              ))}
+            </tbody>
+          </StyledTable>
+        ) : (
+          <p>
+            You have not completed any lessons. Head over to the{" "}
+            <StyledLink to="/">dashboard</StyledLink> to start learning!
+          </p>
+        )}
+      </div>
+    </HanehldaView>
+  );
+}
+
+function FinishedLessonRow({ lesson }: { lesson: FinishedLesson }) {
+  return (
+    <tr>
+      <td>{new Date(lesson.createdFor).toDateString()}</td>
+      <td>
+        <Button
+          as={Link}
+          style={{ margin: "0 auto" }}
+          to={ViewLessonPath(lesson.id)}
+        >
+          Details
+        </Button>
+      </td>
+    </tr>
+  );
+}

src/views/lessons/ViewLesson.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from "react";
-import { Navigate, useNavigate, useParams } from "react-router-dom";
+import { Link, Navigate, useNavigate, useParams } from "react-router-dom";
 import { Card, cards, keyForCard } from "../../data/cards";
 import { nameForLesson } from "../../state/reducers/lessons";
 import { ReviewResult } from "../../state/reducers/leitnerBoxes";
@@ -9,7 +9,15 @@ import { SectionHeading } from "../../components/SectionHeading";
 import { CardTable } from "../../components/CardTable";
 import { StyledLink } from "../../components/StyledLink";
 import { useAnalyticsPageName } from "../../firebase/hooks";
-import { LessonsPath } from "../../routing/paths";
+import { DashboardPath, LessonsPath } from "../../routing/paths";
+import { BlueEm } from "../settings/SettingsPage";
+import { HanehldaView } from "../../components/HanehldaView";
+import { DefaultNav } from "../../components/HanehldaView/HanehldaNav";
+import styled from "styled-components";
+import { LearnPage } from "../learn/LearnPage";
+import { Button } from "../../components/Button";
+import { theme } from "../../theme";
+import { Hr } from "../setup/common";
 
 export function ViewLesson(): ReactElement {
   useAnalyticsPageName("View lesson");
@@ -32,6 +40,18 @@ const reviewResultNames: Record<ReviewResult, string> = {
   REPEAT_MISTAKE: "Multiple mistakes",
 };
 
+const ContentWrapper = styled.div`
+  padding: 5px 20px;
+`;
+
+const ReviewedCardsWrapper = styled.div`
+  h3 {
+    text-align: left;
+    margin: 10px;
+    font-size: ${theme.fontSizes.md};
+  }
+`;
+
 export function _ViewLesson(): ReactElement {
   const { lesson, reviewedTerms } = useLesson();
   const reviewedCards = useCardsForTerms(
@@ -54,25 +74,40 @@ export function _ViewLesson(): ReactElement {
     }
   );
   return (
-    <div>
-      <SectionHeading>Lesson debrief - {nameForLesson(lesson)}</SectionHeading>
-      <p>
-        Take a look at how you did! If you were confused by a term, go ahead and
-        listen to all the alternate pronouncations by hitting the "More" button.
-      </p>
-      <p>
-        Head back to the <StyledLink to="/">dashboard</StyledLink> to keep
-        learning!
-      </p>
-      {Object.entries(reviewedCardsByStatus).map(
-        ([result, cards]) =>
-          cards.length > 0 && (
-            <div>
-              <h3>{reviewResultNames[result as ReviewResult]}</h3>
-              <CardTable cards={cards} />
-            </div>
-          )
-      )}
-    </div>
+    <HanehldaView navControls={<DefaultNav />} collapseNav>
+      <div>
+        <ContentWrapper>
+          <h2>Lesson debrief</h2>
+          <BlueEm as="h3" style={{ margin: "0" }}>
+            {nameForLesson(lesson)}
+          </BlueEm>
+          <p>
+            Take a look at how you did! If you were confused by a term, go ahead
+            and listen to all the alternate pronouncations by hitting the "More"
+            button.
+          </p>
+          <Button as={Link} to={DashboardPath}>
+            Keep learning
+          </Button>
+        </ContentWrapper>
+        <hr />
+        <ReviewedCardsWrapper>
+          {Object.entries(reviewedCardsByStatus).map(
+            ([result, cards]) =>
+              cards.length > 0 && (
+                <div>
+                  <h3>{reviewResultNames[result as ReviewResult]}</h3>
+                  <CardTable cards={cards} />
+                </div>
+              )
+          )}
+        </ReviewedCardsWrapper>
+        <ContentWrapper>
+          <Button as={Link} to={DashboardPath}>
+            Keep learning
+          </Button>
+        </ContentWrapper>
+      </div>
+    </HanehldaView>
   );
 }