Moved things around and use Context

Author: matt-aitken

apps/webapp/app/components/DevPresence.tsx

@@ -1,33 +1,39 @@
-import { useEffect, useState } from "react";
-import { ConnectedIcon, DisconnectedIcon } from "~/assets/icons/ConnectionIcons";
+import { createContext, type ReactNode, useContext, useEffect, useMemo, useState } from "react";
 import { useDebounce } from "~/hooks/useDebounce";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useEventSource } from "~/hooks/useEventSource";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTrigger,
-} from "./primitives/Dialog";
-import { Button, LinkButton } from "./primitives/Buttons";
-import connectedImage from "../assets/images/cli-connected.png";
-import disconnectedImage from "../assets/images/cli-disconnected.png";
-import { Paragraph } from "./primitives/Paragraph";
-import { PackageManagerProvider, TriggerDevStepV3 } from "./SetupCommands";
-import { docsPath } from "~/utils/pathBuilder";
-import { BookOpenIcon } from "@heroicons/react/20/solid";
 
-export function useDevPresence() {
+// Define Context types
+type DevPresenceContextType = {
+  lastSeen: Date | null;
+  isConnected: boolean;
+};
+
+// Create Context with default values
+const DevPresenceContext = createContext<DevPresenceContextType>({
+  lastSeen: null,
+  isConnected: false,
+});
+
+// Provider component with enabled prop
+interface DevPresenceProviderProps {
+  children: ReactNode;
+  enabled?: boolean;
+}
+
+export function DevPresenceProvider({ children, enabled = true }: DevPresenceProviderProps) {
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
+
+  // Only subscribe to event source if enabled is true
   const streamedEvents = useEventSource(
     `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/dev/presence`,
     {
       event: "presence",
+      disabled: !enabled,
     }
   );
 
@@ -38,15 +44,15 @@ export function useDevPresence() {
   }, 3_000);
 
   useEffect(() => {
-    if (streamedEvents === null) {
+    // If disabled or no events, set lastSeen to null
+    if (!enabled || streamedEvents === null) {
       debouncer(null);
       return;
     }
 
     try {
       const data = JSON.parse(streamedEvents) as any;
       if ("lastSeen" in data && data.lastSeen) {
-        // Parse the timestamp string into a Date object
         try {
           const lastSeenDate = new Date(data.lastSeen);
           debouncer(lastSeenDate);
@@ -61,68 +67,22 @@ export function useDevPresence() {
       console.log("DevPresence: Failed to parse presence message", { error });
       debouncer(null);
     }
-  }, [streamedEvents]);
+  }, [streamedEvents, enabled]);
 
-  return { lastSeen };
-}
+  // Calculate isConnected and memoize the context value
+  const contextValue = useMemo(() => {
+    const isConnected = enabled && lastSeen !== null && lastSeen > new Date(Date.now() - 120_000);
+    return { lastSeen, isConnected };
+  }, [lastSeen, enabled]);
 
-export function DevPresence() {
-  const { lastSeen } = useDevPresence();
-  const isConnected = lastSeen && lastSeen > new Date(Date.now() - 120_000);
+  return <DevPresenceContext.Provider value={contextValue}>{children}</DevPresenceContext.Provider>;
+}
 
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button
-          variant="minimal/small"
-          className="px-1"
-          LeadingIcon={
-            isConnected ? (
-              <ConnectedIcon className="size-5" />
-            ) : (
-              <DisconnectedIcon className="size-5" />
-            )
-          }
-        />
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          {isConnected
-            ? "Your dev server is connected to Trigger.dev"
-            : "Your dev server is not connected to Trigger.dev"}
-        </DialogHeader>
-        <div className="mt-2 flex flex-col gap-3 px-2">
-          <div className="flex flex-col items-center justify-center gap-6 px-6 py-10">
-            <img
-              src={isConnected ? connectedImage : disconnectedImage}
-              alt={isConnected ? "Connected" : "Disconnected"}
-              width={282}
-              height={45}
-            />
-            <Paragraph variant="small" className={isConnected ? "text-success" : "text-error"}>
-              {isConnected
-                ? "Your local dev server is connected to Trigger.dev"
-                : "Your local dev server is not connected to Trigger.dev"}
-            </Paragraph>
-          </div>
-          {isConnected ? null : (
-            <div className="space-y-3">
-              <PackageManagerProvider>
-                <TriggerDevStepV3 />
-              </PackageManagerProvider>
-              <Paragraph variant="small">
-                Run this CLI `dev` command to connect to the Trigger.dev servers to start developing
-                locally. Keep it running while you develop to stay connected.
-              </Paragraph>
-            </div>
-          )}
-        </div>
-        <DialogFooter>
-          <LinkButton variant="tertiary/medium" LeadingIcon={BookOpenIcon} to={docsPath("cli-dev")}>
-            CLI docs
-          </LinkButton>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
+// Custom hook to use the context
+export function useDevPresence() {
+  const context = useContext(DevPresenceContext);
+  if (context === undefined) {
+    throw new Error("useDevPresence must be used within a DevPresenceProvider");
+  }
+  return context;
 }

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -3,6 +3,7 @@ import {
   ArrowRightOnRectangleIcon,
   BeakerIcon,
   BellAlertIcon,
+  BookOpenIcon,
   ChartBarIcon,
   ChevronRightIcon,
   ClockIcon,
@@ -20,6 +21,7 @@ import {
 import { useNavigation } from "@remix-run/react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import simplur from "simplur";
+import { ConnectedIcon, DisconnectedIcon } from "~/assets/icons/ConnectionIcons";
 import { RunsIcon } from "~/assets/icons/RunsIcon";
 import { TaskIcon } from "~/assets/icons/TaskIcon";
 import { Avatar } from "~/components/primitives/Avatar";
@@ -32,6 +34,7 @@ import { type FeedbackType } from "~/routes/resources.feedback";
 import { cn } from "~/utils/cn";
 import {
   accountPath,
+  docsPath,
   logoutPath,
   newOrganizationPath,
   newProjectPath,
@@ -53,9 +56,21 @@ import {
   v3TestPath,
   v3UsagePath,
 } from "~/utils/pathBuilder";
+import { useDevPresence } from "../DevPresence";
 import { ImpersonationBanner } from "../ImpersonationBanner";
+import { PackageManagerProvider, TriggerDevStepV3 } from "../SetupCommands";
 import { UserProfilePhoto } from "../UserProfilePhoto";
+import connectedImage from "../../assets/images/cli-connected.png";
+import disconnectedImage from "../../assets/images/cli-disconnected.png";
 import { FreePlanUsage } from "../billing/FreePlanUsage";
+import { Button, ButtonContent, LinkButton } from "../primitives/Buttons";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTrigger,
+} from "../primitives/Dialog";
 import { Paragraph } from "../primitives/Paragraph";
 import {
   Popover,
@@ -64,14 +79,12 @@ import {
   PopoverMenuItem,
   PopoverTrigger,
 } from "../primitives/Popover";
+import { TextLink } from "../primitives/TextLink";
 import { EnvironmentSelector } from "./EnvironmentSelector";
 import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem } from "./SideMenuItem";
 import { SideMenuSection } from "./SideMenuSection";
-import { ButtonContent, LinkButton } from "../primitives/Buttons";
-import { TextLink } from "../primitives/TextLink";
-import { DevPresence } from "../DevPresence";
 
 type SideMenuUser = Pick<User, "email" | "admin"> & { isImpersonating: boolean };
 export type SideMenuProject = Pick<
@@ -148,7 +161,7 @@ export function SideMenu({
                 project={project}
                 environment={environment}
               />
-              {environment.type === "DEVELOPMENT" && <DevPresence />}
+              {environment.type === "DEVELOPMENT" && <DevConnection />}
             </div>
           </div>
 
@@ -496,3 +509,63 @@ function SelectorDivider() {
     </svg>
   );
 }
+
+export function DevConnection() {
+  const { isConnected } = useDevPresence();
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button
+          variant="minimal/small"
+          className="px-1"
+          LeadingIcon={
+            isConnected ? (
+              <ConnectedIcon className="size-5" />
+            ) : (
+              <DisconnectedIcon className="size-5" />
+            )
+          }
+        />
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          {isConnected
+            ? "Your dev server is connected to Trigger.dev"
+            : "Your dev server is not connected to Trigger.dev"}
+        </DialogHeader>
+        <div className="mt-2 flex flex-col gap-3 px-2">
+          <div className="flex flex-col items-center justify-center gap-6 px-6 py-10">
+            <img
+              src={isConnected ? connectedImage : disconnectedImage}
+              alt={isConnected ? "Connected" : "Disconnected"}
+              width={282}
+              height={45}
+            />
+            <Paragraph variant="small" className={isConnected ? "text-success" : "text-error"}>
+              {isConnected
+                ? "Your local dev server is connected to Trigger.dev"
+                : "Your local dev server is not connected to Trigger.dev"}
+            </Paragraph>
+          </div>
+          {isConnected ? null : (
+            <div className="space-y-3">
+              <PackageManagerProvider>
+                <TriggerDevStepV3 />
+              </PackageManagerProvider>
+              <Paragraph variant="small">
+                Run this CLI `dev` command to connect to the Trigger.dev servers to start developing
+                locally. Keep it running while you develop to stay connected.
+              </Paragraph>
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <LinkButton variant="tertiary/medium" LeadingIcon={BookOpenIcon} to={docsPath("cli-dev")}>
+            CLI docs
+          </LinkButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/webapp/app/hooks/useEventSource.tsx

@@ -23,12 +23,12 @@ export function useEventSource(
       return;
     }
 
-    const eventSource = new EventSource(url, init);
-    eventSource.addEventListener(event ?? "message", handler);
-
     // reset data if dependencies change
     setData(null);
 
+    const eventSource = new EventSource(url, init);
+    eventSource.addEventListener(event ?? "message", handler);
+
     function handler(event: MessageEvent) {
       setData(event.data || "UNKNOWN_EVENT_DATA");
     }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam/route.tsx

@@ -1,4 +1,5 @@
 import { Outlet } from "@remix-run/react";
+import { DevPresenceProvider } from "~/components/DevPresence";
 import { RouteErrorDisplay } from "~/components/ErrorDisplay";
 import { MainBody } from "~/components/layout/AppLayout";
 import { SideMenu } from "~/components/navigation/SideMenu";
@@ -29,16 +30,18 @@ export default function Project() {
   return (
     <>
       <div className="grid grid-cols-[14rem_1fr] overflow-hidden">
-        <SideMenu
-          user={{ ...user, isImpersonating }}
-          project={project}
-          environment={environment}
-          organization={organization}
-          organizations={organizations}
-        />
-        <MainBody>
-          <Outlet />
-        </MainBody>
+        <DevPresenceProvider enabled={environment.type === "DEVELOPMENT"}>
+          <SideMenu
+            user={{ ...user, isImpersonating }}
+            project={project}
+            environment={environment}
+            organization={organization}
+            organizations={organizations}
+          />
+          <MainBody>
+            <Outlet />
+          </MainBody>
+        </DevPresenceProvider>
       </div>
     </>
   );

apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx

@@ -1,13 +1,10 @@
 import { Outlet, type ShouldRevalidateFunction, type UIMatch } from "@remix-run/react";
 import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { typedjson } from "remix-typedjson";
 import { z } from "zod";
 import { RouteErrorDisplay } from "~/components/ErrorDisplay";
-import { MainBody } from "~/components/layout/AppLayout";
-import { SideMenu } from "~/components/navigation/SideMenu";
 import { useOptionalOrganization } from "~/hooks/useOrganizations";
 import { useTypedMatchesData } from "~/hooks/useTypedMatchData";
-import { useUser } from "~/hooks/useUser";
 import { OrganizationsPresenter } from "~/presenters/OrganizationsPresenter.server";
 import { getImpersonationId } from "~/services/impersonation.server";
 import { getCachedUsage, getCurrentPlan } from "~/services/platform.v3.server";