make server room card view btn clickable

src/app/components/room-card/RoomCard.tsx

@@ -29,6 +29,7 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { getResizeObserverEntry, useResizeObserver } from '../../hooks/useResizeObserver';
 import { onEnterOrSpace } from '../../utils/keyboard';
 import { RoomType } from '../../../types/matrix/room';
+import { useJoinedRoomId } from '../../hooks/useJoinedRoomId';
 
 type GridColumnCount = '1' | '2' | '3';
 const getGridColumnCount = (gridWidth: number): GridColumnCount => {
@@ -143,7 +144,7 @@ function ErrorDialog({
 
 type RoomCardProps = {
   roomIdOrAlias: string;
-  joinedRoomId?: string;
+  allRooms: string[];
   avatarUrl?: string;
   name?: string;
   topic?: string;
@@ -157,7 +158,7 @@ export const RoomCard = as<'div', RoomCardProps>(
   (
     {
       roomIdOrAlias,
-      joinedRoomId,
+      allRooms,
       avatarUrl,
       name,
       topic,
@@ -173,6 +174,7 @@ export const RoomCard = as<'div', RoomCardProps>(
     const avatar = avatarUrl && mx.mxcUrlToHttp(avatarUrl, 96, 96, 'crop');
     const fallbackName = getMxIdLocalPart(roomIdOrAlias) ?? roomIdOrAlias;
     const fallbackTopic = roomIdOrAlias;
+    const joinedRoomId = useJoinedRoomId(allRooms, roomIdOrAlias);
 
     const [joinState, join] = useAsyncCallback<Room, MatrixError, []>(
       useCallback(() => mx.joinRoom(roomIdOrAlias), [mx, roomIdOrAlias])

src/app/hooks/useJoinedRoomId.ts

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { useMatrixClient } from './useMatrixClient';
+
+import { getCanonicalAliasRoomId, isRoomAlias } from '../utils/matrix';
+
+export const useJoinedRoomId = (allRooms: string[], roomIdOrAlias: string): string | undefined => {
+  const mx = useMatrixClient();
+
+  const joinedRoomId = useMemo(() => {
+    const roomId = isRoomAlias(roomIdOrAlias)
+      ? getCanonicalAliasRoomId(mx, roomIdOrAlias)
+      : roomIdOrAlias;
+
+    if (roomId && allRooms.includes(roomId)) return roomId;
+    return undefined;
+  }, [mx, allRooms, roomIdOrAlias]);
+
+  return joinedRoomId;
+};

src/app/pages/client/explore/Featured.tsx

@@ -1,15 +1,8 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { Box, Icon, Icons, Scroll, Text } from 'folds';
-import { useNavigate } from 'react-router-dom';
 import { useAtomValue } from 'jotai';
 import { useClientConfig } from '../../../hooks/useClientConfig';
 import { RoomCard, RoomCardGrid } from '../../../components/room-card';
-import {
-  getCanonicalAliasOrRoomId,
-  getCanonicalAliasRoomId,
-  isRoomAlias,
-} from '../../../utils/matrix';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { RoomSummaryLoader } from '../../../components/RoomSummaryLoader';
 import {
@@ -20,54 +13,14 @@ import {
   PageHeroSection,
 } from '../../../components/page';
 import { RoomTopicViewer } from '../../../components/room-topic-viewer';
-import { getHomeRoomPath, getSpacePath, getSpaceRoomPath } from '../../pathUtils';
-import { getOrphanParents } from '../../../utils/room';
-import { roomToParentsAtom } from '../../../state/room/roomToParents';
 import * as css from './style.css';
+import { useRoomNavigate } from './hooks';
 
 export function FeaturedRooms() {
-  const mx = useMatrixClient();
   const { featuredCommunities } = useClientConfig();
   const { rooms, spaces } = featuredCommunities ?? {};
   const allRooms = useAtomValue(allRoomsAtom);
-  const navigate = useNavigate();
+  const { navigateSpace, navigateRoom } = useRoomNavigate();
-  const roomToParents = useAtomValue(roomToParentsAtom);
-
-  const joinedRoomId = useCallback(
-    (roomIdOrAlias: string): string | undefined => {
-      const roomId = isRoomAlias(roomIdOrAlias)
-        ? getCanonicalAliasRoomId(mx, roomIdOrAlias)
-        : roomIdOrAlias;
-
-      if (roomId && allRooms.includes(roomId)) return roomId;
-      return undefined;
-    },
-    [mx, allRooms]
-  );
-
-  const navigateSpace = useCallback(
-    (roomId: string) => {
-      const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, roomId);
-      navigate(getSpacePath(roomIdOrAlias));
-    },
-    [mx, navigate]
-  );
-
-  const navigateRoom = useCallback(
-    (roomId: string) => {
-      const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, roomId);
-
-      const orphanParents = getOrphanParents(roomToParents, roomId);
-      if (orphanParents.length > 0) {
-        const pSpaceIdOrAlias = getCanonicalAliasOrRoomId(mx, orphanParents[0]);
-        navigate(getSpaceRoomPath(pSpaceIdOrAlias, roomIdOrAlias));
-        return;
-      }
-
-      navigate(getHomeRoomPath(roomIdOrAlias));
-    },
-    [mx, navigate, roomToParents]
-  );
 
   return (
     <Page>
@@ -93,7 +46,7 @@ export function FeaturedRooms() {
                             {(roomSummary) => (
                               <RoomCard
                                 roomIdOrAlias={roomIdOrAlias}
-                                joinedRoomId={joinedRoomId(roomIdOrAlias)}
+                                allRooms={allRooms}
                                 avatarUrl={roomSummary?.avatar_url}
                                 name={roomSummary?.name}
                                 topic={roomSummary?.topic}
@@ -122,7 +75,7 @@ export function FeaturedRooms() {
                             {(roomSummary) => (
                               <RoomCard
                                 roomIdOrAlias={roomIdOrAlias}
-                                joinedRoomId={joinedRoomId(roomIdOrAlias)}
+                                allRooms={allRooms}
                                 avatarUrl={roomSummary?.avatar_url}
                                 name={roomSummary?.name}
                                 topic={roomSummary?.topic}

src/app/pages/client/explore/Server.tsx

@@ -25,6 +25,7 @@ import {
 } from 'folds';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import FocusTrap from 'focus-trap-react';
+import { useAtomValue } from 'jotai';
 import { useQuery } from '@tanstack/react-query';
 import { MatrixClient, Method, RoomType } from 'matrix-js-sdk';
 import { Page, PageContent, PageContentCenter, PageHeader } from '../../../components/page';
@@ -34,6 +35,8 @@ import { RoomCard, RoomCardBase, RoomCardGrid } from '../../../components/room-c
 import { ExploreServerPathSearchParams } from '../../paths';
 import { getExploreServerPath, withSearchParam } from '../../pathUtils';
 import * as css from './style.css';
+import { allRoomsAtom } from '../../../state/room-list/roomList';
+import { useRoomNavigate } from './hooks';
 
 const getServerSearchParams = (searchParams: URLSearchParams): ExploreServerPathSearchParams => ({
   limit: searchParams.get('limit') ?? undefined,
@@ -224,6 +227,9 @@ function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
 export function PublicRooms() {
   const { server } = useParams();
   const mx = useMatrixClient();
+  const allRooms = useAtomValue(allRoomsAtom);
+  const { navigateSpace, navigateRoom } = useRoomNavigate();
+
   const [searchParams] = useSearchParams();
   const serverSearchParams = getServerSearchParams(searchParams);
   const isSearch = !!serverSearchParams.term;
@@ -434,12 +440,17 @@ export function PublicRooms() {
                             <RoomCard
                               key={chunkRoom.room_id}
                               roomIdOrAlias={chunkRoom.canonical_alias ?? chunkRoom.room_id}
-                              joinedRoomId={mx.getRoom(chunkRoom.room_id)?.roomId}
+                              allRooms={allRooms}
                               avatarUrl={chunkRoom.avatar_url}
                               name={chunkRoom.name}
                               topic={chunkRoom.topic}
                               memberCount={chunkRoom.num_joined_members}
                               roomType={chunkRoom.room_type}
+                              onView={
+                                chunkRoom.room_type === RoomType.Space
+                                  ? navigateSpace
+                                  : navigateRoom
+                              }
                               renderTopicViewer={(name, topic, requestClose) => (
                                 <RoomTopicViewer
                                   name={name}

src/app/pages/client/explore/hooks.ts

@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAtomValue } from 'jotai';
+import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
+import { getHomeRoomPath, getSpacePath, getSpaceRoomPath } from '../../pathUtils';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { getOrphanParents } from '../../../utils/room';
+import { roomToParentsAtom } from '../../../state/room/roomToParents';
+
+export const useRoomNavigate = () => {
+  const navigate = useNavigate();
+  const mx = useMatrixClient();
+  const roomToParents = useAtomValue(roomToParentsAtom);
+
+  const navigateSpace = useCallback(
+    (roomId: string) => {
+      const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, roomId);
+      navigate(getSpacePath(roomIdOrAlias));
+    },
+    [mx, navigate]
+  );
+
+  const navigateRoom = useCallback(
+    (roomId: string) => {
+      const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, roomId);
+
+      const orphanParents = getOrphanParents(roomToParents, roomId);
+      if (orphanParents.length > 0) {
+        const pSpaceIdOrAlias = getCanonicalAliasOrRoomId(mx, orphanParents[0]);
+        navigate(getSpaceRoomPath(pSpaceIdOrAlias, roomIdOrAlias));
+        return;
+      }
+
+      navigate(getHomeRoomPath(roomIdOrAlias));
+    },
+    [mx, navigate, roomToParents]
+  );
+
+  return {
+    navigateSpace,
+    navigateRoom,
+  };
+};