Save peopleDrawer visibility in localStorage

Signed-off-by: Ajay Bura <ajbura@gmail.com>

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);
     };
   }, []);
 

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';
 

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,

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,
 };

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',
     },
   },
 };

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);
       },

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]?.();