From ceb58327fb77571c091c0b23ddcb4190d43887c3 Mon Sep 17 00:00:00 2001
From: ShimaginAndrey <andrey.shimagin@onlyoffice.com>
Date: Fri, 15 Oct 2021 10:41:19 +0300
Subject: [PATCH] Refactoring code

---
 .../mobile/src/store/tableSettings.js         |  9 +------
 .../mobile/src/view/add/Add.jsx               |  7 +----
 .../mobile/src/view/add/AddTable.jsx          |  6 ++---
 .../mobile/src/view/edit/EditTable.jsx        | 25 +++---------------
 .../mobile/src/controller/add/AddOther.jsx    |  7 +----
 .../mobile/src/store/tableSettings.js         |  9 +------
 .../mobile/src/view/add/AddOther.jsx          |  6 ++---
 .../mobile/src/view/edit/EditTable.jsx        | 26 +++----------------
 8 files changed, 18 insertions(+), 77 deletions(-)

diff --git a/apps/documenteditor/mobile/src/store/tableSettings.js b/apps/documenteditor/mobile/src/store/tableSettings.js
index 2b48d0c9f..fbb841d2d 100644
--- a/apps/documenteditor/mobile/src/store/tableSettings.js
+++ b/apps/documenteditor/mobile/src/store/tableSettings.js
@@ -9,9 +9,7 @@ export class storeTableSettings {
             cellBorderWidth: observable,
             cellBorderColor: observable,
             arrayStyles: observable,
-            isRenderStyles:observable,
             initTableTemplates: action,
-            resetFlagRender: action,
             setStyles: action,
             updateCellBorderWidth: action,
             updateCellBorderColor: action,
@@ -20,14 +18,9 @@ export class storeTableSettings {
 
     _templates = [];
     arrayStyles = [];
-    isRenderStyles;
-
-    resetFlagRender (bool) {
-        this.isRenderStyles = bool;
-    }
     
     initTableTemplates () {
-        this.isRenderStyles = true;
+        this.arrayStyles = [];
     }
 
     setStyles (arrStyles) {
diff --git a/apps/documenteditor/mobile/src/view/add/Add.jsx b/apps/documenteditor/mobile/src/view/add/Add.jsx
index 8dbf2dc05..8cb53f086 100644
--- a/apps/documenteditor/mobile/src/view/add/Add.jsx
+++ b/apps/documenteditor/mobile/src/view/add/Add.jsx
@@ -184,12 +184,7 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto
 
     const onGetTableStylesPreviews = () => {
         const api = Common.EditorApi.get();
-        if(storeTableSettings.isRenderStyles) {
-            setTimeout(() => { 
-                storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)); 
-                storeTableSettings.resetFlagRender(false);
-            },5);
-        }
+        setTimeout(() => storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)), 5);
     }
 
     return (
diff --git a/apps/documenteditor/mobile/src/view/add/AddTable.jsx b/apps/documenteditor/mobile/src/view/add/AddTable.jsx
index c37388f00..28a64b8ea 100644
--- a/apps/documenteditor/mobile/src/view/add/AddTable.jsx
+++ b/apps/documenteditor/mobile/src/view/add/AddTable.jsx
@@ -13,15 +13,15 @@ const AddTable = props => {
 
     useEffect(() => {
 
-        if(!storeTableSettings.isRenderStyles) setLoaderSkeleton(false);
+        !styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
 
-    }, [storeTableSettings.isRenderStyles]);
+    }, [styles]);
 
     return (
         <div className={'table-styles dataview'}>
             <ul className="row">
             {stateLoaderSkeleton ?
-                Array.from({ length: 31 }).map((item,index) => (
+                Array.from({ length: 41 }).map((item,index) => (
                 <li className='skeleton-list' key={index}>    
                     <SkeletonBlock  width='70px' height='8px'  effect='wave'/>
                     <SkeletonBlock  width='70px' height='8px'  effect='wave' />
diff --git a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
index 342e2cf77..367017ea8 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
@@ -181,17 +181,14 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
     const styles =  storeTableSettings.arrayStyles;
 
     useEffect(() => {
-        if (storeTableSettings.isRenderStyles) {
-            onGetTableStylesPreviews();
-            setTimeout(() => storeTableSettings.resetFlagRender(false), 0);
-        }
+        if(!styles.length) onGetTableStylesPreviews();
     }, []);
 
     useEffect(() => {
 
-        storeTableSettings.isRenderStyles ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
+        !styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
 
-    }, [storeTableSettings.isRenderStyles]);
+    }, [styles]);
     
     return (
         <div className="dataview table-styles">
@@ -225,8 +222,6 @@ const PageStyleOptions = props => {
     const { t } = useTranslation();
     const _t = t('Edit', {returnObjects: true});
     const tableObject = props.storeFocusObjects.tableObject;
-    const nextStateRef = useRef();
-    const prevStateRef = useRef();
 
     let tableLook, isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer;
     if (tableObject) {
@@ -238,20 +233,8 @@ const PageStyleOptions = props => {
         isLastCol = tableLook.get_LastCol();
         isBandVer = tableLook.get_BandVer();
     }
-    
-    nextStateRef.current = [isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer];
 
-    useEffect(() => {
-        prevStateRef.current = [...nextStateRef.current];
-
-    }, []);
-
-    const openIndicator = () => {
-        if ( !(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) {
-           props.onGetTableStylesPreviews();
-        }
-        setTimeout(() => props.storeTableSettings.resetFlagRender(false), 10);
-    }
+    const openIndicator = () => props.onGetTableStylesPreviews();
 
     return (
         <Page>
diff --git a/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx b/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx
index 5df6ac09e..bcb490586 100644
--- a/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx
+++ b/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx
@@ -94,12 +94,7 @@ class AddOtherController extends Component {
 
     onGetTableStylesPreviews = () => {
         const api = Common.EditorApi.get();
-        if(this.props.storeTableSettings.isRenderStyles) {
-            setTimeout(() => { 
-                this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)); 
-                this.props.storeTableSettings.resetFlagRender(false);
-            },5);
-        }
+        setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)), 5);
     }
 
     hideAddComment () {
diff --git a/apps/presentationeditor/mobile/src/store/tableSettings.js b/apps/presentationeditor/mobile/src/store/tableSettings.js
index bf0f96dbe..d55f859c2 100644
--- a/apps/presentationeditor/mobile/src/store/tableSettings.js
+++ b/apps/presentationeditor/mobile/src/store/tableSettings.js
@@ -9,9 +9,7 @@ export class storeTableSettings {
             cellBorderWidth: observable,
             cellBorderColor: observable,
             arrayStyles: observable,
-            isRenderStyles:observable,
             initTableTemplates: action,
-            resetFlagRender: action,
             setStyles: action,
             updateCellBorderWidth: action,
             updateCellBorderColor: action,
@@ -20,14 +18,9 @@ export class storeTableSettings {
 
     _templates = [];
     arrayStyles = [];
-    isRenderStyles;
-
-    resetFlagRender (bool) {
-        this.isRenderStyles = bool;
-    }
     
     initTableTemplates () {
-        this.isRenderStyles = true;
+        this.arrayStyles = [];
     }
 
     setStyles (arrStyles) {
diff --git a/apps/presentationeditor/mobile/src/view/add/AddOther.jsx b/apps/presentationeditor/mobile/src/view/add/AddOther.jsx
index 3e26d553b..6db7c6e5f 100644
--- a/apps/presentationeditor/mobile/src/view/add/AddOther.jsx
+++ b/apps/presentationeditor/mobile/src/view/add/AddOther.jsx
@@ -14,9 +14,9 @@ const PageTable = props => {
 
     useEffect(() => {
 
-        if(!storeTableSettings.isRenderStyles) setLoaderSkeleton(false);
+        !styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
 
-    }, [storeTableSettings.isRenderStyles]);
+    }, [styles]);
 
     return (
         <Page id={'add-table'}>
@@ -24,7 +24,7 @@ const PageTable = props => {
             <div className={'table-styles dataview'}>
                 <ul className="row">
                 {stateLoaderSkeleton ?
-                    Array.from({ length: 31 }).map((item,index) => (
+                    Array.from({ length: 41 }).map((item,index) => (
                     <li className='skeleton-list' key={index}>    
                         <SkeletonBlock  width='70px' height='8px'  effect='wave'/>
                         <SkeletonBlock  width='70px' height='8px'  effect='wave' />
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
index 20e53b615..8c43ff81e 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
@@ -15,19 +15,14 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
     const styles =  storeTableSettings.arrayStyles;
     
     useEffect(() => {
-        if (storeTableSettings.isRenderStyles) {
-            setTimeout(() => { 
-                onGetTableStylesPreviews();
-                storeTableSettings.resetFlagRender(false);
-            },0);
-        }
+        if(!styles.length) setTimeout(() => onGetTableStylesPreviews(), 1);
     }, []);
 
     useEffect(() => {
 
-        storeTableSettings.isRenderStyles ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
+        !styles.length ? setLoaderSkeleton(true) : setLoaderSkeleton(false);
 
-    }, [storeTableSettings.isRenderStyles]);
+    }, [styles]);
 
     if (!tableObject && Device.phone) {
         $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
@@ -65,8 +60,6 @@ const PageStyleOptions = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
     const tableObject = props.storeFocusObjects.tableObject;
-    const nextStateRef = useRef();
-    const prevStateRef = useRef();
 
     let tableLook, isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer;
     if (tableObject) {
@@ -79,18 +72,7 @@ const PageStyleOptions = props => {
         isBandVer = tableLook.get_BandVer();
     }
 
-    nextStateRef.current = [isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer];
-
-    useEffect(() => {
-        prevStateRef.current = [...nextStateRef.current];
-    }, []);
-
-    const openIndicator = () => {
-        if ( !(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) {
-            setTimeout (() => props.onGetTableStylesPreviews(),0);
-        }
-        setTimeout(() => props.storeTableSettings.resetFlagRender(false), 0);
-    }
+    const openIndicator = () => setTimeout(() => props.onGetTableStylesPreviews(), 1);
 
     return (
         <Page>