From 24dfa1a604c26f8dd3dfca858453619ea2d41f7e Mon Sep 17 00:00:00 2001
From: SergeyEzhin <sergey.ezhin@onlyoffice.com>
Date: Thu, 14 Sep 2023 14:12:48 +0300
Subject: [PATCH] =?UTF-8?q?[common]=20=D0=A1hange=20versions=20filtering?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/mobile/lib/view/VersionHistory.jsx | 56 +++++++++++--------
 1 file changed, 32 insertions(+), 24 deletions(-)

diff --git a/apps/common/mobile/lib/view/VersionHistory.jsx b/apps/common/mobile/lib/view/VersionHistory.jsx
index 8c4b5755ff..85f3a78a30 100644
--- a/apps/common/mobile/lib/view/VersionHistory.jsx
+++ b/apps/common/mobile/lib/view/VersionHistory.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Page, Navbar, BlockTitle, List, ListItem, Icon, NavRight, Link } from "framework7-react";
 import { useTranslation } from "react-i18next";
 import { observer, inject } from "mobx-react";
@@ -10,15 +10,22 @@ const VersionHistoryView = inject('storeVersionHistory', 'users')(observer(props
     const historyStore = props.storeVersionHistory;
     const currentVersion = historyStore.currentVersion;
     const arrVersions = historyStore.arrVersions;
-    const filteredVersions = groupByVersions(arrVersions);
+    const [filteredVersions, setFilteredVersions] = useState([]);
     const isNavigate = props.isNavigate;
     const usersVersions = historyStore.usersVersions;
 
+    useEffect(() => {
+        if(arrVersions.length > 0) {
+            const filteredVersions = groupByVersions(arrVersions);
+            setFilteredVersions(filteredVersions);
+        }
+    }, [arrVersions]);
+
     const handleClickRevision = useCallback(version => {
         if(version !== currentVersion) {
             props.onSelectRevision(version);
         }
-    });
+    }, []);
 
     function groupByVersions(arr) {
         return arr.reduce((result, revision) => {
@@ -55,27 +62,28 @@ const VersionHistoryView = inject('storeVersionHistory', 'users')(observer(props
                         </NavRight>
                 }
             </Navbar>
-            {filteredVersions.map((versions, index) => {
-                return (
-                    <React.Fragment key={index}>
-                        <BlockTitle className='version-history__title'>{`${versions.find(ver => ver.selected) ? t('Common.VersionHistory.textCurrent') + ' - ' : ''} ${t('Common.VersionHistory.textVersion')} ${versions[0].revision}`}</BlockTitle>
-                            <List className='version-history__list' dividersIos mediaList outlineIos strongIos>
-                                {versions.map((version, index) => {
-                                    return (
-                                        <ListItem className={`version-history__item ${version === currentVersion ? 'version-history__item_active' : ''}`} key={index} link='#' title={version.created} subtitle={AscCommon.UserInfoParser.getParsedName(version.username)} onClick={() => handleClickRevision(version)}>
-                                            <div slot='media' className='version-history__user' style={{backgroundColor: usersVersions.find(user => user.id === version.userid).color}}>{usersStore.getInitials(version.username)}</div>
-                                            {(version === currentVersion && !version.selected && version.canRestore) &&
-                                                <div slot="inner">
-                                                    <button type='button' className='version-history__btn' onClick={() => props.onRestoreRevision(version)}>{t('Common.VersionHistory.textRestore')}</button>
-                                                </div>
-                                            }
-                                        </ListItem>
-                                    )
-                                })}
-                            </List>
-                    </React.Fragment>
-                )
-            })}
+            {filteredVersions.length > 0 ? 
+                filteredVersions.map((versions, index) => {
+                    return (
+                        <React.Fragment key={`block-${index}`}>
+                            <BlockTitle className='version-history__title'>{`${versions.find(ver => ver.selected) ? t('Common.VersionHistory.textCurrent') + ' - ' : ''} ${t('Common.VersionHistory.textVersion')} ${versions[0].revision}`}</BlockTitle>
+                                <List className='version-history__list' dividersIos mediaList outlineIos strongIos>
+                                    {versions.map((version, index) => {
+                                        return (
+                                            <ListItem className={`version-history__item ${version === currentVersion ? 'version-history__item_active' : ''}`} key={`version-${index}`} link='#' title={version.created} subtitle={AscCommon.UserInfoParser.getParsedName(version.username)} onClick={() => handleClickRevision(version)}>
+                                                <div slot='media' className='version-history__user' style={{backgroundColor: usersVersions.find(user => user.id === version.userid).color}}>{usersStore.getInitials(version.username)}</div>
+                                                {(version === currentVersion && !version.selected && version.canRestore) &&
+                                                    <div slot="inner">
+                                                        <button type='button' className='version-history__btn' onClick={() => props.onRestoreRevision(version)}>{t('Common.VersionHistory.textRestore')}</button>
+                                                    </div>
+                                                }
+                                            </ListItem>
+                                        )
+                                    })}
+                                </List>
+                        </React.Fragment>
+                    )
+                }) : null}
         </Page>
     )
 }));