[F] Table of Contents, Pagination fix, + GoogleSSOButton fix

- Has Table of Contents markup + js - Pagination and other components now use progress context - GoogleSSO button handleError method at a level that's accessible to parent func
lsst-epo · Oct 4, 2023 · 4b33504 · 4b33504
1 parent 09b49e9
commit 4b33504
Show file tree

Hide file tree

Showing 21 changed files with 847 additions and 251 deletions.
diff --git a/app/[locale]/[investigation]/layout.tsx b/app/[locale]/[investigation]/layout.tsx
@@ -9,7 +9,7 @@ import {
   getAuthCookies,
   getUserFromJwt,
 } from "@/components/auth/serverHelpers";
-import Header from "@/components/page/Header/Header";
+// import Header from "@/components/page/Header/Header";
 
 export interface InvestigationParams {
   investigation: string;
@@ -62,7 +62,7 @@ const InvestigationLandingLayout: (
 
   return (
     <>
-      <Header />
+      {/* <Header /> */}
       <StoredAnswersComponent investigationId={investigationData?.entry?.id}>
         {children}
       </StoredAnswersComponent>

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -11,7 +11,6 @@ import { GlobalDataProvider, GlobalData } from "@/contexts/GlobalData";
 import { graphql } from "@/gql/public-schema";
 import { Metadata } from "next";
 import Body from "@/global/Body";
-import Header from "@/global/Header";
 
 export interface RootLayoutParams {
   locale: string;
@@ -101,7 +100,6 @@ const RootLayout: (
             <GlobalStyles includeFonts={false} />
             <GlobalDataProvider data={globalData}>
               <Body>
-                <Header />
                 {children}
               </Body>
             </GlobalDataProvider>

diff --git a/components/auth/buttons/GoogleSSO/Button.tsx b/components/auth/buttons/GoogleSSO/Button.tsx
@@ -16,11 +16,12 @@ export default function SSOButton({
 
   const pathToRevalidate = usePathToRevalidate();
 
+  function handleError() {
+    console.error("error");
+    onSignInError();
+  }
+
   async function handleSuccess(credentialResponse: GoogleCredentialResponse) {
-    function handleError() {
-      console.error("error");
-      onSignInError();
-    }
 
     try {
       if (!credentialResponse.credential) return handleError();

diff --git a/components/educator-schema/StoredAnswersWrapper/StoredAnswersWrapper.tsx b/components/educator-schema/StoredAnswersWrapper/StoredAnswersWrapper.tsx
@@ -1,4 +1,4 @@
-import { StoredAnswersProvider } from "@/components/answers/StoredAnswersContext";
+import { StoredAnswersProvider } from "@/contexts/StoredAnswersContext";
 import { queryAPI } from "@/lib/fetch";
 import { getAuthCookies } from "@/components/auth/serverHelpers";
 import { graphql } from "@/gql/educator-schema";

diff --git a/components/layout/Pager/Pager.tsx b/components/layout/Pager/Pager.tsx
@@ -1,17 +1,14 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent, useContext } from "react";
 import { useTranslation } from "@/lib/i18n/client";
 import useResizeObserver from "use-resize-observer";
+import ProgressContext from "@/contexts/Progress";
 import * as Styled from "./styles";
 
 interface PagerProps {
   leftText?: string;
   leftLink: string;
   rightText?: string;
   rightLink: string;
-  isLeftDisabled?: boolean;
-  isRightDisabled?: boolean;
-  totalPages: number;
-  currentPage: number;
   className?: string;
 }
 
@@ -20,36 +17,52 @@ const Pager: FunctionComponent<PagerProps> = ({
   rightText,
   leftLink,
   rightLink,
-  isLeftDisabled = false,
-  isRightDisabled = false,
-  totalPages,
-  currentPage,
   className,
 }) => {
   const { t } = useTranslation();
   const { ref } = useResizeObserver({
     onResize: ({ height }) => {
       document.documentElement.style.setProperty(
         "--pager-height",
-        `${height}px`,
+        `${height}px`
       );
     },
   });
+  const {
+    currentSectionNumber,
+    currentPageNumber,
+    totalPages,
+    answeredBySectionPage,
+  } = useContext(ProgressContext);
+
+  const sectionIndex = currentSectionNumber - 1;
+  const pageIndex = currentPageNumber - 1;
+  const isLastPage = currentPageNumber === totalPages;
+  const isFirstPage = currentPageNumber === 1;
+  const currentPageAnswered =
+    answeredBySectionPage[sectionIndex][pageIndex];
+  const isNextDisabled =
+    !(currentPageAnswered === true || currentPageAnswered === undefined) ||
+    isLastPage;
+  const isPreviousDisabled = isFirstPage;
 
   return (
     <Styled.PagerContainer ref={ref} className={className}>
       <Styled.PagerButton
-        href={isLeftDisabled ? "#" : leftLink}
-        aria-disabled={isLeftDisabled}
+        href={isPreviousDisabled ? "#" : leftLink}
+        aria-disabled={isPreviousDisabled}
       >
         {leftText || t("pager.previous")}
       </Styled.PagerButton>
       <Styled.PageCount>
-        {t("pager.page-count", { current: currentPage, total: totalPages })}
+        {t("pager.page-count", {
+          current: currentPageNumber,
+          total: totalPages,
+        })}
       </Styled.PageCount>
       <Styled.PagerButton
-        href={isRightDisabled ? "#" : rightLink}
-        aria-disabled={isRightDisabled}
+        href={isNextDisabled ? "#" : rightLink}
+        aria-disabled={isNextDisabled}
       >
         {rightText || t("pager.next")}
       </Styled.PagerButton>

diff --git a/components/page/Header/Header.tsx b/components/page/Header/Header.tsx
@@ -1,12 +1,74 @@
 "use client";
 
-import { FunctionComponent } from "react";
+import { FunctionComponent, useState, useContext } from "react";
+import { SlideoutMenu } from "@rubin-epo/epo-react-lib";
+// import LanguageSelect from "./LanguageSelect";
+import ProgressContext from "@/contexts/Progress";
+import TableOfContents from "../TableOfContents";
+import HeaderProgress from "@/components/page/HeaderProgress";
+import useNavHider from "@/hooks/useNavHider";
 import * as Styled from "./styles";
 
-export const Header: FunctionComponent = () => {
-  return <Styled.Header></Styled.Header>;
+const Header: FunctionComponent<HeaderProps> = () => {
+  const { sections } = useContext(ProgressContext);
+  const [prevScrollPos, setPrevScrollPos] = useState(0);
+  const [visible, setVisible] = useState(true);
+  const [mainMenuIsOpen, setMainMenuIsOpen] = useState(false);
+  const [tocIsOpen, setTocIsOpen] = useState(false);
+
+  useNavHider(prevScrollPos, setPrevScrollPos, visible, setVisible);
+
+  return (
+    <Styled.Header
+      className={`page-header ${
+        visible || mainMenuIsOpen || tocIsOpen ? "visible" : "invisible"
+      }`}
+    >
+      <Styled.FullWidthCol>
+        <Styled.TopRow>
+          <Styled.MainMenuToggle
+            aria-controls="mainMenu"
+            aria-haspopup="menu"
+            icon="hamburger"
+            onClick={() => setMainMenuIsOpen(true)}
+          >
+            <div className="a-hidden">Toggle Main Menu</div>
+          </Styled.MainMenuToggle>
+          <Styled.TocToggle
+            aria-controls="tableOfContents"
+            aria-haspopup="menu"
+            icon="doc"
+            onClick={() => setTocIsOpen(true)}
+          >
+            <div>Table of Contents</div>
+          </Styled.TocToggle>
+        </Styled.TopRow>
+        {!!sections.length && (
+          <Styled.BottomRow>
+            <HeaderProgress />
+          </Styled.BottomRow>
+        )}
+      </Styled.FullWidthCol>
+      <SlideoutMenu
+        id="mainMenu"
+        title="Main menu"
+        callToAction="Settings and more"
+        isOpen={mainMenuIsOpen}
+        onCloseCallback={() => setMainMenuIsOpen(false)}
+      >
+        <div>MAIN MENU</div>
+        {/* <LanguageSelect id="langSelect" /> */}
+      </SlideoutMenu>
+      <TableOfContents
+        id="tableOfContents"
+        title="Table of Contents"
+        isOpen={tocIsOpen}
+        onCloseCallback={() => setTocIsOpen(false)}
+      />
+    </Styled.Header>
+  );
 };
 
-Header.displayName = "Page.Header";
+Header.displayName = "Global.Header";
 
 export default Header;
diff --git a/components/page/Header/styles.ts b/components/page/Header/styles.ts
@@ -1,13 +1,46 @@
 import styled from "styled-components";
-import { token } from "@rubin-epo/epo-react-lib/styles";
+import { Button } from "@rubin-epo/epo-react-lib";
 
-export const Header = styled.div`
-  --header-height: 40px;
+export const Header = styled.header`
   display: flex;
+  position: sticky;
+  top: 0;
+  transform: none;
+  transition: transform 0.4s;
   background-color: var(--turquoise85, #12726d);
-  height: var(--header-height);
+  z-index: 1;
 
-  @media screen and (min-width: ${token("BREAK_DESKTOP_SMALL")}) {
-    --header-height: 72px;
+  &.invisible {
+    transform: translate3d(0, -100%, 0);
   }
 `;
+
+export const FullWidthCol = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+export const TopRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  width: 100%;
+`;
+
+export const BottomRow = styled.div`
+  display: flex;
+  width: 100%;
+`;
+
+export const MainMenuToggle = styled(Button)`
+  svg {
+    height: 20px;
+  }
+`
+
+export const TocToggle = styled(Button)`
+  svg {
+    height: 20px;
+  }
+`
diff --git a/components/page/HeaderProgress/HeaderProgress.tsx b/components/page/HeaderProgress/HeaderProgress.tsx
@@ -1,41 +1,44 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent, useContext } from "react";
 import { IconComposer } from "@rubin-epo/epo-react-lib";
 import { ScreenreaderText } from "@rubin-epo/epo-react-lib/styles";
-import * as Styled from "./styles";
 import { useRouter } from "next/navigation";
 import { useTranslation } from "@/lib/i18n/client";
-
-export interface HeaderSection {
-  name: string;
-  order: number;
-  pages: number[];
-}
+import ProgressContext from "@/contexts/Progress";
+import * as Styled from "./styles";
 
 interface HeaderProgressProps {
-  currentPage: number;
-  totalPages: number;
-  sections: HeaderSection[];
   labelledById?: string;
+  backgroundColor?: string;
+  padding?: boolean;
 }
 
 const HeaderProgress: FunctionComponent<HeaderProgressProps> = ({
-  currentPage,
-  totalPages,
-  sections,
   labelledById,
+  backgroundColor = "var(--neutral10, #f5f5f5)",
+  padding = true,
 }) => {
   const { locale = "en-US" } = useRouter();
   const { t } = useTranslation();
+  const { sections, totalPages, currentPageNumber } =
+    useContext(ProgressContext);
 
   return (
-    <Styled.HeaderProgress aria-labelledby={labelledById} role="list">
+    <Styled.HeaderProgress
+      $backgroundColor={backgroundColor}
+      $padding={padding}
+      aria-labelledby={labelledById}
+      role="list"
+    >
       <ScreenreaderText aria-live="polite">
-        {t("pager.page-count", { current: currentPage, total: totalPages })}
+        {t("pager.page-count", {
+          current: currentPageNumber,
+          total: totalPages,
+        })}
       </ScreenreaderText>
       {sections.map(({ name, order, pages }, i) => {
         const firstPage = pages[0];
         const lastPage = pages[pages.length - 1];
-        const isActive = pages.includes(currentPage);
+        const isActive = pages.includes(currentPageNumber);
         const isLastSection = lastPage === totalPages;
         const labelId = `section-${order || i}`;
 
@@ -49,11 +52,13 @@ const HeaderProgress: FunctionComponent<HeaderProgressProps> = ({
             <Styled.ProgressBar
               min={firstPage}
               max={lastPage}
-              value={currentPage < firstPage ? undefined : currentPage}
+              value={
+                currentPageNumber < firstPage ? undefined : currentPageNumber
+              }
               markerFormatter={() =>
                 Intl.NumberFormat(locale, {
                   style: "percent",
-                }).format(currentPage / totalPages)
+                }).format(currentPageNumber / totalPages)
               }
               labelledById={labelId}
               markerConfig={{

diff --git a/components/page/HeaderProgress/styles.ts b/components/page/HeaderProgress/styles.ts
@@ -12,14 +12,19 @@ const colors = [
   "#F0B670",
 ];
 
-export const HeaderProgress = styled.ul`
-  background-color: var(--neutral10, #f5f5f5);
+export const HeaderProgress = styled.ul<{ $backgroundColor: string, $padding: boolean }>`
   display: flex;
   align-items: center;
-  gap: calc(var(--PADDING-SMALL, 20px) / 2);
-  padding-inline: var(--PADDING-SMALL, 20px);
-  height: 30px;
   width: 100%;
+  height: 30px;
+  gap: calc(var(--PADDING-SMALL, 20px) / 2);
+  ${({ $padding }) =>
+    $padding
+      ? css`
+          padding-inline: var(--PADDING-SMALL, 20px);
+        `
+      : ""}
+  background-color: ${({ $backgroundColor }) => $backgroundColor}
 `;
 export const ProgressBar = styled(BaseProgressBar)``;