diff --git a/frontend/apps/editor3d/app/src/index.tsx b/frontend/apps/editor3d/app/src/index.tsx index 9486c44927..56b0cabb43 100644 --- a/frontend/apps/editor3d/app/src/index.tsx +++ b/frontend/apps/editor3d/app/src/index.tsx @@ -1,52 +1,20 @@ -import { StrictMode } from 'react'; +import { StrictMode, useEffect } from "react"; import { useSignals, useSignalEffect } from "@preact/signals-react/runtime"; -import { useEffect } from "react"; -import { BrowserRouter } from 'react-router-dom'; -import * as ReactDOM from 'react-dom/client'; -import { authentication, persistLogin } from "~/signals"; -import { PageEnigma } from './pages/PageEnigma/PageEnigma'; +import { BrowserRouter } from "react-router-dom"; +import { PageEnigma } from "./pages/PageEnigma/PageEnigma"; import { createRoot } from "react-dom/client"; -//import App from './app/app'; -//import { App } from './root'; - -import { - Links, - Meta, - Outlet, - Scripts, - ScrollRestoration, - useLoaderData, -} from "@remix-run/react"; - import "./styles/normalize.css"; import "./styles/tailwind.css"; import "./styles/base.css"; import "@fortawesome/fontawesome-svg-core/styles.css"; - import { config } from "@fortawesome/fontawesome-svg-core"; - import EnvironmentVariables from "~/Classes/EnvironmentVariables"; -import { pageHeight, pageWidth } from "~/signals"; - +import { pageHeight, pageWidth, persistLogin } from "~/signals"; import { showWizard } from "~/pages/PageEnigma/Wizard/signals/wizard"; -import { BuildEnvironmentType, GetBuildEnvironment } from "./BuildEnvironment"; +import { posthog } from "posthog-js"; config.autoAddCss = false; /* eslint-disable import/first */ -//const root = ReactDOM.createRoot( -// document.getElementById('root') as HTMLElement -//); -// -//root.render( -// -// -// -// -// -//); - -//createRoot(document.getElementById("root")!).render(); - // TODO(bt,2025-04-19): Make these configurable const ENV = { BASE_API: "https://api.storyteller.ai", @@ -65,17 +33,18 @@ const GlobalSettingsManager = ({ env }: { env: Record }) => { /// Initizations that depends on ENV vars /// function PostHogInit() { - const data = EnvironmentVariables.values; - const apiKey = data.REACT_APP_PUBLIC_POSTHOG_KEY as string; - //posthog.init(apiKey, { - // //HACK: This is the default host from Netlify, but need to figure out why it isn't working on prod. - // // api_host: data.DEPLOY_PRIME_URL + "/ingest" as string, - // api_host: "https://studio.storyteller.ai/ingest" as string, - // ui_host: data.REACT_APP_PUBLIC_POSTHOG_UI as string, - //}); + const apiKey = import.meta.env.VITE_POSTHOG_API_KEY; + posthog.init(apiKey, { + api_host: "https://us.i.posthog.com/", + ui_host: "https://us.i.posthog.com/", + }); } + useEffect(() => { EnvironmentVariables.initialize(env); + if (import.meta.env.DEV) { + return; + } PostHogInit(); }, [env]); @@ -114,8 +83,8 @@ createRoot(document.getElementById("root")!).render(
- + - + , ); diff --git a/frontend/apps/editor3d/app/src/root.tsx b/frontend/apps/editor3d/app/src/root.tsx index 9207037d8c..00d097dae7 100644 --- a/frontend/apps/editor3d/app/src/root.tsx +++ b/frontend/apps/editor3d/app/src/root.tsx @@ -1,5 +1,3 @@ -import { useEffect } from "react"; -import { useSignals } from "@preact/signals-react/runtime"; import { LinksFunction } from "@remix-run/deno"; import { posthog } from "posthog-js"; import { PostHogProvider } from "posthog-js/react"; @@ -9,13 +7,11 @@ import { Outlet, Scripts, ScrollRestoration, - useLoaderData, } from "@remix-run/react"; import normalizeCss from "./styles/normalize.css?url"; import tailwindCss from "./styles/tailwind.css?url"; import baseCss from "./styles/base.css?url"; -import { Environment, Configs } from "./configs"; //import { api } from "@storyteller/api"; // The following import prevents a Font Awesome icon server-side rendering bug, @@ -24,12 +20,6 @@ import "@fortawesome/fontawesome-svg-core/styles.css"; // Prevent fontawesome from adding its CSS since we did it manually above: import { config } from "@fortawesome/fontawesome-svg-core"; -import EnvironmentVariables from "~/Classes/EnvironmentVariables"; -import { pageHeight, pageWidth } from "~/signals"; - -import { showWizard } from "~/pages/PageEnigma/Wizard/signals/wizard"; -import { BuildEnvironmentType, GetBuildEnvironment } from "./BuildEnvironment"; - config.autoAddCss = false; /* eslint-disable import/first */ export const links: LinksFunction = () => [ @@ -60,57 +50,7 @@ export const links: LinksFunction = () => [ }, ]; -// .env part 2 add to this -export async function loader() { - const environmentType = GetBuildEnvironment().getBuildEnvironmentType(); - const configs = new Configs(environmentType); - - let uploadApiVideo = "https://upload.storyteller.ai"; - - switch (environmentType) { - case BuildEnvironmentType.Dev: - uploadApiVideo = "http://localhost:12345"; - break; - } - - //console.log(">>>> API LIBRARY IMPORT TEST", api()); - - const env = { - // @ts-expect-error ProvessEnv is correct - BASE_API: process.env.BASE_API || configs.baseApi || "%BUILD_BASE_API%", - // @ts-expect-error ProvessEnv is correct - GOOGLE_API: process.env.GOOGLE_API || configs.googleApi || "%BUILD_GOOGLE_API%", - // @ts-expect-error ProvessEnv is correct - FUNNEL_API: process.env.FUNNEL_API || configs.funnelApi || "%BUILD_FUNNEL_API%", - // @ts-expect-error ProvessEnv is correct - CDN_API: process.env.CDN_API || configs.cdnApi || "%BUILD_CDN_API%", - // @ts-expect-error ProvessEnv is correct - GRAVATAR_API: process.env.GRAVATAR_API || configs.gravatarApi || "%BUILD_GRAVATAR_API%", - // @ts-expect-error ProvessEnv is correct - DEPLOY_PRIME_URL: process.env.DEPLOY_PRIME_URL || configs.deployPrimeUrl || "%DEPLOY_PRIME_URL%", - REACT_APP_PUBLIC_POSTHOG_KEY: - // @ts-expect-error ProvessEnv is correct - process.env.REACT_APP_PUBLIC_POSTHOG_KEY || - "%REACT_APP_PUBLIC_POSTHOG_KEY%", - REACT_APP_PUBLIC_POSTHOG_UI: - // @ts-expect-error ProvessEnv is correct - process.env.REACT_APP_PUBLIC_POSTHOG_UI || - "%REACT_APP_PUBLIC_POSTHOG_UI%", - // @ts-expect-error ProvessEnv is correct - CONTEXT: process.env.CONTEXT || configs.deployContext || "%CONTEXT%", - // @ts-expect-error ProvessEnv is correct - DEPLOY_CONTEXT: process.env.DEPLOY_CONTEXT || configs.deployContext || "%DEPLOY_CONTEXT%", - - // .env part 3 - //UPLOAD_API_VIDEO: process.env.UPLOAD_API_VIDEO || configs.uploadApiVideo || "%UPLOAD_API_VIDEO%", - UPLOAD_API_VIDEO: uploadApiVideo, - } as Record; - return { ENV: env }; -} - export default function App() { - const data = useLoaderData() as { ENV: Record }; - return ( @@ -120,7 +60,6 @@ export default function App() { - {data && }
@@ -131,48 +70,3 @@ export default function App() { ); } - -const GlobalSettingsManager = ({ env }: { env: Record }) => { - useSignals(); - - /// Initizations that depends on ENV vars /// - function PostHogInit() { - const data = EnvironmentVariables.values; - const apiKey = data.REACT_APP_PUBLIC_POSTHOG_KEY as string; - posthog.init(apiKey, { - //HACK: This is the default host from Netlify, but need to figure out why it isn't working on prod. - // api_host: data.DEPLOY_PRIME_URL + "/ingest" as string, - api_host: "https://studio.storyteller.ai/ingest" as string, - ui_host: data.REACT_APP_PUBLIC_POSTHOG_UI as string, - }); - } - useEffect(() => { - EnvironmentVariables.initialize(env); - PostHogInit(); - }, [env]); - - /// Initizations that run only once on 1ST mount /// - function setPage() { - // TODO address this issue with zooming - pageHeight.value = window.innerHeight; - pageWidth.value = window.innerWidth; - } - function initWizard() { - if (showWizard.value) { - return; - } - const wizard = localStorage.getItem("storyteller-wizard"); - showWizard.value = wizard ? "" : "initial"; - localStorage.setItem("storyteller-wizard", "shown"); - } - useEffect(() => { - initWizard(); - setPage(); - window.addEventListener("resize", setPage); - return () => { - window.removeEventListener("resize", setPage); - }; - }, []); - - return null; -};