From 41354161b9a333aa07adf5c4b6e53d43c018c310 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 20 Apr 2022 14:32:05 +0200
Subject: [PATCH] Statistics: Various fixes (#1835)

---
 .../right/statistics/MessageStatistics.tsx          |  9 +++++----
 src/components/right/statistics/Statistics.scss     |  4 ++--
 src/components/right/statistics/Statistics.tsx      |  6 +++++-
 .../right/statistics/StatisticsRecentMessage.scss   | 13 +++++++++----
 src/global/initialState.ts                          |  1 -
 src/global/reducers/statistics.ts                   |  1 -
 src/global/types.ts                                 |  2 +-
 7 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/right/statistics/MessageStatistics.tsx b/src/components/right/statistics/MessageStatistics.tsx
index d9fbf890..07715367 100644
--- a/src/components/right/statistics/MessageStatistics.tsx
+++ b/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));
diff --git a/src/components/right/statistics/Statistics.scss b/src/components/right/statistics/Statistics.scss
index dcc75f94..680afd4a 100644
--- a/src/components/right/statistics/Statistics.scss
+++ b/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;
diff --git a/src/components/right/statistics/Statistics.tsx b/src/components/right/statistics/Statistics.tsx
index 96907f2b..c833bf3e 100644
--- a/src/components/right/statistics/Statistics.tsx
+++ b/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) {
diff --git a/src/components/right/statistics/StatisticsRecentMessage.scss b/src/components/right/statistics/StatisticsRecentMessage.scss
index 34d96846..74acd650 100644
--- a/src/components/right/statistics/StatisticsRecentMessage.scss
+++ b/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;
-      top: 0;
+      left: 0.5rem;
+      top: 0.5rem;
       object-fit: cover;
       border-radius: 0.25rem;
       margin-inline-end: 0.25rem;
diff --git a/src/global/initialState.ts b/src/global/initialState.ts
index dbcb84e9..a365ef43 100644
--- a/src/global/initialState.ts
+++ b/src/global/initialState.ts
@@ -201,7 +201,6 @@ export const INITIAL_STATE: GlobalState = {
 
   statistics: {
     byChatId: {},
-    currentMessage: {},
   },
 
   pollModal: {
diff --git a/src/global/reducers/statistics.ts b/src/global/reducers/statistics.ts
index 6ce32a18..c88804fd 100644
--- a/src/global/reducers/statistics.ts
+++ b/src/global/reducers/statistics.ts
@@ -9,7 +9,6 @@ export function updateStatistics(
   return {
     ...global,
     statistics: {
-      currentMessage: {},
       byChatId: {
         ...global.statistics.byChatId,
         [chatId]: statistics,
diff --git a/src/global/types.ts b/src/global/types.ts
index bc5ad022..e8566ae1 100644
--- a/src/global/types.ts
+++ b/src/global/types.ts
@@ -519,7 +519,7 @@ export type GlobalState = {
 
   statistics: {
     byChatId: Record<string, ApiChannelStatistics | ApiGroupStatistics>;
-    currentMessage: ApiMessageStatistics;
+    currentMessage?: ApiMessageStatistics;
     currentMessageId?: number;
   };