Statistics: Various fixes (#1835)

src/components/right/statistics/MessageStatistics.tsx

@@ -40,7 +40,7 @@ export type OwnProps = {
 };
 
 export type StateProps = {
-  statistics: ApiMessageStatistics;
+  statistics?: ApiMessageStatistics;
   messageId?: number;
   dcId?: number;
 };
@@ -99,7 +99,7 @@ const Statistics: FC<OwnProps & StateProps> = ({
         return;
       }
 
-      if (!statistics) {
+      if (!statistics || !containerRef.current) {
         return;
       }
 
@@ -161,10 +161,11 @@ const Statistics: FC<OwnProps & StateProps> = ({
 
 export default memo(withGlobal<OwnProps>(
   (global, { chatId }): StateProps => {
-    const { currentMessage, currentMessageId } = global.statistics;
     const chat = selectChat(global, chatId);
     const dcId = chat?.fullInfo?.statisticsDcId;
+    const statistics = global.statistics.currentMessage;
+    const messageId = global.statistics.currentMessageId;
 
-    return { statistics: currentMessage, dcId, messageId: currentMessageId };
+    return { statistics, dcId, messageId };
   },
 )(Statistics));

src/components/right/statistics/Statistics.scss

@@ -4,11 +4,11 @@
   overflow-y: hidden;
 
   &__messages {
-    padding: 1rem 0.75rem;
+    padding: 1rem 0.25rem;
     border-top: 1px solid var(--color-borders);
 
     &-title {
-      padding-left: 0.25rem;
+      padding-left: 0.75rem;
       font-size: 16px;
       color: var(--text-color);
       line-height: 30px;

src/components/right/statistics/Statistics.tsx

@@ -15,6 +15,7 @@ import { selectChat, selectStatistics } from '../../../global/selectors';
 
 import buildClassName from '../../../util/buildClassName';
 import useLang from '../../../hooks/useLang';
+import useForceUpdate from '../../../hooks/useForceUpdate';
 
 import Loading from '../../ui/Loading';
 import StatisticsOverview from './StatisticsOverview';
@@ -84,6 +85,7 @@ const Statistics: FC<OwnProps & StateProps> = ({
   const loadedCharts = useRef<string[]>([]);
 
   const { loadStatistics, loadStatisticsAsyncGraph } = getActions();
+  const forceUpdate = useForceUpdate();
 
   useEffect(() => {
     loadStatistics({ chatId, isGroup });
@@ -169,9 +171,11 @@ const Statistics: FC<OwnProps & StateProps> = ({
 
         loadedCharts.current.push(name);
       });
+
+      forceUpdate();
     })();
   }, [
-    graphs, graphTitles, isReady, statistics, lang, chatId, loadStatisticsAsyncGraph, dcId,
+    graphs, graphTitles, isReady, statistics, lang, chatId, loadStatisticsAsyncGraph, dcId, forceUpdate,
   ]);
 
   if (!isReady || !statistics || messageId) {

src/components/right/statistics/StatisticsRecentMessage.scss

@@ -1,10 +1,15 @@
 .StatisticsRecentMessage {
   position: relative;
   cursor: pointer;
-  margin-bottom: 1rem;
+  padding: 0.5rem;
+  border-radius: var(--border-radius-default-small);
+
+  &:hover, &:active {
+    background-color: var(--color-chat-hover);
+  }
 
   &--with-image {
-    padding-left: 3rem;
+    padding-left: 3.5rem;
   }
 
   &__summary {
@@ -18,8 +23,8 @@
       width: 2.5rem;
       height: 2.5rem;
       position: absolute;
-      left: 0;
+      left: 0.5rem;
-      top: 0;
+      top: 0.5rem;
       object-fit: cover;
       border-radius: 0.25rem;
       margin-inline-end: 0.25rem;

src/global/initialState.ts

@@ -201,7 +201,6 @@ export const INITIAL_STATE: GlobalState = {
 
   statistics: {
     byChatId: {},
-    currentMessage: {},
   },
 
   pollModal: {

src/global/reducers/statistics.ts

@@ -9,7 +9,6 @@ export function updateStatistics(
   return {
     ...global,
     statistics: {
-      currentMessage: {},
       byChatId: {
         ...global.statistics.byChatId,
         [chatId]: statistics,

src/global/types.ts

@@ -519,7 +519,7 @@ export type GlobalState = {
 
   statistics: {
     byChatId: Record<string, ApiChannelStatistics | ApiGroupStatistics>;
-    currentMessage: ApiMessageStatistics;
+    currentMessage?: ApiMessageStatistics;
     currentMessageId?: number;
   };