mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-11 01:30:29 +03:00
URL navigation in interface and other improvements (#1633)
* load room on url change * add direct room list * render space room list * fix css syntax error * update scroll virtualizer * render subspaces room list * improve sidebar notification badge perf * add nav category components * add space recursive direct component * use nav category component in home, direct and space room list * add empty home and direct list layout * fix unread room menu ref * add more navigation items in room, direct and space tab * add more navigation * fix unread room menu to links * fix space lobby and search link * add explore navigation section * add notifications navigation menu * redirect to initial path after login * include unsupported room in rooms * move router hooks in hooks/router folder * add featured explore - WIP * load featured room with room summary * fix room card topic line clamp * add react query * load room summary using react query * add join button in room card * add content component * use content component in featured community content * fix content width * add responsive room card grid * fix async callback error status * add room card error button * fix client drawer shrink * add room topic viewer * open room card topic in viewer * fix room topic close btn * add get orphan parent util * add room card error dialog * add view featured room or space btn * refactor orphanParent to orphanParents * WIP - explore server * show space hint in room card * add room type filters * add per page item limit popout * reset scroll on public rooms load * refactor explore ui * refactor public rooms component * reset search on server change * fix typo * add empty featured section info * display user server on top * make server room card view btn clickable * add user server as default redirect for explore path * make home empty btn clickable * add thirdparty instance filter in server explore * remove since param on instance change * add server button in explore menu * rename notifications path to inbox * update react-virtual * Add notification messages inbox - WIP * add scroll top container component * add useInterval hook * add visibility change callback prop to scroll top container component * auto refresh notifications every 10 seconds * make message related component reusable * refactor matrix event renderer hoook * render notification message content * refactor matrix event renderer hook * update sequence card styles * move room navigate hook in global hooks * add open message button in notifications * add mark room as read button in notification group * show error in notification messages * add more featured spaces * render reply in notification messages * make notification message reply clickable * add outline prop for attachments * make old settings dialog viewable * add open featured communities as default config option * add invite count notification badge in sidebar and inbox menu * add element size observer hook * improve element size observer hook props * improve screen size hook * fix room avatar util function * allow Text props in Time component * fix dm room util function * add invitations * add no invites and notification cards * fix inbox tab unread badge visible without invite count * update folds and change inbox icon * memo search param construction * add message search in home * fix default message search order * fix display edited message new content * highlight search text in search messages * fix message search loading * disable log in production * add use space context * add useRoom context * fix space room list * fix inbox tab active state * add hook to get space child room recursive * add search for space * add virtual tile component * virtualize home and directs room list * update nav category component * use virtual tile component in more places * fix message highlight when click on reply twice * virtualize space room list * fix space room list lag issue * update folds * add room nav item component in space room list * use room nav item in home and direct room list * make space categories closable and save it in local storage * show unread room when category is collapsed * make home and direct room list category closable * rename room nav item show avatar prop * fix explore server category text alignment * rename closedRoomCategories to closedNavCategories * add nav category handler hook * save and restore last navigation path on space select * filter space rooms category by activity when it is closed * save and restore home and direct nav path state * save and restore inbox active path on open * save and restore explore tab active path * remove notification badge unread menu * add join room or space before navigate screen * move room component to features folder and add new room header * update folds * add room header menu * fix home room list activity sorting * do not hide selected room item on category closed in home and direct tab * replace old select room/tab call with navigate hook * improve state event hooks * show room card summary for joined rooms * prevent room from opening in wrong tab * only show message sender id on hover in modern layout * revert state event hooks changes * add key prop to room provider components * add welcome page * prevent excessive redirects * fix sidebar style with no spaces * move room settings in popup window * remove invite option from room settings * fix open room list search * add leave room prompt * standardize room and user avatar * fix avatar text size * add new reply layout * rename space hierarchy hook * add room topic hook * add room name hook * add room avatar hook and add direct room avatar util * space lobby - WIP * hide invalid space child event from space hierarchy in lobby * move lobby to features * fix element size observer hook width and height * add lobby header and hero section * add hierarchy room item error and loading state * add first and last child prop in sequence card * redirect to lobby from index path * memo and retry hierarchy room summary error * fix hierarchy room item styles * rename lobby hierarchy item card to room item card * show direct room avatar in space lobby * add hierarchy space item * add space item unknown room join button * fix space hierarchy hook refresh after new space join * change user avatar color and fallback render to user icon * change room avatar fallback to room icon * rename room/user avatar renderInitial prop to renderFallback * add room join and view button in space lobby * make power level api more reusable * fix space hierarchy not updating on child update * add menu to suggest or remove space children * show reply arrow in place of reply bend in message * fix typeerror in search because of wrong js-sdk t.ds * do not refetch hierarchy room summary on window focus * make room/user avatar un-draggable * change welcome page support button copy * drag-and-drop ordering of lobby spaces/rooms - WIP * add ASCIILexicalTable algorithms * fix wrong power level check in lobby items options * fix lobby can drop checks * fix join button error crash * fix reply spacing * fix m direct updated with other account data * add option to open room/space settings from lobby * add option in lobby to add new or existing room/spaces * fix room nav item selected styles * add space children reorder mechanism * fix space child reorder bug * fix hierarchy item sort function * Apply reorder of lobby into room list * add and improve space lobby menu items * add existing spaces menu in lobby * change restricted room allow params when dragging outside space * move featured servers config from homeserver list * removed unused features from space settings * add canonical alias as name fallback in lobby item * fix unreliable unread count update bug * fix after login redirect * fix room card topic hover style * Add dnd and folders in sidebar spaces * fix orphan space not visible in sidebar * fix sso login has mix of icon and button * fix space children not visible in home upon leaving space * recalculate notification on updating any space child * fix user color saturation/lightness * add user color to user avatar * add background colors to room avatar * show 2 length initial in sidebar space avatar * improve link color * add nav button component * open legacy create room and create direct * improve page route structure * handle hash router in path utils * mobile friendly router and navigation * make room header member drawer icon mobile friendly * setup index redirect for inbox and explore server route * add leave space prompt * improve member drawer filter menu * add space context menu * add context menu in home * add leave button in lobby items * render user tab avatar on sidebar * force overwrite netlify - test * netlify test * fix reset-password path without server redirected to login * add message link copy button in message menu * reset unread on sync prepared * fix stuck typing notifications * show typing indication in room nav item * refactor closedNavCategories atom to use userId in store key * refactor closedLobbyCategoriesAtom to include userId in store key * refactor navToActivePathAtom to use userId in storage key * remove unused file * refactor openedSidebarFolderAtom to include userId in storage key * add context menu for sidebar space tab * fix eslint not working * add option to pin/unpin child spaces * add context menu for directs tab * add context menu for direct and home tab * show lock icon for non-public space in header * increase matrix max listener count * wrap lobby add space room in callback hook
This commit is contained in:
Ajay Bura
GitHub
parent
2b7d825694
commit
4c76a7fd18
290 changed files with 17447 additions and 3224 deletions
645
src/app/pages/client/explore/Server.tsx
Normal file
645
src/app/pages/client/explore/Server.tsx
Normal file
|
|
@ -0,0 +1,645 @@
|
|||
import React, {
|
||||
FormEventHandler,
|
||||
MouseEventHandler,
|
||||
RefObject,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Chip,
|
||||
Icon,
|
||||
Icons,
|
||||
Input,
|
||||
Line,
|
||||
Menu,
|
||||
MenuItem,
|
||||
PopOut,
|
||||
RectCords,
|
||||
Scroll,
|
||||
Spinner,
|
||||
Text,
|
||||
config,
|
||||
toRem,
|
||||
} 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';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { RoomTopicViewer } from '../../../components/room-topic-viewer';
|
||||
import { RoomCard, RoomCardBase, RoomCardGrid } from '../../../components/room-card';
|
||||
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/useRoomNavigate';
|
||||
import { getMxIdServer } from '../../../utils/matrix';
|
||||
|
||||
const useServerSearchParams = (searchParams: URLSearchParams): ExploreServerPathSearchParams =>
|
||||
useMemo(
|
||||
() => ({
|
||||
limit: searchParams.get('limit') ?? undefined,
|
||||
since: searchParams.get('since') ?? undefined,
|
||||
term: searchParams.get('term') ?? undefined,
|
||||
type: searchParams.get('type') ?? undefined,
|
||||
instance: searchParams.get('instance') ?? undefined,
|
||||
}),
|
||||
[searchParams]
|
||||
);
|
||||
|
||||
type RoomTypeFilter = {
|
||||
title: string;
|
||||
value: string | undefined;
|
||||
};
|
||||
const useRoomTypeFilters = (): RoomTypeFilter[] =>
|
||||
useMemo(
|
||||
() => [
|
||||
{
|
||||
title: 'All',
|
||||
value: undefined,
|
||||
},
|
||||
{
|
||||
title: 'Spaces',
|
||||
value: RoomType.Space,
|
||||
},
|
||||
{
|
||||
title: 'Rooms',
|
||||
value: 'null',
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
const FALLBACK_ROOMS_LIMIT = 24;
|
||||
|
||||
type SearchProps = {
|
||||
active?: boolean;
|
||||
loading?: boolean;
|
||||
searchInputRef: RefObject<HTMLInputElement>;
|
||||
onSearch: (term: string) => void;
|
||||
onReset: () => void;
|
||||
};
|
||||
function Search({ active, loading, searchInputRef, onSearch, onReset }: SearchProps) {
|
||||
const handleSearchSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||
evt.preventDefault();
|
||||
const { searchInput } = evt.target as HTMLFormElement & {
|
||||
searchInput: HTMLInputElement;
|
||||
};
|
||||
|
||||
const searchTerm = searchInput.value.trim() || undefined;
|
||||
if (searchTerm) {
|
||||
onSearch(searchTerm);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box as="form" direction="Column" gap="100" onSubmit={handleSearchSubmit}>
|
||||
<span data-spacing-node />
|
||||
<Text size="L400">Search</Text>
|
||||
<Input
|
||||
ref={searchInputRef}
|
||||
style={{ paddingRight: config.space.S300 }}
|
||||
name="searchInput"
|
||||
size="500"
|
||||
variant="Background"
|
||||
placeholder="Search for keyword"
|
||||
before={
|
||||
active && loading ? (
|
||||
<Spinner variant="Secondary" size="200" />
|
||||
) : (
|
||||
<Icon size="200" src={Icons.Search} />
|
||||
)
|
||||
}
|
||||
after={
|
||||
active ? (
|
||||
<Chip
|
||||
type="button"
|
||||
variant="Secondary"
|
||||
size="400"
|
||||
radii="Pill"
|
||||
outlined
|
||||
after={<Icon size="50" src={Icons.Cross} />}
|
||||
onClick={onReset}
|
||||
>
|
||||
<Text size="B300">Clear</Text>
|
||||
</Chip>
|
||||
) : (
|
||||
<Chip type="submit" variant="Primary" size="400" radii="Pill" outlined>
|
||||
<Text size="B300">Enter</Text>
|
||||
</Chip>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const DEFAULT_INSTANCE_NAME = 'Matrix';
|
||||
function ThirdPartyProtocolsSelector({
|
||||
instanceId,
|
||||
onChange,
|
||||
}: {
|
||||
instanceId?: string;
|
||||
onChange: (instanceId?: string) => void;
|
||||
}) {
|
||||
const mx = useMatrixClient();
|
||||
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
|
||||
|
||||
const { data } = useQuery({
|
||||
queryKey: ['thirdparty', 'protocols'],
|
||||
queryFn: () => mx.getThirdpartyProtocols(),
|
||||
});
|
||||
|
||||
const handleInstanceSelect: MouseEventHandler<HTMLButtonElement> = (evt): void => {
|
||||
const insId = evt.currentTarget.getAttribute('data-instance-id') ?? undefined;
|
||||
onChange(insId);
|
||||
setMenuAnchor(undefined);
|
||||
};
|
||||
|
||||
const handleOpenMenu: MouseEventHandler<HTMLElement> = (evt) => {
|
||||
setMenuAnchor(evt.currentTarget.getBoundingClientRect());
|
||||
};
|
||||
|
||||
const instances = data && Object.keys(data).flatMap((protocol) => data[protocol].instances);
|
||||
if (!instances || instances.length === 0) return null;
|
||||
const selectedInstance = instances.find((instance) => instanceId === instance.instance_id);
|
||||
|
||||
return (
|
||||
<PopOut
|
||||
anchor={menuAnchor}
|
||||
align="End"
|
||||
position="Bottom"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: () => setMenuAnchor(undefined),
|
||||
clickOutsideDeactivates: true,
|
||||
}}
|
||||
>
|
||||
<Menu variant="Surface">
|
||||
<Box
|
||||
direction="Column"
|
||||
gap="100"
|
||||
style={{ padding: config.space.S100, minWidth: toRem(100) }}
|
||||
>
|
||||
<Text style={{ padding: config.space.S100 }} size="L400" truncate>
|
||||
Protocols
|
||||
</Text>
|
||||
<Box direction="Column">
|
||||
<MenuItem
|
||||
size="300"
|
||||
variant="Surface"
|
||||
aria-pressed={instanceId === undefined}
|
||||
radii="300"
|
||||
onClick={handleInstanceSelect}
|
||||
>
|
||||
<Text size="T200" truncate>
|
||||
{DEFAULT_INSTANCE_NAME}
|
||||
</Text>
|
||||
</MenuItem>
|
||||
{instances.map((instance) => (
|
||||
<MenuItem
|
||||
size="300"
|
||||
key={instance.instance_id}
|
||||
data-instance-id={instance.instance_id}
|
||||
aria-pressed={instanceId === instance.instance_id}
|
||||
variant="Surface"
|
||||
radii="300"
|
||||
onClick={handleInstanceSelect}
|
||||
>
|
||||
<Text size="T200" truncate>
|
||||
{instance.desc}
|
||||
</Text>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Menu>
|
||||
</FocusTrap>
|
||||
}
|
||||
>
|
||||
<Chip
|
||||
onClick={handleOpenMenu}
|
||||
aria-pressed={!!menuAnchor}
|
||||
radii="Pill"
|
||||
size="400"
|
||||
variant={instanceId ? 'Success' : 'SurfaceVariant'}
|
||||
after={<Icon size="100" src={Icons.ChevronBottom} />}
|
||||
>
|
||||
<Text size="T200" truncate>
|
||||
{selectedInstance?.desc ?? DEFAULT_INSTANCE_NAME}
|
||||
</Text>
|
||||
</Chip>
|
||||
</PopOut>
|
||||
);
|
||||
}
|
||||
|
||||
type LimitButtonProps = {
|
||||
limit: number;
|
||||
onLimitChange: (limit: string) => void;
|
||||
};
|
||||
function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
|
||||
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
|
||||
|
||||
const handleLimitSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
|
||||
evt.preventDefault();
|
||||
const limitInput = evt.currentTarget.limitInput as HTMLInputElement;
|
||||
if (!limitInput) return;
|
||||
const newLimit = limitInput.value.trim();
|
||||
if (!newLimit) return;
|
||||
onLimitChange(newLimit);
|
||||
};
|
||||
|
||||
const setLimit = (l: string) => {
|
||||
setMenuAnchor(undefined);
|
||||
onLimitChange(l);
|
||||
};
|
||||
const handleOpenMenu: MouseEventHandler<HTMLElement> = (evt) => {
|
||||
setMenuAnchor(evt.currentTarget.getBoundingClientRect());
|
||||
};
|
||||
|
||||
return (
|
||||
<PopOut
|
||||
anchor={menuAnchor}
|
||||
align="End"
|
||||
position="Bottom"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: () => setMenuAnchor(undefined),
|
||||
clickOutsideDeactivates: true,
|
||||
}}
|
||||
>
|
||||
<Menu variant="Surface">
|
||||
<Box direction="Column" gap="400" style={{ padding: config.space.S300 }}>
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Presets</Text>
|
||||
<Box gap="100" wrap="Wrap">
|
||||
<Chip variant="SurfaceVariant" onClick={() => setLimit('24')} radii="Pill">
|
||||
<Text size="T200">24</Text>
|
||||
</Chip>
|
||||
<Chip variant="SurfaceVariant" onClick={() => setLimit('48')} radii="Pill">
|
||||
<Text size="T200">48</Text>
|
||||
</Chip>
|
||||
<Chip variant="SurfaceVariant" onClick={() => setLimit('96')} radii="Pill">
|
||||
<Text size="T200">96</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box as="form" onSubmit={handleLimitSubmit} direction="Column" gap="300">
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Custom Limit</Text>
|
||||
<Input
|
||||
name="limitInput"
|
||||
size="300"
|
||||
variant="Background"
|
||||
defaultValue={limit}
|
||||
min={1}
|
||||
step={1}
|
||||
outlined
|
||||
type="number"
|
||||
radii="400"
|
||||
aria-label="Per Page Item Limit"
|
||||
/>
|
||||
</Box>
|
||||
<Button type="submit" size="300" variant="Primary" radii="400">
|
||||
<Text size="B300">Change Limit</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Menu>
|
||||
</FocusTrap>
|
||||
}
|
||||
>
|
||||
<Chip
|
||||
onClick={handleOpenMenu}
|
||||
aria-pressed={!!menuAnchor}
|
||||
radii="Pill"
|
||||
size="400"
|
||||
variant="SurfaceVariant"
|
||||
after={<Icon size="100" src={Icons.ChevronBottom} />}
|
||||
>
|
||||
<Text size="T200" truncate>{`Page Limit: ${limit}`}</Text>
|
||||
</Chip>
|
||||
</PopOut>
|
||||
);
|
||||
}
|
||||
|
||||
export function PublicRooms() {
|
||||
const { server } = useParams();
|
||||
const mx = useMatrixClient();
|
||||
const userId = mx.getUserId();
|
||||
const userServer = userId && getMxIdServer(userId);
|
||||
const allRooms = useAtomValue(allRoomsAtom);
|
||||
const { navigateSpace, navigateRoom } = useRoomNavigate();
|
||||
|
||||
const [searchParams] = useSearchParams();
|
||||
const serverSearchParams = useServerSearchParams(searchParams);
|
||||
const isSearch = !!serverSearchParams.term;
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||
const navigate = useNavigate();
|
||||
const roomTypeFilters = useRoomTypeFilters();
|
||||
|
||||
const currentLimit: number = useMemo(() => {
|
||||
const limitParam = serverSearchParams.limit;
|
||||
if (!limitParam) return FALLBACK_ROOMS_LIMIT;
|
||||
return parseInt(limitParam, 10) || FALLBACK_ROOMS_LIMIT;
|
||||
}, [serverSearchParams.limit]);
|
||||
|
||||
const resetScroll = useCallback(() => {
|
||||
const scroll = scrollRef.current;
|
||||
if (scroll) scroll.scrollTop = 0;
|
||||
}, []);
|
||||
|
||||
const fetchPublicRooms = useCallback(() => {
|
||||
const limit =
|
||||
typeof serverSearchParams.limit === 'string'
|
||||
? parseInt(serverSearchParams.limit, 10)
|
||||
: FALLBACK_ROOMS_LIMIT;
|
||||
const roomType: string | null | undefined =
|
||||
serverSearchParams.type === 'null' ? null : serverSearchParams.type;
|
||||
|
||||
return mx.http.authedRequest<Awaited<ReturnType<MatrixClient['publicRooms']>>>(
|
||||
Method.Post,
|
||||
'/publicRooms',
|
||||
{
|
||||
server,
|
||||
},
|
||||
{
|
||||
limit,
|
||||
since: serverSearchParams.since,
|
||||
filter: {
|
||||
generic_search_term: serverSearchParams.term,
|
||||
room_types: roomType !== undefined ? [roomType] : undefined,
|
||||
},
|
||||
third_party_instance_id: serverSearchParams.instance,
|
||||
}
|
||||
);
|
||||
}, [mx, server, serverSearchParams]);
|
||||
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: [
|
||||
server,
|
||||
'publicRooms',
|
||||
serverSearchParams.limit,
|
||||
serverSearchParams.since,
|
||||
serverSearchParams.term,
|
||||
serverSearchParams.type,
|
||||
serverSearchParams.instance,
|
||||
],
|
||||
queryFn: fetchPublicRooms,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoading) resetScroll();
|
||||
}, [isLoading, resetScroll]);
|
||||
|
||||
const explore = (newSearchParams: ExploreServerPathSearchParams) => {
|
||||
if (!server) return;
|
||||
|
||||
const sParams: Record<string, string> = {
|
||||
...serverSearchParams,
|
||||
...newSearchParams,
|
||||
};
|
||||
Object.keys(sParams).forEach((key) => {
|
||||
if (sParams[key] === undefined) delete sParams[key];
|
||||
});
|
||||
const path = withSearchParam(getExploreServerPath(server), sParams);
|
||||
navigate(path);
|
||||
};
|
||||
|
||||
const paginateBack = () => {
|
||||
const token = data?.prev_batch;
|
||||
explore({ since: token });
|
||||
};
|
||||
|
||||
const paginateFront = () => {
|
||||
const token = data?.next_batch;
|
||||
explore({ since: token });
|
||||
};
|
||||
|
||||
const handleSearch = (term: string) => {
|
||||
explore({
|
||||
term,
|
||||
since: undefined,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSearchClear = () => {
|
||||
if (searchInputRef.current) {
|
||||
searchInputRef.current.value = '';
|
||||
}
|
||||
explore({
|
||||
term: undefined,
|
||||
since: undefined,
|
||||
});
|
||||
};
|
||||
|
||||
const handleRoomFilterClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||
const filter = evt.currentTarget.getAttribute('data-room-filter');
|
||||
explore({
|
||||
type: filter ?? undefined,
|
||||
since: undefined,
|
||||
});
|
||||
};
|
||||
|
||||
const handleLimitChange = (limit: string) => {
|
||||
explore({ limit });
|
||||
};
|
||||
|
||||
const handleInstanceIdChange = (instanceId?: string) => {
|
||||
explore({ instance: instanceId, since: undefined });
|
||||
};
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<PageHeader>
|
||||
{isSearch ? (
|
||||
<>
|
||||
<Box grow="Yes" basis="No">
|
||||
<Chip
|
||||
size="500"
|
||||
variant="Surface"
|
||||
radii="Pill"
|
||||
before={<Icon size="100" src={Icons.ArrowLeft} />}
|
||||
onClick={handleSearchClear}
|
||||
>
|
||||
<Text size="T300">{server}</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
|
||||
<Box grow="No" justifyContent="Center" alignItems="Center" gap="200">
|
||||
<Icon size="400" src={Icons.Search} />
|
||||
<Text size="H3" truncate>
|
||||
Search
|
||||
</Text>
|
||||
</Box>
|
||||
<Box grow="Yes" />
|
||||
</>
|
||||
) : (
|
||||
<Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
|
||||
<Icon size="400" src={Icons.Category} />
|
||||
<Text size="H3" truncate>
|
||||
{server}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</PageHeader>
|
||||
<Box grow="Yes">
|
||||
<Scroll ref={scrollRef} hideTrack visibility="Hover">
|
||||
<PageContent>
|
||||
<PageContentCenter>
|
||||
<Box direction="Column" gap="600">
|
||||
<Search
|
||||
key={server}
|
||||
active={isSearch}
|
||||
loading={isLoading}
|
||||
searchInputRef={searchInputRef}
|
||||
onSearch={handleSearch}
|
||||
onReset={handleSearchClear}
|
||||
/>
|
||||
<Box direction="Column" gap="400">
|
||||
<Box direction="Column" gap="300">
|
||||
{isSearch ? (
|
||||
<Text size="H4">{`Results for "${serverSearchParams.term}"`}</Text>
|
||||
) : (
|
||||
<Text size="H4">Popular Communities</Text>
|
||||
)}
|
||||
<Box gap="200">
|
||||
{roomTypeFilters.map((filter) => (
|
||||
<Chip
|
||||
key={filter.title}
|
||||
onClick={handleRoomFilterClick}
|
||||
data-room-filter={filter.value}
|
||||
variant={filter.value === serverSearchParams.type ? 'Success' : 'Surface'}
|
||||
aria-pressed={filter.value === serverSearchParams.type}
|
||||
before={
|
||||
filter.value === serverSearchParams.type && (
|
||||
<Icon size="100" src={Icons.Check} />
|
||||
)
|
||||
}
|
||||
outlined
|
||||
>
|
||||
<Text size="T200">{filter.title}</Text>
|
||||
</Chip>
|
||||
))}
|
||||
{userServer === server && (
|
||||
<>
|
||||
<Line
|
||||
style={{ margin: `${config.space.S100} 0` }}
|
||||
direction="Vertical"
|
||||
variant="Surface"
|
||||
size="300"
|
||||
/>
|
||||
<ThirdPartyProtocolsSelector
|
||||
instanceId={serverSearchParams.instance}
|
||||
onChange={handleInstanceIdChange}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Box grow="Yes" data-spacing-node />
|
||||
<LimitButton limit={currentLimit} onLimitChange={handleLimitChange} />
|
||||
</Box>
|
||||
</Box>
|
||||
{isLoading && (
|
||||
<RoomCardGrid>
|
||||
{[...Array(currentLimit).keys()].map((item) => (
|
||||
<RoomCardBase key={item} style={{ minHeight: toRem(260) }} />
|
||||
))}
|
||||
</RoomCardGrid>
|
||||
)}
|
||||
{error && (
|
||||
<Box direction="Column" className={css.PublicRoomsError} gap="200">
|
||||
<Text size="L400">{error.name}</Text>
|
||||
<Text size="T300">{error.message}</Text>
|
||||
</Box>
|
||||
)}
|
||||
{data &&
|
||||
(data.chunk.length > 0 ? (
|
||||
<>
|
||||
<RoomCardGrid>
|
||||
{data?.chunk.map((chunkRoom) => (
|
||||
<RoomCard
|
||||
key={chunkRoom.room_id}
|
||||
roomIdOrAlias={chunkRoom.canonical_alias ?? chunkRoom.room_id}
|
||||
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}
|
||||
topic={topic}
|
||||
requestClose={requestClose}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</RoomCardGrid>
|
||||
|
||||
{(data.prev_batch || data.next_batch) && (
|
||||
<Box justifyContent="Center" gap="200">
|
||||
<Button
|
||||
onClick={paginateBack}
|
||||
size="300"
|
||||
fill="Soft"
|
||||
disabled={!data.prev_batch}
|
||||
>
|
||||
<Text size="B300" truncate>
|
||||
Previous Page
|
||||
</Text>
|
||||
</Button>
|
||||
<Box data-spacing-node grow="Yes" />
|
||||
<Button
|
||||
onClick={paginateFront}
|
||||
size="300"
|
||||
fill="Solid"
|
||||
disabled={!data.next_batch}
|
||||
>
|
||||
<Text size="B300" truncate>
|
||||
Next Page
|
||||
</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Box
|
||||
className={css.RoomsInfoCard}
|
||||
direction="Column"
|
||||
justifyContent="Center"
|
||||
alignItems="Center"
|
||||
gap="200"
|
||||
>
|
||||
<Icon size="400" src={Icons.Info} />
|
||||
<Text size="T300" align="Center">
|
||||
No communities found!
|
||||
</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</PageContentCenter>
|
||||
</PageContent>
|
||||
</Scroll>
|
||||
</Box>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue