Remove react-confirm-alert and use our own UI

markrickert · morganick · commit 6fa3ad61ac5c · 2024-04-12T11:05:07.000-04:00
diff --git a/apps/reactotron-app/package.json b/apps/reactotron-app/package.json
@@ -58,8 +58,8 @@
     "immer": "^10.0.3",
     "lodash.debounce": "^4.0.8",
     "react": "18.2.0",
-    "react-confirm-alert": "^3.0.6",
     "react-dom": "18.2.0",
+    "react-fade-in": "^2.0.1",
     "react-ga4": "^2.1.0",
     "react-hotkeys": "^2.0.0",
     "react-icons": "^4.11.0",
diff --git a/apps/reactotron-app/src/renderer/App.tsx b/apps/reactotron-app/src/renderer/App.tsx
@@ -4,6 +4,7 @@ import styled from "styled-components"
 
 import SideBar from "./components/SideBar"
 import Footer from "./components/Footer"
+import AnalyticsOptOut from "./components/AnalyticsOptOut"
 import RootContextProvider from "./contexts"
 import RootModals from "./RootModals"
 
@@ -35,14 +36,27 @@ const AppContainer: React.FC<{ children: React.ReactNode }> = ({ children }) =>
   usePageTracking()
   const { initializeAnalytics } = useAnalytics()
 
+  const [showsAnalyticsInterface, setShowsAnalyticsInterface] = React.useState(false)
+
   useEffect(() => {
     const timer = setTimeout(() => {
-      initializeAnalytics()
+      const status = initializeAnalytics()
+      if (status === "unknown" && showsAnalyticsInterface === false) {
+        // Show the user the interface to enable/disable analytics
+        setShowsAnalyticsInterface(true)
+      }
     }, 250)
     return () => clearTimeout(timer)
-  }, [])
+  }, [showsAnalyticsInterface])
 
-  return <AppContainerComponent>{children}</AppContainerComponent>
+  return (
+    <AppContainerComponent>
+      {children}
+      {showsAnalyticsInterface && (
+        <AnalyticsOptOut onClose={() => setShowsAnalyticsInterface(false)} />
+      )}
+    </AppContainerComponent>
+  )
 }
 
 const TopSection = styled.div`
diff --git a/apps/reactotron-app/src/renderer/components/AnalyticsOptOut/index.tsx b/apps/reactotron-app/src/renderer/components/AnalyticsOptOut/index.tsx
@@ -0,0 +1,115 @@
+import React from "react"
+import styled, { useTheme } from "styled-components"
+import FadeIn from "react-fade-in"
+import { reactotronAnalytics } from "../../images"
+import configStore from "../../config"
+
+const Overlay = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  background-color: ${(props) => props.theme.backgroundLighter};
+  justify-content: center;
+  align-items: center;
+`
+
+const AlertContainer = styled.div`
+  padding: 30px;
+  text-align: left;
+  border-radius: 10px;
+  background: ${(props) => props.theme.backgroundDarker};
+  color: ${(props) => props.theme.foregroundLight};
+
+  box-shadow: 0 20px 75px ${(props) => props.theme.backgroundSubtleLight};
+  width: 80%;
+  max-width: 500px;
+`
+
+const AlertHeader = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+`
+
+const AlertHeaderImage = styled.img`
+  height: 128px;
+`
+
+const ButtonGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin-top: 20px;
+`
+
+const Button = styled.button`
+  outline: none;
+  background: ${(props) => props.theme.backgroundLighter};
+  border: none;
+  display: inline-block;
+  padding: 6px 18px;
+  color: ${(props) => props.theme.background};
+  margin-right: 10px;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+`
+
+// This is a custom alert that we use to ask the user if they want to opt-in to analytics
+// We use this instead of the default alert because we want to style it to match our app.
+const AnalyticsOptOut = ({ onClose }) => {
+  const theme = useTheme()
+
+  return (
+    <FadeIn wrapperTag={Overlay}>
+      <AlertContainer>
+        <AlertHeader>
+          <AlertHeaderImage src={reactotronAnalytics} />
+        </AlertHeader>
+        <h1>Opt in to Reactotron analytics?</h1>
+        <p>Help us improve Reactotron!</p>
+        <p>
+          We&apos;d like to collect anonymous usage data to enhance Reactotron&apos;s performance
+          and features. This data includes general usage patterns and interactions. No personal
+          information will be collected.
+        </p>
+        <p>
+          You can change this setting at any time and by opting in, you can contribute to making
+          Reactotron better for everyone!
+        </p>
+        <p>Would you like to participate?</p>
+        <ButtonGroup>
+          <Button
+            onClick={() => {
+              configStore.set("analyticsOptOut", true)
+              onClose()
+            }}
+            style={{
+              backgroundColor: theme.tag,
+            }}
+          >
+            No, don&apos;t collect any data
+          </Button>
+          <Button
+            onClick={() => {
+              configStore.set("analyticsOptOut", false)
+              onClose()
+            }}
+            style={{
+              marginTop: 20,
+              backgroundColor: theme.string,
+              fontWeight: "bold",
+            }}
+          >
+            Yes, I understand no personal information will be collected
+          </Button>
+        </ButtonGroup>
+      </AlertContainer>
+    </FadeIn>
+  )
+}
+
+export default AnalyticsOptOut
diff --git a/apps/reactotron-app/src/renderer/util/analyticsHelpers.tsx b/apps/reactotron-app/src/renderer/util/analyticsHelpers.tsx
@@ -1,17 +1,15 @@
-import React, { useCallback, useEffect, useState } from "react"
+import React from "react"
 import ReactGA from "react-ga4"
 import packageJson from "../../../package.json"
 import { useLocation } from "react-router"
 import configStore from "../config"
-import { confirmAlert } from "react-confirm-alert" // Import
-import { reactotronAnalytics } from "../images"
-import "react-confirm-alert/src/react-confirm-alert.css" // Import css
 
 // This is the Google Analytics 4 key for Reactotron
 // TODO: Change this to the correct key for production.
 const GA4_KEY = "G-WZE3E5XCQ7"
 
 type IAnalyticsEventCategory =
+  | { category: "opt-out"; actions: ["opt-out"] }
   | { category: "android"; actions: ["settings", "reverse-tunnel", "reload-app", "shake-device"] }
   | { category: "navigation"; actions: ["keyboard_shortcut"] }
   | { category: "external_link"; actions: ["click"] }
@@ -43,10 +41,10 @@ type IOptOutStatus = "unknown" | true | false
 // It also handles the user's opt-out status.
 // We use a custom alert to ask the user if they want to opt-in to analytics.
 export const useAnalytics = () => {
-  const [initialized, setInitialized] = useState(false)
-  const [optedOut, setOptedOut] = useState<IOptOutStatus>("unknown")
+  const [initialized, setInitialized] = React.useState(false)
+  const [optedOut, setOptedOut] = React.useState<IOptOutStatus>("unknown")
 
-  useEffect(() => {
+  React.useEffect(() => {
     const storeWatcher = configStore.onDidChange("analyticsOptOut", (newValue) => {
       console.log("[analytics] user has changed opt-out status", newValue)
       setOptedOut(newValue as IOptOutStatus)
@@ -62,24 +60,21 @@ export const useAnalytics = () => {
 
     if (status === "unknown") {
       console.log(`[analytics] user has not opted in or out`)
-      confirmAlert({
-        closeOnEscape: false,
-        closeOnClickOutside: false,
-        customUI: CustomAlert,
-      })
     } else {
       // If the user has opted out, we'll disable analytics
       setOptedOut(status)
       setInitialized(false)
       console.log(`[analytics] user has opted ${status ? "out" : "in"}`)
     }
+
+    return status
   }
 
   // Initialize analytics and set some system data like the app version and platform
   // as well as the mode we are running in. We don't want to send analytics events
   // during tests, so we disable them if we are running in test mode.
   // We also disable analytics if the user has opted out.
-  useEffect(() => {
+  React.useEffect(() => {
     const initialize = () => {
       const testMode = process.env.NODE_ENV === "test" // we don't want to send analytics events during tests
       ReactGA.initialize(GA4_KEY, { testMode: testMode || optedOut === true })
@@ -102,7 +97,7 @@ export const useAnalytics = () => {
   // This is the main function we use to send events throughout the app.
   // See documentation here for how to use react-ga4:
   // https://github.com/codler/react-ga4
-  const sendAnalyticsEvent = useCallback(
+  const sendAnalyticsEvent = React.useCallback(
     (event: UaEventOptions) => {
       if (!optedOut) {
         console.log("[analytics] Sending event", event)
@@ -113,7 +108,7 @@ export const useAnalytics = () => {
   )
 
   // Send a page view event
-  const sendPageViewAnalyticsEvent = useCallback(
+  const sendPageViewAnalyticsEvent = React.useCallback(
     (page: string) => {
       if (!optedOut) {
         console.log("[analytics] Sending page view event", page)
@@ -124,7 +119,7 @@ export const useAnalytics = () => {
   )
 
   // Send a keyboard shortcut event
-  const sendKeyboardShortcutAnalyticsEvent = useCallback(
+  const sendKeyboardShortcutAnalyticsEvent = React.useCallback(
     (label: string) => {
       sendAnalyticsEvent({
         category: "navigation",
@@ -137,7 +132,7 @@ export const useAnalytics = () => {
   )
 
   // Send a custom command event
-  const sendCustomCommandAnalyticsEvent = useCallback(
+  const sendCustomCommandAnalyticsEvent = React.useCallback(
     (command: string) => {
       sendAnalyticsEvent({
         category: "custom_command",
@@ -150,7 +145,7 @@ export const useAnalytics = () => {
   )
 
   // Send an external link event
-  const sendExternalLinkAnalyticsEvent = useCallback(
+  const sendExternalLinkAnalyticsEvent = React.useCallback(
     (label: string) => {
       sendAnalyticsEvent({
         category: "external_link",
@@ -162,13 +157,24 @@ export const useAnalytics = () => {
     [sendAnalyticsEvent]
   )
 
+  const sendOptOutAnalyticsEvent = React.useCallback(() => {
+    const event = {
+      category: "opt-out",
+      action: "opt-out",
+      nonInteraction: false,
+    }
+    console.log("[analytics] Sending opt-out event", event)
+    ReactGA.event(event) // this is the only time we send an event without checking the optedOut status
+  }, [])
+
   return {
     initializeAnalytics,
     sendAnalyticsEvent,
     sendPageViewAnalyticsEvent,
     sendKeyboardShortcutAnalyticsEvent,
     sendCustomCommandAnalyticsEvent,
     sendExternalLinkAnalyticsEvent,
+    sendOptOutAnalyticsEvent,
   }
 }
 
@@ -179,96 +185,7 @@ export const usePageTracking = () => {
   const location = useLocation()
   const { sendPageViewAnalyticsEvent } = useAnalytics()
 
-  useEffect(() => {
+  React.useEffect(() => {
     sendPageViewAnalyticsEvent(location.pathname)
   }, [location, sendPageViewAnalyticsEvent])
 }
-
-// This is a custom alert that we use to ask the user if they want to opt-in to analytics
-// We use this instead of the default alert because we want to style it to match our app.
-// We inherit the styles from react-confirm-alert and override them as needed.
-// Unfortunately, we can't use styled-components here because react-confirm-alert doesn't support it.
-// This also means we have to hard-code the colors here instead of using our theme, which is not ideal.
-const CustomAlert = ({ onClose }) => {
-  return (
-    <div
-      className="react-confirm-alert-overlay"
-      style={{
-        background: "#1e1e1e",
-      }}
-    >
-      <div
-        className="react-confirm-alert-body"
-        style={{
-          background: "#1e1e1e",
-          color: "#c3c3c3",
-          boxShadow: "0 20px 75px rgba(255, 255, 255, 0.13)",
-          width: "80%",
-          maxWidth: "500px",
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            marginBottom: 20,
-          }}
-        >
-          <img
-            src={reactotronAnalytics}
-            style={{
-              height: 128,
-            }}
-          />
-        </div>
-        <h1>Opt in to Reactotron analytics?</h1>
-        <p>Help us improve Reactotron!</p>
-        <p>
-          We&apos;d like to collect anonymous usage data to enhance Reactotron&apos;s performance
-          and features. This data includes general usage patterns and interactions. No personal
-          information will be collected.
-        </p>
-        <p>
-          You can change this setting at any time and by opting in, you can contribute to making
-          Reactotron better for everyone!
-        </p>
-        <p>Would you like to participate?</p>
-        <div
-          className="react-confirm-alert-button-group"
-          style={{
-            flexDirection: "column",
-          }}
-        >
-          <button
-            onClick={() => {
-              configStore.set("analyticsOptOut", true)
-              onClose()
-            }}
-            style={{
-              fontSize: 16,
-              backgroundColor: "#cf6a4c",
-              color: "#1e1e1e",
-            }}
-          >
-            No, don&apos;t collect any data
-          </button>
-          <button
-            onClick={() => {
-              configStore.set("analyticsOptOut", false)
-              onClose()
-            }}
-            style={{
-              fontSize: 16,
-              marginTop: 20,
-              backgroundColor: "#8f9d6a",
-              color: "#1e1e1e",
-              fontWeight: "bold",
-            }}
-          >
-            Yes, I understand no personal information will be collected
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/yarn.lock b/yarn.lock
