Add GeneralSettings component

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

src/app/organisms/room/RoomSettings.jsx

@@ -1,21 +1,28 @@
-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './RoomSettings.scss';
 
+import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
+import { openInviteUser } from '../../../client/action/navigation';
+import * as roomActions from '../../../client/action/room';
 
 import Text from '../../atoms/text/Text';
 import Header, { TitleWrapper } from '../../atoms/header/Header';
 import ScrollView from '../../atoms/scroll/ScrollView';
 import Tabs from '../../atoms/tabs/Tabs';
+import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
 import RoomProfile from '../../molecules/room-profile/RoomProfile';
+import RoomNotification from '../../molecules/room-notification/RoomNotification';
 
 import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
 import SearchIC from '../../../../public/res/ic/outlined/search.svg';
 import ShieldUserIC from '../../../../public/res/ic/outlined/shield-user.svg';
 import LockIC from '../../../../public/res/ic/outlined/lock.svg';
 import InfoIC from '../../../../public/res/ic/outlined/info.svg';
+import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
+import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
 
 import { useForceUpdate } from '../../hooks/useForceUpdate';
 
@@ -41,16 +48,53 @@ const tabItems = [{
   disabled: false,
 }];
 
+function GeneralSettings({ roomId }) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  const canInvite = room.canInvite(mx.getUserId());
+
+  return (
+    <>
+      <div className="room-settings__card">
+        <MenuHeader>Notification</MenuHeader>
+        <RoomNotification roomId={roomId} />
+      </div>
+      <div className="room-settings__card">
+        <MenuItem
+          disabled={!canInvite}
+          onClick={() => openInviteUser(roomId)}
+          iconSrc={AddUserIC}
+        >
+          Invite
+        </MenuItem>
+        <MenuItem variant="danger" onClick={() => roomActions.leave(roomId)} iconSrc={LeaveArrowIC}>Leave</MenuItem>
+      </div>
+    </>
+  );
+}
+
+GeneralSettings.propTypes = {
+  roomId: PropTypes.string.isRequired,
+};
+
 function RoomSettings({ roomId }) {
   const [, forceUpdate] = useForceUpdate();
+  const [selectedTab, setSelectedTab] = useState(tabItems[0]);
+
+  const handleTabChange = (tabItem) => {
+    setSelectedTab(tabItem);
+  };
 
   useEffect(() => {
+    let mounted = true;
     const settingsToggle = (isVisible) => {
+      if (!mounted) return;
       if (isVisible) forceUpdate();
       else setTimeout(() => forceUpdate(), 200);
     };
     navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
     return () => {
+      mounted = false;
       navigation.removeListener(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
     };
   }, []);
@@ -67,10 +111,9 @@ function RoomSettings({ roomId }) {
             </TitleWrapper>
           </Header>
           <RoomProfile roomId={roomId} />
-          <Tabs items={tabItems} onSelect={() => false} />
+          <Tabs items={tabItems} onSelect={handleTabChange} />
           <div className="room-settings__cards-wrapper">
-            {/* <div className="room-settings__card">
-            </div> */}
+            {selectedTab.text === tabItems[0].text && <GeneralSettings roomId={roomId} />}
           </div>
         </div>
       </ScrollView>