Can load older messages in conversations

matrixgw_frontend/src/utils/RoomEventsManager.ts

@@ -36,6 +36,10 @@ export class RoomEventsManager {
   typingUsers: string[];
   receiptsEventsMap: Map<string, Receipt[]>;
 
+  get canLoadOlder(): boolean {
+    return !!this.endToken;
+  }
+
   constructor(
     room: Room,
     initialMessages: MatrixEventsList,

matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx

@@ -7,6 +7,7 @@ import {
   Button,
   ButtonGroup,
   Chip,
+  CircularProgress,
   Dialog,
   DialogActions,
   DialogContent,
@@ -40,6 +41,10 @@ export function RoomMessagesList(p: {
   users: UsersMap;
   manager: RoomEventsManager;
 }): React.ReactElement {
+  const snackbar = useSnackbar();
+
+  const [loadingOlder, setLoadingOlder] = React.useState(false);
+
   const listContainerRef = React.createRef<HTMLDivElement>();
   const messagesEndRef = React.createRef<HTMLDivElement>();
 
@@ -50,8 +55,9 @@ export function RoomMessagesList(p: {
   }, [p.manager.messages.at(-1)?.event_id]);
 
   // Watch scroll to detect when user reach the top to load older messages
-  const handleScroll = () => {
-    if (!listContainerRef.current) return;
+  const handleScroll = async () => {
+    if (!listContainerRef.current || loadingOlder || !p.manager.canLoadOlder)
+      return;
 
     const { scrollTop } = listContainerRef.current;
 
@@ -59,9 +65,20 @@ export function RoomMessagesList(p: {
       return;
     }
 
-    console.log("reached top");
-    // TODO : load old messages
-    // TODO : block when user reached begining of conversation
+    setLoadingOlder(true);
+
+    try {
+      const older = await MatrixApiEvent.GetRoomEvents(
+        p.room,
+        p.manager.endToken
+      );
+      p.manager.processNewEvents(older);
+    } catch (e) {
+      console.error("Failed to load older messages!", e);
+      snackbar(`Failed to load older messages for conversation! ${e}`);
+    } finally {
+      setLoadingOlder(false);
+    }
   };
 
   return (
@@ -90,6 +107,31 @@ export function RoomMessagesList(p: {
         </div>
       )}
 
+      {/** Begining of conversation */}
+      {!p.manager.canLoadOlder && (
+        <Typography
+          component={"div"}
+          variant="caption"
+          style={{ textAlign: "center", marginTop: "10px" }}
+        >
+          Begining of conversation
+        </Typography>
+      )}
+
+      {/** Loading older messages spinner */}
+      {loadingOlder && (
+        <div
+          style={{
+            display: "inline-flex",
+            justifyContent: "center",
+            width: "100%",
+            padding: "20px",
+          }}
+        >
+          <CircularProgress />
+        </div>
+      )}
+
       {p.manager.messages.map((m, idx) => (
         <RoomMessage
           key={m.event_id}