Remove index.scss in favor of CssBaseline and some theme overrides (#540

) * remove index.scss in favor of CssBaseline and some theme overrides * clean-up - old unused queryClient * remove now-redundant global font style * more _app cleanup - redundant dynamic import * supress warning about :first-child in SSR
ZdruzenieSTROM · Dec 15, 2024 · 4eaa47e · 4eaa47e
1 parent 8a5162d
commit 4eaa47e
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 170 deletions.
diff --git a/src/components/PageLayout/PageLayout.tsx b/src/components/PageLayout/PageLayout.tsx
@@ -52,7 +52,10 @@ export const PageLayout: FC<PageLayoutProps> = ({contentWidth = 2, title = '', c
                   py: {xs: 4, md: 8, lg: 12},
                   px: 2,
                   ...sx,
-                  '> :first-child': {mt: 0, pt: 0},
+                  // v server-renderi bol v consoli warning, ale first-child je tu asi uplne v pohode selector :D
+                  // https://github.com/emotion-js/emotion/issues/1105#issuecomment-557726922
+                  '> :first-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */':
+                    {mt: 0, pt: 0},
                 }}
               >
                 {children}

diff --git a/src/index.scss b/src/index.scss
diff --git a/src/index.scss.d.ts b/src/index.scss.d.ts
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,10 +1,9 @@
-import '../index.scss'
-
+import {CssBaseline} from '@mui/material'
 import {ThemeProvider} from '@mui/material/styles'
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query'
+import {ReactQueryDevtools} from '@tanstack/react-query-devtools'
 import {isAxiosError} from 'axios'
 import {AppProps} from 'next/app'
-import dynamic from 'next/dynamic'
 import Head from 'next/head'
 import {FC, PropsWithChildren, useMemo} from 'react'
 import {CookiesProvider} from 'react-cookie'
@@ -15,65 +14,6 @@ import {AlertContainer} from '@/utils/AlertContainer'
 import {AuthContainer} from '@/utils/AuthContainer'
 import {useAlert} from '@/utils/useAlert'
 
-const ReactQueryDevtools = dynamic(
-  () => import('@tanstack/react-query-devtools').then(({ReactQueryDevtools}) => ReactQueryDevtools),
-  {
-    ssr: false,
-  },
-)
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: (failureCount, error) => {
-        if (isAxiosError(error)) {
-          // nechceme retryovat 403 (Forbidden)
-          const status = error.response?.status
-          if (status === 403 || status === 404) return false
-        }
-        // klasika - retryuj len 3x
-        if (failureCount >= 3) return false
-        return true
-      },
-    },
-    mutations: {
-      // globalny error handler requestov cez useMutation
-      // notes:
-      // - useMutation vzdy sam loguje error do konzoly, my nemusime
-      // - specifikovanim `onError` na nejakej `useMutation` sa tento handler prepise, tak sa tomu vyhybajme
-      onError: (error) => {
-        if (isAxiosError(error)) {
-          const data = error.response?.data as unknown
-          if (typeof data === 'object' && data) {
-            // ak mame vlastny message v `.detail`, ukazeme userovi ten
-            const detail = 'detail' in data && data.detail
-            if (typeof detail === 'string') {
-              alert(detail)
-              return
-            }
-
-            // ak nie, ale mame message v `.non_field_errors`, ukazeme ten
-            const nonFieldErrors = 'non_field_errors' in data && data.non_field_errors
-            const nonFieldError = Array.isArray(nonFieldErrors) && (nonFieldErrors as unknown[])[0]
-            if (typeof nonFieldError === 'string') {
-              alert(nonFieldError)
-              return
-            }
-
-            // TODO: handle field errors (napr. na password) - nealertovat usera, ale zobrazit v UI? alebo alert s prvym field errorom
-
-            // ak nie, ukazeme kludne original anglicku hlasku z `error`u
-            alert(error)
-            return
-          }
-        } else {
-          alert(error)
-        }
-      },
-    },
-  },
-})
-
 const ReactQueryProvider: FC<PropsWithChildren> = ({children}) => {
   const {alert} = useAlert()
 
@@ -146,20 +86,13 @@ const MyApp: FC<AppProps> = ({Component, pageProps}) => {
         <title>STROM</title>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
-      {/* ak pouzijeme vsade <Typography>, nemuseli by sme mat takyto globalny styl... ale je to teda
-          safe a krajsie, nech kazdy maly (aj debug) textik je aspon nasim fontom a ne v Times :D
-          source: https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#apply-the-font-in-head */}
-      <style jsx global>{`
-        html {
-          font-family: ${theme.typography.fontFamily};
-        }
-      `}</style>
       <AlertContainer.Provider>
         <ReactQueryProvider>
           <ReactQueryDevtools />
           <CookiesProvider>
             <AuthContainer.Provider>
               <ThemeProvider theme={theme}>
+                <CssBaseline />
                 <AlertBox />
                 <Component {...pageProps} />
               </ThemeProvider>

diff --git a/src/theme.ts b/src/theme.ts
@@ -200,6 +200,37 @@ const _theme = createTheme({
     },
   },
   components: {
+    // default: https://github.com/mui/material-ui/blob/68e3b40bc5d21a446e48a5ab651f713ea6337a52/packages/mui-material/src/CssBaseline/CssBaseline.js#L56
+    MuiCssBaseline: {
+      styleOverrides: {
+        /* stuff from Josh Comeau's global CSS reset: https://www.joshwcomeau.com/css/custom-css-reset/ */
+        // 3. Allow percentage-based heights in the application
+        'html,body': {
+          height: '100%',
+        },
+        // 6. Improve media defaults
+        'img,picture,video,canvas,svg': {
+          display: 'block',
+          maxWidth: '100%',
+        },
+        // 7. Remove built-in form typography styles
+        'input,button,textarea,select': {
+          font: 'inherit',
+        },
+        // 8. Avoid text overflows
+        'p,h1,h2,h3,h4,h5,h6': {
+          overflowWrap: 'break-word',
+        },
+        // 9. Create a root stacking context
+        '#root,#__next': {
+          isolation: 'isolate',
+        },
+        /* our stuff */
+        a: {
+          textDecoration: 'none',
+        },
+      },
+    },
     MuiTypography: {
       defaultProps: {
         variantMapping: {