wip

src/app/chat/components/self.tsx

@@ -1,21 +1,16 @@
 import { Image } from "@shared/image";
-import { Link } from "@shared/link";
 import { DEFAULT_AVATAR } from "@stores/constants";
-import { usePageContext } from "@utils/hooks/usePageContext";
 import { useProfile } from "@utils/hooks/useProfile";
 import { shortenKey } from "@utils/shortenKey";
+import { NavLink } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
 
 export function ChatsListSelfItem({ data }: { data: any }) {
-	const pageContext = usePageContext();
-	const searchParams: any = pageContext.urlParsed.search;
-	const pagePubkey = searchParams.pubkey;
-
-	const { user, isLoading } = useProfile(data.pubkey);
+	const { status, user, isFetching } = useProfile(data.pubkey);
 
 	return (
 		<>
-			{isLoading && !user ? (
+			{status === "loading" && isFetching ? (
 				<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
 					<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
 					<div>
@@ -23,12 +18,14 @@ export function ChatsListSelfItem({ data }: { data: any }) {
 					</div>
 				</div>
 			) : (
-				<Link
-					href={`/app/chat?pubkey=${data.pubkey}`}
-					className={twMerge(
-						"inline-flex h-9 items-center gap-2.5 rounded-md px-2.5",
-						pagePubkey === data.pubkey ? "bg-zinc-900 text-zinc-100" : "",
-					)}
+				<NavLink
+					to={`/app/chat/${data.pubkey}`}
+					className={({ isActive }) =>
+						twMerge(
+							"inline-flex h-9 items-center gap-2.5 rounded-md px-2.5",
+							isActive ? "bg-zinc-900/50 text-zinc-100" : "",
+						)
+					}
 				>
 					<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
 						<Image
@@ -44,7 +41,7 @@ export function ChatsListSelfItem({ data }: { data: any }) {
 						</h5>
 						<span className="text-zinc-500">(you)</span>
 					</div>
-				</Link>
+				</NavLink>
 			)}
 		</>
 	);