Skip to content

Commit

Permalink
refactor ProfileContextMenu to make it a functional component
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@iurimatias
iurimatias committed Sep 13, 2024
1 parent 0c6a602 commit 88d1f1f
Show file tree
Hide file tree
Showing 12 changed files with 914 additions and 280 deletions.
195 changes: 181 additions & 14 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 Down Expand Up @@ -85,6 +86,46 @@ SplitView {
ProfileContextMenu {
anchors.centerIn: parent
hideDisabledItems: false
profileType: profileTypeSelector.currentText
trustStatus: trustStatusSelector.currentValue
contactType: contactTypeSelector.currentValue
ensVerified: ensVerifiedCheckBox.checked
onlineStatus: onlineStatusSelector.currentValue
hasLocalNickname: hasLocalNicknameCheckBox.checked

onOpenProfileClicked: (publicKey) => {
logs.logEvent("Open profile clicked for:", publicKey)
}
onCreateOneToOneChat: (communityId, chatId, ensName) => {
logs.logEvent("Create one-to-one chat:", communityId, chatId, ensName)
}
onReviewContactRequest: (publicKey) => {
logs.logEvent("Review contact request:", publicKey)
}
onSendContactRequest: (publicKey) => {
logs.logEvent("Send contact request:", publicKey)
}
onEditNickname: (publicKey) => {
logs.logEvent("Edit nickname:", publicKey)
}
onRemoveNickname: (publicKey, displayName) => {
logs.logEvent("Remove nickname:", publicKey, displayName)
}
onUnblockContact: (publicKey) => {
logs.logEvent("Unblock contact:", publicKey)
}
onMarkAsUntrusted: (publicKey) => {
logs.logEvent("Mark as untrusted:", publicKey)
}
onRemoveTrustStatus: (publicKey) => {
logs.logEvent("Remove trust status:", publicKey)
}
onRemoveContact: (publicKey) => {
logs.logEvent("Remove contact:", publicKey)
}
onBlockContact: (publicKey) => {
logs.logEvent("Block contact:", publicKey)
}
onClosed: {
destroy()
}
Expand All @@ -96,36 +137,162 @@ SplitView {
ProfileContextMenu {
anchors.centerIn: parent
hideDisabledItems: true
profileType: profileTypeSelector.currentValue
trustStatus: trustStatusSelector.currentValue
contactType: contactTypeSelector.currentValue
ensVerified: ensVerifiedCheckBox.checked
onlineStatus: onlineStatusSelector.currentValue
hasLocalNickname: hasLocalNicknameCheckBox.checked

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

onClosed: {
destroy()
}
}
}
}

LogsAndControlsPanel {
id: logsAndControlsPanel
}

SplitView.minimumHeight: 100
SplitView.preferredHeight: 150
LogsAndControlsPanel {
id: logsAndControlsPanel

logsView.logText: logs.logText
}
}
SplitView.minimumWidth: 150
SplitView.preferredWidth: 250

Pane {
SplitView.minimumWidth: 300
SplitView.preferredWidth: 300
logsView.logText: logs.logText

ScrollView {
anchors.fill: parent
controls: ColumnLayout {
spacing: 16

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
}

ColumnLayout {
spacing: 16
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
42 changes: 40 additions & 2 deletions ui/app/AppLayouts/Chat/panels/UserListPanel.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,10 @@ Item {
ringSettings.ringSpecModel: model.colorHash
onClicked: {
if (mouse.button === Qt.RightButton) {
const { profileType, trustStatus, contactType, ensVerified, onlineStatus, hasLocalNickname } = Utils.getProfileContext(model.pubKey, userProfile.pubKey)

Global.openMenu(profileContextMenuComponent, this, {
profileType, trustStatus, contactType, ensVerified, onlineStatus, hasLocalNickname,
myPublicKey: root.store.myPublicKey(),
selectedUserPublicKey: model.pubKey,
selectedUserDisplayName: nickName || userName,
Expand Down Expand Up @@ -170,13 +173,48 @@ Item {
ProfileContextMenu {
store: root.store
margins: 8
onOpenProfileClicked: {
onOpenProfileClicked: (publicKey) => {
console.log("UserListPanel.qml:1: open profile clicked", publicKey)
Global.openProfilePopup(publicKey, null)
}
onCreateOneToOneChat: {
onCreateOneToOneChat: (communityId, chatId, ensName) => {
Global.changeAppSectionBySectionType(Constants.appSection.chat)
root.store.chatCommunitySectionModule.createOneToOneChat(communityId, chatId, ensName)
}
onReviewContactRequest: (publicKey) => {
const contactDetails = publicKey === "" ? {} : Utils.getContactDetailsAsJson(publicKey, true, true)
Global.openReviewContactRequestPopup(publicKey, contactDetails, null)
}
onSendContactRequest: (publicKey) => {
const contactDetails = publicKey === "" ? {} : Utils.getContactDetailsAsJson(publicKey, true, true)
Global.openContactRequestPopup(publicKey, contactDetails, null)
}
onEditNickname: (publicKey) => {
const contactDetails = publicKey === "" ? {} : Utils.getContactDetailsAsJson(publicKey, true, true)
Global.openNicknamePopupRequested(publicKey, contactDetails, null)
}
onRemoveNickname: (publicKey, displayName) => {
root.store.contactsStore.changeContactNickname(publicKey, "", displayName, true)
}
onUnblockContact: (publicKey) => {
const contactDetails = publicKey === "" ? {} : Utils.getContactDetailsAsJson(publicKey, true, true)
Global.unblockContactRequested(publicKey, contactDetails)
}
onMarkAsUntrusted: (publicKey) => {
const contactDetails = publicKey === "" ? {} : Utils.getContactDetailsAsJson(publicKey, true, true)
Global.markAsUntrustedRequested(publicKey, contactDetails)
}
onRemoveTrustStatus: (publicKey) => {
root.store.contactsStore.removeTrustStatus(publicKey)
}
onRemoveContact: (publicKey) => {
const contactDetails = publicKey === "" ? {} : Utils.getContactDetailsAsJson(publicKey, true, true)
Global.removeContactRequested(publicKey, contactDetails)
}
onBlockContact: (publicKey) => {
const contactDetails = publicKey === "" ? {} : Utils.getContactDetailsAsJson(publicKey, true, true)
Global.blockContactRequested(publicKey, contactDetails)
}
onClosed: {
destroy()
}
Expand Down
12 changes: 8 additions & 4 deletions ui/app/AppLayouts/Communities/panels/MembersTabPanel.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -303,11 +303,15 @@ Item {

onClicked: {
if(mouse.button === Qt.RightButton) {
const { profileType, trustStatus, contactType, ensVerified, onlineStatus, hasLocalNickname } = Utils.getProfileContext(model.pubKey, Global.userProfile.pubKey)

Global.openMenu(memberContextMenuComponent, this, {
selectedUserPublicKey: model.pubKey,
selectedUserDisplayName: memberItem.title,
selectedUserIcon: icon.name,
})
profileType, trustStatus, contactType, ensVerified, onlineStatus, hasLocalNickname,
myPublicKey: Global.userProfile.pubKey,
selectedUserPublicKey: model.pubKey,
selectedUserDisplayName: memberItem.title,
selectedUserIcon: icon.name,
})
} else {
Global.openProfilePopup(model.pubKey)
}
Expand Down
Loading

0 comments on commit 88d1f1f

Please sign in to comment.