remove document count, correctly pluralize "studies", add fullscreen

stagecc · May 22, 2024 · d009924 · d009924
1 parent 63e43c3
commit d009924
Show file tree

Hide file tree

Showing 6 changed files with 149 additions and 36 deletions.
diff --git a/src/App.module.css b/src/App.module.css
@@ -0,0 +1,11 @@
+.dialog {
+  width: 100dvw;
+  height: 100dvh;
+}
+
+.studiesHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,44 +6,92 @@ import { Header } from "./components/Header/Header";
 import { Wrapper } from "./components/Wrapper/Wrapper";
 import { useQueryParams } from "./hooks/useQueryParams";
 import { toKebabCase } from "./utils";
+import { useState } from "react";
+import styles from "./App.module.css";
+import { FullScreenIconButton } from "./components/FullScreenIconButton/FullScreenIconButton";
 
 function App() {
-  const [program, setProgram] = useQueryParams(null, "program");
+  const [isFullscreen, setIsFullscreen] = useState(false);
 
   return (
     <Wrapper>
       <Header />
-      <Card>
-        <CardSection title={<div id="programs-title">Programs</div>}>
-          <Programs selectedProgram={program} setSelectedProgram={setProgram} />
-        </CardSection>
-        <CardSection
-          title={`Studies${program === null ? "" : ` - ${program}`}`}
-          ariaLabeledBy={
-            program === null ? undefined : `tab-${toKebabCase(program)}`
-          }
-          id={program === null ? undefined : `tabpanel-${toKebabCase(program)}`}
-        >
-          {program === null ? (
-            <div
-              style={{
-                display: "flex",
-                height: "100%",
-                alignItems: "center",
-                justifyContent: "center",
-                fontSize: "1.2rem",
-              }}
-            >
-              Please select a program to view available studies.
-            </div>
-          ) : (
-            <Studies programKey={program} />
-          )}
-        </CardSection>
-      </Card>
+
+      <FullscreenManager isFullscreen={isFullscreen}>
+        <MainContent
+          isFullscreen={isFullscreen}
+          setIsFullscreen={setIsFullscreen}
+        />
+      </FullscreenManager>
+
       <Footer />
     </Wrapper>
   );
 }
 
+function FullscreenManager({
+  children,
+  isFullscreen,
+}: {
+  children: React.ReactNode;
+  isFullscreen: boolean;
+}) {
+  if (isFullscreen)
+    return (
+      <dialog open className={styles.dialog}>
+        {children}
+      </dialog>
+    );
+  return children;
+}
+
+function MainContent({
+  isFullscreen,
+  setIsFullscreen,
+}: {
+  isFullscreen: boolean;
+  setIsFullscreen: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const [program, setProgram] = useQueryParams(null, "program");
+
+  return (
+    <Card>
+      <CardSection title={<div id="programs-title">Programs</div>}>
+        <Programs selectedProgram={program} setSelectedProgram={setProgram} />
+      </CardSection>
+      <CardSection
+        title={
+          <div className={styles.studiesHeader}>
+            {`Studies${program === null ? "" : ` - ${program}`}`}
+            <FullScreenIconButton
+              isFullscreen={isFullscreen}
+              onClick={() => setIsFullscreen(!isFullscreen)}
+            />
+          </div>
+        }
+        ariaLabeledBy={
+          program === null ? undefined : `tab-${toKebabCase(program)}`
+        }
+        id={program === null ? undefined : `tabpanel-${toKebabCase(program)}`}
+      >
+        {program === null ? (
+          <div
+            style={{
+              display: "flex",
+              height: "100%",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "1.2rem",
+            }}
+          >
+            Please select a program to view available studies.
+          </div>
+        ) : (
+          <Studies programKey={program} />
+        )}
+      </CardSection>
+    </Card>
+  );
+}
+
 export default App;
diff --git a/src/components/Card/Card.module.css b/src/components/Card/Card.module.css
@@ -1,6 +1,7 @@
 .card {
   flex: 1 0 0;
   overflow: auto;
+  height: 100%;
 
   box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 8px 2px;
   background-color: white;

diff --git a/src/components/FullScreenIconButton/FullScreenIconButton.module.css b/src/components/FullScreenIconButton/FullScreenIconButton.module.css
@@ -0,0 +1,6 @@
+.button {
+  border: unset;
+  background-color: unset;
+  color: unset;
+  cursor: pointer;
+}
diff --git a/src/components/FullScreenIconButton/FullScreenIconButton.tsx b/src/components/FullScreenIconButton/FullScreenIconButton.tsx
@@ -0,0 +1,49 @@
+import styles from "./FullScreenIconButton.module.css";
+
+interface FullScreenIconButtonProps {
+  isFullscreen: boolean;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+export const FullScreenIconButton = ({
+  isFullscreen,
+  onClick,
+}: FullScreenIconButtonProps) => {
+  return (
+    <button
+      className={styles.button}
+      onClick={onClick}
+      title={isFullscreen ? "Exit full screen" : "Enter full screen"}
+    >
+      {isFullscreen ? <FullscreenIcon /> : <ExitFullscreenIcon />}
+    </button>
+  );
+};
+
+function FullscreenIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 -960 960 960"
+      width="24px"
+      fill="currentColor"
+    >
+      <path d="M240-120v-120H120v-80h200v200h-80Zm400 0v-200h200v80H720v120h-80ZM120-640v-80h120v-120h80v200H120Zm520 0v-200h80v120h120v80H640Z" />
+    </svg>
+  );
+}
+
+function ExitFullscreenIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 -960 960 960"
+      width="24px"
+      fill="currentColor"
+    >
+      <path d="M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z" />
+    </svg>
+  );
+}
diff --git a/src/components/Programs.tsx b/src/components/Programs.tsx
@@ -21,13 +21,11 @@ export const Programs = ({
   if (isPending) return <LoadingPanel />;
   if (isError) return error.message;
 
-  const tabData: TabData = data.map(
-    ({ name, documentCount, numberOfStudies }) => ({
-      key: name,
-      title: name,
-      subtitle: `${compactNum(documentCount)} documents, ${compactNum(numberOfStudies)} studies`,
-    })
-  );
+  const tabData: TabData = data.map(({ name, numberOfStudies }) => ({
+    key: name,
+    title: name,
+    subtitle: `${compactNum(numberOfStudies)} stud${new Intl.PluralRules("en-US").select(numberOfStudies) === "one" ? "y" : "ies"}`,
+  }));
 
   return (
     <Tabs