From e7bf585ec77aec465cf2ff6766d3601f687bc0dd Mon Sep 17 00:00:00 2001
From: Alexey Nalivaiko <a.nalivaiko@appodeal.com>
Date: Wed, 17 Apr 2019 12:34:20 +0300
Subject: [PATCH] [AMSA-33] add accordion to logs list

---
 package-lock.json                             |  7 ++++++-
 package.json                                  |  1 +
 src/core/store.ts                             |  1 +
 src/core/sync-apps/sync-stats.ts              |  2 +-
 src/ui/components/log-list/LogList.scss       | 18 ++++++++--------
 .../components/log-list/LogListComponent.tsx  | 21 ++++++++++---------
 6 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3be1785..7760103 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "admob-sync-app",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -11144,6 +11144,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.3.tgz",
       "integrity": "sha512-Y4rC1ZJmsxxkkPuMLwvKvlL1Zfpbcu+Bf4ZigkHup3v9EfdYhAlWAaVyA19olXq2o2mGn0w+dFKvk3pVVlYcIA=="
     },
+    "react-tiny-accordion": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-tiny-accordion/-/react-tiny-accordion-2.0.4.tgz",
+      "integrity": "sha512-yp9bnxVuwssh1TbnFl0IpZoq2TnmTtuVazfH3FJpk60Ex4VitRzUE+NU0fuMnnil4g3Y0gjyhE/0H1/xqdzWWQ=="
+    },
     "read-chunk": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-1.0.1.tgz",
diff --git a/package.json b/package.json
index 8e31685..62d941a 100644
--- a/package.json
+++ b/package.json
@@ -165,6 +165,7 @@
     "raven-js": "^3.27.0",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
+    "react-tiny-accordion": "^2.0.4",
     "semver": "^6.0.0",
     "uuid": "^3.3.2",
     "winston": "^3.2.1",
diff --git a/src/core/store.ts b/src/core/store.ts
index 5b7647a..a221fe6 100644
--- a/src/core/store.ts
+++ b/src/core/store.ts
@@ -231,6 +231,7 @@ export class Store {
                 percent: (pEvent.synced + pEvent.failed) / pEvent.total * 100,
                 lastEvent: event.type
             };
+            this.pushLogs(account);
             return this.fireSyncUpdated();
         case SyncEventsTypes.Stopped:
             delete this.state.syncProgress[event.accountId];
diff --git a/src/core/sync-apps/sync-stats.ts b/src/core/sync-apps/sync-stats.ts
index 9b62834..1d8deff 100644
--- a/src/core/sync-apps/sync-stats.ts
+++ b/src/core/sync-apps/sync-stats.ts
@@ -59,7 +59,7 @@ export class SyncStats {
         if (this.affectedApps.created.some(v => v.id === app.id)) {
             return;
         }
-        this.affectedApps.updated = this.affectedApps.updated.filter(v => v.id !== app.id);
+        this.affectedApps.updated.push(app);
     }
 
     appDeleted (app: AppodealApp) {
diff --git a/src/ui/components/log-list/LogList.scss b/src/ui/components/log-list/LogList.scss
index 713652b..584dda9 100644
--- a/src/ui/components/log-list/LogList.scss
+++ b/src/ui/components/log-list/LogList.scss
@@ -5,17 +5,17 @@
   overflow-y: auto;
   overflow-x: hidden;
 
-  &:not(:empty) {
-    margin-block-start: 10px;
-  }
-}
+  > div {
+    display: block;
+    background-color: #212225;
 
-.line-wrapper {
-  display: block;
-  background-color: #212225;
+    &:nth-child(2n) {
+      background-color: #2B2C2F;
+    }
+  }
 
-  &:nth-child(2n) {
-    background-color: #2B2C2F;
+  &:not(:empty) {
+    margin-block-start: 10px;
   }
 }
 
diff --git a/src/ui/components/log-list/LogListComponent.tsx b/src/ui/components/log-list/LogListComponent.tsx
index 0132580..0e3f4d0 100644
--- a/src/ui/components/log-list/LogListComponent.tsx
+++ b/src/ui/components/log-list/LogListComponent.tsx
@@ -6,6 +6,7 @@ import {ActionTypes, LogAction} from 'lib/actions';
 import {classNames, singleEvent} from 'lib/dom';
 import {sendToMain} from 'lib/messages';
 import React from 'react';
+import Accordion from 'react-tiny-accordion';
 import {TextToClipboard} from 'ui/components/text-to-clipboard/TextToClipboardComponent';
 import style from './LogList.scss';
 
@@ -98,10 +99,11 @@ export class LogListComponent extends React.Component<LogListComponentProps> {
     }
 
     render (): React.ReactNode {
-        return <div className={style.list}>
+
+        return <Accordion className={style.list}>
             {this.props.historyInfo.syncs.map(
                 syncInfo =>
-                    <div className={style['line-wrapper']} key={syncInfo.id}>
+                    <div key={syncInfo.id} data-header={
                         <div className={style.line}>
                             <div className={style.iconsGroup}>
                                 <div className={style.icon}>
@@ -126,14 +128,13 @@ export class LogListComponent extends React.Component<LogListComponentProps> {
                                 </button>
                             </div>
                         </div>
-                        {this.affectedAppsCount(syncInfo) && <div>
-                            {this.appList('Apps created', syncInfo.affectedApps.created)}
-                            {this.appList('Apps updated', syncInfo.affectedApps.updated)}
-                            {this.appList('Apps deleted', syncInfo.affectedApps.deleted)}
-                        </div>
-                        }
+                    }
+                    >
+                        {this.appList('Apps created', syncInfo.affectedApps.created)}
+                        {this.appList('Apps updated', syncInfo.affectedApps.updated)}
+                        {this.appList('Apps deleted', syncInfo.affectedApps.deleted)}
                     </div>
             )}
-        </div>;
+        </Accordion>;
     }
-};
+}