groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: default noSsr to true in useMediaQuery

Browse Source
This commit is contained in:
Ali BARIN
2023-03-08 18:35:51 +00:00
parent bd2ad1d7a1
commit 12e34013f8
7 changed files with 11 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/web/src/components/AppBar/index.tsx
View File

@@ -29,9 +29,7 @@ export default function AppBar(props: AppBarProps): React.ReactElement {
const { drawerOpen, onDrawerOpen, onDrawerClose, maxWidth = false } = props; const { drawerOpen, onDrawerOpen, onDrawerClose, maxWidth = false } = props;
const theme = useTheme(); const theme = useTheme();
const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'));
noSsr: true,
});
const [accountMenuAnchorElement, setAccountMenuAnchorElement] = const [accountMenuAnchorElement, setAccountMenuAnchorElement] =
React.useState<null | HTMLElement>(null); React.useState<null | HTMLElement>(null);

4
packages/web/src/components/ConditionalIconButton/index.tsx
View File

@@ -10,9 +10,7 @@ import { IconButton } from './style';
export default function ConditionalIconButton(props: any): React.ReactElement { export default function ConditionalIconButton(props: any): React.ReactElement {
const { icon, ...buttonProps } = props; const { icon, ...buttonProps } = props;
const theme = useTheme(); const theme = useTheme();
const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'));
noSsr: true,
});
if (matchSmallScreens) { if (matchSmallScreens) {
return ( return (

4
packages/web/src/components/Drawer/index.tsx
View File

@@ -31,9 +31,7 @@ type DrawerProps = {
export default function Drawer(props: DrawerProps): React.ReactElement { export default function Drawer(props: DrawerProps): React.ReactElement {
const { links = [], bottomLinks = [], ...drawerProps } = props; const { links = [], bottomLinks = [], ...drawerProps } = props;
const theme = useTheme(); const theme = useTheme();
const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'));
noSsr: true,
});
const formatMessage = useFormatMessage(); const formatMessage = useFormatMessage();
const closeOnClick = (event: React.SyntheticEvent) => { const closeOnClick = (event: React.SyntheticEvent) => {

4
packages/web/src/components/Layout/index.tsx
View File

@@ -52,9 +52,7 @@ export default function PublicLayout({
}: PublicLayoutProps): React.ReactElement { }: PublicLayoutProps): React.ReactElement {
const version = useVersion(); const version = useVersion();
const theme = useTheme(); const theme = useTheme();
const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'), { const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'));
noSsr: true,
});
const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens); const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
const openDrawer = () => setDrawerOpen(true); const openDrawer = () => setDrawerOpen(true);

4
packages/web/src/components/SettingsLayout/index.tsx
View File

@@ -49,9 +49,7 @@ export default function SettingsLayout({
}: SettingsLayoutProps): React.ReactElement { }: SettingsLayoutProps): React.ReactElement {
const { isCloud } = useAutomatischInfo(); const { isCloud } = useAutomatischInfo();
const theme = useTheme(); const theme = useTheme();
const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'), { const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'));
noSsr: true,
});
const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens); const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
const openDrawer = () => setDrawerOpen(true); const openDrawer = () => setDrawerOpen(true);

4
packages/web/src/pages/Application/index.tsx
View File

@@ -51,9 +51,7 @@ const ReconnectConnection = (props: any): React.ReactElement => {
export default function Application(): React.ReactElement | null { export default function Application(): React.ReactElement | null {
const theme = useTheme(); const theme = useTheme();
const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'));
noSsr: true,
});
const formatMessage = useFormatMessage(); const formatMessage = useFormatMessage();
const connectionsPathMatch = useMatch({ const connectionsPathMatch = useMatch({
path: URLS.APP_CONNECTIONS_PATTERN, path: URLS.APP_CONNECTIONS_PATTERN,

5
packages/web/src/styles/theme.ts
View File

@@ -251,6 +251,11 @@ const extendedTheme = createTheme({
}), }),
}, },
}, },
MuiUseMediaQuery: {
defaultProps: {
noSsr: true,
},
},
MuiTab: { MuiTab: {
styleOverrides: { styleOverrides: {
root: ({ theme }) => ({ root: ({ theme }) => ({