feat: PortalLink

Author: DanielRivers

package.json

@@ -97,7 +97,7 @@
   ],
   "private": false,
   "dependencies": {
-    "@kinde/js-utils": "0.16.0"
+    "@kinde/js-utils": "0.18.0-0"
   },
   "packageManager": "[email protected]+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
 }

pnpm-lock.yaml

@@ -0,0 +1,64 @@
+import "@testing-library/jest-dom/vitest";
+import {
+  act,
+  cleanup,
+  render,
+  screen,
+  fireEvent,
+} from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { PortalLink } from ".";
+import { useKindeAuth } from "../hooks/useKindeAuth";
+
+vi.mock("../hooks/useKindeAuth", () => ({
+  useKindeAuth: vi.fn(),
+}));
+
+describe("ProfileLink Component", () => {
+  const mockGeneratePortalUrl = vi.fn().mockReturnValue({
+    url: new URL("https://example.com/profile"),
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(useKindeAuth).mockReturnValue({
+      generatePortalUrl: mockGeneratePortalUrl,
+      store: {
+        getSessionItem: vi.fn().mockResolvedValue("example.com"),
+      },
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should render correctly when authed", async () => {
+    await act(async () => {
+      render(<PortalLink>Profile</PortalLink>);
+    });
+    const linkElement = screen.getByText("Profile");
+    expect(linkElement).toBeInTheDocument();
+  });
+
+  it("calls to generate profile link when clicked", async () => {
+    render(<PortalLink>Profile</PortalLink>);
+
+    const button = screen.getByRole("button", { name: "Profile" });
+    fireEvent.click(button);
+
+    expect(mockGeneratePortalUrl).toHaveBeenCalledTimes(1);
+  });
+
+  it("passes HTML button props correctly", () => {
+    render(
+      <PortalLink className="test-class" disabled>
+        Profile
+      </PortalLink>,
+    );
+
+    const button = screen.getByRole("button", { name: "Profile" });
+    expect(button).toHaveClass("test-class");
+    expect(button).toBeDisabled();
+  });
+});

src/components/PortalLink.test.tsx

@@ -0,0 +1,27 @@
+import React, { useCallback } from "react";
+import { useKindeAuth } from "../hooks/useKindeAuth";
+import { PortalLinkProps } from "../state/types";
+
+export function PortalLink({ children, ...props }: PortalLinkProps) {
+  const auth = useKindeAuth();
+
+  const viewProfile = useCallback(async () => {
+    const generatedUrl = await auth.generatePortalUrl({
+      subNav: props.subNav,
+      returnUrl: props.returnUrl || window.location.href,
+    });
+    window.location.href = generatedUrl.url.toString();
+  }, [auth, props.returnUrl, props.subNav]);
+
+  return (
+    <button
+      type="button"
+      {...props}
+      onClick={() => {
+        viewProfile();
+      }}
+    >
+      {children}
+    </button>
+  );
+}

src/components/PortalLink.tsx

@@ -1,3 +1,4 @@
 export { LoginLink } from "./LoginLink";
 export { RegisterLink } from "./RegisterLink";
 export { LogoutLink } from "./LogoutLink";
+export { PortalLink } from "./PortalLink";