feature/IO-3000-messaging-sockets-migration2 -
- [EXISTING BUG?] The updated at timeframes do not automatically update as time passes. If you receive a message, and it is changed to a few seconds ago, if you wait a few minutes, it does not change unless you interact with it forcing a re-render. This can be solved by adding a tick state and periodically refreshing - unsure of the performance impact for many elements however. Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
import { Badge, Card, List, Space, Tag } from "antd";
|
import { Badge, Card, List, Space, Tag } from "antd";
|
||||||
import React from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { Virtuoso } from "react-virtuoso";
|
import { Virtuoso } from "react-virtuoso";
|
||||||
import { createStructuredSelector } from "reselect";
|
import { createStructuredSelector } from "reselect";
|
||||||
@@ -20,6 +20,18 @@ const mapDispatchToProps = (dispatch) => ({
|
|||||||
});
|
});
|
||||||
|
|
||||||
function ChatConversationListComponent({ conversationList, selectedConversation, setSelectedConversation }) {
|
function ChatConversationListComponent({ conversationList, selectedConversation, setSelectedConversation }) {
|
||||||
|
// That comma is there for a reason, do not remove it
|
||||||
|
const [, forceUpdate] = useState(false);
|
||||||
|
|
||||||
|
// Re-render every minute
|
||||||
|
useEffect(() => {
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
forceUpdate((prev) => !prev); // Toggle state to trigger re-render
|
||||||
|
}, 60000); // 1 minute in milliseconds
|
||||||
|
|
||||||
|
return () => clearInterval(interval); // Cleanup on unmount
|
||||||
|
}, []);
|
||||||
|
|
||||||
const renderConversation = (index) => {
|
const renderConversation = (index) => {
|
||||||
const item = conversationList[index];
|
const item = conversationList[index];
|
||||||
const cardContentRight = <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
|
const cardContentRight = <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
|
||||||
|
|||||||
Reference in New Issue
Block a user