Skip to content

Commit

Permalink
refactor ProfileContextMenu to make it a functional component
Browse files Browse the repository at this point in the history 
refactor ProfileContextMenu to make it a functional component

refactor ProfileContextMenu to make it a functional component

This refactor ProfileContextMenu to make it a functional component by:

refactored out direct calls to backend, and passing backend data structures and moved this logic to the callers, also refactored common calls between the callers
common types of context menus have been extracted to their sub components which removes a lot of logic too and makes the behaviour very clear
user verification workflow (which was already disabled) has been removed

refactor: use signals and call singletons on the parent instead

remove unused code for now from profile context menu

refactor profile context menu into two components; add property to storybook

extract blocked profile context menu and self profile context menu

use profileType instead of individual bools

refactor to pass trustStatus as an argument

make contact type a parameter

remove unnecessary method from RegularProfileContextMenu

add ensVerified property to ProfileContextMenu components

add onlineStatus property to ProfileContextMenu components

move ProfileContextMenu storybook controls to the right sidebar

move contactDetails logic up from the view

add local nickname property to ProfileContextMenu components

fix issue with missing signal; fix logs in storybook

use constant for profileType instead of string

refactor common code into a single method

refactor getProfileContext

remove references to contactDetails which are not longer needed

remove unnecessary comments

fix bridged constant

refactor into a single ProfileContextMenu component

refactor into a single ProfileContextMenu component

refactor into a single ProfileContextMenu component

simplify imports

remove unused store field

move methods from utils to contacts store

remove onClosed signal

remove unused param

rename ProfileContextMenu variables

simplify signals in ProfileContextMenu

remove ;

refactor: do early return

simplify ifs

move ProfileContextMenu to its own storybook page
  • Loading branch information
@iurimatias
iurimatias committed Sep 20, 2024
1 parent 894a5f1 commit e423081
Show file tree
Hide file tree
Showing 9 changed files with 574 additions and 326 deletions.
84 changes: 23 additions & 61 deletions storybook/pages/MessageContextMenuPage.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Models 1.0

import utils 1.0
import shared.views.chat 1.0
import shared.status 1.0

SplitView {

Expand All @@ -30,30 +31,22 @@ SplitView {
color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
clip: true

RowLayout {
ColumnLayout {
anchors.centerIn: parent
Button {
text: "Message context menu"
onClicked: {
menu1.createObject(this).popup()
}
}
Button {
text: "Message context menu (hide disabled items)"
onClicked: {
menu2.createObject(this).popup()
}
}
Button {
text: "Profile context menu"
onClicked: {
menu3.createObject(this).popup()
spacing: 10

RowLayout {
Button {
text: "Message context menu"
onClicked: {
menu1.createObject(this).popup()
}
}
}
Button {
text: "Profile context menu (hide disabled items)"
onClicked: {
menu4.createObject(this).popup()
Button {
text: "Message context menu (hide disabled items)"
onClicked: {
menu2.createObject(this).popup()
}
}
}
}
Expand All @@ -79,53 +72,22 @@ SplitView {
}
}
}

Component {
id: menu3
ProfileContextMenu {
anchors.centerIn: parent
hideDisabledItems: false
onClosed: {
destroy()
}
}
}

Component {
id: menu4
ProfileContextMenu {
anchors.centerIn: parent
hideDisabledItems: true
onClosed: {
destroy()
}
}
}
}

LogsAndControlsPanel {
id: logsAndControlsPanel

SplitView.minimumHeight: 100
SplitView.preferredHeight: 150

logsView.logText: logs.logText
}
}

Pane {
SplitView.minimumWidth: 300
SplitView.preferredWidth: 300
LogsAndControlsPanel {
id: logsAndControlsPanel

ScrollView {
anchors.fill: parent
SplitView.minimumWidth: 150
SplitView.preferredWidth: 250

ColumnLayout {
spacing: 16
logsView.logText: logs.logText

}
controls: ColumnLayout {
spacing: 16
}
}

}

// category: Views
280 changes: 280 additions & 0 deletions storybook/pages/ProfileContextMenuPage.qml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,280 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1

import Storybook 1.0
import Models 1.0

import utils 1.0
import shared.views.chat 1.0
import shared.status 1.0

SplitView {
QtObject {
id: d
}

Logs { id: logs }

SplitView {
orientation: Qt.Vertical
SplitView.fillWidth: true

Rectangle {
SplitView.fillWidth: true
SplitView.fillHeight: true
color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
clip: true

ColumnLayout {
anchors.centerIn: parent
spacing: 10

RowLayout {
Button {
text: "Profile context menu"
onClicked: {
menu1.createObject(this).popup()
}
}
Button {
text: "Profile context menu (hide disabled items)"
onClicked: {
menu2.createObject(this).popup()
}
}
}
}

Component {
id: menu1
ProfileContextMenu {
id: profileContextMenu
anchors.centerIn: parent
hideDisabledItems: false
profileType: profileTypeSelector.currentValue
trustStatus: trustStatusSelector.currentValue
contactType: contactTypeSelector.currentValue
ensVerified: ensVerifiedCheckBox.checked
onlineStatus: onlineStatusSelector.currentValue
hasLocalNickname: hasLocalNicknameCheckBox.checked
publicKey: publicKeyInput.text

onOpenProfileClicked: () => {
logs.logEvent("Open profile clicked for:", profileContextMenu.publicKey)
}
onCreateOneToOneChat: () => {
logs.logEvent("Create one-to-one chat:", profileContextMenu.publicKey)
}
onReviewContactRequest: () => {
logs.logEvent("Review contact request:", profileContextMenu.publicKey)
}
onSendContactRequest: () => {
logs.logEvent("Send contact request:", profileContextMenu.publicKey)
}
onEditNickname: () => {
logs.logEvent("Edit nickname:", profileContextMenu.publicKey)
}
onRemoveNickname: (displayName) => {
logs.logEvent("Remove nickname:", profileContextMenu.publicKey, displayName)
}
onUnblockContact: () => {
logs.logEvent("Unblock contact:", profileContextMenu.publicKey)
}
onMarkAsUntrusted: () => {
logs.logEvent("Mark as untrusted:", profileContextMenu.publicKey)
}
onRemoveTrustStatus: () => {
logs.logEvent("Remove trust status:", profileContextMenu.publicKey)
}
onRemoveContact: () => {
logs.logEvent("Remove contact:", profileContextMenu.publicKey)
}
onBlockContact: () => {
logs.logEvent("Block contact:", profileContextMenu.publicKey)
}
onClosed: {
destroy()
}
}
}

Component {
id: menu2
ProfileContextMenu {
id: profileContextMenu
anchors.centerIn: parent
hideDisabledItems: true
profileType: profileTypeSelector.currentValue
trustStatus: trustStatusSelector.currentValue
contactType: contactTypeSelector.currentValue
ensVerified: ensVerifiedCheckBox.checked
onlineStatus: onlineStatusSelector.currentValue
hasLocalNickname: hasLocalNicknameCheckBox.checked
publicKey: publicKeyInput.text

onOpenProfileClicked: () => {
logs.logEvent("Open profile clicked for:", profileContextMenu.publicKey)
}
onCreateOneToOneChat: () => {
logs.logEvent("Create one-to-one chat:", profileContextMenu.publicKey)
}
onReviewContactRequest: () => {
logs.logEvent("Review contact request:", profileContextMenu.publicKey)
}
onSendContactRequest: () => {
logs.logEvent("Send contact request:", profileContextMenu.publicKey)
}
onEditNickname: () => {
logs.logEvent("Edit nickname:", profileContextMenu.publicKey)
}
onRemoveNickname: (displayName) => {
logs.logEvent("Remove nickname:", profileContextMenu.publicKey, displayName)
}
onUnblockContact: () => {
logs.logEvent("Unblock contact:", profileContextMenu.publicKey)
}
onMarkAsUntrusted: () => {
logs.logEvent("Mark as untrusted:", profileContextMenu.publicKey)
}
onRemoveTrustStatus: () => {
logs.logEvent("Remove trust status:", profileContextMenu.publicKey)
}
onRemoveContact: () => {
logs.logEvent("Remove contact:", profileContextMenu.publicKey)
}
onBlockContact: () => {
logs.logEvent("Block contact:", profileContextMenu.publicKey)
}

onClosed: {
destroy()
}
}
}
}
}

LogsAndControlsPanel {
id: logsAndControlsPanel

SplitView.minimumWidth: 150
SplitView.preferredWidth: 250

logsView.logText: logs.logText

controls: ColumnLayout {
spacing: 16

TextField {
id: publicKeyInput
Layout.fillWidth: true
placeholderText: "Enter public key"
}

Label {
Layout.fillWidth: true
text: "Public Key: " + (publicKeyInput.text || "0x047d6710733523714e65e783f975f2c02f5a0f43ecf6febb4e0fadb48bffae32cdc749ea366b2649c271b76e568e9bf0c173596c6e54a2659293a46947b33c9d72")
elide: Text.ElideMiddle
}

ComboBox {
id: profileTypeSelector
textRole: "text"
valueRole: "value"
model: [
{ text: "Regular", value: Constants.profileType.regular },
{ text: "Self", value: Constants.profileType.self },
{ text: "Blocked", value: Constants.profileType.blocked },
{ text: "Bridged", value: Constants.profileType.bridged }
]
currentIndex: 0
}

ComboBox {
id: trustStatusSelector
textRole: "text"
valueRole: "value"
model: [
{ text: "Unknown", value: Constants.trustStatus.unknown },
{ text: "Trusted", value: Constants.trustStatus.trusted },
{ text: "Untrusted", value: Constants.trustStatus.untrustworthy }
]
currentIndex: 0
}

ComboBox {
id: contactTypeSelector
textRole: "text"
valueRole: "value"
model: [
{ text: "Non Contact", value: Constants.contactType.nonContact },
{ text: "Contact", value: Constants.contactType.contact },
{ text: "Contact Request Received", value: Constants.contactType.contactRequestReceived },
{ text: "Contact Request Sent", value: Constants.contactType.contactRequestSent }
]
currentIndex: 0
}

CheckBox {
id: ensVerifiedCheckBox
text: "ENS Verified"
checked: false
}

Label {
Layout.fillWidth: true
text: "ENS Verified: " + (ensVerifiedCheckBox.checked ? "Yes" : "No")
}

Label {
Layout.fillWidth: true
text: "Profile type: " + profileTypeSelector.currentText
}

Label {
Layout.fillWidth: true
text: "Trust status: " + trustStatusSelector.currentText
}

Label {
Layout.fillWidth: true
text: "Contact type: " + contactTypeSelector.currentText
}

ComboBox {
id: onlineStatusSelector
textRole: "text"
valueRole: "value"
model: [
{ text: "Unknown", value: Constants.onlineStatus.unknown },
{ text: "Inactive", value: Constants.onlineStatus.inactive },
{ text: "Online", value: Constants.onlineStatus.online }
]
currentIndex: 2 // Default to online
}

Label {
Layout.fillWidth: true
text: "Online status: " + onlineStatusSelector.currentText
}

CheckBox {
id: hasLocalNicknameCheckBox
text: "Has Local Nickname"
checked: false
}

Label {
Layout.fillWidth: true
text: "Has Local Nickname: " + (hasLocalNicknameCheckBox.checked ? "Yes" : "No")
}
}
}
}

// category: Views
Loading

0 comments on commit e423081

Please sign in to comment.