Move hosts, keys and ids 'constants.ts'

Meaningful-Code · Jun 18, 2024 · 36af176 · 36af176
1 parent b11afbd
commit 36af176
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 9 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -9,6 +9,8 @@ import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import { lightTheme } from '@/theme';
 import PatchCssStyle from '@/PatchCssStyle';
+
+import { GOOGLE_TAG_ID } from '@/constants/constants';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
 
@@ -53,15 +55,20 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en" className={open_sans_font.className}>
       <body>
-        <Script async src="https://www.googletagmanager.com/gtag/js?id=G-C9SQS63TJQ" />
+        <Script
+          async
+          src={'https://www.googletagmanager.com/gtag/js?id=' + GOOGLE_TAG_ID}
+        />
         <Script id="gtag">
           {`
             window.dataLayer = window.dataLayer || [];
             function gtag() {
               dataLayer.push(arguments);
             }
             gtag('js', new Date());
-            gtag('config', 'G-C9SQS63TJQ', {
+            gtag('config', '` +
+            GOOGLE_TAG_ID +
+            `', {
               anonymize_ip: true,
               client_storage: 'none',
               ad_storage: 'denied',

diff --git a/src/app/submit-project/SubmitProjectForm.tsx b/src/app/submit-project/SubmitProjectForm.tsx
@@ -12,9 +12,9 @@ import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 
 import ReCAPTCHA from 'react-google-recaptcha';
-import submitProject from './submitProject';
 
-const RECAPTCHA_SITE_KEY = '6LeuSEYeAAAAAJrZY05dnjlIkU-3EAe4JqDdd3wz';
+import { RECAPTCHA_SITE_KEY } from '@/constants/constants';
+import submitProject from './submitProject';
 
 const enum FormState {
   NotSubmitted,

diff --git a/src/components/GaPageEvent.tsx b/src/components/GaPageEvent.tsx
@@ -3,13 +3,15 @@
 import React, { useEffect } from 'react';
 import { usePathname } from 'next/navigation';
 
+import { GOOGLE_TAG_ID } from '@/constants/constants';
+
 const GaPageEvent = () => {
   const pathname = usePathname();
   useEffect(() => {
     if (!window.gtag) {
       return;
     }
-    window.gtag('config', 'G-C9SQS63TJQ', {
+    window.gtag('config', GOOGLE_TAG_ID, {
       page_path: pathname,
     });
   }, [pathname]);

diff --git a/src/constants/constants.ts b/src/constants/constants.ts
@@ -0,0 +1,4 @@
+export const RECAPTCHA_SITE_KEY = '6LeuSEYeAAAAAJrZY05dnjlIkU-3EAe4JqDdd3wz';
+export const GOOGLE_TAG_ID = 'G-C9SQS63TJQ';
+export const PRODUCTION_HOST = 'https://meaningfulcode.org';
+export const LOCAL_DEV_HOST = 'http://localhost:3000';
diff --git a/src/utils/getHost.ts b/src/utils/getHost.ts
@@ -1,18 +1,19 @@
+import { PRODUCTION_HOST, LOCAL_DEV_HOST } from '@/constants/constants';
+
 export default function getHost() {
   if (typeof window !== 'undefined' && process.env.NODE_ENV !== 'test') {
     throw new Error('getHost() should only be called on the server side');
   }
 
-  const productionHost = 'https://meaningfulcode.org';
   if (process.env.NEXT_PUBLIC_VERCEL_ENV) {
     if (process.env.NEXT_PUBLIC_VERCEL_ENV === 'production') {
-      return productionHost;
+      return PRODUCTION_HOST;
     } else {
       return `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`;
     }
   } else if (process.env.MEANINGFUL_DEV) {
-    return 'http://localhost:3000';
+    return LOCAL_DEV_HOST;
   } else {
-    return productionHost;
+    return PRODUCTION_HOST;
   }
 }