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

Refactor navigation

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-01-26 17:03:26 +05:30
parent f47998a553
commit 992da7c7be
7 changed files with 130 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,34 +14,12 @@ import DrawerBreadcrumb from './DrawerBreadcrumb';
import Home from './Home';
import Directs from './Directs';
function Drawer() {
const [systemState, setSystemState] = useState(null);
const [selectedTab, setSelectedTab] = useState(navigation.selectedTab);
const [spaceId, setSpaceId] = useState(navigation.selectedSpaceId);
const scrollRef = useRef(null);
import { useSelectedTab } from '../../hooks/useSelectedTab';
import { useSelectedSpace } from '../../hooks/useSelectedSpace';
function useSystemState() {
const [systemState, setSystemState] = useState(null);
useEffect(() => {
const onTabSelected = (tabId) => {
setSelectedTab(tabId);
};
const onSpaceSelected = (roomId) => {
setSpaceId(roomId);
};
const onRoomLeaved = (roomId) => {
const lRoomIndex = navigation.selectedSpacePath.indexOf(roomId);
if (lRoomIndex === -1) return;
if (lRoomIndex === 0) selectTab(cons.tabs.HOME);
else selectSpace(navigation.selectedSpacePath[lRoomIndex - 1]);
};
navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
navigation.on(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
initMatrix.roomList.on(cons.events.roomList.ROOM_LEAVED, onRoomLeaved);
return () => {
navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
navigation.removeListener(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
initMatrix.roomList.removeListener(cons.events.roomList.ROOM_LEAVED, onRoomLeaved);
};
}, []);
useEffect(() => {
const handleSystemState = (state) => {
if (state === 'ERROR' || state === 'RECONNECTING' || state === 'STOPPED') {
@ -55,6 +33,15 @@ function Drawer() {
};
}, [systemState]);
return [systemState];
}
function Drawer() {
const [systemState] = useSystemState();
const [selectedTab] = useSelectedTab();
const [spaceId] = useSelectedSpace();
const scrollRef = useRef(null);
useEffect(() => {
requestAnimationFrame(() => {
scrollRef.current.scrollTop = 0;

59
src/app/organisms/navigation/SideBar.jsx
View file

@ -7,7 +7,6 @@ import colorMXID from '../../../util/colorMXID';
import {
selectTab, openInviteList, openSearch, openSettings,
} from '../../../client/action/navigation';
import navigation from '../../../client/state/navigation';
import { abbreviateNumber } from '../../../util/common';
import ScrollView from '../../atoms/scroll/ScrollView';
@ -18,6 +17,9 @@ import UserIC from '../../../../public/res/ic/outlined/user.svg';
import SearchIC from '../../../../public/res/ic/outlined/search.svg';
import InviteIC from '../../../../public/res/ic/outlined/invite.svg';
import { useSelectedTab } from '../../hooks/useSelectedTab';
import { useSpaceShortcut } from '../../hooks/useSpaceShortcut';
function ProfileAvatarMenu() {
const mx = initMatrix.matrixClient;
const [profile, setProfile] = useState({
@ -54,41 +56,42 @@ function ProfileAvatarMenu() {
);
}
function SideBar() {
const { roomList, notifications } = initMatrix;
const mx = initMatrix.matrixClient;
function useTotalInvites() {
const { roomList } = initMatrix;
const totalInviteCount = () => roomList.inviteRooms.size
+ roomList.inviteSpaces.size
+ roomList.inviteDirects.size;
const [totalInvites, updateTotalInvites] = useState(totalInviteCount());
const [selectedTab, setSelectedTab] = useState(navigation.selectedTab);
const [, forceUpdate] = useState({});
function onTabSelected(tabId) {
setSelectedTab(tabId);
}
function onInviteListChange() {
updateTotalInvites(totalInviteCount());
}
function onSpaceShortcutUpdated() {
forceUpdate({});
}
function onNotificationChanged(roomId, total, prevTotal) {
if (total === prevTotal) return;
forceUpdate({});
}
useEffect(() => {
navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
roomList.on(cons.events.roomList.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
const onInviteListChange = () => {
updateTotalInvites(totalInviteCount());
};
roomList.on(cons.events.roomList.INVITELIST_UPDATED, onInviteListChange);
notifications.on(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
return () => {
navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
roomList.removeListener(cons.events.roomList.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
roomList.removeListener(cons.events.roomList.INVITELIST_UPDATED, onInviteListChange);
};
}, []);
return [totalInvites];
}
function SideBar() {
const { roomList, notifications } = initMatrix;
const mx = initMatrix.matrixClient;
const [selectedTab] = useSelectedTab();
const [spaceShortcut] = useSpaceShortcut();
const [totalInvites] = useTotalInvites();
const [, forceUpdate] = useState({});
useEffect(() => {
function onNotificationChanged(roomId, total, prevTotal) {
if (total === prevTotal) return;
forceUpdate({});
}
notifications.on(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
return () => {
notifications.removeListener(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
};
}, []);
@ -156,7 +159,7 @@ function SideBar() {
<div className="sidebar-divider" />
<div className="space-container">
{
[...roomList.spaceShortcut].map((shortcut) => {
spaceShortcut.map((shortcut) => {
const sRoomId = shortcut;
const room = mx.getRoom(sRoomId);
return (