From 56fc768d6f5d731b52f6d54af9f206af44db380b Mon Sep 17 00:00:00 2001
From: Patryk Osmaczko <osmaczkopatryk@gmail.com>
Date: Wed, 23 Nov 2022 14:40:03 +0100
Subject: [PATCH] refactor(StatusStickersPopup): do general popup refactor

- remove imperative state assignments, rely on bidings
- move private stuff to QtObject{id: d}
- restructure object attributes to follow QML Coding Conventions
---
 .../shared/status/StatusStickersPopup.qml     | 86 +++++++++----------
 1 file changed, 41 insertions(+), 45 deletions(-)

diff --git a/ui/imports/shared/status/StatusStickersPopup.qml b/ui/imports/shared/status/StatusStickersPopup.qml
index 8f23f79e9a..cdfe2fdf10 100644
--- a/ui/imports/shared/status/StatusStickersPopup.qml
+++ b/ui/imports/shared/status/StatusStickersPopup.qml
@@ -7,20 +7,36 @@ import utils 1.0
 import shared.panels 1.0
 
 import StatusQ.Core 0.1
-import StatusQ.Controls 0.1 as StatusQControls
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 //TODO improve this!
 import AppLayouts.Chat.stores 1.0
 
 Popup {
     id: root
+
     property var store
-    property var recentStickers: store.stickersModuleInst.recent
-    property var stickerPackList: store.stickersModuleInst.stickerPacks
+
     signal stickerSelected(string hashId, string packId, string url)
-    property int installedPacksCount: stickersModule.numInstalledStickerPacks
-    property bool stickerPacksLoaded: false
-    enabled: !!recentStickers && !!stickerPackList
+
+    QtObject {
+        id: d
+
+        // FIXME: move me to store
+        readonly property int installedPacksCount: root.store.stickersModuleInst.numInstalledStickerPacks
+        readonly property var recentStickers: root.store.stickersModuleInst.recent
+        readonly property var stickerPackList: store.stickersModuleInst.stickerPacks
+        readonly property bool stickerPacksLoaded: store.stickersModuleInst.packsLoaded
+        readonly property bool stickerPacksLoadFailed: store.stickersModuleInst.packsLoadFailed
+        readonly property bool stickerPacksLoading: !stickerPacksLoaded && !stickerPacksLoadFailed
+
+        function loadStickers() {
+            store.stickersModuleInst.loadStickers()
+        }
+    }
+
+    enabled: !!d.recentStickers && !!d.stickerPackList
     width: 360
     height: 440
     modal: false
@@ -39,11 +55,13 @@ Popup {
             color: "#22000000"
         }
     }
+
     onClosed: {
         stickerMarket.visible = false
         footerContent.visible = true
         stickersContainer.visible = true
     }
+
     Connections {
         target: mainModule
         function onOnlineStatusChanged() {
@@ -51,20 +69,6 @@ Popup {
         }
     }
 
-    Component.onCompleted: {
-        if (stickersModule.packsLoaded) {
-            root.setStickersReady()
-        }
-    }
-
-    function setStickersReady() {
-        root.stickerPacksLoaded = true
-        stickerPackListView.visible = true
-        loadingGrid.active = false
-        loadingStickerPackListView.model = []
-        noStickerPacks.visible = installedPacksCount === 0 || stickersModule.recent.rowCount() === 0
-    }
-
     contentItem: ColumnLayout {
         anchors.fill: parent
         spacing: 0
@@ -75,7 +79,7 @@ Popup {
             Layout.fillWidth: true
             Layout.fillHeight: true
             store: root.store
-            stickerPacks: stickerPackList
+            stickerPacks: d.stickerPackList
             packId: stickerPackListView.selectedPackId
             onInstallClicked: {
                 stickersModule.install(packId)
@@ -84,7 +88,7 @@ Popup {
             }
             onUninstallClicked: {
                 stickersModule.uninstall(packId)
-                stickerGrid.model = recentStickers
+                stickerGrid.model = d.recentStickers
                 btnHistory.clicked()
             }
             onBackClicked: {
@@ -95,9 +99,9 @@ Popup {
 
             Loader {
                 id: marketLoader
-                active: !root.stickerPacksLoaded
-                sourceComponent: loadingImageComponent
                 anchors.centerIn: parent
+                active: d.stickerPacksLoading
+                sourceComponent: loadingImageComponent
             }
         }
 
@@ -114,7 +118,7 @@ Popup {
             Item {
                 id: noStickerPacks
                 anchors.fill: parent
-                visible: installedPacksCount == 0
+                visible: d.installedPacksCount == 0 || stickersModule.recent.rowCount() === 0
 
                 Image {
                     id: imgNoStickers
@@ -136,7 +140,7 @@ Popup {
 
                     StyledText {
                         id: lblNoStickersYet
-                        visible: root.installedPacksCount === 0
+                        visible: d.installedPacksCount === 0
                         anchors.fill: parent
                         font.pixelSize: 15
                         text: qsTr("You don't have any stickers yet")
@@ -155,7 +159,7 @@ Popup {
                     }
                 }
 
-                StatusQControls.StatusButton {
+                StatusButton {
                     objectName: "stickersPopupGetStickersButton"
                     visible: lblNoStickersYet.visible
                     text: qsTr("Get Stickers")
@@ -172,7 +176,7 @@ Popup {
             StatusStickerList {
                 id: stickerGrid
                 objectName: "statusStickerPopupStickerGrid"
-                model: recentStickers
+                model: d.recentStickers
                 packId: stickerPackListView.selectedPackId
                 onStickerClicked: {
                     root.stickerSelected(hash, packId, url)
@@ -180,7 +184,6 @@ Popup {
                 }
             }
 
-
             Component {
                 id: loadingImageComponent
                 StatusLoadingIndicator {
@@ -191,7 +194,7 @@ Popup {
 
             Loader {
                 id: loadingGrid
-                active: stickersModule.recent.rowCount() === 0
+                active: d.stickerPacksLoading
                 sourceComponent: loadingImageComponent
                 anchors.centerIn: parent
             }
@@ -204,14 +207,14 @@ Popup {
             rightPadding: Style.current.padding / 2
             spacing: Style.current.padding / 2
 
-            StatusQControls.StatusFlatRoundButton {
+            StatusFlatRoundButton {
                 id: btnAddStickerPack
                 implicitHeight: 40
                 implicitWidth: 24
                 icon.name: "add"
-                type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
+                type: StatusFlatRoundButton.Type.Tertiary
                 color: "transparent"
-                state: root.stickerPacksLoaded ? "default" : "pending"
+                state: d.stickerPacksLoading ? "default" : "pending"
                 onClicked: {
                     stickersContainer.visible = false
                     stickerMarket.visible = true
@@ -219,14 +222,14 @@ Popup {
                 }
             }
 
-            StatusQControls.StatusTabBarIconButton {
+            StatusTabBarIconButton {
                 id: btnHistory
                 icon.name: "time"
                 highlighted: true
                 onClicked: {
                     highlighted = true
                     stickerPackListView.selectedPackId = -1
-                    stickerGrid.model = recentStickers
+                    stickerGrid.model = d.recentStickers
                 }
             }
 
@@ -242,7 +245,8 @@ Popup {
                     Repeater {
                         id: stickerPackListView
                         property int selectedPackId: -1
-                        model: stickerPackList
+                        model: d.stickerPackList
+                        visible: d.stickerPacksLoaded
 
                         delegate: StatusStickerPackIconWithIndicator {
                             id: packIconWithIndicator
@@ -262,7 +266,7 @@ Popup {
                     }
                     Repeater {
                         id: loadingStickerPackListView
-                        model: new Array(7)
+                        model: d.stickerPacksLoading ? 7 : 0
 
                         delegate: Rectangle {
                             width: 24
@@ -280,13 +284,5 @@ Popup {
             }
         }
     }
-    Connections {
-        id: loadedConnection
-        target: stickersModule
-        onStickerPacksLoaded: {
-            root.setStickersReady()
-            loadedConnection.enabled = false
-        }
-    }
 }