mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-02-23 05:33:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

add join button in room card

Browse source
This commit is contained in:
Ajay Bura 2024-03-01 19:27:02 +05:30
parent b72bda9568
commit 6ec629a1b7
2 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/app/components/room-card/RoomCard.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { Avatar, Box, Button, Icon, Icons, Text, as } from 'folds';
import React, { useCallback } from 'react';
import { Avatar, Box, Button, Icon, Icons, Spinner, Text, as } from 'folds';
import classNames from 'classnames';
import * as css from './style.css';
import { RoomAvatar } from '../room-avatar';
@ -7,6 +7,7 @@ import { getMxIdLocalPart } from '../../utils/matrix';
import { nameInitials } from '../../utils/common';
import { millify } from '../../plugins/millify';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
export const RoomCardBase = as<'div'>(({ className, ...props }, ref) => (
<Box
@ -47,6 +48,12 @@ export const RoomCard = as<'div', RoomCardProps>(
const fallbackName = getMxIdLocalPart(roomIdOrAlias) ?? roomIdOrAlias;
const fallbackTopic = roomIdOrAlias;
const [joinState, join] = useAsyncCallback(
useCallback(() => mx.joinRoom(roomIdOrAlias), [mx, roomIdOrAlias])
);
const joining =
joinState.status === AsyncStatus.Loading || joinState.status === AsyncStatus.Success;
return (
<RoomCardBase {...props} ref={ref}>
<Avatar size="500">
@ -72,13 +79,20 @@ export const RoomCard = as<'div', RoomCardProps>(
<Text size="T200">Members</Text>
)}
</Box>
{joined ? (
{joined && (
<Button variant="Secondary" fill="Soft" size="300">
<Text size="B300">View</Text>
</Button>
) : (
<Button variant="Secondary" size="300">
<Text size="B300">Join</Text>
)}
{!joined && (
<Button
onClick={join}
variant="Secondary"
size="300"
disabled={joining}
before={joining && <Spinner size="50" variant="Secondary" fill="Soft" />}
>
<Text size="B300">{joining ? 'Joining' : 'Join'}</Text>
</Button>
)}
</RoomCardBase>

5
src/app/pages/client/explore/Featured.tsx
View file

@ -3,8 +3,6 @@ import { Box, Icon, Icons, Scroll, Text, config, toRem } from 'folds';
import { useAtomValue } from 'jotai';
import { ContainerColor } from '../../../styles/ContainerColor.css';
import { useClientConfig } from '../../../hooks/useClientConfig';
import { useCapabilities } from '../../../hooks/useCapabilities';
import { useSpecVersions } from '../../../hooks/useSpecVersions';
import { RoomCard } from '../../../components/room-card';
import { getCanonicalAliasRoomId, isRoomAlias } from '../../../utils/matrix';
import * as css from './style.css';
@ -14,9 +12,6 @@ import { RoomSummaryLoader } from '../../../components/RoomSummaryLoader';
export function FeaturedRooms() {
const mx = useMatrixClient();
const caps = useCapabilities();
const ver = useSpecVersions();
console.log(caps, ver);
const { featuredCommunities } = useClientConfig();
const { rooms, spaces } = featuredCommunities ?? {};
const allRooms = useAtomValue(allRoomsAtom);