From c903528df231ebc1b94745aa8c96bde4463e9ecd Mon Sep 17 00:00:00 2001 From: "Alec M." Date: Sun, 15 Sep 2024 10:08:27 -0400 Subject: [PATCH 1/6] List chip embeds missing cursor pointer Fixes #206 --- src/components/ListLinkChip/index.test.tsx | 120 +++++++++++++++++++++ src/components/ListLinkChip/index.tsx | 1 + src/hooks/useListLookup.ts | 17 ++- 3 files changed, 129 insertions(+), 9 deletions(-) create mode 100644 src/components/ListLinkChip/index.test.tsx diff --git a/src/components/ListLinkChip/index.test.tsx b/src/components/ListLinkChip/index.test.tsx new file mode 100644 index 00000000..06d005d9 --- /dev/null +++ b/src/components/ListLinkChip/index.test.tsx @@ -0,0 +1,120 @@ +import React from "react"; +import { render } from "@testing-library/react"; +import { BrowserRouter as Router } from "react-router-dom"; +import ListLinkChip from "./index"; +import { LookupStatus, ListLookupResponse } from "../../hooks/useListLookup"; + +const mockUseListLookup = jest.fn(); +jest.mock("../../hooks/useListLookup", () => ({ + ...jest.requireActual("../../hooks/useListLookup"), + __esModule: true, + default: (uuid: string) => mockUseListLookup(uuid), +})); + +describe("Basic Functionality", () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + it("should render a chip embed for the list if it exists", () => { + mockUseListLookup.mockReturnValue([ + { + status: LookupStatus.Success, + list: { uuid: "test-uuid", name: "Test List" } as List, + }, + jest.fn(), + jest.fn(), + ]); + + const { getByTestId } = render( + + + + ); + + expect(getByTestId("list-chip")).toBeInTheDocument(); + expect(getByTestId("list-chip")).toHaveTextContent("Test List"); + expect(getByTestId("list-chip")).toHaveAttribute("href", "/list/test-uuid"); + expect(getByTestId("list-chip")).toHaveStyle("cursor: pointer;"); + }); + + it("should render a link to the list page if the list does not have a name", () => { + mockUseListLookup.mockReturnValue([ + { + status: LookupStatus.Success, + list: { uuid: "test-uuid" } as List, + }, + jest.fn(), + jest.fn(), + ]); + + const { getByText, queryByTestId } = render( + + + + ); + + expect(getByText(`${window.origin}/list/test-uuid`)).toBeInTheDocument(); + expect(queryByTestId("list-chip")).not.toBeInTheDocument(); + }); + + it("should render a link to the list page if the list does not exist", () => { + mockUseListLookup.mockReturnValue([ + { + status: LookupStatus.Success, + list: null, + }, + jest.fn(), + jest.fn(), + ]); + + const { getByText, queryByTestId } = render( + + + + ); + + expect(getByText(`${window.origin}/list/test-uuid`)).toBeInTheDocument(); + expect(queryByTestId("list-chip")).not.toBeInTheDocument(); + }); + + it("should render a link to the list page if the list lookup fails", () => { + mockUseListLookup.mockReturnValue([ + { + status: LookupStatus.Error, + list: null, + }, + jest.fn(), + jest.fn(), + ]); + + const { getByText, queryByTestId } = render( + + + + ); + + expect(getByText(`${window.origin}/list/test-uuid`)).toBeInTheDocument(); + expect(queryByTestId("list-chip")).not.toBeInTheDocument(); + }); + + it("should render a link to the list page if the list lookup is pending", () => { + mockUseListLookup.mockReturnValue([ + { + status: LookupStatus.Loading, + list: null, + }, + jest.fn(), + jest.fn(), + ]); + + const { getByText, queryByTestId } = render( + + + + ); + + expect(getByText(`${window.origin}/list/test-uuid`)).toBeInTheDocument(); + expect(queryByTestId("list-chip")).not.toBeInTheDocument(); + }); +}); diff --git a/src/components/ListLinkChip/index.tsx b/src/components/ListLinkChip/index.tsx index 64747819..b6d2b2fd 100644 --- a/src/components/ListLinkChip/index.tsx +++ b/src/components/ListLinkChip/index.tsx @@ -30,6 +30,7 @@ const ListLinkChip: FC = ({ uuid }: Props) => { to={`/list/${uuid}`} size="small" data-testid="list-chip" + clickable /> ); }; diff --git a/src/hooks/useListLookup.ts b/src/hooks/useListLookup.ts index fed2ea80..f18e65f2 100644 --- a/src/hooks/useListLookup.ts +++ b/src/hooks/useListLookup.ts @@ -13,21 +13,20 @@ export enum LookupStatus { Error = "error", } +export type ListLookupResponse = [ + { status: LookupStatus; list: List | null }, + editList: (list: Partial) => Promise, + deleteList: () => Promise, +]; + /** * A hook to cache and lookup List information by UUID * * @param uuid the uuid to lookup * @param refetch if true, will refetch the list - * @returns [{ status, List }, (list: Partial) => Promise, () => Promise] + * @returns ListLookupResponse */ -const useListLookup = ( - uuid: List["uuid"], - refetch = false -): [ - { status: LookupStatus; list: List | null }, - (list: Partial) => Promise, - () => Promise, -] => { +const useListLookup = (uuid: List["uuid"], refetch = false): ListLookupResponse => { const { token, profile: authProfile } = useAuthProvider(); const [cache, setCache] = useSessionStorage(CacheKeys.LIST_LOOKUP, {}); const cachedValue: List | null = cache[uuid] || null; From 5c3a68dfe63e719647547e21c089f8e25c11b1af Mon Sep 17 00:00:00 2001 From: "Alec M." Date: Sun, 15 Sep 2024 10:24:27 -0400 Subject: [PATCH 2/6] fix: MentionChip missing interactivity --- src/components/ListLinkChip/index.test.tsx | 58 +++++++++-------- src/components/MentionChip/index.test.tsx | 73 ++++++++++++++++++++++ src/components/MentionChip/index.tsx | 1 + src/hooks/useUUIDLookup.ts | 8 +-- 4 files changed, 110 insertions(+), 30 deletions(-) create mode 100644 src/components/MentionChip/index.test.tsx diff --git a/src/components/ListLinkChip/index.test.tsx b/src/components/ListLinkChip/index.test.tsx index 06d005d9..05f85f2a 100644 --- a/src/components/ListLinkChip/index.test.tsx +++ b/src/components/ListLinkChip/index.test.tsx @@ -1,6 +1,7 @@ import React from "react"; import { render } from "@testing-library/react"; import { BrowserRouter as Router } from "react-router-dom"; +import userEvent from "@testing-library/user-event"; import ListLinkChip from "./index"; import { LookupStatus, ListLookupResponse } from "../../hooks/useListLookup"; @@ -26,11 +27,7 @@ describe("Basic Functionality", () => { jest.fn(), ]); - const { getByTestId } = render( - - - - ); + const { getByTestId } = render(, { wrapper: Router }); expect(getByTestId("list-chip")).toBeInTheDocument(); expect(getByTestId("list-chip")).toHaveTextContent("Test List"); @@ -38,7 +35,24 @@ describe("Basic Functionality", () => { expect(getByTestId("list-chip")).toHaveStyle("cursor: pointer;"); }); - it("should render a link to the list page if the list does not have a name", () => { + it("should open the list page when the chip is clicked", async () => { + mockUseListLookup.mockReturnValue([ + { + status: LookupStatus.Success, + list: { uuid: "test-uuid", name: "Test List" } as List, + }, + jest.fn(), + jest.fn(), + ]); + + const { getByTestId } = render(, { wrapper: Router }); + + await userEvent.click(getByTestId("list-chip")); + + expect(window.location.pathname).toBe("/list/test-uuid"); + }); + + it("should render the original link to the list page if the list does not have a name", () => { mockUseListLookup.mockReturnValue([ { status: LookupStatus.Success, @@ -48,11 +62,9 @@ describe("Basic Functionality", () => { jest.fn(), ]); - const { getByText, queryByTestId } = render( - - - - ); + const { getByText, queryByTestId } = render(, { + wrapper: Router, + }); expect(getByText(`${window.origin}/list/test-uuid`)).toBeInTheDocument(); expect(queryByTestId("list-chip")).not.toBeInTheDocument(); @@ -68,11 +80,9 @@ describe("Basic Functionality", () => { jest.fn(), ]); - const { getByText, queryByTestId } = render( - - - - ); + const { getByText, queryByTestId } = render(, { + wrapper: Router, + }); expect(getByText(`${window.origin}/list/test-uuid`)).toBeInTheDocument(); expect(queryByTestId("list-chip")).not.toBeInTheDocument(); @@ -88,11 +98,9 @@ describe("Basic Functionality", () => { jest.fn(), ]); - const { getByText, queryByTestId } = render( - - - - ); + const { getByText, queryByTestId } = render(, { + wrapper: Router, + }); expect(getByText(`${window.origin}/list/test-uuid`)).toBeInTheDocument(); expect(queryByTestId("list-chip")).not.toBeInTheDocument(); @@ -108,11 +116,9 @@ describe("Basic Functionality", () => { jest.fn(), ]); - const { getByText, queryByTestId } = render( - - - - ); + const { getByText, queryByTestId } = render(, { + wrapper: Router, + }); expect(getByText(`${window.origin}/list/test-uuid`)).toBeInTheDocument(); expect(queryByTestId("list-chip")).not.toBeInTheDocument(); diff --git a/src/components/MentionChip/index.test.tsx b/src/components/MentionChip/index.test.tsx new file mode 100644 index 00000000..3addb98b --- /dev/null +++ b/src/components/MentionChip/index.test.tsx @@ -0,0 +1,73 @@ +import React from "react"; +import { render } from "@testing-library/react"; +import { BrowserRouter as Router } from "react-router-dom"; +import userEvent from "@testing-library/user-event"; +import MentionChip from "./index"; +import { LookupStatus, UUIDLookupResponse } from "../../hooks/useUUIDLookup"; + +const mockUseUUIDLookup = jest.fn(); +jest.mock("../../hooks/useUUIDLookup", () => ({ + ...jest.requireActual("../../hooks/useUUIDLookup"), + __esModule: true, + default: (handle: string) => mockUseUUIDLookup(handle), +})); + +describe("Basic Functionality", () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + it("should render a chip embed for the profile if it exists", () => { + mockUseUUIDLookup.mockReturnValue([LookupStatus.Success, { uuid: "test-user-uuid" }]); + + const { getByTestId } = render(, { wrapper: Router }); + + expect(getByTestId("mention-chip")).toBeInTheDocument(); + expect(getByTestId("mention-chip")).toHaveTextContent("test-user-handle"); + expect(getByTestId("mention-chip")).toHaveAttribute("href", "/profile/test-user-uuid"); + expect(getByTestId("mention-chip")).toHaveStyle("cursor: pointer;"); + }); + + it("should open the profile page when the chip is clicked", async () => { + mockUseUUIDLookup.mockReturnValue([LookupStatus.Success, { uuid: "test-user-uuid" }]); + + const { getByTestId } = render(, { wrapper: Router }); + + await userEvent.click(getByTestId("mention-chip")); + + expect(window.location.pathname).toBe("/profile/test-user-uuid"); + }); + + it("should render the original handle if the lookup returns no uuid", () => { + mockUseUUIDLookup.mockReturnValue([LookupStatus.Success, { uuid: null }]); + + const { getByText, queryByTestId } = render(, { + wrapper: Router, + }); + + expect(getByText("@test-user-handle")).toBeInTheDocument(); + expect(queryByTestId("mention-chip")).not.toBeInTheDocument(); + }); + + it("should render a link to the list page if the list lookup fails", () => { + mockUseUUIDLookup.mockReturnValue([LookupStatus.Error, { uuid: null }]); + + const { getByText, queryByTestId } = render(, { + wrapper: Router, + }); + + expect(getByText("@test-user-handle")).toBeInTheDocument(); + expect(queryByTestId("mention-chip")).not.toBeInTheDocument(); + }); + + it("should render a link to the list page if the list lookup is pending", () => { + mockUseUUIDLookup.mockReturnValue([LookupStatus.Loading, { uuid: null }]); + + const { getByText, queryByTestId } = render(, { + wrapper: Router, + }); + + expect(getByText("@test-user-handle")).toBeInTheDocument(); + expect(queryByTestId("mention-chip")).not.toBeInTheDocument(); + }); +}); diff --git a/src/components/MentionChip/index.tsx b/src/components/MentionChip/index.tsx index 6bffc94f..a1b9c023 100644 --- a/src/components/MentionChip/index.tsx +++ b/src/components/MentionChip/index.tsx @@ -29,6 +29,7 @@ const MentionChip: FC = ({ handle }: Props) => { to={`/profile/${uuid}`} size="small" data-testid="mention-chip" + clickable /> ); }; diff --git a/src/hooks/useUUIDLookup.ts b/src/hooks/useUUIDLookup.ts index 56824386..1ea84e9e 100644 --- a/src/hooks/useUUIDLookup.ts +++ b/src/hooks/useUUIDLookup.ts @@ -12,15 +12,15 @@ export enum LookupStatus { Error = "error", } +export type UUIDLookupResponse = [LookupStatus, { uuid: Profile["uuid"] | null }]; + /** * A hook to cache and lookup a uuid by username * * @param username username to lookup - * @returns [status, { uuid }] + * @returns UUIDLookupResponse */ -const useUUIDLookup = ( - username: Profile["username"] -): [LookupStatus, { uuid: Profile["uuid"] | null }] => { +const useUUIDLookup = (username: Profile["username"]): UUIDLookupResponse => { const { token } = useAuthProvider(); const [cache, setCache] = useSessionStorage(CacheKeys.UUID_LOOKUP, {}); const cachedValue: Profile["uuid"] | null = cache[username] || null; From baabf7286449bd08a2d9c5e326cb7db444f3f076 Mon Sep 17 00:00:00 2001 From: "Alec M." Date: Sun, 15 Sep 2024 10:27:57 -0400 Subject: [PATCH 3/6] fix: VehicleChip missing interactivity --- src/components/VehicleChip/index.test.tsx | 28 +++++++++++++++++++++++ src/components/VehicleChip/index.tsx | 1 + 2 files changed, 29 insertions(+) create mode 100644 src/components/VehicleChip/index.test.tsx diff --git a/src/components/VehicleChip/index.test.tsx b/src/components/VehicleChip/index.test.tsx new file mode 100644 index 00000000..e80e5925 --- /dev/null +++ b/src/components/VehicleChip/index.test.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import { render } from "@testing-library/react"; +import { BrowserRouter as Router } from "react-router-dom"; +import userEvent from "@testing-library/user-event"; +import VehicleChip from "./index"; + +describe("Basic Functionality", () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + it("should render a chip embed for the vehicle VIN", () => { + const { getByTestId } = render(, { wrapper: Router }); + + expect(getByTestId("vehicle-chip")).toBeInTheDocument(); + expect(getByTestId("vehicle-chip")).toHaveTextContent("1G1Y82D44L50079EX"); + expect(getByTestId("vehicle-chip")).toHaveAttribute("href", "/vehicle/1G1Y82D44L50079EX"); + expect(getByTestId("vehicle-chip")).toHaveStyle("cursor: pointer;"); + }); + + it("should open the vehicle page when the chip is clicked", async () => { + const { getByTestId } = render(, { wrapper: Router }); + + await userEvent.click(getByTestId("vehicle-chip")); + + expect(window.location.pathname).toBe("/vehicle/1G1Y82D44L50079EX"); + }); +}); diff --git a/src/components/VehicleChip/index.tsx b/src/components/VehicleChip/index.tsx index 19279540..a77c88b4 100644 --- a/src/components/VehicleChip/index.tsx +++ b/src/components/VehicleChip/index.tsx @@ -25,6 +25,7 @@ const VehicleChip: FC = ({ vin }: Props) => ( to={`/vehicle/${vin}`} size="small" data-testid="vehicle-chip" + clickable /> ); From 90894a0f34c90bdf2705540bb1cb075891f57e80 Mon Sep 17 00:00:00 2001 From: "Alec M." Date: Sun, 15 Sep 2024 10:49:14 -0400 Subject: [PATCH 4/6] fix: TroubleCodeChip missing test coverage --- src/components/TroubleCodeChip/index.test.tsx | 78 +++++++++++++++++++ src/hooks/useTroubleCodeLookup.ts | 11 +-- 2 files changed, 82 insertions(+), 7 deletions(-) create mode 100644 src/components/TroubleCodeChip/index.test.tsx diff --git a/src/components/TroubleCodeChip/index.test.tsx b/src/components/TroubleCodeChip/index.test.tsx new file mode 100644 index 00000000..8100c810 --- /dev/null +++ b/src/components/TroubleCodeChip/index.test.tsx @@ -0,0 +1,78 @@ +import React from "react"; +import { render, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import TroubleCodeChip from "./index"; +import { LookupStatus, TroubleCodeLookupResponse } from "../../hooks/useTroubleCodeLookup"; + +const mockUseTroubleCodeLookup = jest.fn(); +jest.mock("../../hooks/useTroubleCodeLookup", () => ({ + ...jest.requireActual("../../hooks/useTroubleCodeLookup"), + __esModule: true, + default: (code: string) => mockUseTroubleCodeLookup(code), +})); + +describe("Basic Functionality", () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + it("should render a chip embed for the trouble code if a description exists", () => { + mockUseTroubleCodeLookup.mockReturnValue([ + LookupStatus.Success, + { description: "test description of OBD code" }, + ]); + + const { getByTestId } = render(); + + expect(getByTestId("trouble-code-chip")).toBeInTheDocument(); + expect(getByTestId("trouble-code-chip")).toHaveTextContent("P0301"); + }); + + it("should render a tooltip with the description if a description exists", async () => { + mockUseTroubleCodeLookup.mockReturnValue([ + LookupStatus.Success, + { description: "Cylinder 1 Misfire Detected" }, + ]); + + const { getByTestId, findByRole } = render(); + + await userEvent.hover(getByTestId("trouble-code-chip")); + + const tooltip = await findByRole("tooltip"); + expect(tooltip).toBeInTheDocument(); + expect(tooltip).toHaveTextContent("Cylinder 1 Misfire Detected"); + + await userEvent.unhover(getByTestId("trouble-code-chip")); + + await waitFor(() => { + expect(tooltip).not.toBeInTheDocument(); + }); + }); + + it("should render the plain code if no description exists", () => { + mockUseTroubleCodeLookup.mockReturnValue([LookupStatus.Error, { description: null }]); + + const { getByText, queryByTestId } = render(); + + expect(getByText("P0999")).toBeInTheDocument(); + expect(queryByTestId("trouble-code-chip")).not.toBeInTheDocument(); + }); + + it("should render the plain code if the lookup fails", () => { + mockUseTroubleCodeLookup.mockReturnValue([LookupStatus.Error, { description: null }]); + + const { getByText, queryByTestId } = render(); + + expect(getByText("XXXXX")).toBeInTheDocument(); + expect(queryByTestId("trouble-code-chip")).not.toBeInTheDocument(); + }); + + it("should render the plain code if the lookup is pending", () => { + mockUseTroubleCodeLookup.mockReturnValue([LookupStatus.Loading, { description: null }]); + + const { getByText, queryByTestId } = render(); + + expect(getByText("XXXXX")).toBeInTheDocument(); + expect(queryByTestId("trouble-code-chip")).not.toBeInTheDocument(); + }); +}); diff --git a/src/hooks/useTroubleCodeLookup.ts b/src/hooks/useTroubleCodeLookup.ts index 3f8e2176..93f13883 100644 --- a/src/hooks/useTroubleCodeLookup.ts +++ b/src/hooks/useTroubleCodeLookup.ts @@ -7,20 +7,17 @@ export enum LookupStatus { Error = "error", } -type LookupResult = { - description: string | null; -}; +export type TroubleCodeLookupResponse = [LookupStatus, { description: string | null }]; /** * A hook to lookup an OBD-ii code and return details on it * - * NOTE: This is prep for a future network-based - * lookup feature. + * NOTE: This is prep for a future network-based lookup feature. * * @param {string} code OBD-ii code to lookup - * @returns [status, LookupResult] + * @returns {TroubleCodeLookupResponse} */ -const useTroubleCodeLookup = (code: string): [LookupStatus, LookupResult] => { +const useTroubleCodeLookup = (code: string): TroubleCodeLookupResponse => { const description: string | null = OBDii[code] || null; const [status] = useState(description ? LookupStatus.Success : LookupStatus.Error); From bff1e1d3d5ade1f985fbe82c1342a71faa456ba4 Mon Sep 17 00:00:00 2001 From: "Alec M." Date: Sun, 15 Sep 2024 11:05:15 -0400 Subject: [PATCH 5/6] fix: ProfileLinkChip missing interactivity --- src/components/ProfileLinkChip/index.test.tsx | 97 +++++++++++++++++++ src/components/ProfileLinkChip/index.tsx | 10 +- src/hooks/useProfileLookup.ts | 17 ++-- 3 files changed, 109 insertions(+), 15 deletions(-) create mode 100644 src/components/ProfileLinkChip/index.test.tsx diff --git a/src/components/ProfileLinkChip/index.test.tsx b/src/components/ProfileLinkChip/index.test.tsx new file mode 100644 index 00000000..80e953c6 --- /dev/null +++ b/src/components/ProfileLinkChip/index.test.tsx @@ -0,0 +1,97 @@ +import React from "react"; +import { render } from "@testing-library/react"; +import { BrowserRouter as Router } from "react-router-dom"; +import userEvent from "@testing-library/user-event"; +import ProfileLinkChip from "./index"; +import { LookupStatus, ProfileLookupResponse } from "../../hooks/useProfileLookup"; + +const mockUseProfileLookup = jest.fn(); +jest.mock("../../hooks/useProfileLookup", () => ({ + ...jest.requireActual("../../hooks/useProfileLookup"), + __esModule: true, + default: (handle: string) => mockUseProfileLookup(handle), +})); + +describe("Basic Functionality", () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + it("should render a chip embed for the username if the profile exists", () => { + mockUseProfileLookup.mockReturnValue([ + { status: LookupStatus.Success, profile: { username: "test_user" } as Profile }, + jest.fn(), + jest.fn(), + ]); + + const { getByTestId } = render(, { + wrapper: Router, + }); + + expect(getByTestId("mention-chip")).toBeInTheDocument(); + expect(getByTestId("mention-chip")).toHaveTextContent("test_user"); + expect(getByTestId("mention-chip")).toHaveAttribute("href", "/profile/test-uuid"); + expect(getByTestId("mention-chip")).toHaveStyle("cursor: pointer;"); + }); + + it("should open the profile page when the chip is clicked", async () => { + mockUseProfileLookup.mockReturnValue([ + { status: LookupStatus.Success, profile: { username: "test_user" } as Profile }, + jest.fn(), + jest.fn(), + ]); + + const { getByTestId } = render(, { + wrapper: Router, + }); + + await userEvent.click(getByTestId("mention-chip")); + + expect(window.location.pathname).toBe("/profile/test-user-uuid"); + }); + + it("should render the localized profile link if the lookup returns no profile", () => { + mockUseProfileLookup.mockReturnValue([ + { status: LookupStatus.Success, profile: null }, + jest.fn(), + jest.fn(), + ]); + + const { getByText, queryByTestId } = render(, { + wrapper: Router, + }); + + expect(getByText("http://localhost/profile/test-nonexistent-uuid")).toBeInTheDocument(); + expect(queryByTestId("mention-chip")).not.toBeInTheDocument(); + }); + + it("should render the localized profile link if the lookup fails", () => { + mockUseProfileLookup.mockReturnValue([ + { status: LookupStatus.Error, profile: null }, + jest.fn(), + jest.fn(), + ]); + + const { getByText, queryByTestId } = render(, { + wrapper: Router, + }); + + expect(getByText("http://localhost/profile/test-user-handle")).toBeInTheDocument(); + expect(queryByTestId("mention-chip")).not.toBeInTheDocument(); + }); + + it("should render the localized profile link if the lookup is pending", () => { + mockUseProfileLookup.mockReturnValue([ + { status: LookupStatus.Loading, profile: null }, + jest.fn(), + jest.fn(), + ]); + + const { getByText, queryByTestId } = render(, { + wrapper: Router, + }); + + expect(getByText("http://localhost/profile/test-user-handle")).toBeInTheDocument(); + expect(queryByTestId("mention-chip")).not.toBeInTheDocument(); + }); +}); diff --git a/src/components/ProfileLinkChip/index.tsx b/src/components/ProfileLinkChip/index.tsx index 183f1829..27d898af 100644 --- a/src/components/ProfileLinkChip/index.tsx +++ b/src/components/ProfileLinkChip/index.tsx @@ -8,13 +8,10 @@ type Props = { }; /** - * A profile UUID chip that returns a `@mention` chip - * if the user exists. Otherwise, returns a localized - * link to the profile. - * - * Not to be confused with the `` itself, which - * is used when `@username` is in the post body. + * A profile embed chip used to pretty-link to a user's profile when a full profile link + * is in a message. * + * @note This is the opposite of ``, which is used when a username is known. * @param {Props} props * @returns {JSX.Element} */ @@ -33,6 +30,7 @@ const ProfileLinkChip: FC = ({ uuid }: Props) => { to={`/profile/${uuid}`} size="small" data-testid="mention-chip" + clickable /> ); }; diff --git a/src/hooks/useProfileLookup.ts b/src/hooks/useProfileLookup.ts index afbbe718..8998e79f 100644 --- a/src/hooks/useProfileLookup.ts +++ b/src/hooks/useProfileLookup.ts @@ -13,21 +13,20 @@ export enum LookupStatus { Error = "error", } +export type ProfileLookupResponse = [ + { status: LookupStatus; profile: Profile | null }, + editProfile: (profile: Partial) => Promise, + editProfileImage: (image: FileList) => Promise, +]; + /** * A hook to cache and lookup a Profile by UUID. * * @param uuid the uuid to lookup * @param refetch whether to refetch the profile even if it's cached - * @returns [{ status, Profile }, (profile: Partial) => Promise, (image: FileList) => Promise] + * @returns ProfileLookupResponse */ -const useProfileLookup = ( - uuid: Profile["uuid"], - refetch = false -): [ - { status: LookupStatus; profile: Profile | null }, - (profile: Partial) => Promise, - (image: FileList) => Promise, -] => { +const useProfileLookup = (uuid: Profile["uuid"], refetch = false): ProfileLookupResponse => { const { token, profile: authProfile } = useAuthProvider(); const [cache, setCache] = useSessionStorage(CacheKeys.PROFILE, {}); From 1870410fbf18816e49c3436d19e0d6d5c3277aad Mon Sep 17 00:00:00 2001 From: "Alec M." Date: Sun, 15 Sep 2024 11:10:54 -0400 Subject: [PATCH 6/6] fix: Profile website_url chip missing interactivity --- src/pages/profile/View.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/profile/View.tsx b/src/pages/profile/View.tsx index dd42d68f..af5e34af 100644 --- a/src/pages/profile/View.tsx +++ b/src/pages/profile/View.tsx @@ -303,6 +303,7 @@ const View: FC = ({ uuid }: Props) => { label={profile.website_url} variant="filled" size="small" + clickable /> )}