Replace deprecated Hidden component with useMediaQuery hook (#3246)

sillsdev · Oct 8, 2024 · 508758a · 508758a
1 parent d5916c5
commit 508758a
Show file tree

Hide file tree

Showing 22 changed files with 305 additions and 264 deletions.
diff --git a/src/components/App/tests/index.test.tsx b/src/components/App/tests/index.test.tsx
@@ -1,3 +1,4 @@
+import { ThemeProvider } from "@mui/material/styles";
 import { render } from "@testing-library/react";
 import "jest-canvas-mock";
 import { act } from "react";
@@ -7,6 +8,7 @@ import thunk from "redux-thunk";
 
 import App from "components/App";
 import { defaultState } from "rootRedux/types";
+import theme from "types/theme";
 
 jest.mock("react-router-dom");
 
@@ -22,9 +24,11 @@ describe("App", () => {
   it("renders without crashing", async () => {
     await act(async () => {
       render(
-        <Provider store={mockStore}>
-          <App />
-        </Provider>
+        <ThemeProvider theme={theme}>
+          <Provider store={mockStore}>
+            <App />
+          </Provider>
+        </ThemeProvider>
       );
     });
   });

diff --git a/src/components/AppBar/Logo.tsx b/src/components/AppBar/Logo.tsx
@@ -1,4 +1,4 @@
-import { Button, Hidden } from "@mui/material";
+import { Button, Theme, useMediaQuery } from "@mui/material";
 import { ReactElement } from "react";
 import { useNavigate } from "react-router-dom";
 
@@ -10,6 +10,8 @@ import { themeColors } from "types/theme";
 
 /** A button that redirects to the home page */
 export default function Logo(): ReactElement {
+  const isSmDown = useMediaQuery<Theme>((th) => th.breakpoints.down("sm"));
+  const isMdDown = useMediaQuery<Theme>((th) => th.breakpoints.down("md"));
   const navigate = useNavigate();
   return (
     <Button
@@ -24,15 +26,11 @@ export default function Logo(): ReactElement {
         padding: 2,
       }}
     >
-      <Hidden mdDown>
-        <img src={logo} height="45" alt="Logo" />
-      </Hidden>
-      <Hidden smDown mdUp>
-        <img src={smallLogo} height="30" alt="Logo" />
-      </Hidden>
-      <Hidden smUp>
-        <img src={smallLogo} height="20" alt="Logo" />
-      </Hidden>
+      <img
+        alt="Logo"
+        height={isSmDown ? "20" : isMdDown ? "30" : "45"}
+        src={isMdDown ? smallLogo : logo}
+      />
     </Button>
   );
 }
diff --git a/src/components/AppBar/NavigationButtons.tsx b/src/components/AppBar/NavigationButtons.tsx
@@ -1,6 +1,12 @@
 import { PlaylistAdd, Rule } from "@mui/icons-material";
-import { Button, Hidden, Tooltip, Typography } from "@mui/material";
-import { ReactElement, useEffect, useState } from "react";
+import {
+  Button,
+  type Theme,
+  Tooltip,
+  Typography,
+  useMediaQuery,
+} from "@mui/material";
+import { type ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
@@ -71,6 +77,7 @@ function NavButton(props: NavButtonProps): ReactElement {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { windowWidth } = useWindowSize();
+  const showText = useMediaQuery<Theme>((th) => th.breakpoints.up("sm"));
 
   return (
     <Button
@@ -90,11 +97,11 @@ function NavButton(props: NavButtonProps): ReactElement {
       }}
     >
       <Tooltip title={t(props.textId)}>{props.icon}</Tooltip>
-      <Hidden smDown>
+      {showText && (
         <Typography style={{ marginLeft: 5, marginRight: 5 }}>
           {t(props.textId)}
         </Typography>
-      </Hidden>
+      )}
     </Button>
   );
 }
diff --git a/src/components/AppBar/ProjectButtons.tsx b/src/components/AppBar/ProjectButtons.tsx
@@ -1,5 +1,11 @@
 import { BarChart, Settings } from "@mui/icons-material";
-import { Button, Hidden, Tooltip, Typography } from "@mui/material";
+import {
+  Button,
+  Theme,
+  Tooltip,
+  Typography,
+  useMediaQuery,
+} from "@mui/material";
 import { ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
@@ -42,6 +48,15 @@ export default function ProjectButtons(props: TabProps): ReactElement {
   const { t } = useTranslation();
   const navigate = useNavigate();
 
+  const isMdUp = useMediaQuery<Theme>((th) => th.breakpoints.up("md"));
+  const isLg = useMediaQuery<Theme>((th) => th.breakpoints.only("lg"));
+  const isXl = useMediaQuery<Theme>((th) => th.breakpoints.only("xl"));
+  const nameLength = isXl
+    ? projNameLength.xl
+    : isLg
+      ? projNameLength.lg
+      : projNameLength.md;
+
   useEffect(() => {
     hasPermission(Permission.Statistics).then(setHasStatsPermission);
   }, []);
@@ -77,22 +92,14 @@ export default function ProjectButtons(props: TabProps): ReactElement {
           }}
         >
           <Settings />
-          <Hidden mdDown>
+          {isMdUp && (
             <Typography
               display="inline"
               style={{ marginLeft: 5, marginRight: 5 }}
             >
-              <Hidden xlDown>
-                {shortenName(projectName, projNameLength.xl)}
-              </Hidden>
-              <Hidden lgDown xlUp>
-                {shortenName(projectName, projNameLength.lg)}
-              </Hidden>
-              <Hidden mdDown lgUp>
-                {shortenName(projectName, projNameLength.md)}
-              </Hidden>
+              {shortenName(projectName, nameLength)}
             </Typography>
-          </Hidden>
+          )}
         </Button>
       </Tooltip>
       {showSpeaker && <SpeakerMenu />}

diff --git a/src/components/AppBar/UserMenu.tsx b/src/components/AppBar/UserMenu.tsx
@@ -7,15 +7,15 @@ import {
 import {
   Avatar,
   Button,
-  Hidden,
   Menu,
   MenuItem,
+  type Theme,
   Typography,
+  useMediaQuery,
 } from "@mui/material";
 import {
   type CSSProperties,
   type ForwardedRef,
-  Fragment,
   type MouseEvent,
   type ReactElement,
   useState,
@@ -53,6 +53,10 @@ export default function UserMenu(props: TabProps): ReactElement {
   const [isAdmin, setIsAdmin] = useState(false);
   const username = LocalStorage.getCurrentUser()?.username;
 
+  const isLgUp = useMediaQuery<Theme>((th) => th.breakpoints.up("lg"));
+  const isXl = useMediaQuery<Theme>((th) => th.breakpoints.only("xl"));
+  const nameLength = isXl ? usernameLength.xl : usernameLength.lg;
+
   function handleClick(event: MouseEvent<HTMLButtonElement>): void {
     setAnchorElement(event.currentTarget);
   }
@@ -78,17 +82,10 @@ export default function UserMenu(props: TabProps): ReactElement {
           padding: 0,
         }}
       >
-        {username ? (
-          <Hidden lgDown>
-            <Typography style={{ marginLeft: 5, marginRight: 5 }}>
-              <Hidden xlDown>{shortenName(username, usernameLength.xl)}</Hidden>
-              <Hidden xlUp lgDown>
-                {shortenName(username, usernameLength.lg)}
-              </Hidden>
-            </Typography>
-          </Hidden>
-        ) : (
-          <Fragment />
+        {!!username && isLgUp && (
+          <Typography style={{ marginLeft: 5, marginRight: 5 }}>
+            {shortenName(username, nameLength)}
+          </Typography>
         )}
         {avatar ? (
           <Avatar alt="User avatar" src={avatar} />

diff --git a/src/components/AppBar/tests/AppBarComponent.test.tsx b/src/components/AppBar/tests/AppBarComponent.test.tsx
@@ -1,10 +1,12 @@
+import { ThemeProvider } from "@mui/material/styles";
 import { Provider } from "react-redux";
 import { MemoryRouter } from "react-router-dom";
 import { act, create } from "react-test-renderer";
 import configureMockStore from "redux-mock-store";
 
 import AppBar from "components/AppBar/AppBarComponent";
 import { defaultState } from "rootRedux/types";
+import theme from "types/theme";
 
 jest.mock("backend", () => ({
   isSiteAdmin: () => mockIsSiteAdmin(),
@@ -26,11 +28,13 @@ describe("AppBar", () => {
   it("renders", async () => {
     await act(async () => {
       create(
-        <Provider store={mockStore}>
-          <MemoryRouter>
-            <AppBar />
-          </MemoryRouter>
-        </Provider>
+        <ThemeProvider theme={theme}>
+          <Provider store={mockStore}>
+            <MemoryRouter>
+              <AppBar />
+            </MemoryRouter>
+          </Provider>
+        </ThemeProvider>
       );
     });
   });

diff --git a/src/components/AppBar/tests/Logo.test.tsx b/src/components/AppBar/tests/Logo.test.tsx
@@ -1,8 +1,10 @@
 import { Button } from "@mui/material";
+import { ThemeProvider } from "@mui/material/styles";
 import renderer from "react-test-renderer";
 
 import Logo from "components/AppBar/Logo";
 import { Path } from "types/path";
+import theme from "types/theme";
 
 jest.mock("react-router-dom", () => ({
   useNavigate:
@@ -17,7 +19,11 @@ let testRenderer: renderer.ReactTestRenderer;
 
 beforeAll(() => {
   renderer.act(() => {
-    testRenderer = renderer.create(<Logo />);
+    testRenderer = renderer.create(
+      <ThemeProvider theme={theme}>
+        <Logo />
+      </ThemeProvider>
+    );
   });
 });
 

diff --git a/src/components/AppBar/tests/NavigationButtons.test.tsx b/src/components/AppBar/tests/NavigationButtons.test.tsx
@@ -1,3 +1,4 @@
+import { ThemeProvider } from "@mui/material/styles";
 import { Provider } from "react-redux";
 import renderer, { type ReactTestInstance } from "react-test-renderer";
 import configureMockStore from "redux-mock-store";
@@ -8,7 +9,7 @@ import NavigationButtons, {
   dataEntryButtonId,
 } from "components/AppBar/NavigationButtons";
 import { Path } from "types/path";
-import { themeColors } from "types/theme";
+import theme, { themeColors } from "types/theme";
 
 jest.mock("react-router-dom", () => ({
   useNavigate: jest.fn(),
@@ -34,9 +35,11 @@ const renderNavButtons = async (
   mockGetCurrentPermissions.mockResolvedValue([permission]);
   await renderer.act(async () => {
     testRenderer = renderer.create(
-      <Provider store={mockStore}>
-        <NavigationButtons currentTab={path} />
-      </Provider>
+      <ThemeProvider theme={theme}>
+        <Provider store={mockStore}>
+          <NavigationButtons currentTab={path} />
+        </Provider>
+      </ThemeProvider>
     );
   });
 };

diff --git a/src/components/AppBar/tests/ProjectButtons.test.tsx b/src/components/AppBar/tests/ProjectButtons.test.tsx
@@ -1,4 +1,5 @@
 import { Button } from "@mui/material";
+import { ThemeProvider } from "@mui/material/styles";
 import { Provider } from "react-redux";
 import { ReactTestRenderer, act, create } from "react-test-renderer";
 import configureMockStore, { MockStoreEnhanced } from "redux-mock-store";
@@ -14,7 +15,7 @@ import { MergeDups } from "goals/MergeDuplicates/MergeDupsTypes";
 import { ReviewEntries } from "goals/ReviewEntries/ReviewEntriesTypes";
 import { Goal, GoalStatus } from "types/goals";
 import { Path } from "types/path";
-import { themeColors } from "types/theme";
+import theme, { themeColors } from "types/theme";
 
 jest.mock("react-router-dom", () => ({
   useNavigate: jest.fn(),
@@ -46,9 +47,11 @@ const renderProjectButtons = async (
 ): Promise<void> => {
   await act(async () => {
     testRenderer = create(
-      <Provider store={mockStore(goal)}>
-        <ProjectButtons currentTab={path} />
-      </Provider>
+      <ThemeProvider theme={theme}>
+        <Provider store={mockStore(goal)}>
+          <ProjectButtons currentTab={path} />
+        </Provider>
+      </ThemeProvider>
     );
   });
 };

diff --git a/src/components/AppBar/tests/UserMenu.test.tsx b/src/components/AppBar/tests/UserMenu.test.tsx
@@ -1,10 +1,12 @@
 import { Button, MenuItem } from "@mui/material";
+import { ThemeProvider } from "@mui/material/styles";
 import { Provider } from "react-redux";
 import { act, create, ReactTestRenderer } from "react-test-renderer";
 import configureMockStore from "redux-mock-store";
 
 import UserMenu, { UserMenuList } from "components/AppBar/UserMenu";
 import { Path } from "types/path";
+import theme from "types/theme";
 
 jest.mock("backend", () => ({
   isSiteAdmin: () => mockIsSiteAdmin(),
@@ -37,9 +39,11 @@ describe("UserMenu", () => {
   it("renders", async () => {
     await act(async () => {
       testRenderer = create(
-        <Provider store={mockStore}>
-          <UserMenu currentTab={Path.Root} />
-        </Provider>
+        <ThemeProvider theme={theme}>
+          <Provider store={mockStore}>
+            <UserMenu currentTab={Path.Root} />
+          </Provider>
+        </ThemeProvider>
       );
     });
     expect(testRenderer.root.findAllByType(Button).length).toEqual(1);

diff --git a/src/components/LandingPage/TopBar.tsx b/src/components/LandingPage/TopBar.tsx
@@ -1,4 +1,11 @@
-import { AppBar, Hidden, Stack, Toolbar, Typography } from "@mui/material";
+import {
+  AppBar,
+  Stack,
+  Theme,
+  Toolbar,
+  Typography,
+  useMediaQuery,
+} from "@mui/material";
 import { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -8,6 +15,8 @@ export const topBarHeight = 70;
 
 /** A  bar shown at the top of the landing page. */
 export default function TopBar(): ReactElement {
+  const showSubtitle = useMediaQuery<Theme>((th) => th.breakpoints.up("sm"));
+  const isMdUp = useMediaQuery<Theme>((th) => th.breakpoints.up("md"));
   const { t } = useTranslation();
 
   return (
@@ -22,12 +31,11 @@ export default function TopBar(): ReactElement {
             style={{ width: "100%" }}
           >
             <img src={logo} height="50" alt="Logo" />
-            <Hidden smDown mdUp>
-              <Typography variant="h6">{t("landingPage.subtitle")}</Typography>
-            </Hidden>
-            <Hidden mdDown>
-              <Typography variant="h5">{t("landingPage.subtitle")}</Typography>
-            </Hidden>
+            {showSubtitle && (
+              <Typography variant={isMdUp ? "h5" : "h6"}>
+                {t("landingPage.subtitle")}
+              </Typography>
+            )}
           </Stack>
         </Toolbar>
       </AppBar>