From 6502e2e2e02d012a891f2ae2999746119aef9e2a Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Sun, 17 Mar 2024 13:44:26 +0530 Subject: [PATCH] make server room card view btn clickable --- src/app/components/room-card/RoomCard.tsx | 6 ++- src/app/hooks/useJoinedRoomId.ts | 19 ++++++++ src/app/pages/client/explore/Featured.tsx | 57 ++--------------------- src/app/pages/client/explore/Server.tsx | 13 +++++- src/app/pages/client/explore/hooks.ts | 43 +++++++++++++++++ 5 files changed, 83 insertions(+), 55 deletions(-) create mode 100644 src/app/hooks/useJoinedRoomId.ts create mode 100644 src/app/pages/client/explore/hooks.ts diff --git a/src/app/components/room-card/RoomCard.tsx b/src/app/components/room-card/RoomCard.tsx index 1a6ec6d9..66ada5be 100644 --- a/src/app/components/room-card/RoomCard.tsx +++ b/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( useCallback(() => mx.joinRoom(roomIdOrAlias), [mx, roomIdOrAlias]) diff --git a/src/app/hooks/useJoinedRoomId.ts b/src/app/hooks/useJoinedRoomId.ts new file mode 100644 index 00000000..857defa8 --- /dev/null +++ b/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; +}; diff --git a/src/app/pages/client/explore/Featured.tsx b/src/app/pages/client/explore/Featured.tsx index c2b0a777..cbac5ecb 100644 --- a/src/app/pages/client/explore/Featured.tsx +++ b/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 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] - ); + const { navigateSpace, navigateRoom } = useRoomNavigate(); return ( @@ -93,7 +46,7 @@ export function FeaturedRooms() { {(roomSummary) => ( ( ({ 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() { ( { + 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, + }; +};