Merge pull request #70 from RonHouben/styling/apply-backdrop-filter-o…

…n-first-render

Styling/apply backdrop filter on first render

components/LoadingScreen.tsx

@@ -30,21 +30,19 @@ export default function LoadingScreen() {
 
   return (
     <Flex h="xl" justifyContent="center" alignItems="center">
-      <Flex>
-        {randomArray.map((k) => (
-          <Flex
-            key={k}
-            justifyContent="center"
-            alignItems="center"
-            h="8"
-            w="8"
-            rounded="full"
-            shadow="dark-lg"
-            backgroundImage={`linear-gradient(to bottom right, ${colors[startColor][colorMode]}, ${colors[endColor][colorMode]})`}
-            animation={`ping ${randomDuration}s cubic-bezier(0, 0, 0.2, 1) infinite`}
-          />
-        ))}
-      </Flex>
+      {randomArray.map((k) => (
+        <Flex
+          key={k}
+          justifyContent="center"
+          alignItems="center"
+          h="8"
+          w="8"
+          rounded="full"
+          shadow="dark-lg"
+          bgGradient={`linear(to-br, ${colors[startColor][colorMode]}, ${colors[endColor][colorMode]})`}
+          animation={`ping ${randomDuration}s cubic-bezier(0, 0, 0.2, 1) infinite`}
+        />
+      ))}
     </Flex>
   )
 }

hooks/useUserAgent.ts

@@ -1,8 +1,34 @@
-import { useContext } from 'react'
-import {
-  IUserAgentContext,
-  UserAgentContext,
-} from '../providers/UserAgentProvider'
-
-export const useUserAgent = () =>
-  useContext<IUserAgentContext>(UserAgentContext)
+import { useEffect, useState } from 'react'
+
+interface IUserAgentResult {
+  browser: 'Chrome' | 'Safari' | 'Firefox' | undefined
+  isChrome: boolean
+  isSafari: boolean
+  isFirefox: boolean
+}
+
+export const useUserAgent = (): IUserAgentResult => {
+  const [browser, setBrowser] = useState<IUserAgentResult['browser']>()
+
+  if (process.browser && navigator) {
+    useEffect(() => {
+      setBrowser(getBrowser(navigator.userAgent))
+    }, [navigator.userAgent])
+  }
+
+  return {
+    browser,
+    isChrome: browser === 'Chrome',
+    isFirefox: browser === 'Firefox',
+    isSafari: browser === 'Safari',
+  }
+}
+
+// helper functions
+const getBrowser = (userAgent: NavigatorID['userAgent']) => {
+  const regexMatch = userAgent
+    ? userAgent.match(/Chrome|Safari|Firefox/)
+    : undefined
+
+  return regexMatch ? (regexMatch[0] as IUserAgentResult['browser']) : undefined
+}

pages/_app.tsx

@@ -1,29 +1,19 @@
-import { IncomingHttpHeaders } from 'http'
-import { AppContext, AppProps } from 'next/app'
+import { AppProps } from 'next/app'
 import React from 'react'
 import initAuth from '../lib/initAuth'
 import ChakraProvider from '../providers/Chakra'
-import { UserAgentProvider } from '../providers/UserAgentProvider'
 
 initAuth()
 interface Props extends AppProps {
   cookies: string
-  userAgent: IncomingHttpHeaders['user-agent']
 }
 
-function App({ Component, pageProps, cookies, userAgent }: Props) {
+function App({ Component, pageProps, cookies }: Props) {
   return (
-    <UserAgentProvider userAgent={userAgent}>
-      <ChakraProvider cookies={cookies}>
-        <Component {...pageProps} />
-      </ChakraProvider>
-    </UserAgentProvider>
+    <ChakraProvider cookies={cookies}>
+      <Component {...pageProps} />
+    </ChakraProvider>
   )
 }
 
-// SSR to get the client browser. This can later be used to apply styling for a specific browser
-App.getInitialProps = async (app: AppContext) => {
-  return { userAgent: app.ctx.req?.headers['user-agent'] }
-}
-
 export default App