From 12e34013f8daa38f919d4aa55a6b3de76937454b Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Wed, 8 Mar 2023 18:35:51 +0000
Subject: [PATCH] refactor: default noSsr to true in useMediaQuery

---
 packages/web/src/components/AppBar/index.tsx                | 4 +---
 packages/web/src/components/ConditionalIconButton/index.tsx | 4 +---
 packages/web/src/components/Drawer/index.tsx                | 4 +---
 packages/web/src/components/Layout/index.tsx                | 4 +---
 packages/web/src/components/SettingsLayout/index.tsx        | 4 +---
 packages/web/src/pages/Application/index.tsx                | 4 +---
 packages/web/src/styles/theme.ts                            | 5 +++++
 7 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/packages/web/src/components/AppBar/index.tsx b/packages/web/src/components/AppBar/index.tsx
index 56d52bd3..cf32768a 100644
--- a/packages/web/src/components/AppBar/index.tsx
+++ b/packages/web/src/components/AppBar/index.tsx
@@ -29,9 +29,7 @@ export default function AppBar(props: AppBarProps): React.ReactElement {
   const { drawerOpen, onDrawerOpen, onDrawerClose, maxWidth = false } = props;
 
   const theme = useTheme();
-  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), {
-    noSsr: true,
-  });
+  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'));
 
   const [accountMenuAnchorElement, setAccountMenuAnchorElement] =
     React.useState<null | HTMLElement>(null);
diff --git a/packages/web/src/components/ConditionalIconButton/index.tsx b/packages/web/src/components/ConditionalIconButton/index.tsx
index 4c72a4a9..dd8bcaf4 100644
--- a/packages/web/src/components/ConditionalIconButton/index.tsx
+++ b/packages/web/src/components/ConditionalIconButton/index.tsx
@@ -10,9 +10,7 @@ import { IconButton } from './style';
 export default function ConditionalIconButton(props: any): React.ReactElement {
   const { icon, ...buttonProps } = props;
   const theme = useTheme();
-  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), {
-    noSsr: true,
-  });
+  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'));
 
   if (matchSmallScreens) {
     return (
diff --git a/packages/web/src/components/Drawer/index.tsx b/packages/web/src/components/Drawer/index.tsx
index 936a1853..9d677bf1 100644
--- a/packages/web/src/components/Drawer/index.tsx
+++ b/packages/web/src/components/Drawer/index.tsx
@@ -31,9 +31,7 @@ type DrawerProps = {
 export default function Drawer(props: DrawerProps): React.ReactElement {
   const { links = [], bottomLinks = [], ...drawerProps } = props;
   const theme = useTheme();
-  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), {
-    noSsr: true,
-  });
+  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'));
   const formatMessage = useFormatMessage();
 
   const closeOnClick = (event: React.SyntheticEvent) => {
diff --git a/packages/web/src/components/Layout/index.tsx b/packages/web/src/components/Layout/index.tsx
index 05e3838c..09c738de 100644
--- a/packages/web/src/components/Layout/index.tsx
+++ b/packages/web/src/components/Layout/index.tsx
@@ -52,9 +52,7 @@ export default function PublicLayout({
 }: PublicLayoutProps): React.ReactElement {
   const version = useVersion();
   const theme = useTheme();
-  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'), {
-    noSsr: true,
-  });
+  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'));
   const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
 
   const openDrawer = () => setDrawerOpen(true);
diff --git a/packages/web/src/components/SettingsLayout/index.tsx b/packages/web/src/components/SettingsLayout/index.tsx
index 488349ea..ddeb90da 100644
--- a/packages/web/src/components/SettingsLayout/index.tsx
+++ b/packages/web/src/components/SettingsLayout/index.tsx
@@ -49,9 +49,7 @@ export default function SettingsLayout({
 }: SettingsLayoutProps): React.ReactElement {
   const { isCloud } = useAutomatischInfo();
   const theme = useTheme();
-  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'), {
-    noSsr: true,
-  });
+  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'));
   const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
 
   const openDrawer = () => setDrawerOpen(true);
diff --git a/packages/web/src/pages/Application/index.tsx b/packages/web/src/pages/Application/index.tsx
index f3db7ad9..2bee8da6 100644
--- a/packages/web/src/pages/Application/index.tsx
+++ b/packages/web/src/pages/Application/index.tsx
@@ -51,9 +51,7 @@ const ReconnectConnection = (props: any): React.ReactElement => {
 
 export default function Application(): React.ReactElement | null {
   const theme = useTheme();
-  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), {
-    noSsr: true,
-  });
+  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'));
   const formatMessage = useFormatMessage();
   const connectionsPathMatch = useMatch({
     path: URLS.APP_CONNECTIONS_PATTERN,
diff --git a/packages/web/src/styles/theme.ts b/packages/web/src/styles/theme.ts
index 4624bb5b..11a8fe7c 100644
--- a/packages/web/src/styles/theme.ts
+++ b/packages/web/src/styles/theme.ts
@@ -251,6 +251,11 @@ const extendedTheme = createTheme({
         }),
       },
     },
+    MuiUseMediaQuery: {
+      defaultProps: {
+        noSsr: true,
+      },
+    },
     MuiTab: {
       styleOverrides: {
         root: ({ theme }) => ({