Save peopleDrawer visibility in localStorage

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-11-15 09:23:59 +05:30
parent 1487dcbadc
commit cb6e71e544
7 changed files with 30 additions and 16 deletions

View file

@ -3,6 +3,7 @@ import './Room.scss';
import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation';
import settings from '../../../client/state/settings';
import Welcome from '../welcome/Welcome';
import RoomView from './RoomView';
@ -10,7 +11,7 @@ import PeopleDrawer from './PeopleDrawer';
function Room() {
const [selectedRoomId, changeSelectedRoomId] = useState(null);
const [isDrawerVisible, toggleDrawerVisiblity] = useState(navigation.isPeopleDrawerVisible);
const [isDrawerVisible, toggleDrawerVisiblity] = useState(settings.isPeopleDrawer);
useEffect(() => {
const handleRoomSelected = (roomId) => {
changeSelectedRoomId(roomId);
@ -19,11 +20,11 @@ function Room() {
toggleDrawerVisiblity(visiblity);
};
navigation.on(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
navigation.on(cons.events.navigation.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
settings.on(cons.events.settings.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
return () => {
navigation.removeListener(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
navigation.removeListener(cons.events.navigation.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
settings.removeListener(cons.events.settings.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
};
}, []);

View file

@ -2,7 +2,8 @@ import React from 'react';
import PropTypes from 'prop-types';
import initMatrix from '../../../client/initMatrix';
import { togglePeopleDrawer, openRoomOptions } from '../../../client/action/navigation';
import { openRoomOptions } from '../../../client/action/navigation';
import { togglePeopleDrawer } from '../../../client/action/settings';
import colorMXID from '../../../util/colorMXID';
import { getEventCords } from '../../../util/common';

View file

@ -22,12 +22,6 @@ function selectRoom(roomId) {
});
}
function togglePeopleDrawer() {
appDispatcher.dispatch({
type: cons.actions.navigation.TOGGLE_PEOPLE_DRAWER,
});
}
function openInviteList() {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_INVITE_LIST,
@ -97,7 +91,6 @@ export {
selectTab,
selectSpace,
selectRoom,
togglePeopleDrawer,
openInviteList,
openPublicRooms,
openCreateRoom,

View file

@ -7,6 +7,13 @@ function toggleMarkdown() {
});
}
function togglePeopleDrawer() {
appDispatcher.dispatch({
type: cons.actions.settings.TOGGLE_PEOPLE_DRAWER,
});
}
export {
toggleMarkdown,
togglePeopleDrawer,
};

View file

@ -46,6 +46,7 @@ const cons = {
},
settings: {
TOGGLE_MARKDOWN: 'TOGGLE_MARKDOWN',
TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
},
},
events: {
@ -91,6 +92,7 @@ const cons = {
},
settings: {
MARKDOWN_TOGGLED: 'MARKDOWN_TOGGLED',
PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED',
},
},
};

View file

@ -11,7 +11,6 @@ class Navigation extends EventEmitter {
this.selectedSpacePath = [cons.tabs.HOME];
this.selectedRoomId = null;
this.isPeopleDrawerVisible = true;
}
_setSpacePath(roomId) {
@ -53,10 +52,6 @@ class Navigation extends EventEmitter {
this.selectedRoomId = action.roomId;
this.emit(cons.events.navigation.ROOM_SELECTED, this.selectedRoomId, prevSelectedRoomId);
},
[cons.actions.navigation.TOGGLE_PEOPLE_DRAWER]: () => {
this.isPeopleDrawerVisible = !this.isPeopleDrawerVisible;
this.emit(cons.events.navigation.PEOPLE_DRAWER_TOGGLED, this.isPeopleDrawerVisible);
},
[cons.actions.navigation.OPEN_INVITE_LIST]: () => {
this.emit(cons.events.navigation.INVITE_LIST_OPENED);
},

View file

@ -24,6 +24,7 @@ class Settings extends EventEmitter {
this.themeIndex = this.getThemeIndex();
this.isMarkdown = this.getIsMarkdown();
this.isPeopleDrawer = this.getIsPeopleDrawer();
this.isTouchScreenDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
}
@ -62,6 +63,15 @@ class Settings extends EventEmitter {
return settings.isMarkdown;
}
getIsPeopleDrawer() {
if (typeof this.isPeopleDrawer === 'boolean') return this.isPeopleDrawer;
const settings = getSettings();
if (settings === null) return true;
if (typeof settings.isPeopleDrawer === 'undefined') return true;
return settings.isPeopleDrawer;
}
setter(action) {
const actions = {
[cons.actions.settings.TOGGLE_MARKDOWN]: () => {
@ -69,6 +79,11 @@ class Settings extends EventEmitter {
setSettings('isMarkdown', this.isMarkdown);
this.emit(cons.events.settings.MARKDOWN_TOGGLED, this.isMarkdown);
},
[cons.actions.settings.TOGGLE_PEOPLE_DRAWER]: () => {
this.isPeopleDrawer = !this.isPeopleDrawer;
setSettings('isPeopleDrawer', this.isPeopleDrawer);
this.emit(cons.events.settings.PEOPLE_DRAWER_TOGGLED, this.isPeopleDrawer);
},
};
actions[action.type]?.();