mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-15 11:40:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refector room list drawer

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-02-27 21:10:54 +05:30
parent a62df536dd
commit 906fc2dd3d
6 changed files with 77 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/app/organisms/navigation/Directs.jsx
View file

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useEffect } from 'react';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
@ -15,42 +15,26 @@ function Directs() {
const { roomList, notifications } = initMatrix;
const directIds = [...roomList.directs].sort(AtoZ);
const [, forceUpdate] = useState({});
function selectorChanged(selectedRoomId, prevSelectedRoomId) {
if (!drawerPostie.hasTopic('selector-change')) return;
const addresses = [];
if (drawerPostie.hasSubscriber('selector-change', selectedRoomId)) addresses.push(selectedRoomId);
if (drawerPostie.hasSubscriber('selector-change', prevSelectedRoomId)) addresses.push(prevSelectedRoomId);
if (addresses.length === 0) return;
drawerPostie.post('selector-change', addresses, selectedRoomId);
}
function notiChanged(roomId, total, prevTotal) {
if (total === prevTotal) return;
if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) {
drawerPostie.post('unread-change', roomId);
}
}
function roomListUpdated() {
const { spaces, rooms, directs } = initMatrix.roomList;
if (!(
spaces.has(navigation.selectedRoomId)
|| rooms.has(navigation.selectedRoomId)
|| directs.has(navigation.selectedRoomId))
) {
selectRoom(null);
}
forceUpdate({});
}
useEffect(() => {
roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
const selectorChanged = (selectedRoomId, prevSelectedRoomId) => {
if (!drawerPostie.hasTopic('selector-change')) return;
const addresses = [];
if (drawerPostie.hasSubscriber('selector-change', selectedRoomId)) addresses.push(selectedRoomId);
if (drawerPostie.hasSubscriber('selector-change', prevSelectedRoomId)) addresses.push(prevSelectedRoomId);
if (addresses.length === 0) return;
drawerPostie.post('selector-change', addresses, selectedRoomId);
};
const notiChanged = (roomId, total, prevTotal) => {
if (total === prevTotal) return;
if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) {
drawerPostie.post('unread-change', roomId);
}
};
navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged);
notifications.on(cons.events.notifications.NOTI_CHANGED, notiChanged);
return () => {
roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
notifications.removeListener(cons.events.notifications.NOTI_CHANGED, notiChanged);
};

4
src/app/organisms/navigation/Drawer.scss
View file

@ -64,8 +64,8 @@
}
& .cat-header {
margin: var(--sp-normal);
margin-bottom: var(--sp-extra-tight);
margin-top: var(--sp-extra-tight);
padding: var(--sp-extra-tight) var(--sp-normal);
text-transform: uppercase;
}
}

60
src/app/organisms/navigation/Home.jsx
View file

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import initMatrix from '../../../client/initMatrix';
@ -14,7 +14,6 @@ import { AtoZ } from './common';
const drawerPostie = new Postie();
function Home({ spaceId }) {
const [, forceUpdate] = useState({});
const { roomList, notifications } = initMatrix;
let spaceIds = [];
let roomIds = [];
@ -32,47 +31,38 @@ function Home({ spaceId }) {
.filter((roomId) => !roomList.roomIdToParents.has(roomId)).sort(AtoZ);
}
function selectorChanged(selectedRoomId, prevSelectedRoomId) {
if (!drawerPostie.hasTopic('selector-change')) return;
const addresses = [];
if (drawerPostie.hasSubscriber('selector-change', selectedRoomId)) addresses.push(selectedRoomId);
if (drawerPostie.hasSubscriber('selector-change', prevSelectedRoomId)) addresses.push(prevSelectedRoomId);
if (addresses.length === 0) return;
drawerPostie.post('selector-change', addresses, selectedRoomId);
}
function notiChanged(roomId, total, prevTotal) {
if (total === prevTotal) return;
if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) {
drawerPostie.post('unread-change', roomId);
}
}
function roomListUpdated() {
const { spaces, rooms, directs } = initMatrix.roomList;
if (!(
spaces.has(navigation.selectedRoomId)
|| rooms.has(navigation.selectedRoomId)
|| directs.has(navigation.selectedRoomId))
) {
selectRoom(null);
}
forceUpdate({});
}
useEffect(() => {
roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
const selectorChanged = (selectedRoomId, prevSelectedRoomId) => {
if (!drawerPostie.hasTopic('selector-change')) return;
const addresses = [];
if (drawerPostie.hasSubscriber('selector-change', selectedRoomId)) addresses.push(selectedRoomId);
if (drawerPostie.hasSubscriber('selector-change', prevSelectedRoomId)) addresses.push(prevSelectedRoomId);
if (addresses.length === 0) return;
drawerPostie.post('selector-change', addresses, selectedRoomId);
};
const notiChanged = (roomId, total, prevTotal) => {
if (total === prevTotal) return;
if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) {
drawerPostie.post('unread-change', roomId);
}
};
navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged);
notifications.on(cons.events.notifications.NOTI_CHANGED, notiChanged);
return () => {
roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
notifications.removeListener(cons.events.notifications.NOTI_CHANGED, notiChanged);
};
}, []);
const renderCatHeader = (name) => (
<Text className="cat-header" variant="b3" weight="bold">{name}</Text>
);
return (
<>
{ spaceIds.length !== 0 && <Text className="cat-header" variant="b3" weight="bold">Spaces</Text> }
{ spaceIds.length !== 0 && renderCatHeader('Spaces') }
{ spaceIds.map((id) => (
<Selector
key={id}
@ -83,7 +73,7 @@ function Home({ spaceId }) {
/>
))}
{ roomIds.length !== 0 && <Text className="cat-header" variant="b3" weight="bold">Rooms</Text> }
{ roomIds.length !== 0 && renderCatHeader('Rooms') }
{ roomIds.map((id) => (
<Selector
key={id}
@ -94,7 +84,9 @@ function Home({ spaceId }) {
/>
)) }
{ directIds.length !== 0 && <Text className="cat-header" variant="b3" weight="bold">People</Text> }
{}
{ directIds.length !== 0 && renderCatHeader('People') }
{ directIds.map((id) => (
<Selector
key={id}

18
src/app/organisms/navigation/Selector.jsx
View file

@ -15,6 +15,8 @@ import SpaceOptions from '../../molecules/space-options/SpaceOptions';
import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
import { useForceUpdate } from '../../hooks/useForceUpdate';
function Selector({
roomId, isDM, drawerPostie, onClick,
}) {
@ -24,19 +26,11 @@ function Selector({
let imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
if (imageSrc === null) imageSrc = room.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
const [isSelected, setIsSelected] = useState(navigation.selectedRoomId === roomId);
const [, forceUpdate] = useState({});
function selectorChanged(selectedRoomId) {
setIsSelected(selectedRoomId === roomId);
}
function changeNotificationBadge() {
forceUpdate({});
}
const [, forceUpdate] = useForceUpdate();
useEffect(() => {
drawerPostie.subscribe('selector-change', roomId, selectorChanged);
drawerPostie.subscribe('unread-change', roomId, changeNotificationBadge);
drawerPostie.subscribe('selector-change', roomId, forceUpdate);
drawerPostie.subscribe('unread-change', roomId, forceUpdate);
return () => {
drawerPostie.unsubscribe('selector-change', roomId);
drawerPostie.unsubscribe('unread-change', roomId);
@ -61,7 +55,7 @@ function Selector({
roomId={roomId}
imageSrc={isDM ? imageSrc : null}
iconSrc={isDM ? null : joinRuleToIconSrc(room.getJoinRule(), room.isSpaceRoom())}
isSelected={isSelected}
isSelected={navigation.selectedRoomId === roomId}
isUnread={noti.hasNoti(roomId)}
notificationCount={abbreviateNumber(noti.getTotalNoti(roomId))}
isAlert={noti.getHighlightNoti(roomId) !== 0}