diff --git a/apps/frontend/src/components/new-layout/layout.component.tsx b/apps/frontend/src/components/new-layout/layout.component.tsx index 26fefec2..5f0fccd4 100644 --- a/apps/frontend/src/components/new-layout/layout.component.tsx +++ b/apps/frontend/src/components/new-layout/layout.component.tsx @@ -1,7 +1,6 @@ 'use client'; -import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'; -import * as Sentry from '@sentry/nextjs'; +import React, { ReactNode, useCallback } from 'react'; import { Logo } from '@gitroom/frontend/components/new-layout/logo'; import { Plus_Jakarta_Sans } from 'next/font/google'; const ModeComponent = dynamic( @@ -25,7 +24,6 @@ import { MediaSettingsLayout } from '@gitroom/frontend/components/launches/helpe import { Toaster } from '@gitroom/react/toaster/toaster'; import { ShowPostSelector } from '@gitroom/frontend/components/post-url-selector/post.url.selector'; import { NewSubscription } from '@gitroom/frontend/components/layout/new.subscription'; -import { Onboarding } from '@gitroom/frontend/components/onboarding/onboarding'; import { Support } from '@gitroom/frontend/components/layout/support'; import { ContinueProvider } from '@gitroom/frontend/components/layout/continue.provider'; import { ContextWrapper } from '@gitroom/frontend/components/layout/user.context'; @@ -40,6 +38,7 @@ import NotificationComponent from '@gitroom/frontend/components/notifications/no import { BillingAfter } from '@gitroom/frontend/components/new-layout/billing.after'; import { OrganizationSelector } from '@gitroom/frontend/components/layout/organization.selector'; import { PreConditionComponent } from '@gitroom/frontend/components/layout/pre-condition.component'; + import { AttachToFeedbackIcon } from '@gitroom/frontend/components/new-layout/sentry.feedback.component'; const jakartaSans = Plus_Jakarta_Sans({ weight: ['600', '500'], @@ -53,43 +52,6 @@ export const LayoutComponent = ({ children }: { children: ReactNode }) => { const { backendUrl, billingEnabled, isGeneral } = useVariables(); // Feedback icon component attaches Sentry feedback to a top-bar icon when DSN is present - function AttachToFeedbackIcon({ sentryDsn }: { sentryDsn?: string }) { - const [feedback, setFeedback] = useState(); - const buttonRef = useRef(null); - - useEffect(() => { - if (!sentryDsn) return; - try { - const fb = (Sentry as any).getFeedback?.(); - setFeedback(fb); - } catch (e) { - setFeedback(undefined); - } - }, [sentryDsn]); - - useEffect(() => { - if (feedback && buttonRef.current) { - const unsubscribe = feedback.attachTo(buttonRef.current); - return unsubscribe; - } - return () => {}; - }, [feedback]); - - if (!sentryDsn) return null; - - return ( - - ); - } const searchParams = useSearchParams(); const load = useCallback(async (path: string) => { return await (await fetch(path)).json(); @@ -158,8 +120,7 @@ export const LayoutComponent = ({ children }: { children: ReactNode }) => {
- {/* Feedback icon (icon-only) - only show when Sentry DSN is present */} - +
diff --git a/apps/frontend/src/components/new-layout/sentry.feedback.component.tsx b/apps/frontend/src/components/new-layout/sentry.feedback.component.tsx new file mode 100644 index 00000000..35b8f1f9 --- /dev/null +++ b/apps/frontend/src/components/new-layout/sentry.feedback.component.tsx @@ -0,0 +1,53 @@ +'use client'; + +import { FC, useEffect, useRef, useState } from 'react'; +import * as Sentry from '@sentry/nextjs'; +import { useVariables } from '@gitroom/react/helpers/variable.context'; + +export const AttachToFeedbackIcon: FC = () => { + const { sentryDsn } = useVariables(); + const [feedback, setFeedback] = useState(); + const buttonRef = useRef(null); + + useEffect(() => { + if (!sentryDsn) return; + try { + const fb = (Sentry as any).getFeedback?.(); + setFeedback(fb); + } catch (e) { + setFeedback(undefined); + } + }, [sentryDsn]); + + useEffect(() => { + if (feedback && buttonRef.current) { + const unsubscribe = feedback.attachTo(buttonRef.current); + return unsubscribe; + } + return () => {}; + }, [feedback]); + + if (!sentryDsn) return null; + + return ( + + ); +};