[Glitch] Use helpers to check environment in frontend (#2571)

Port 277e6968f5 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
Co-authored-by: Renaud Chaput <renchap@gmail.com>

app/javascript/flavours/glitch/components/icon.tsx

@@ -2,6 +2,8 @@ import classNames from 'classnames';
 
 import { ReactComponent as CheckBoxOutlineBlankIcon } from '@material-symbols/svg-600/outlined/check_box_outline_blank.svg';
 
+import { isProduction } from 'flavours/glitch/utils/environment';
+
 interface SVGPropsWithTitle extends React.SVGProps<SVGSVGElement> {
   title?: string;
 }
@@ -24,7 +26,7 @@ export const Icon: React.FC<Props> = ({
 }) => {
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   if (!IconComponent) {
-    if (process.env.NODE_ENV !== 'production') {
+    if (!isProduction()) {
       throw new Error(
         `<Icon id="${id}" className="${className}"> is missing an "icon" prop.`,
       );

app/javascript/flavours/glitch/components/router.tsx

@@ -11,6 +11,7 @@ import type {
 import { createBrowserHistory } from 'history';
 
 import { layoutFromWindow } from 'flavours/glitch/is_mobile';
+import { isDevelopment } from 'flavours/glitch/utils/environment';
 
 interface MastodonLocationState {
   fromMastodon?: boolean;
@@ -40,7 +41,7 @@ function normalizePath(
   } else if (
     location.state !== undefined &&
     state !== undefined &&
-    process.env.NODE_ENV === 'development'
+    isDevelopment()
   ) {
     // eslint-disable-next-line no-console
     console.log(

app/javascript/flavours/glitch/containers/mastodon.jsx

@@ -18,8 +18,9 @@ import UI from 'flavours/glitch/features/ui';
 import initialState, { title as siteTitle } from 'flavours/glitch/initial_state';
 import { IntlProvider } from 'flavours/glitch/locales';
 import { store } from 'flavours/glitch/store';
+import { isProduction } from 'flavours/glitch/utils/environment';
 
-const title = process.env.NODE_ENV === 'production' ? siteTitle : `${siteTitle} (Dev)`;
+const title = isProduction() ? siteTitle : `${siteTitle} (Dev)`;
 
 const hydrateAction = hydrateStore(initialState);
 

app/javascript/flavours/glitch/locales/global_locale.ts

@@ -1,3 +1,5 @@
+import { isDevelopment } from 'flavours/glitch/utils/environment';
+
 export interface LocaleData {
   locale: string;
   messages: Record<string, string>;
@@ -11,7 +13,7 @@ export function setLocale(locale: LocaleData) {
 
 export function getLocale(): LocaleData {
   if (!loadedLocale) {
-    if (process.env.NODE_ENV === 'development') {
+    if (isDevelopment()) {
       throw new Error('getLocale() called before any locale has been set');
     } else {
       return { locale: 'unknown', messages: {} };

app/javascript/flavours/glitch/locales/intl_provider.tsx

@@ -2,12 +2,14 @@ import { useEffect, useState } from 'react';
 
 import { IntlProvider as BaseIntlProvider } from 'react-intl';
 
+import { isProduction } from 'flavours/glitch/utils/environment';
+
 import { getLocale, isLocaleLoaded } from './global_locale';
 import { loadLocale } from './load_locale';
 
 function onProviderError(error: unknown) {
   // Silent the error, like upstream does
-  if (process.env.NODE_ENV === 'production') return;
+  if (isProduction()) return;
 
   // This browser does not advertise Intl support for this locale, we only print a warning
   // As-per the spec, the browser should select the best matching locale

app/javascript/flavours/glitch/main.jsx

@@ -7,6 +7,8 @@ import * as perf from 'flavours/glitch/performance';
 import ready from 'flavours/glitch/ready';
 import { store } from 'flavours/glitch/store';
 
+import { isProduction } from './utils/environment';
+
 /**
  * @returns {Promise<void>}
  */
@@ -21,7 +23,7 @@ function main() {
     root.render(<Mastodon {...props} />);
     store.dispatch(setupBrowserNotifications());
 
-    if (process.env.NODE_ENV === 'production' && me && 'serviceWorker' in navigator) {
+    if (isProduction() && me && 'serviceWorker' in navigator) {
       const { Workbox } = await import('workbox-window');
       const wb = new Workbox('/sw.js');
       /** @type {ServiceWorkerRegistration} */

app/javascript/flavours/glitch/performance.js

@@ -5,7 +5,9 @@
 
 import * as marky from 'marky';
 
-if (process.env.NODE_ENV === 'development') {
+import { isDevelopment } from './utils/environment';
+
+if (isDevelopment()) {
   if (typeof performance !== 'undefined' && performance.setResourceTimingBufferSize) {
     // Increase Firefox's performance entry limit; otherwise it's capped to 150.
     // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1331135
@@ -18,13 +20,13 @@ if (process.env.NODE_ENV === 'development') {
 }
 
 export function start(name) {
-  if (process.env.NODE_ENV === 'development') {
+  if (isDevelopment()) {
     marky.mark(name);
   }
 }
 
 export function stop(name) {
-  if (process.env.NODE_ENV === 'development') {
+  if (isDevelopment()) {
     marky.stop(name);
   }
 }

app/javascript/flavours/glitch/utils/environment.ts

@@ -0,0 +1,7 @@
+export function isDevelopment() {
+  return process.env.NODE_ENV === 'development';
+}
+
+export function isProduction() {
+  return process.env.NODE_ENV === 'production';
+}