6456f973-294c-4997-970e-a55e8179ebb1

Committed 19 Feb 2025 04:40PM CUT coverage: 85.114% (+0.005%) from 85.109%

Build # 6456f973-294c-4997-970e-a55e8179ebb1

Build Type

Pull #5335

circleci

Committed by

vpremamozilla

Commit Message

MPP-4024: removed types altogether

Pull Request Pull Request #5335: Bump the react group across 1 directory with 4 updates

Run Details

2433 of 3561 branches covered (68.32%)

Branch coverage included in aggregate %.

14 of 17 new or added lines in 11 files covered. (82.35%)

1 existing line in 1 file now uncovered.

17047 of 19326 relevant lines covered (88.21%)

9.88 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/frontend/src/pages/_app.page.tsx

/* eslint-disable @typescript-eslint/no-explicit-any */
import "../styles/globals.scss";
import { createElement, useEffect, useRef, useState } from "react";
import type { AppProps } from "next/app";
import { useRouter } from "next/router";
import { LocalizationProvider, ReactLocalization } from "@fluent/react";
import { OverlayProvider } from "@react-aria/overlays";
import ReactGa from "react-ga";
import { getL10n } from "../functions/getL10n";
import { AddonDataContext, useAddonElementWatcher } from "../hooks/addon";
import { ReactAriaI18nProvider } from "../components/ReactAriaI18nProvider";
import { initialiseApiMocks } from "../apiMocks/initialise";
import { mockIds } from "../apiMocks/mockData";
import { useIsLoggedIn } from "../hooks/session";
import { useMetrics } from "../hooks/metrics";
import {
  useGoogleAnalytics,
  initGoogleAnalytics,
} from "../hooks/googleAnalytics";
import "@stripe/stripe-js";

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const isLoggedIn = useIsLoggedIn();
  const googleAnalytics = useGoogleAnalytics();
  const metricsEnabled = useMetrics();
  const addonDataElementRef = useRef<HTMLElement>(null);

  const addonData = useAddonElementWatcher(addonDataElementRef);
  const [l10n, setL10n] = useState<ReactLocalization>(
    getL10n({ deterministicLocales: true }),
  );

  useEffect(() => {
    // When pre-rendering and on the first render, we deterministically load the
    // `en` bundle.  After that, however, we want to load the bundles relevant
    // to the user's preferred locales. (See the `useL10n` hook for more detail
    // on why.) Unfortunately we can't load additional needed locales
    // asynchronously on the client-side yet using @fluent/react, see
    // https://github.com/projectfluent/fluent.js/wiki/ReactLocalization/43a959b35fbf9eea694367f948cfb1387914657c#flexibility
    setL10n(getL10n({ deterministicLocales: false }));
  }, []);

  useEffect(() => {
    if (metricsEnabled === "enabled" && !googleAnalytics) {
      initGoogleAnalytics();
    }
  }, [metricsEnabled, googleAnalytics]);

  useEffect(() => {
    if (!googleAnalytics) return;
    ReactGa.pageview(router.asPath);
  }, [router.asPath, googleAnalytics]);

  const [waitingForMsw, setIsWaitingForMsw] = useState(
    process.env.NEXT_PUBLIC_MOCK_API === "true",
  );
  useEffect(() => {
    if (process.env.NEXT_PUBLIC_MOCK_API !== "true") {
      return;
    }
    (async () => {
      await initialiseApiMocks();

      if (
        typeof URLSearchParams !== "undefined" &&
        typeof document !== "undefined"
      ) {
        // When deploying the frontend with a mocked back-end,
        // this query parameter will allow us to automatically "sign in" with one
        // of the mock users. This is useful to be able to give testers a link
        // in which to see a particular feature:
        const searchParams = new URLSearchParams(document.location.search);
        const mockId = searchParams.get("mockId");
        const selectedMockId = mockIds.find((id) => id === mockId);
        if (typeof selectedMockId === "string") {
          // See `src/hooks/api/api.ts`; this localStorage entry is how we tell the
          // API mock what mock data we want to load:
          localStorage.setItem("authToken", selectedMockId);
        }
      }

      setIsWaitingForMsw(false);
    })();
  }, []);

  if (waitingForMsw) {
    // As soon as we start rendering the app, it will start sending requests.
    // If we're running the demo site, we want to hold off on doing that until
    // MSW is fully initialised. Usually, you'd run the initialisation before
    // rendering in the first place, but since Next.js handles the start of the
    // rendering (which it does to support server-side rendering), we're doing
    // it here instead. For more info, see
    // https://mswjs.io/docs/integrations/browser#conditionally-enable-mocking
    return <></>;
  }

  return (
    <LocalizationProvider l10n={l10n}>
      <ReactAriaI18nProvider>
        <AddonDataContext.Provider value={addonData}>
          {createElement("firefox-private-relay-addon", {
            // The following attributes are set by the add-on,
            // and read by the website (via the useAddonElementWatcher hook).
            "data-addon-installed": addonData.present,
            "data-local-labels": JSON.stringify(addonData.localLabels),
            // The following attributes are set by the website,
            // and read by the add-on.
            // Capitalised boolean for backwards compatibility;
            // this element was previously generated by Django:
            "data-user-logged-in":
              isLoggedIn === "logged-in" ? "True" : "False",
          })}
          <OverlayProvider id="overlayProvider">
            <Component {...pageProps} />
          </OverlayProvider>
        </AddonDataContext.Provider>
      </ReactAriaI18nProvider>
    </LocalizationProvider>
  );
}
export default MyApp;

1	/* eslint-disable @typescript-eslint/no-explicit-any */
2	import "../styles/globals.scss";	×
NEW 3	import { createElement, useEffect, useRef, useState } from "react";	×
4	import type { AppProps } from "next/app";
5	import { useRouter } from "next/router";	×
6	import { LocalizationProvider, ReactLocalization } from "@fluent/react";	×
7	import { OverlayProvider } from "@react-aria/overlays";	×
8	import ReactGa from "react-ga";	×
9	import { getL10n } from "../functions/getL10n";	×
10	import { AddonDataContext, useAddonElementWatcher } from "../hooks/addon";	×
11	import { ReactAriaI18nProvider } from "../components/ReactAriaI18nProvider";	×
12	import { initialiseApiMocks } from "../apiMocks/initialise";	×
13	import { mockIds } from "../apiMocks/mockData";	×
14	import { useIsLoggedIn } from "../hooks/session";	×
15	import { useMetrics } from "../hooks/metrics";	×
16	import {
17	useGoogleAnalytics,
18	initGoogleAnalytics,
19	} from "../hooks/googleAnalytics";	×
20	import "@stripe/stripe-js";	×
21
22	function MyApp({ Component, pageProps }: AppProps) {
23	const router = useRouter();	×
24	const isLoggedIn = useIsLoggedIn();	×
25	const googleAnalytics = useGoogleAnalytics();	×
26	const metricsEnabled = useMetrics();	×
27	const addonDataElementRef = useRef<HTMLElement>(null);	×
28
29	const addonData = useAddonElementWatcher(addonDataElementRef);	×
30	const [l10n, setL10n] = useState<ReactLocalization>(	×
31	getL10n({ deterministicLocales: true }),
32	);
33
34	useEffect(() => {	×
35	// When pre-rendering and on the first render, we deterministically load the
36	// `en` bundle. After that, however, we want to load the bundles relevant
37	// to the user's preferred locales. (See the `useL10n` hook for more detail
38	// on why.) Unfortunately we can't load additional needed locales
39	// asynchronously on the client-side yet using @fluent/react, see
40	// https://github.com/projectfluent/fluent.js/wiki/ReactLocalization/43a959b35fbf9eea694367f948cfb1387914657c#flexibility
41	setL10n(getL10n({ deterministicLocales: false }));	×
42	}, []);
43
44	useEffect(() => {	×
45	if (metricsEnabled === "enabled" && !googleAnalytics) {	×
46	initGoogleAnalytics();	×
47	}
48	}, [metricsEnabled, googleAnalytics]);
49
50	useEffect(() => {	×
51	if (!googleAnalytics) return;	×
52	ReactGa.pageview(router.asPath);	×
53	}, [router.asPath, googleAnalytics]);
54
55	const [waitingForMsw, setIsWaitingForMsw] = useState(	×
56	process.env.NEXT_PUBLIC_MOCK_API === "true",
57	);
58	useEffect(() => {	×
59	if (process.env.NEXT_PUBLIC_MOCK_API !== "true") {	×
60	return;	×
61	}
62	(async () => {	×
63	await initialiseApiMocks();	×
64
65	if (	×
66	typeof URLSearchParams !== "undefined" &&	×
67	typeof document !== "undefined"
68	) {
69	// When deploying the frontend with a mocked back-end,
70	// this query parameter will allow us to automatically "sign in" with one
71	// of the mock users. This is useful to be able to give testers a link
72	// in which to see a particular feature:
73	const searchParams = new URLSearchParams(document.location.search);	×
74	const mockId = searchParams.get("mockId");	×
75	const selectedMockId = mockIds.find((id) => id === mockId);	×
76	if (typeof selectedMockId === "string") {	×
77	// See `src/hooks/api/api.ts`; this localStorage entry is how we tell the
78	// API mock what mock data we want to load:
79	localStorage.setItem("authToken", selectedMockId);	×
80	}
81	}
82
83	setIsWaitingForMsw(false);	×
84	})();
85	}, []);
86
87	if (waitingForMsw) {	×
88	// As soon as we start rendering the app, it will start sending requests.
89	// If we're running the demo site, we want to hold off on doing that until
90	// MSW is fully initialised. Usually, you'd run the initialisation before
91	// rendering in the first place, but since Next.js handles the start of the
92	// rendering (which it does to support server-side rendering), we're doing
93	// it here instead. For more info, see
94	// https://mswjs.io/docs/integrations/browser#conditionally-enable-mocking
95	return <></>;	×
96	}
97
98	return (
99	<LocalizationProvider l10n={l10n}>
100	<ReactAriaI18nProvider>
101	<AddonDataContext.Provider value={addonData}>
102	{createElement("firefox-private-relay-addon", {
103	// The following attributes are set by the add-on,
104	// and read by the website (via the useAddonElementWatcher hook).
105	"data-addon-installed": addonData.present,
106	"data-local-labels": JSON.stringify(addonData.localLabels),
107	// The following attributes are set by the website,
108	// and read by the add-on.
109	// Capitalised boolean for backwards compatibility;
110	// this element was previously generated by Django:
111	"data-user-logged-in":
112	isLoggedIn === "logged-in" ? "True" : "False",	×
113	})}
114	<OverlayProvider id="overlayProvider">
115	<Component {...pageProps} />
116	</OverlayProvider>
117	</AddonDataContext.Provider>
118	</ReactAriaI18nProvider>
119	</LocalizationProvider>
120	);
121	}
122	export default MyApp;	×

mozilla / fx-private-relay / 6456f973-294c-4997-970e-a55e8179ebb1

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous