michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

refectored Drawer component and added Postie

Browse source
This commit is contained in:
unknown 2021-08-30 21:12:24 +05:30
parent 8996b562bc
commit b5dfc337ec
10 changed files with 336 additions and 191 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/molecules/channel-selector/ChannelSelector.jsx
View file

@ -18,7 +18,7 @@ function ChannelSelectorWrapper({
className="channel-selector__content"
type="button"
onClick={onClick}
onMouseUp={(e) => blurOnBubbling(e, '.channel-selector__wrapper')}
onMouseUp={(e) => blurOnBubbling(e, '.channel-selector')}
>
{content}
</button>

69
src/app/organisms/navigation/Directs.jsx Normal file
View file

@ -0,0 +1,69 @@
import React, { useState, useEffect } from 'react';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation';
import { selectRoom } from '../../../client/action/navigation';
import Postie from '../../../util/Postie';
import Selector from './Selector';
import { AtoZ } from './common';
const drawerPostie = new Postie();
function Directs() {
const { roomList } = initMatrix;
const directIds = [...roomList.directs].sort(AtoZ);
const [, forceUpdate] = useState({});
function selectorChanged(activeRoomID, prevActiveRoomId) {
if (!drawerPostie.hasTopic('selector-change')) return;
const addresses = [];
if (drawerPostie.hasSubscriber('selector-change', activeRoomID)) addresses.push(activeRoomID);
if (drawerPostie.hasSubscriber('selector-change', prevActiveRoomId)) addresses.push(prevActiveRoomId);
if (addresses.length === 0) return;
drawerPostie.post('selector-change', addresses, activeRoomID);
}
function unreadChanged(roomId) {
if (!drawerPostie.hasTopic('unread-change')) return;
if (!drawerPostie.hasSubscriber('unread-change', roomId)) return;
drawerPostie.post('unread-change', roomId);
}
function roomListUpdated() {
const { spaces, rooms, directs } = initMatrix.roomList;
if (!(
spaces.has(navigation.getActiveRoomId())
|| rooms.has(navigation.getActiveRoomId())
|| directs.has(navigation.getActiveRoomId()))
) {
selectRoom(null);
}
forceUpdate({});
}
useEffect(() => {
roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged);
roomList.on(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged);
roomList.on(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
return () => {
roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
roomList.removeListener(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged);
roomList.removeListener(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
};
}, []);
return directIds.map((id) => (
<Selector
key={id}
roomId={id}
drawerPostie={drawerPostie}
/>
));
}
export default Directs;

191
src/app/organisms/navigation/Drawer.jsx
View file

@ -1,86 +1,14 @@
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import './Drawer.scss';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
import { doesRoomHaveUnread } from '../../../util/matrixUtil';
import {
selectRoom, openPublicChannels, openCreateChannel, openInviteUser,
} from '../../../client/action/navigation';
import navigation from '../../../client/state/navigation';
import Header, { TitleWrapper } from '../../atoms/header/Header';
import Text from '../../atoms/text/Text';
import IconButton from '../../atoms/button/IconButton';
import ScrollView from '../../atoms/scroll/ScrollView';
import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
import ChannelSelector from '../../molecules/channel-selector/ChannelSelector';
import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
// import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
import HashIC from '../../../../public/res/ic/outlined/hash.svg';
import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
function AtoZ(aId, bId) {
let aName = initMatrix.matrixClient.getRoom(aId).name;
let bName = initMatrix.matrixClient.getRoom(bId).name;
// remove "#" from the room name
// To ignore it in sorting
aName = aName.replaceAll('#', '');
bName = bName.replaceAll('#', '');
if (aName.toLowerCase() < bName.toLowerCase()) {
return -1;
}
if (aName.toLowerCase() > bName.toLowerCase()) {
return 1;
}
return 0;
}
function DrawerHeader({ activeTab }) {
return (
<Header>
<TitleWrapper>
<Text variant="s1">{(activeTab === 'home' ? 'Home' : 'Direct messages')}</Text>
</TitleWrapper>
{(activeTab === 'dm')
? <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" />
: (
<ContextMenu
content={(hideMenu) => (
<>
<MenuHeader>Add channel</MenuHeader>
<MenuItem
iconSrc={HashPlusIC}
onClick={() => { hideMenu(); openCreateChannel(); }}
>
Create new channel
</MenuItem>
<MenuItem
iconSrc={HashSearchIC}
onClick={() => { hideMenu(); openPublicChannels(); }}
>
Add Public channel
</MenuItem>
</>
)}
render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add channel" src={PlusIC} size="normal" />)}
/>
)}
{/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */}
</Header>
);
}
DrawerHeader.propTypes = {
activeTab: PropTypes.string.isRequired,
};
import DrawerHeader from './DrawerHeader';
import Home from './Home';
import Directs from './Directs';
function DrawerBradcrumb() {
return (
@ -94,111 +22,6 @@ function DrawerBradcrumb() {
);
}
function renderSelector(room, roomId, isSelected, isDM) {
const mx = initMatrix.matrixClient;
let imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop');
if (typeof imageSrc === 'undefined') imageSrc = null;
return (
<ChannelSelector
key={roomId}
name={room.name}
roomId={roomId}
imageSrc={isDM ? imageSrc : null}
iconSrc={
isDM
? null
: (() => {
if (room.isSpaceRoom()) {
return (room.getJoinRule() === 'invite' ? SpaceLockIC : SpaceIC);
}
return (room.getJoinRule() === 'invite' ? HashLockIC : HashIC);
})()
}
isSelected={isSelected}
isUnread={doesRoomHaveUnread(room)}
notificationCount={room.getUnreadNotificationCount('total')}
isAlert={room.getUnreadNotificationCount('highlight') !== 0}
onClick={() => selectRoom(roomId)}
/>
);
}
function Directs({ selectedRoomId }) {
const mx = initMatrix.matrixClient;
const directIds = [...initMatrix.roomList.directs].sort(AtoZ);
return directIds.map((id) => renderSelector(mx.getRoom(id), id, selectedRoomId === id, true));
}
Directs.defaultProps = { selectedRoomId: null };
Directs.propTypes = { selectedRoomId: PropTypes.string };
function Home({ selectedRoomId }) {
const mx = initMatrix.matrixClient;
const spaceIds = [...initMatrix.roomList.spaces].sort(AtoZ);
const roomIds = [...initMatrix.roomList.rooms].sort(AtoZ);
return (
<>
{ spaceIds.length !== 0 && <Text className="cat-header" variant="b3">Spaces</Text> }
{ spaceIds.map((id) => renderSelector(mx.getRoom(id), id, selectedRoomId === id, false)) }
{ roomIds.length !== 0 && <Text className="cat-header" variant="b3">Channels</Text> }
{ roomIds.map((id) => renderSelector(mx.getRoom(id), id, selectedRoomId === id, false)) }
</>
);
}
Home.defaultProps = { selectedRoomId: null };
Home.propTypes = { selectedRoomId: PropTypes.string };
function Channels({ activeTab }) {
const [selectedRoomId, changeSelectedRoomId] = useState(null);
const [, updateState] = useState();
const selectHandler = (roomId) => changeSelectedRoomId(roomId);
const handleDataChanges = () => updateState({});
const onRoomListChange = () => {
const { spaces, rooms, directs } = initMatrix.roomList;
if (!(
spaces.has(selectedRoomId)
|| rooms.has(selectedRoomId)
|| directs.has(selectedRoomId))
) {
selectRoom(null);
}
};
useEffect(() => {
navigation.on(cons.events.navigation.ROOM_SELECTED, selectHandler);
initMatrix.roomList.on(cons.events.roomList.ROOMLIST_UPDATED, handleDataChanges);
return () => {
navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectHandler);
initMatrix.roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, handleDataChanges);
};
}, []);
useEffect(() => {
initMatrix.roomList.on(cons.events.roomList.ROOMLIST_UPDATED, onRoomListChange);
return () => {
initMatrix.roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, onRoomListChange);
};
}, [selectedRoomId]);
return (
<div className="channels-container">
{
activeTab === 'home'
? <Home selectedRoomId={selectedRoomId} />
: <Directs selectedRoomId={selectedRoomId} />
}
</div>
);
}
Channels.propTypes = {
activeTab: PropTypes.string.isRequired,
};
function Drawer() {
const [activeTab, setActiveTab] = useState('home');
@ -219,7 +42,13 @@ function Drawer() {
<DrawerBradcrumb />
<div className="channels__wrapper">
<ScrollView autoHide>
<Channels activeTab={activeTab} />
<div className="channels-container">
{
activeTab === 'home'
? <Home />
: <Directs />
}
</div>
</ScrollView>
</div>
</div>

55
src/app/organisms/navigation/DrawerHeader.jsx Normal file
View file

@ -0,0 +1,55 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
openPublicChannels, openCreateChannel, openInviteUser,
} from '../../../client/action/navigation';
import Text from '../../atoms/text/Text';
import Header, { TitleWrapper } from '../../atoms/header/Header';
import IconButton from '../../atoms/button/IconButton';
import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
function DrawerHeader({ activeTab }) {
return (
<Header>
<TitleWrapper>
<Text variant="s1">{(activeTab === 'home' ? 'Home' : 'Direct messages')}</Text>
</TitleWrapper>
{(activeTab === 'dm')
? <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" />
: (
<ContextMenu
content={(hideMenu) => (
<>
<MenuHeader>Add channel</MenuHeader>
<MenuItem
iconSrc={HashPlusIC}
onClick={() => { hideMenu(); openCreateChannel(); }}
>
Create new channel
</MenuItem>
<MenuItem
iconSrc={HashSearchIC}
onClick={() => { hideMenu(); openPublicChannels(); }}
>
Add Public channel
</MenuItem>
</>
)}
render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add channel" src={PlusIC} size="normal" />)}
/>
)}
{/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */}
</Header>
);
}
DrawerHeader.propTypes = {
activeTab: PropTypes.string.isRequired,
};
export default DrawerHeader;

86
src/app/organisms/navigation/Home.jsx Normal file
View file

@ -0,0 +1,86 @@
import React, { useState, useEffect } from 'react';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation';
import { selectRoom } from '../../../client/action/navigation';
import Postie from '../../../util/Postie';
import Text from '../../atoms/text/Text';
import Selector from './Selector';
import { AtoZ } from './common';
const drawerPostie = new Postie();
function Home() {
const { roomList } = initMatrix;
const spaceIds = [...roomList.spaces].sort(AtoZ);
const roomIds = [...roomList.rooms].sort(AtoZ);
const [, forceUpdate] = useState({});
function selectorChanged(activeRoomID, prevActiveRoomId) {
if (!drawerPostie.hasTopic('selector-change')) return;
const addresses = [];
if (drawerPostie.hasSubscriber('selector-change', activeRoomID)) addresses.push(activeRoomID);
if (drawerPostie.hasSubscriber('selector-change', prevActiveRoomId)) addresses.push(prevActiveRoomId);
if (addresses.length === 0) return;
drawerPostie.post('selector-change', addresses, activeRoomID);
}
function unreadChanged(roomId) {
if (!drawerPostie.hasTopic('unread-change')) return;
if (!drawerPostie.hasSubscriber('unread-change', roomId)) return;
drawerPostie.post('unread-change', roomId);
}
function roomListUpdated() {
const { spaces, rooms, directs } = initMatrix.roomList;
if (!(
spaces.has(navigation.getActiveRoomId())
|| rooms.has(navigation.getActiveRoomId())
|| directs.has(navigation.getActiveRoomId()))
) {
selectRoom(null);
}
forceUpdate({});
}
useEffect(() => {
roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged);
roomList.on(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged);
roomList.on(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
return () => {
roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
roomList.removeListener(cons.events.roomList.MY_RECEIPT_ARRIVED, unreadChanged);
roomList.removeListener(cons.events.roomList.EVENT_ARRIVED, unreadChanged);
};
}, []);
return (
<>
{ spaceIds.length !== 0 && <Text className="cat-header" variant="b3">Spaces</Text> }
{ spaceIds.map((id) => (
<Selector
key={id}
roomId={id}
isDM={false}
drawerPostie={drawerPostie}
/>
))}
{ roomIds.length !== 0 && <Text className="cat-header" variant="b3">Channels</Text> }
{ roomIds.map((id) => (
<Selector
key={id}
roomId={id}
isDM={false}
drawerPostie={drawerPostie}
/>
)) }
</>
);
}
export default Home;

76
src/app/organisms/navigation/Selector.jsx Normal file
View file

@ -0,0 +1,76 @@
/* eslint-disable react/prop-types */
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import initMatrix from '../../../client/initMatrix';
import { doesRoomHaveUnread } from '../../../util/matrixUtil';
import { selectRoom } from '../../../client/action/navigation';
import navigation from '../../../client/state/navigation';
import ChannelSelector from '../../molecules/channel-selector/ChannelSelector';
import HashIC from '../../../../public/res/ic/outlined/hash.svg';
import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
function Selector({ roomId, isDM, drawerPostie }) {
const mx = initMatrix.matrixClient;
const room = mx.getRoom(roomId);
const imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
const [isSelected, setIsSelected] = useState(navigation.getActiveRoomId() === roomId);
const [, forceUpdate] = useState({});
function selectorChanged(activeRoomId) {
setIsSelected(activeRoomId === roomId);
}
function changeNotificationBadge() {
forceUpdate({});
}
useEffect(() => {
drawerPostie.subscribe('selector-change', roomId, selectorChanged);
drawerPostie.subscribe('unread-change', roomId, changeNotificationBadge);
return () => {
drawerPostie.unsubscribe('selector-change', roomId);
drawerPostie.unsubscribe('unread-change', roomId);
};
}, []);
return (
<ChannelSelector
key={roomId}
name={room.name}
roomId={roomId}
imageSrc={isDM ? imageSrc : null}
iconSrc={
isDM
? null
: (() => {
if (room.isSpaceRoom()) {
return (room.getJoinRule() === 'invite' ? SpaceLockIC : SpaceIC);
}
return (room.getJoinRule() === 'invite' ? HashLockIC : HashIC);
})()
}
isSelected={isSelected}
isUnread={doesRoomHaveUnread(room)}
notificationCount={room.getUnreadNotificationCount('total') || 0}
isAlert={room.getUnreadNotificationCount('highlight') !== 0}
onClick={() => selectRoom(roomId)}
/>
);
}
Selector.defaultProps = {
isDM: true,
};
Selector.propTypes = {
roomId: PropTypes.string.isRequired,
isDM: PropTypes.bool,
drawerPostie: PropTypes.shape({}).isRequired,
};
export default Selector;

21
src/app/organisms/navigation/common.js Normal file
View file

@ -0,0 +1,21 @@
import initMatrix from '../../../client/initMatrix';
function AtoZ(aId, bId) {
let aName = initMatrix.matrixClient.getRoom(aId).name;
let bName = initMatrix.matrixClient.getRoom(bId).name;
// remove "#" from the room name
// To ignore it in sorting
aName = aName.replaceAll('#', '');
bName = bName.replaceAll('#', '');
if (aName.toLowerCase() < bName.toLowerCase()) {
return -1;
}
if (aName.toLowerCase() > bName.toLowerCase()) {
return 1;
}
return 0;
}
export { AtoZ };

20
src/client/state/RoomList.js
View file

@ -155,12 +155,13 @@ class RoomList extends EventEmitter {
this.matrixClient.on('Room.name', () => {
this.emit(cons.events.roomList.ROOMLIST_UPDATED);
});
this.matrixClient.on('Room.receipt', (event) => {
this.matrixClient.on('Room.receipt', (event, room) => {
if (event.getType() === 'm.receipt') {
const evContent = event.getContent();
const userId = Object.keys(evContent[Object.keys(evContent)[0]]['m.read'])[0];
if (userId !== this.matrixClient.getUserId()) return;
this.emit(cons.events.roomList.ROOMLIST_UPDATED);
const content = event.getContent();
const userReadEventId = Object.keys(content)[0];
const eventReaderUserId = Object.keys(content[userReadEventId]['m.read'])[0];
if (eventReaderUserId !== this.matrixClient.getUserId()) return;
this.emit(cons.events.roomList.MY_RECEIPT_ARRIVED, room.roomId);
}
});
@ -280,8 +281,13 @@ class RoomList extends EventEmitter {
this.emit(cons.events.roomList.ROOMLIST_UPDATED);
});
this.matrixClient.on('Room.timeline', () => {
this.emit(cons.events.roomList.ROOMLIST_UPDATED);
this.matrixClient.on('Room.timeline', (event, room) => {
const supportEvents = ['m.room.message', 'm.room.encrypted', 'm.sticker'];
if (!supportEvents.includes(event.getType())) return;
const lastTimelineEvent = room.timeline[room.timeline.length - 1];
if (lastTimelineEvent.getId() !== event.getId()) return;
this.emit(cons.events.roomList.EVENT_ARRIVED, room.roomId);
});
}
}

2
src/client/state/cons.js
View file

@ -50,6 +50,8 @@ const cons = {
ROOM_JOINED: 'ROOM_JOINED',
ROOM_LEAVED: 'ROOM_LEAVED',
ROOM_CREATED: 'ROOM_CREATED',
MY_RECEIPT_ARRIVED: 'MY_RECEIPT_ARRIVED',
EVENT_ARRIVED: 'EVENT_ARRIVED',
},
roomTimeline: {
EVENT: 'EVENT',

5
src/client/state/navigation.js
View file

@ -6,7 +6,7 @@ class Navigation extends EventEmitter {
constructor() {
super();
this.activeTab = 'channels';
this.activeTab = 'home';
this.activeRoomId = null;
this.isPeopleDrawerVisible = true;
}
@ -26,8 +26,9 @@ class Navigation extends EventEmitter {
this.emit(cons.events.navigation.TAB_CHANGED, this.activeTab);
},
[cons.actions.navigation.SELECT_ROOM]: () => {
const prevActiveRoomId = this.activeRoomId;
this.activeRoomId = action.roomId;
this.emit(cons.events.navigation.ROOM_SELECTED, this.activeRoomId);
this.emit(cons.events.navigation.ROOM_SELECTED, this.activeRoomId, prevActiveRoomId);
},
[cons.actions.navigation.TOGGLE_PEOPLE_DRAWER]: () => {
this.isPeopleDrawerVisible = !this.isPeopleDrawerVisible;