Added unread indicator (#67), reply link back to original (#96)

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

src/app/organisms/room/Room.jsx

@@ -1,39 +1,50 @@
 import React, { useState, useEffect } from 'react';
 import './Room.scss';
 
+import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
 import settings from '../../../client/state/settings';
+import RoomTimeline from '../../../client/state/RoomTimeline';
 
 import Welcome from '../welcome/Welcome';
 import RoomView from './RoomView';
 import PeopleDrawer from './PeopleDrawer';
 
 function Room() {
-  const [selectedRoomId, changeSelectedRoomId] = useState(null);
-  const [isDrawerVisible, toggleDrawerVisiblity] = useState(settings.isPeopleDrawer);
+  const [roomTimeline, setRoomTimeline] = useState(null);
+  const [eventId, setEventId] = useState(null);
+  const [isDrawer, setIsDrawer] = useState(settings.isPeopleDrawer);
+
+  const mx = initMatrix.matrixClient;
+  const handleRoomSelected = (rId, pRoomId, eId) => {
+    if (mx.getRoom(rId)) {
+      setRoomTimeline(new RoomTimeline(rId));
+      setEventId(eId);
+    } else {
+      // TODO: add ability to join room if roomId is invalid
+      setRoomTimeline(null);
+      setEventId(null);
+    }
+  };
+  const handleDrawerToggling = (visiblity) => setIsDrawer(visiblity);
+
   useEffect(() => {
-    const handleRoomSelected = (roomId) => {
-      changeSelectedRoomId(roomId);
-    };
-    const handleDrawerToggling = (visiblity) => {
-      toggleDrawerVisiblity(visiblity);
-    };
     navigation.on(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
     settings.on(cons.events.settings.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
-
     return () => {
       navigation.removeListener(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
       settings.removeListener(cons.events.settings.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
+      roomTimeline?.removeInternalListeners();
     };
   }, []);
 
-  if (selectedRoomId === null) return <Welcome />;
+  if (roomTimeline === null) return <Welcome />;
 
   return (
     <div className="room-container">
-      <RoomView roomId={selectedRoomId} />
-      { isDrawerVisible && <PeopleDrawer roomId={selectedRoomId} />}
+      <RoomView roomTimeline={roomTimeline} eventId={eventId} />
+      { isDrawer && <PeopleDrawer roomId={roomTimeline.roomId} />}
     </div>
   );
 }