initial-commit

src/app.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { ThemeProvider } from "@emotion/react";
+import { RedirectPage } from "./pages/redirect-page";
+import { featureFlags } from "./config/feature-flags";
+
+const theme = {
+  colors: {
+    background: "#ffffff",
+    text: "#000000",
+    accent: "#000000"
+  }
+};
+
+export default function App(): JSX.Element {
+  return (
+    <ThemeProvider theme={theme}>
+      <RedirectPage enableRedirectNowButton={featureFlags.enableRedirectNowButton} />
+    </ThemeProvider>
+  );
+}

src/config/feature-flags.ts

@@ -0,0 +1,7 @@
+export type FeatureFlags = {
+  enableRedirectNowButton: boolean;
+};
+
+export const featureFlags: FeatureFlags = {
+  enableRedirectNowButton: true
+};

src/index.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { createRoot, Root } from "react-dom/client";
+import App from "./app";
+
+export default function RootComponent(): JSX.Element {
+  return <App />;
+}
+
+let rootElement: Root | null = null;
+
+export function mount(
+  Component: React.ComponentType,
+  element: HTMLElement | null = document.getElementById("app")
+): void {
+  if (!element) {
+    return;
+  }
+
+  rootElement = createRoot(element);
+  rootElement.render(<Component />);
+}
+
+export function unmount(): void {
+  if (!rootElement) {
+    return;
+  }
+
+  rootElement.unmount();
+  rootElement = null;
+}

src/pages/redirect-page.tsx

@@ -0,0 +1,81 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+type RedirectPageProps = {
+  enableRedirectNowButton: boolean;
+};
+
+const REDIRECT_DELAY_MS = 5000;
+const TARGET_URL = "https://example.com";
+
+export function RedirectPage({
+  enableRedirectNowButton
+}: RedirectPageProps): JSX.Element {
+  const [remainingMs, setRemainingMs] = useState<number>(REDIRECT_DELAY_MS);
+
+  useEffect(() => {
+    const redirectTimeoutId = window.setTimeout(() => {
+      window.location.assign(TARGET_URL);
+    }, REDIRECT_DELAY_MS);
+
+    const intervalId = window.setInterval(() => {
+      setRemainingMs(previous => {
+        const next = previous - 1000;
+        if (next <= 0) {
+          window.clearInterval(intervalId);
+          return 0;
+        }
+        return next;
+      });
+    }, 1000);
+
+    return () => {
+      window.clearTimeout(redirectTimeoutId);
+      window.clearInterval(intervalId);
+    };
+  }, []);
+
+  const handleRedirectNow = useCallback((): void => {
+    window.location.assign(TARGET_URL);
+  }, []);
+
+  const secondsRemaining = Math.ceil(remainingMs / 1000);
+
+  return (
+    <main
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#ffffff",
+        color: "#000000",
+        fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
+      }}
+    >
+      <div style={{ textAlign: "center" }}>
+        <h1 style={{ fontSize: "1.5rem", marginBottom: "0.5rem" }}>
+          Hello
+        </h1>
+        <p style={{ marginBottom: enableRedirectNowButton ? "1rem" : 0 }}>
+          Redirecting to {TARGET_URL} in {secondsRemaining} seconds.
+        </p>
+        {enableRedirectNowButton && (
+          <button
+            type="button"
+            onClick={handleRedirectNow}
+            style={{
+              marginTop: "0.5rem",
+              padding: "0.5rem 1rem",
+              borderRadius: "4px",
+              border: "1px solid #000000",
+              backgroundColor: "#ffffff",
+              cursor: "pointer"
+            }}
+          >
+            Redirect now
+          </button>
+        )}
+      </div>
+    </main>
+  );
+}