From ef1561e7be14c61d08d7da0a5daff022a77863e1 Mon Sep 17 00:00:00 2001 From: Simo Date: Tue, 7 Apr 2026 13:53:55 +0300 Subject: [PATCH 1/7] wip Signed-off-by: Simo --- .../brain/my-stream/MyStreamWaveChat.test.tsx | 31 ++ .../components/waves/DropPlaceholder.test.tsx | 323 ++++++++++-------- .../components/waves/WavesLayout.test.tsx | 147 ++++++++ .../useWaveDropsNotificationRead.test.tsx | 85 +++++ .../brain/my-stream/MyStreamWaveChat.tsx | 14 +- components/waves/DropPlaceholder.tsx | 43 ++- .../hooks/useWaveDropsNotificationRead.ts | 13 +- .../waves/drops/wave-drops-all/index.tsx | 1 + components/waves/layout/WavesLayout.tsx | 6 +- components/waves/public/LoggedOutSkeleton.tsx | 173 ---------- components/waves/public/PublicWaveShell.tsx | 158 --------- .../waves/public/usePublicWaveShellState.ts | 59 ---- .../feature-chat-composer-availability.md | 7 +- docs/waves/flow-wave-participation.md | 3 +- ...bleshooting-wave-navigation-and-posting.md | 5 +- package-lock.json | 57 ---- 16 files changed, 522 insertions(+), 603 deletions(-) create mode 100644 __tests__/components/waves/WavesLayout.test.tsx create mode 100644 __tests__/components/waves/drops/wave-drops-all/hooks/useWaveDropsNotificationRead.test.tsx delete mode 100644 components/waves/public/LoggedOutSkeleton.tsx delete mode 100644 components/waves/public/PublicWaveShell.tsx delete mode 100644 components/waves/public/usePublicWaveShellState.ts diff --git a/__tests__/components/brain/my-stream/MyStreamWaveChat.test.tsx b/__tests__/components/brain/my-stream/MyStreamWaveChat.test.tsx index 8a4484b30f..b87294f6ba 100644 --- a/__tests__/components/brain/my-stream/MyStreamWaveChat.test.tsx +++ b/__tests__/components/brain/my-stream/MyStreamWaveChat.test.tsx @@ -17,6 +17,7 @@ const mockRemoveAllDeliveredNotifications = jest .fn() .mockResolvedValue(undefined); const invalidateNotificationsMock = jest.fn(); +const mockUseAuth = jest.fn(); jest.mock("next/navigation", () => ({ useRouter: () => ({ replace: replaceMock }), @@ -91,6 +92,10 @@ jest.mock("@/components/notifications/NotificationsContext", () => ({ }), })); +jest.mock("@/components/auth/Auth", () => ({ + useAuth: () => mockUseAuth(), +})); + jest.mock("@/services/api/common-api", () => ({ commonApiPostWithoutBodyAndResponse: jest.fn().mockResolvedValue(undefined), })); @@ -114,6 +119,9 @@ describe("MyStreamWaveChat", () => { mockRemoveWaveDeliveredNotifications.mockClear(); mockRemoveAllDeliveredNotifications.mockClear(); invalidateNotificationsMock.mockClear(); + mockUseAuth.mockReturnValue({ + connectedProfile: { handle: "tester" }, + }); ( commonApiPostWithoutBodyAndResponse as jest.MockedFunction< typeof commonApiPostWithoutBodyAndResponse @@ -196,4 +204,27 @@ describe("MyStreamWaveChat", () => { expect(invalidateNotificationsMock).toHaveBeenCalled(); }); }); + + it("skips notification cleanup on unmount for anonymous viewers", async () => { + mockUseAuth.mockReturnValue({ + connectedProfile: null, + }); + + const { unmount } = renderWithProvider( + + ); + + await act(async () => { + unmount(); + }); + + expect(mockRemoveWaveDeliveredNotifications).not.toHaveBeenCalled(); + expect(commonApiPostWithoutBodyAndResponse).not.toHaveBeenCalled(); + expect(invalidateNotificationsMock).not.toHaveBeenCalled(); + }); }); diff --git a/__tests__/components/waves/DropPlaceholder.test.tsx b/__tests__/components/waves/DropPlaceholder.test.tsx index 8f8457abe4..9d8f1842af 100644 --- a/__tests__/components/waves/DropPlaceholder.test.tsx +++ b/__tests__/components/waves/DropPlaceholder.test.tsx @@ -1,248 +1,291 @@ -import DropPlaceholder from '@/components/waves/DropPlaceholder'; -import { ChatRestriction, SubmissionRestriction } from '@/hooks/useDropPriviledges'; -import { render, screen } from '@testing-library/react'; +import DropPlaceholder from "@/components/waves/DropPlaceholder"; +import { + ChatRestriction, + SubmissionRestriction, +} from "@/hooks/useDropPriviledges"; +import { render, screen } from "@testing-library/react"; -describe('DropPlaceholder', () => { - describe('chat restrictions', () => { - it('renders not logged in message for chat', () => { +describe("DropPlaceholder", () => { + describe("chat restrictions", () => { + it("renders not logged in message for chat", () => { render( - ); - - expect(screen.getByText('Please log in to participate in chat')).toBeInTheDocument(); + + expect( + screen.getByText("Please log in to participate in chat") + ).toBeInTheDocument(); }); - it('renders proxy user message for chat', () => { + it("renders proxy user message for chat", () => { render( - ); - - expect(screen.getByText('Proxy users cannot participate in chat')).toBeInTheDocument(); + + expect( + screen.getByText("Proxy users cannot participate in chat") + ).toBeInTheDocument(); }); - it('renders no permission message for chat', () => { + it("renders no permission message for chat", () => { render( - ); - - expect(screen.getByText("You don't have permission to chat in this wave")).toBeInTheDocument(); + + expect( + screen.getByText("You don't have permission to chat in this wave") + ).toBeInTheDocument(); }); - it('renders disabled message for chat', () => { + it("renders disabled message for chat", () => { render( - ); - - expect(screen.getByText('Chat is currently disabled for this wave')).toBeInTheDocument(); + + expect( + screen.getByText("Chat is currently disabled for this wave") + ).toBeInTheDocument(); }); - it('applies primary color for not logged in chat restriction', () => { + it("applies primary color for not logged in chat restriction", () => { render( - ); - - const message = screen.getByText('Please log in to participate in chat'); - expect(message).toHaveClass('tw-text-primary-400'); + + const message = screen.getByText("Please log in to participate in chat"); + expect(message).toHaveClass("tw-text-primary-400"); }); }); - describe('submission restrictions', () => { - it('renders not logged in message for submission', () => { + describe("submission restrictions", () => { + it("renders not logged in message for submission", () => { render( - ); - - expect(screen.getByText('Please log in to make submissions')).toBeInTheDocument(); + + expect( + screen.getByText("Please log in to make submissions") + ).toBeInTheDocument(); }); - it('renders proxy user message for submission', () => { + it("renders proxy user message for submission", () => { render( - ); - - expect(screen.getByText('Proxy users cannot make submissions')).toBeInTheDocument(); + + expect( + screen.getByText("Proxy users cannot make submissions") + ).toBeInTheDocument(); }); - it('renders no permission message for submission', () => { + it("renders no permission message for submission", () => { render( - ); - - expect(screen.getByText("You don't have permission to submit in this wave")).toBeInTheDocument(); + + expect( + screen.getByText("You don't have permission to submit in this wave") + ).toBeInTheDocument(); }); - it('renders not started message for submission', () => { + it("renders not started message for submission", () => { render( - ); - - expect(screen.getByText("Submissions haven't started yet")).toBeInTheDocument(); + + expect( + screen.getByText("Submissions haven't started yet") + ).toBeInTheDocument(); }); - it('renders ended message for submission', () => { + it("renders ended message for submission", () => { render( - ); - - expect(screen.getByText('Submission period has ended')).toBeInTheDocument(); + + expect( + screen.getByText("Submission period has ended") + ).toBeInTheDocument(); }); - it('renders max drops reached message for submission', () => { + it("renders max drops reached message for submission", () => { render( - ); - - expect(screen.getByText('You have reached the maximum number of drops allowed')).toBeInTheDocument(); + + expect( + screen.getByText("You have reached the maximum number of drops allowed") + ).toBeInTheDocument(); }); - it('applies correct colors for submission restrictions', () => { + it("applies correct colors for submission restrictions", () => { const { rerender } = render( - ); - - expect(screen.getByText('Please log in to make submissions')).toHaveClass('tw-text-primary-400'); + + expect(screen.getByText("Please log in to make submissions")).toHaveClass( + "tw-text-primary-400" + ); rerender( - ); - - expect(screen.getByText("Submissions haven't started yet")).toHaveClass('tw-text-[#FEDF89]'); + + expect(screen.getByText("Submissions haven't started yet")).toHaveClass( + "tw-text-[#FEDF89]" + ); rerender( - ); - - expect(screen.getByText('Submission period has ended')).toHaveClass('tw-text-red'); + + expect(screen.getByText("Submission period has ended")).toHaveClass( + "tw-text-red" + ); rerender( - ); - - expect(screen.getByText('You have reached the maximum number of drops allowed')).toHaveClass('tw-text-red'); + + expect( + screen.getByText("You have reached the maximum number of drops allowed") + ).toHaveClass("tw-text-red"); }); }); - describe('both type', () => { - it('renders generic message for both type', () => { + describe("both type", () => { + it("renders connect wallet message for logged out users", () => { + render( + + ); + + expect( + screen.getByText("Connect your wallet to participate in this wave") + ).toBeInTheDocument(); + }); + + it("renders generic message for both type", () => { render(); - - expect(screen.getByText('You cannot participate in this wave at the moment')).toBeInTheDocument(); + + expect( + screen.getByText("You cannot participate in this wave at the moment") + ).toBeInTheDocument(); }); }); - describe('default cases', () => { - it('renders default message when no restrictions provided', () => { + describe("default cases", () => { + it("renders default message when no restrictions provided", () => { render(); - - expect(screen.getByText('Action not available')).toBeInTheDocument(); + + expect(screen.getByText("Action not available")).toBeInTheDocument(); }); - it('applies default neutral color', () => { + it("applies default neutral color", () => { render(); - - const message = screen.getByText('Action not available'); - expect(message).toHaveClass('tw-text-iron-400'); + + const message = screen.getByText("Action not available"); + expect(message).toHaveClass("tw-text-iron-400"); }); }); - describe('component structure', () => { - it('renders with correct container classes', () => { + describe("component structure", () => { + it("renders with correct container classes", () => { const { container } = render(); - + const wrapper = container.firstChild; expect(wrapper).toHaveClass( - 'tw-min-h-[48px]', - 'tw-flex', - 'tw-items-center', - 'tw-justify-center', - 'tw-px-4', - 'tw-py-3', - 'tw-bg-iron-900/50', - 'tw-backdrop-blur', - 'tw-rounded-xl', - 'tw-border', - 'tw-border-iron-800/50' + "tw-min-h-[48px]", + "tw-flex", + "tw-items-center", + "tw-justify-center", + "tw-px-4", + "tw-py-3", + "tw-bg-iron-900/50", + "tw-backdrop-blur", + "tw-rounded-xl", + "tw-border", + "tw-border-iron-800/50" ); }); - it('renders message with correct text styling', () => { + it("renders message with correct text styling", () => { render(); - - const message = screen.getByText('Action not available'); - expect(message).toHaveClass( - 'tw-text-sm', - 'tw-font-medium', - 'tw-mb-0' - ); + + const message = screen.getByText("Action not available"); + expect(message).toHaveClass("tw-text-sm", "tw-font-medium", "tw-mb-0"); }); }); - describe('error handling', () => { - it('throws error for unhandled chat restriction', () => { + describe("error handling", () => { + it("throws error for unhandled chat restriction", () => { expect(() => { render( - ); - }).toThrow('Unhandled chat restriction: INVALID_RESTRICTION'); + }).toThrow("Unhandled chat restriction: INVALID_RESTRICTION"); }); - it('throws error for unhandled submission restriction', () => { + it("throws error for unhandled submission restriction", () => { expect(() => { render( - ); - }).toThrow('Unhandled submission restriction: INVALID_RESTRICTION'); + }).toThrow("Unhandled submission restriction: INVALID_RESTRICTION"); }); }); -}); \ No newline at end of file +}); diff --git a/__tests__/components/waves/WavesLayout.test.tsx b/__tests__/components/waves/WavesLayout.test.tsx new file mode 100644 index 0000000000..03096605be --- /dev/null +++ b/__tests__/components/waves/WavesLayout.test.tsx @@ -0,0 +1,147 @@ +import WavesLayout from "@/components/waves/layout/WavesLayout"; +import { render, screen } from "@testing-library/react"; +import React from "react"; + +const mockUseAuthenticatedContent = jest.fn(); +const mockUseDeviceInfo = jest.fn(); +const mockGetActiveWaveIdFromUrl = jest.fn(); +const mockUsePathname = jest.fn(); +const mockUseSearchParams = jest.fn(); + +jest.mock("../../../hooks/useAuthenticatedContent", () => ({ + useAuthenticatedContent: () => mockUseAuthenticatedContent(), +})); + +jest.mock("../../../hooks/useDeviceInfo", () => ({ + __esModule: true, + default: () => mockUseDeviceInfo(), +})); + +jest.mock("next/navigation", () => ({ + usePathname: () => mockUsePathname(), + useSearchParams: () => mockUseSearchParams(), +})); + +jest.mock("../../../helpers/navigation.helpers", () => ({ + getActiveWaveIdFromUrl: (...args: unknown[]) => + mockGetActiveWaveIdFromUrl(...args), +})); + +jest.mock("@/components/waves/WavesDesktop", () => ({ + __esModule: true, + default: ({ + allowDropOverlay, + allowRightSidebar, + children, + showLeftSidebar, + }: { + readonly allowDropOverlay?: boolean; + readonly allowRightSidebar?: boolean; + readonly children: React.ReactNode; + readonly showLeftSidebar?: boolean; + }) => ( +
+ {children} +
+ ), +})); + +jest.mock("@/components/waves/WavesMobile", () => ({ + __esModule: true, + default: ({ children }: { readonly children: React.ReactNode }) => ( +
{children}
+ ), +})); + +jest.mock("@/components/common/ConnectWallet", () => ({ + __esModule: true, + default: () =>
Connect Wallet
, +})); + +jest.mock("@/components/header/user/HeaderUserConnect", () => ({ + __esModule: true, + default: ({ label }: { readonly label?: string }) => ( + + ), +})); + +jest.mock("@/components/user/utils/set-up-profile/UserSetUpProfileCta", () => ({ + __esModule: true, + default: () =>
Set up profile
, +})); + +jest.mock("@/components/waves/WaveScreenMessage", () => ({ + __esModule: true, + default: ({ + action, + description, + title, + }: { + readonly action?: React.ReactNode; + readonly description?: string; + readonly title: string; + }) => ( +
+

{title}

+ {description ?

{description}

: null} + {action} +
+ ), +})); + +describe("WavesLayout", () => { + beforeEach(() => { + mockUseAuthenticatedContent.mockReturnValue({ + contentState: "not-authenticated", + }); + mockUseDeviceInfo.mockReturnValue({ isApp: false, isMobileDevice: false }); + mockUsePathname.mockReturnValue("/waves/test-wave"); + mockUseSearchParams.mockReturnValue(new URLSearchParams("wave=test-wave")); + mockGetActiveWaveIdFromUrl.mockReturnValue(null); + }); + + it("renders the selected wave content for logged-out users", () => { + mockGetActiveWaveIdFromUrl.mockReturnValue("test-wave"); + + render( + +
Real wave content
+ + ); + + expect(screen.getByTestId("wave-content")).toBeInTheDocument(); + expect(screen.getByTestId("waves-desktop")).toHaveAttribute( + "data-allow-drop-overlay", + "false" + ); + expect(screen.getByTestId("waves-desktop")).toHaveAttribute( + "data-allow-right-sidebar", + "false" + ); + expect(screen.queryByTestId("wave-screen-message")).not.toBeInTheDocument(); + }); + + it("keeps the select-wave prompt when no wave is selected", () => { + render( + +
Real wave content
+ + ); + + expect(screen.getByText("Select a Wave")).toBeInTheDocument(); + expect( + screen.getByText( + "Connect your wallet to access waves and join the conversation." + ) + ).toBeInTheDocument(); + expect( + screen.getByRole("button", { name: "Connect Wallet" }) + ).toBeInTheDocument(); + expect(screen.queryByTestId("wave-content")).not.toBeInTheDocument(); + }); +}); diff --git a/__tests__/components/waves/drops/wave-drops-all/hooks/useWaveDropsNotificationRead.test.tsx b/__tests__/components/waves/drops/wave-drops-all/hooks/useWaveDropsNotificationRead.test.tsx new file mode 100644 index 0000000000..82d6de3319 --- /dev/null +++ b/__tests__/components/waves/drops/wave-drops-all/hooks/useWaveDropsNotificationRead.test.tsx @@ -0,0 +1,85 @@ +import { ReactQueryWrapperContext } from "@/components/react-query-wrapper/ReactQueryWrapper"; +import { useWaveDropsNotificationRead } from "@/components/waves/drops/wave-drops-all/hooks/useWaveDropsNotificationRead"; +import { commonApiPostWithoutBodyAndResponse } from "@/services/api/common-api"; +import { render, waitFor } from "@testing-library/react"; +import React from "react"; + +jest.mock("@/services/api/common-api", () => ({ + commonApiPostWithoutBodyAndResponse: jest.fn().mockResolvedValue(undefined), +})); + +function TestComponent({ + enabled, + removeWaveDeliveredNotifications, + waveId, +}: { + readonly enabled?: boolean; + readonly removeWaveDeliveredNotifications: ( + waveId: string + ) => Promise | void; + readonly waveId: string; +}) { + useWaveDropsNotificationRead({ + waveId, + enabled, + removeWaveDeliveredNotifications, + }); + + return null; +} + +describe("useWaveDropsNotificationRead", () => { + const invalidateNotifications = jest.fn(); + const removeWaveDeliveredNotifications = jest + .fn() + .mockResolvedValue(undefined); + + beforeEach(() => { + invalidateNotifications.mockClear(); + removeWaveDeliveredNotifications.mockClear(); + ( + commonApiPostWithoutBodyAndResponse as jest.MockedFunction< + typeof commonApiPostWithoutBodyAndResponse + > + ).mockClear(); + }); + + it("skips read-sync when disabled", () => { + render( + + + + ); + + expect(removeWaveDeliveredNotifications).not.toHaveBeenCalled(); + expect(commonApiPostWithoutBodyAndResponse).not.toHaveBeenCalled(); + expect(invalidateNotifications).not.toHaveBeenCalled(); + }); + + it("marks the wave as read when enabled", async () => { + render( + + + + ); + + await waitFor(() => { + expect(removeWaveDeliveredNotifications).toHaveBeenCalledWith("wave-1"); + expect(commonApiPostWithoutBodyAndResponse).toHaveBeenCalledWith({ + endpoint: "notifications/wave/wave-1/read", + }); + expect(invalidateNotifications).toHaveBeenCalled(); + }); + }); +}); diff --git a/components/brain/my-stream/MyStreamWaveChat.tsx b/components/brain/my-stream/MyStreamWaveChat.tsx index 2a41b0510e..c1655327c3 100644 --- a/components/brain/my-stream/MyStreamWaveChat.tsx +++ b/components/brain/my-stream/MyStreamWaveChat.tsx @@ -1,5 +1,6 @@ "use client"; +import { useAuth } from "@/components/auth/Auth"; import { CreateDropWaveWrapper } from "@/components/waves/CreateDropWaveWrapper"; import { WaveDropsAllWithoutProvider } from "@/components/waves/drops/wave-drops-all"; import { WaveGallery } from "@/components/waves/gallery"; @@ -47,10 +48,12 @@ interface MyStreamWaveChatProps { } interface WaveChatLeaveHandlerProps { + readonly enabled: boolean; readonly waveId: string; } const WaveChatLeaveHandler: React.FC = ({ + enabled, waveId, }) => { const { setUnreadDividerSerialNo } = useUnreadDivider(); @@ -58,6 +61,10 @@ const WaveChatLeaveHandler: React.FC = ({ const { invalidateNotifications } = useContext(ReactQueryWrapperContext); useEffect(() => { + if (!enabled) { + return; + } + return () => { setUnreadDividerSerialNo(null); void (async () => { @@ -81,6 +88,7 @@ const WaveChatLeaveHandler: React.FC = ({ })(); }; }, [ + enabled, waveId, setUnreadDividerSerialNo, removeWaveDeliveredNotifications, @@ -100,6 +108,7 @@ const MyStreamWaveChat: React.FC = ({ const searchParams = useSearchParams(); const pathname = usePathname(); const containerRef = useRef(null); + const { connectedProfile } = useAuth(); const { isMemesWave, isCurationWave } = useWave(wave); const submissionExperience = resolveWaveSubmissionExperience({ isMemesWave, @@ -242,7 +251,10 @@ const MyStreamWaveChat: React.FC = ({ initialSerialNo={dividerTarget ?? null} key={`unread-divider-${wave.id}`} > - +
{ if (type === "chat" && chatRestriction) { switch (chatRestriction) { @@ -19,7 +33,7 @@ export default function DropPlaceholder({ type, chatRestriction, submissionRestr case ChatRestriction.DISABLED: return "Chat is currently disabled for this wave"; default: { - throw new Error(`Unhandled chat restriction: ${chatRestriction}`); + return throwUnhandledRestriction("chat", String(chatRestriction)); } } } @@ -39,12 +53,22 @@ export default function DropPlaceholder({ type, chatRestriction, submissionRestr case SubmissionRestriction.MAX_DROPS_REACHED: return "You have reached the maximum number of drops allowed"; default: { - throw new Error(`Unhandled submission restriction: ${submissionRestriction}`); + return throwUnhandledRestriction( + "submission", + String(submissionRestriction) + ); } } } if (type === "both") { + if ( + chatRestriction === ChatRestriction.NOT_LOGGED_IN && + submissionRestriction === SubmissionRestriction.NOT_LOGGED_IN + ) { + return "Connect your wallet to participate in this wave"; + } + return "You cannot participate in this wave at the moment"; } @@ -52,7 +76,8 @@ export default function DropPlaceholder({ type, chatRestriction, submissionRestr }; const getColor = () => { - if (type === "chat" && chatRestriction === ChatRestriction.NOT_LOGGED_IN) return "tw-text-primary-400"; + if (type === "chat" && chatRestriction === ChatRestriction.NOT_LOGGED_IN) + return "tw-text-primary-400"; if (type === "submission") { switch (submissionRestriction) { case SubmissionRestriction.NOT_LOGGED_IN: @@ -71,10 +96,12 @@ export default function DropPlaceholder({ type, chatRestriction, submissionRestr }; return ( -
+
-

{getMessage()}

+

+ {getMessage()} +

); -} +} diff --git a/components/waves/drops/wave-drops-all/hooks/useWaveDropsNotificationRead.ts b/components/waves/drops/wave-drops-all/hooks/useWaveDropsNotificationRead.ts index 2b89cf30f2..5c33aae20d 100644 --- a/components/waves/drops/wave-drops-all/hooks/useWaveDropsNotificationRead.ts +++ b/components/waves/drops/wave-drops-all/hooks/useWaveDropsNotificationRead.ts @@ -4,6 +4,7 @@ import { commonApiPostWithoutBodyAndResponse } from "@/services/api/common-api"; interface UseWaveDropsNotificationReadParams { readonly waveId: string; + readonly enabled?: boolean | undefined; readonly removeWaveDeliveredNotifications: ( waveId: string ) => Promise | void; @@ -11,11 +12,16 @@ interface UseWaveDropsNotificationReadParams { export const useWaveDropsNotificationRead = ({ waveId, + enabled = true, removeWaveDeliveredNotifications, }: UseWaveDropsNotificationReadParams) => { const { invalidateNotifications } = useContext(ReactQueryWrapperContext); useEffect(() => { + if (!enabled) { + return; + } + const syncReadState = async () => { try { await Promise.resolve(removeWaveDeliveredNotifications(waveId)); @@ -33,5 +39,10 @@ export const useWaveDropsNotificationRead = ({ }; syncReadState(); - }, [waveId, removeWaveDeliveredNotifications, invalidateNotifications]); + }, [ + enabled, + waveId, + removeWaveDeliveredNotifications, + invalidateNotifications, + ]); }; diff --git a/components/waves/drops/wave-drops-all/index.tsx b/components/waves/drops/wave-drops-all/index.tsx index 7094aff636..34de7f24cf 100644 --- a/components/waves/drops/wave-drops-all/index.tsx +++ b/components/waves/drops/wave-drops-all/index.tsx @@ -97,6 +97,7 @@ const WaveDropsAllInner: React.FC = ({ useWaveDropsNotificationRead({ waveId, + enabled: Boolean(connectedProfile?.handle), removeWaveDeliveredNotifications, }); diff --git a/components/waves/layout/WavesLayout.tsx b/components/waves/layout/WavesLayout.tsx index 3e87aa1644..53b10327e6 100644 --- a/components/waves/layout/WavesLayout.tsx +++ b/components/waves/layout/WavesLayout.tsx @@ -10,7 +10,6 @@ import HeaderUserConnect from "../../header/user/HeaderUserConnect"; import UserSetUpProfileCta from "../../user/utils/set-up-profile/UserSetUpProfileCta"; import WavesDesktop from "../WavesDesktop"; import WavesMobile from "../WavesMobile"; -import PublicWaveShell from "../public/PublicWaveShell"; import WaveScreenMessage from "../WaveScreenMessage"; function getConnectPrompt( @@ -43,11 +42,13 @@ function getConnectPrompt( function getNotAuthenticatedContent({ activeWaveId, + children, containerClassName, isApp, isMobileDevice, }: { readonly activeWaveId: string | null; + readonly children: ReactNode; readonly containerClassName: string; readonly isApp: boolean; readonly isMobileDevice: boolean; @@ -71,7 +72,7 @@ function getNotAuthenticatedContent({ action={} /> ) : ( - + children )}
@@ -105,6 +106,7 @@ function WavesLayoutContent({ children }: { readonly children: ReactNode }) { } else if (contentState === "not-authenticated") { content = getNotAuthenticatedContent({ activeWaveId, + children, containerClassName, isApp, isMobileDevice, diff --git a/components/waves/public/LoggedOutSkeleton.tsx b/components/waves/public/LoggedOutSkeleton.tsx deleted file mode 100644 index 0b694247b3..0000000000 --- a/components/waves/public/LoggedOutSkeleton.tsx +++ /dev/null @@ -1,173 +0,0 @@ -const PREVIEW_ROWS = [ - { - id: "preview-1", - nameWidth: "tw-w-24", - timeWidth: "tw-w-12", - lines: ["tw-w-5/6", "tw-w-2/5"], - hasAttachment: false, - reactions: 0, - opacityClass: "tw-opacity-90", - }, - { - id: "preview-2", - nameWidth: "tw-w-32", - timeWidth: "tw-w-16", - lines: ["tw-w-11/12", "tw-w-full", "tw-w-4/5", "tw-w-3/5"], - hasAttachment: true, - reactions: 2, - opacityClass: "tw-opacity-60", - }, - { - id: "preview-3", - nameWidth: "tw-w-20", - timeWidth: "tw-w-10", - lines: ["tw-w-1/3"], - hasAttachment: false, - reactions: 1, - opacityClass: "tw-opacity-90", - }, - { - id: "preview-4", - nameWidth: "tw-w-28", - timeWidth: "tw-w-14", - lines: ["tw-w-3/4", "tw-w-5/6", "tw-w-2/5"], - hasAttachment: false, - reactions: 0, - opacityClass: "tw-opacity-60", - }, - { - id: "preview-5", - nameWidth: "tw-w-36", - timeWidth: "tw-w-12", - lines: ["tw-w-3/5"], - hasAttachment: true, - reactions: 3, - opacityClass: "tw-opacity-90", - }, - { - id: "preview-6", - nameWidth: "tw-w-24", - timeWidth: "tw-w-12", - lines: ["tw-w-full", "tw-w-4/5", "tw-w-11/12", "tw-w-1/5"], - hasAttachment: false, - reactions: 0, - opacityClass: "tw-opacity-60", - }, - { - id: "preview-7", - nameWidth: "tw-w-20", - timeWidth: "tw-w-14", - lines: ["tw-w-1/2"], - hasAttachment: false, - reactions: 0, - opacityClass: "tw-opacity-90", - }, -] as const; - -const REACTION_KEYS = ["first", "second", "third", "fourth"] as const; - -function SkeletonRows({ rowKeyPrefix }: { readonly rowKeyPrefix: string }) { - return ( - <> - {PREVIEW_ROWS.map((row) => ( -
-
- -
-
-
-
-
- -
- {row.lines.map((lineWidth) => ( -
- ))} -
- - {row.hasAttachment && ( -
- )} - - {row.reactions > 0 && ( -
- {REACTION_KEYS.slice(0, row.reactions).map((reactionKey) => ( -
- ))} -
- )} -
-
- ))} - - ); -} - -function PlaceholderSkeleton() { - return ( -
-
-
- - -
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
- -
-
-
-
-
- ); -} - -export default function LoggedOutSkeleton() { - return ( -