fix: use components

Author: dwaldeck-light-it

src/config/env.ts

@@ -21,6 +21,9 @@ export const env = createEnv({
 
     VITE_ENABLE_DEVTOOLS: z.string().optional(),
     VITE_ENABLE_REACT_SCAN: z.string().optional(),
+
+    VITE_POSTHOG_API_KEY: z.string(),
+    VITE_POSTHOG_HOST: z.string(),
   },
 
   /**

src/main.tsx

@@ -16,6 +16,7 @@ import "@/styles.css";
 import { env } from "./config/env";
 import { TooltipProvider } from "./components/ui/tooltip";
 
+import { PostHogProvider } from "./post-hog";
 initializeSentry();
 initializeIcons();
 scan({ enabled: Boolean(env.VITE_APP_ENV === "local" && env.VITE_ENABLE_REACT_SCAN) });
@@ -27,14 +28,16 @@ if (!rootElement.innerHTML) {
 
   root.render(
     <StrictMode>
-      <I18nextProvider>
-        <QueryClientProvider client={queryClient}>
-          <TooltipProvider>
-            <RouterProvider router={router} />
-            <Toaster />
-          </TooltipProvider>
-        </QueryClientProvider>
-      </I18nextProvider>
+      <PostHogProvider>
+        <I18nextProvider>
+          <QueryClientProvider client={queryClient}>
+            <TooltipProvider>
+              <RouterProvider router={router} />
+              <Toaster />
+            </TooltipProvider>
+          </QueryClientProvider>
+        </I18nextProvider>
+      </PostHogProvider>
     </StrictMode>,
   );
 }

src/post-hog/index.tsx

@@ -0,0 +1,13 @@
+import type { PropsWithChildren } from "react";
+import posthog from "posthog-js";
+import { PostHogProvider as ReactPostHogProvider } from "posthog-js/react";
+
+import { env } from "@/config/env";
+
+posthog.init(env.VITE_POSTHOG_API_KEY, {
+  api_host: env.VITE_POSTHOG_HOST,
+});
+
+export const PostHogProvider = ({ children }: PropsWithChildren) => {
+  return <ReactPostHogProvider client={posthog}>{children}</ReactPostHogProvider>;
+};

src/post-hog/post-hog.d.ts

@@ -0,0 +1,14 @@
+declare module "posthog-js/react" {
+  import type { ComponentType, ReactNode } from "react";
+  import type { PostHog } from "posthog-js";
+
+  export type PostHogProviderProps = {
+    client: PostHog;
+    children?: ReactNode;
+  };
+
+  export const PostHogProvider: ComponentType<PostHogProviderProps>;
+  export function usePostHog(): PostHog | undefined;
+
+  export function useFeatureFlagEnabled(flag: string, distinctId?: string): boolean;
+}

src/routes/_private/-components/feature-not-available.tsx

@@ -0,0 +1,11 @@
+import { Icons } from "@/components/ui";
+
+export const FeatureNotAvailable = () => {
+  return (
+    <div className="flex min-h-screen w-full flex-col items-center justify-center text-center">
+      <Icons.Ban className="text-muted-foreground h-14 w-14" />
+
+      <h2 className="mb-2 text-xl font-semibold">Feature not available</h2>
+    </div>
+  );
+};

src/routes/_private/-components/welcome-message.tsx

@@ -0,0 +1,7 @@
+export const WelcomeMessage = () => {
+  return (
+    <div className="flex min-h-screen w-full flex-col items-center justify-center text-center">
+      <h2 className="mb-2 text-2xl font-semibold">Welcome to the app, beta tester!</h2>
+    </div>
+  );
+};

src/routes/_private/page.tsx

@@ -1,15 +1,24 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { useFeatureFlagEnabled, usePostHog } from "posthog-js/react";
 
-import { useTranslation } from "@/i18n";
+import { FeatureNotAvailable } from "./-components/feature-not-available";
+import { WelcomeMessage } from "./-components/welcome-message";
 
 const HomePage = () => {
-  const { t } = useTranslation();
+  const posthog = usePostHog();
+  const showWelcomeMessage = useFeatureFlagEnabled("feature-a");
 
-  return (
-    <div className="flex flex-col gap-4">
-      <h3>{t("greetings.home")}</h3>
-    </div>
-  );
+  posthog?.identify("daniela@test.com", {
+    is_beta_tester: true,
+  });
+
+  if (!showWelcomeMessage) {
+    return <FeatureNotAvailable />;
+  }
+
+  return <WelcomeMessage />;
 };
 
-export const Route = createFileRoute("/_private/")({ component: HomePage });
+export const Route = createFileRoute("/_private/")({
+  component: HomePage,
+});