From cb6e71e5445e38e1248f957bd3564e27a200b384 Mon Sep 17 00:00:00 2001 From: Ajay Bura Date: Mon, 15 Nov 2021 09:23:59 +0530 Subject: [PATCH] Save peopleDrawer visibility in localStorage Signed-off-by: Ajay Bura --- src/app/organisms/room/Room.jsx | 7 ++++--- src/app/organisms/room/RoomViewHeader.jsx | 3 ++- src/client/action/navigation.js | 7 ------- src/client/action/settings.js | 7 +++++++ src/client/state/cons.js | 2 ++ src/client/state/navigation.js | 5 ----- src/client/state/settings.js | 15 +++++++++++++++ 7 files changed, 30 insertions(+), 16 deletions(-) diff --git a/src/app/organisms/room/Room.jsx b/src/app/organisms/room/Room.jsx index 6112d2b..7cb30cd 100644 --- a/src/app/organisms/room/Room.jsx +++ b/src/app/organisms/room/Room.jsx @@ -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); }; }, []); diff --git a/src/app/organisms/room/RoomViewHeader.jsx b/src/app/organisms/room/RoomViewHeader.jsx index 30072f6..22bc07a 100644 --- a/src/app/organisms/room/RoomViewHeader.jsx +++ b/src/app/organisms/room/RoomViewHeader.jsx @@ -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'; diff --git a/src/client/action/navigation.js b/src/client/action/navigation.js index b9e428f..6617928 100644 --- a/src/client/action/navigation.js +++ b/src/client/action/navigation.js @@ -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, diff --git a/src/client/action/settings.js b/src/client/action/settings.js index 1664eb8..beac851 100644 --- a/src/client/action/settings.js +++ b/src/client/action/settings.js @@ -7,6 +7,13 @@ function toggleMarkdown() { }); } +function togglePeopleDrawer() { + appDispatcher.dispatch({ + type: cons.actions.settings.TOGGLE_PEOPLE_DRAWER, + }); +} + export { toggleMarkdown, + togglePeopleDrawer, }; diff --git a/src/client/state/cons.js b/src/client/state/cons.js index c02bfa2..9a30d1e 100644 --- a/src/client/state/cons.js +++ b/src/client/state/cons.js @@ -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', }, }, }; diff --git a/src/client/state/navigation.js b/src/client/state/navigation.js index cbf8a76..76cecad 100644 --- a/src/client/state/navigation.js +++ b/src/client/state/navigation.js @@ -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); }, diff --git a/src/client/state/settings.js b/src/client/state/settings.js index 9516d86..2c19690 100644 --- a/src/client/state/settings.js +++ b/src/client/state/settings.js @@ -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]?.();