Update useRecaptcha.ts, ga4.ts and vite.config.ts

aelassas · Dec 19, 2024 · 9ac8f26 · 9ac8f26
1 parent fa8d606
commit 9ac8f26
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 24 deletions.
diff --git a/backend/vite.config.ts b/backend/vite.config.ts
@@ -21,12 +21,19 @@ export default ({ mode }: { mode: string }) => {
 
     server: {
       host: '0.0.0.0',
-      port: Number.parseInt(process.env.VITE_PORT || '3002', 10),
+      port: Number.parseInt(process.env.VITE_PORT || '3005', 10),
     },
 
     build: {
       outDir: 'build',
-      target: 'esnext'
-    }
+      target: 'esnext',
+      modulePreload: true, // Keep modulePreload enabled to ensure the best performance
+      sourcemap: true,
+      minify: 'esbuild', // Use esbuild for fast minification
+      rollupOptions: {
+        treeshake: true, // Enable Tree Shaking: Ensure unused code is removed by leveraging ES modules and proper imports
+      },
+      assetsInlineLimit: 8192, // This reduces the number of small chunk files
+    },
   })
 }
diff --git a/frontend/index.html b/frontend/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8" />
   <link rel="icon" href="/favicon.ico" />
-  <!-- <link rel="preload" href="/cover.png" as="image" type="image/png" crossorigin /> -->
+  <link rel="preload" href="/cover.png" as="image" type="image/png" crossorigin />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="description" content="BookCars Rental Service" />
   <title>BookCars Rental Service</title>

diff --git a/frontend/src/assets/css/home.css b/frontend/src/assets/css/home.css
@@ -42,10 +42,10 @@ div.home div.home-content div.video-background {
   width: 100%;
   top: 0;
   left: 0;
-  /* background-image: url('/cover.png');
+  background-image: url('/cover.png');
   background-repeat: no-repeat;
   background-size: cover;
-  background-position: 50%; */
+  background-position: 50%;
 }
 
 div.home div.home-content div.video-background img {

diff --git a/frontend/src/common/ga4.ts b/frontend/src/common/ga4.ts
@@ -4,12 +4,28 @@ import env from '@/config/env.config'
 const TRACKING_ID = env.GOOGLE_ANALYTICS_ID
 const { isProduction } = env
 
-export const init = () => ga4.initialize(TRACKING_ID, {
-  testMode: !isProduction
-})
+// export const init = () => ga4.initialize(TRACKING_ID, {
+//   testMode: !isProduction
+// })
+
+export const init = () => {
+  if (typeof window === 'undefined') return
+  let fired = false
+  const loadAnalyticsScript = () => {
+    if (!fired) {
+      ga4.initialize(TRACKING_ID, { testMode: !isProduction })
+      fired = true
+    }
+  }
+
+  window.addEventListener('mousemove', loadAnalyticsScript, { once: true })
+  window.addEventListener('touchstart', loadAnalyticsScript, { once: true })
+  window.addEventListener('touchmove', loadAnalyticsScript, { once: true })
+  window.addEventListener('touchend', loadAnalyticsScript, { once: true })
+}
 
 export const sendEvent = (name: string) => ga4.event('screen_view', {
-  app_name: 'BookCars',
+  app_name: 'ErbilCarRent',
   screen_name: name,
 })
 

diff --git a/frontend/src/hooks/useRecaptcha.ts b/frontend/src/hooks/useRecaptcha.ts
@@ -37,6 +37,25 @@ const useReCaptcha = (): RecaptchaType => {
   const [reCaptchaLoaded, setReCaptchaLoaded] = useState(false)
 
   // Load ReCaptcha script
+  // useEffect(() => {
+  //   if (!env.RECAPTCHA_ENABLED) return
+  //   if (env.isSafari) return
+  //   if (typeof window === 'undefined' || reCaptchaLoaded) return
+  //   if (window.grecaptcha) {
+  //     showBadge()
+  //     setReCaptchaLoaded(true)
+  //     return
+  //   }
+  //   const script = document.createElement('script')
+  //   script.async = true
+  //   script.src = `https://www.google.com/recaptcha/api.js?render=${RECAPTCHA_SITE_KEY}`
+  //   script.addEventListener('load', () => {
+  //     setReCaptchaLoaded(true)
+  //     showBadge()
+  //   })
+  //   document.body.appendChild(script)
+  // }, [reCaptchaLoaded])
+
   useEffect(() => {
     if (!env.RECAPTCHA_ENABLED) return
     if (env.isSafari) return
@@ -46,14 +65,25 @@ const useReCaptcha = (): RecaptchaType => {
       setReCaptchaLoaded(true)
       return
     }
-    const script = document.createElement('script')
-    script.async = true
-    script.src = `https://www.google.com/recaptcha/api.js?render=${RECAPTCHA_SITE_KEY}`
-    script.addEventListener('load', () => {
-      setReCaptchaLoaded(true)
-      showBadge()
-    })
-    document.body.appendChild(script)
+    let fired = false
+    const loadRecaptchaScript = () => {
+      if (!fired) {
+        const script = document.createElement('script')
+        script.defer = true
+        script.src = `https://www.google.com/recaptcha/api.js?render=${RECAPTCHA_SITE_KEY}`
+        script.addEventListener('load', () => {
+          setReCaptchaLoaded(true)
+          showBadge()
+        })
+        document.body.appendChild(script)
+        fired = true
+      }
+    }
+
+    window.addEventListener('mousemove', loadRecaptchaScript, { once: true })
+    window.addEventListener('touchstart', loadRecaptchaScript, { once: true })
+    window.addEventListener('touchmove', loadRecaptchaScript, { once: true })
+    window.addEventListener('touchend', loadRecaptchaScript, { once: true })
   }, [reCaptchaLoaded])
 
   // Hide badge when unmount

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -123,18 +123,19 @@ const Home = () => {
               loop
               playsInline
               disablePictureInPicture
-              onLoadedData={() => {
+              onLoadedData={async () => {
                 setVideoLoaded(true)
               }}
             >
               <source src="cover.mp4" type="video/mp4" />
               <track kind="captions" />
             </video>
             {!videoLoaded && (
-              <div className="video-background">
-                <img src="cover.png" alt="" />
-              </div>
+              <div className="video-background" />
             )}
+            {/* <div className="video-background">
+              <img src="cover.png" alt="" />
+            </div> */}
           </div>
 
           <div className="home-title">{strings.TITLE}</div>

diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -21,12 +21,19 @@ export default ({ mode }: { mode: string }) => {
 
     server: {
       host: '0.0.0.0',
-      port: Number.parseInt(process.env.VITE_PORT || '3002', 10),
+      port: Number.parseInt(process.env.VITE_PORT || '3006', 10),
     },
 
     build: {
       outDir: 'build',
-      target: 'esnext'
+      target: 'esnext',
+      modulePreload: true, // Keep modulePreload enabled to ensure the best performance
+      sourcemap: true,
+      minify: 'esbuild', // Use esbuild for fast minification
+      rollupOptions: {
+        treeshake: true, // Enable Tree Shaking: Ensure unused code is removed by leveraging ES modules and proper imports
+      },
+      assetsInlineLimit: 8192, // This reduces the number of small chunk files
     },
   })
 }
diff --git a/packages/bookcars-helper/index.ts b/packages/bookcars-helper/index.ts
@@ -544,3 +544,13 @@ export const trim = (str: string, char: string): string => {
   res = trimEnd(res, char)
   return res
 }
+
+/**
+ * Wait a certain time in milliseconds.
+ *
+ * @param {number} milliseconds
+ * @returns {Promise<unknown>}
+ */
+export const delay = (milliseconds: number) => new Promise((resolve) => {
+  setTimeout(resolve, milliseconds)
+})