1
0
mirror of git://jb55.com/damus synced 2024-09-16 02:03:45 +00:00

relays: update relay view to use new design

Changelog-Changed: Updated relay view
Closes: https://github.com/damus-io/damus/pull/1543
This commit is contained in:
ericholguin 2023-09-08 21:15:03 -06:00 committed by William Casarin
parent bfda0d1b74
commit c4dfae9ede
5 changed files with 280 additions and 210 deletions

View File

@ -8,33 +8,148 @@
import SwiftUI
struct AddRelayView: View {
@Binding var relay: String
let state: DamusState
@State var new_relay: String = ""
@State var relayAddErrorTitle: String? = nil
@State var relayAddErrorMessage: String? = nil
@Environment(\.dismiss) var dismiss
var body: some View {
ZStack(alignment: .leading) {
HStack{
TextField(NSLocalizedString("wss://some.relay.com", comment: "Placeholder example for relay server address."), text: $relay)
.padding(2)
.padding(.leading, 25)
VStack {
Text("Add relay", comment: "Title text to indicate user to an add a relay.")
.font(.system(size: 20, weight: .bold))
.padding(.vertical)
Divider()
.padding(.bottom)
HStack {
Label("", image: "copy2")
.onTapGesture {
if let pastedrelay = UIPasteboard.general.string {
self.new_relay = pastedrelay
}
}
TextField(NSLocalizedString("wss://some.relay.com", comment: "Placeholder example for relay server address."), text: $new_relay)
.autocorrectionDisabled(true)
.textInputAutocapitalization(.never)
Label("", image: "close-circle")
.foregroundColor(.accentColor)
.padding(.trailing, -25.0)
.opacity((relay == "") ? 0.0 : 1.0)
.opacity((new_relay == "") ? 0.0 : 1.0)
.onTapGesture {
self.relay = ""
self.new_relay = ""
}
}
.padding(10)
.background(.secondary.opacity(0.2))
.cornerRadius(10)
Label("", image: "copy2")
.padding(.leading, -10)
.onTapGesture {
if let pastedrelay = UIPasteboard.general.string {
self.relay = pastedrelay
if let errorMessage = relayAddErrorMessage {
VStack(spacing: 0) {
HStack(alignment: .top) {
Text(relayAddErrorTitle ?? "Error")
.bold()
.foregroundColor(DamusColors.dangerSecondary)
.padding(.leading)
Spacer()
Button(action: {
relayAddErrorTitle = nil // Clear error title
relayAddErrorMessage = nil // Clear error message
self.new_relay = ""
}, label: {
Image("close")
.frame(width: 20, height: 20)
.foregroundColor(DamusColors.dangerSecondary)
})
.padding(.trailing)
}
Text(errorMessage)
.foregroundColor(DamusColors.dangerSecondary)
.padding(.top, 10)
}
.frame(minWidth: 300, maxWidth: .infinity, minHeight: 120, alignment: .center)
.background {
RoundedRectangle(cornerRadius: 12)
.fill(DamusColors.dangerBorder, strokeBorder: .gray.opacity(0.5), lineWidth: 1)
}
}
Button(action: {
if new_relay.starts(with: "wss://") == false && new_relay.starts(with: "ws://") == false {
new_relay = "wss://" + new_relay
}
if new_relay.hasSuffix("/") {
new_relay.removeLast();
}
guard let url = RelayURL(new_relay),
let ev = state.contacts.event,
let keypair = state.keypair.to_full() else {
return
}
let info = RelayInfo.rw
let descriptor = RelayDescriptor(url: url, info: info)
do {
try state.pool.add_relay(descriptor)
relayAddErrorTitle = nil // Clear error title
relayAddErrorMessage = nil // Clear error message
} catch RelayError.RelayAlreadyExists {
relayAddErrorTitle = NSLocalizedString("Duplicate relay", comment: "Title of the duplicate relay error message.")
relayAddErrorMessage = NSLocalizedString("The relay you are trying to add is already added.\nYou're all set!", comment: "An error message that appears when the user attempts to add a relay that has already been added.")
return
} catch {
return
}
state.pool.connect(to: [new_relay])
guard let new_ev = add_relay(ev: ev, keypair: keypair, current_relays: state.pool.our_descriptors, relay: new_relay, info: info) else {
return
}
process_contact_event(state: state, ev: ev)
state.pool.send(.event(new_ev))
new_relay = ""
UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
dismiss()
}) {
HStack {
Text(verbatim: "Add relay")
.bold()
}
.frame(minWidth: 300, maxWidth: .infinity, alignment: .center)
}
.buttonStyle(GradientButtonStyle(padding: 10))
//.disabled(!new_relay.isValidURL) <--- TODO
.padding(.vertical)
Spacer()
}
.padding()
}
}
// TODO
// This works sometimes, in certain cases where the relay is valid it won't allow the user to add it
// Needs improvement
extension String {
var isValidURL: Bool {
let detector = try! NSDataDetector(types: NSTextCheckingResult.CheckingType.link.rawValue)
if let match = detector.firstMatch(in: self, options: [], range: NSRange(location: 0, length: self.utf16.count)) {
// it is a link, if the match covers the whole string
return match.range.length == self.utf16.count
} else {
return false
}
}
}
@ -43,6 +158,6 @@ struct AddRelayView_Previews: PreviewProvider {
@State static var relay: String = ""
static var previews: some View {
AddRelayView(relay: $relay)
AddRelayView(state: test_damus_state())
}
}

View File

@ -12,64 +12,50 @@ struct RecommendedRelayView: View {
let relay: String
let add_button: Bool
@ObservedObject private var model_cache: RelayModelCache
@Binding var showActionButtons: Bool
init(damus: DamusState, relay: String, add_button: Bool = true, showActionButtons: Binding<Bool>) {
self.damus = damus
self.relay = relay
self.add_button = add_button
self.model_cache = damus.relay_model_cache
self._showActionButtons = showActionButtons
}
var recommended: [RelayDescriptor] {
let rs: [RelayDescriptor] = []
return BOOTSTRAP_RELAYS.reduce(into: rs) { xs, x in
if damus.pool.get_relay(x) == nil, let url = RelayURL(x) {
xs.append(RelayDescriptor(url: url, info: .rw))
}
}
}
var body: some View {
ZStack {
VStack {
let meta = model_cache.model(with_relay_id: relay)?.metadata
RelayPicView(relay: relay, icon: meta?.icon, size: 70, highlight: .none, disable_animation: false)
if let meta = damus.relay_model_cache.model(with_relay_id: relay)?.metadata {
NavigationLink(value: Route.RelayDetail(relay: relay, metadata: meta)){
EmptyView()
}
.opacity(0.0)
.disabled(showActionButtons)
}
HStack {
if let keypair = damus.keypair.to_full() {
if showActionButtons && add_button {
AddButton(keypair: keypair, showText: false)
}
}
RelayType(is_paid: damus.relay_model_cache.model(with_relay_id: relay)?.metadata.is_paid ?? false)
Text(relay).layoutPriority(1)
if let meta = damus.relay_model_cache.model(with_relay_id: relay)?.metadata {
NavigationLink(value: Route.RelayDetail(relay: relay, metadata: meta)){
EmptyView()
}
.opacity(0.0)
.disabled(showActionButtons)
Spacer()
Image("info")
.resizable()
.frame(width: 20, height: 20)
.foregroundColor(Color.accentColor)
} else {
Spacer()
Image("question")
.resizable()
.frame(width: 20, height: 20)
.foregroundColor(.gray)
}
Text(meta?.name ?? relay.hostname ?? relay)
.lineLimit(1)
}
}
.swipeActions {
if add_button {
if let keypair = damus.keypair.to_full() {
AddButton(keypair: keypair, showText: false)
.tint(.accentColor)
}
.contextMenu {
CopyAction(relay: relay)
}
}
.contextMenu {
CopyAction(relay: relay)
if let keypair = damus.keypair.to_full() {
AddButton(keypair: keypair, showText: true)
AddButton(keypair: keypair)
}
}
}
@ -82,19 +68,14 @@ struct RecommendedRelayView: View {
}
}
func AddButton(keypair: FullKeypair, showText: Bool) -> some View {
func AddButton(keypair: FullKeypair) -> some View {
Button(action: {
add_action(keypair: keypair)
}) {
if showText {
Text(NSLocalizedString("Connect", comment: "Button to connect to recommended relay server."))
}
Image("plus-circle")
.resizable()
.frame(width: 20, height: 20)
.foregroundColor(.accentColor)
.padding(.leading, 5)
Text(NSLocalizedString("Add", comment: "Button to add relay server to list."))
.padding(10)
}
.buttonStyle(NeutralButtonStyle())
}
func add_action(keypair: FullKeypair) {

View File

@ -9,10 +9,9 @@ import SwiftUI
struct RelayConfigView: View {
let state: DamusState
@State var new_relay: String = ""
@State var relays: [RelayDescriptor]
@State private var showActionButtons = false
@State var relayAddErrorMessage: String? = nil
@State var show_add_relay: Bool = false
@Environment(\.dismiss) var dismiss
@ -41,118 +40,69 @@ struct RelayConfigView: View {
}
var MainContent: some View {
Form {
Section {
AddRelayView(relay: $new_relay)
} header: {
HStack {
Text(NSLocalizedString("Connect To Relay", comment: "Label for section for adding a relay server."))
.font(.system(size: 18, weight: .heavy))
.padding(.bottom, 5)
}
} footer: {
VStack {
HStack {
Spacer()
if !new_relay.isEmpty {
Button(NSLocalizedString("Cancel", comment: "Button to cancel out of view adding user inputted relay.")) {
new_relay = ""
UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
}
.font(.system(size: 14, weight: .bold))
.frame(width: 80, height: 30)
.foregroundColor(.white)
.background(LINEAR_GRADIENT)
.clipShape(Capsule())
.padding(EdgeInsets(top: 15, leading: 0, bottom: 0, trailing: 0))
Button(NSLocalizedString("Add", comment: "Button to confirm adding user inputted relay.")) {
if new_relay.starts(with: "wss://") == false && new_relay.starts(with: "ws://") == false {
new_relay = "wss://" + new_relay
}
if new_relay.hasSuffix("/") {
new_relay.removeLast();
}
guard let url = RelayURL(new_relay),
let ev = state.contacts.event,
let keypair = state.keypair.to_full() else {
return
}
let info = RelayInfo.rw
let descriptor = RelayDescriptor(url: url, info: info)
do {
try state.pool.add_relay(descriptor)
relayAddErrorMessage = nil // Clear error message
} catch RelayError.RelayAlreadyExists {
relayAddErrorMessage = NSLocalizedString("This relay is already in your list", comment: "An error message that appears when the user attempts to add a relay that has already been added.")
return
} catch {
return
}
state.pool.connect(to: [new_relay])
guard let new_ev = add_relay(ev: ev, keypair: keypair, current_relays: state.pool.our_descriptors, relay: new_relay, info: info) else {
return
}
process_contact_event(state: state, ev: ev)
state.pool.send(.event(new_ev))
new_relay = ""
UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
}
.font(.system(size: 14, weight: .bold))
.frame(width: 80, height: 30)
.foregroundColor(.white)
.background(LINEAR_GRADIENT)
.clipShape(Capsule())
.padding(EdgeInsets(top: 15, leading: 0, bottom: 0, trailing: 0))
}
}
if let errorMessage = relayAddErrorMessage {
HStack {
Spacer()
Text(errorMessage)
.foregroundColor(Color.red)
}
}
}
}
Section {
List(Array(relays), id: \.url) { relay in
RelayView(state: state, relay: relay.url.id, showActionButtons: $showActionButtons)
}
} header: {
HStack {
Text(NSLocalizedString("Connected Relays", comment: "Section title for relay servers that are connected."))
.font(.system(size: 18, weight: .heavy))
.padding(.bottom, 5)
}
}
VStack {
Divider()
if recommended.count > 0 {
Section {
List(recommended, id: \.url) { r in
RecommendedRelayView(damus: state, relay: r.url.id, showActionButtons: $showActionButtons)
VStack {
Text("Recommended relays")
.foregroundStyle(DamusLightGradient.gradient)
.padding(10)
.background {
RoundedRectangle(cornerRadius: 15)
.stroke(DamusLightGradient.gradient)
}
.padding(.vertical)
HStack(spacing: 20) {
ForEach(recommended, id: \.url) { r in
RecommendedRelayView(damus: state, relay: r.url.id, showActionButtons: $showActionButtons)
}
}
} header: {
Text(NSLocalizedString("Recommended Relays", comment: "Section title for recommend relay servers that could be added as part of configuration"))
.font(.system(size: 18, weight: .heavy))
.padding(.bottom, 5)
.padding()
}
.frame(minWidth: 250, maxWidth: .infinity, minHeight: 250, alignment: .center)
.background {
RoundedRectangle(cornerRadius: 12)
.fill(DamusLightGradient.gradient.opacity(0.15), strokeBorder: DamusLightGradient.gradient, lineWidth: 1)
}
.padding(.horizontal)
}
HStack {
Text(NSLocalizedString("My Relays", comment: "Section title for relay servers that the user is connected to."))
.font(.system(size: 32, weight: .bold))
Spacer()
Button(action: {
show_add_relay.toggle()
}) {
HStack {
Text(verbatim: "Add relay")
.padding(10)
}
}
.buttonStyle(NeutralButtonStyle())
}
.padding(25)
List(Array(relays), id: \.url) { relay in
RelayView(state: state, relay: relay.url.id, showActionButtons: $showActionButtons)
}
.listStyle(PlainListStyle())
}
.navigationTitle(NSLocalizedString("Relays", comment: "Title of relays view"))
.navigationBarTitleDisplayMode(.large)
.navigationBarTitleDisplayMode(.inline)
.sheet(isPresented: $show_add_relay, onDismiss: { self.show_add_relay = false }) {
if #available(iOS 16.0, *) {
AddRelayView(state: state)
.presentationDetents([.height(300)])
.presentationDragIndicator(.visible)
} else {
AddRelayView(state: state)
}
}
.toolbar {
if state.keypair.privkey != nil {
if showActionButtons {

View File

@ -13,21 +13,51 @@ struct RelayStatusView: View {
var body: some View {
Group {
if connection.isConnecting {
ProgressView()
Text("Connecting")
.font(.caption)
.frame(height: 20)
.padding(.horizontal, 10)
.foregroundColor(DamusColors.warning)
.background(DamusColors.warningQuaternary)
.cornerRadius(20)
.overlay(
RoundedRectangle(cornerRadius: 20)
.stroke(DamusColors.warningBorder, lineWidth: 1)
)
} else if connection.isConnected {
Text("Online")
.font(.caption)
.frame(height: 20)
.padding(.horizontal, 10)
.foregroundColor(DamusColors.success)
.background(DamusColors.successQuaternary)
.cornerRadius(20)
.overlay(
RoundedRectangle(cornerRadius: 20)
.stroke(DamusColors.successBorder, lineWidth: 1)
)
} else {
Image(connection.isConnected ? "globe" : "warning.fill")
.resizable()
.foregroundColor(connection.isConnected ? .green : .red)
Text("Error")
.font(.caption)
.frame(height: 20)
.padding(.horizontal, 10)
.foregroundColor(DamusColors.danger)
.background(DamusColors.dangerQuaternary)
.border(DamusColors.dangerBorder)
.cornerRadius(20)
.overlay(
RoundedRectangle(cornerRadius: 20)
.stroke(DamusColors.dangerBorder, lineWidth: 1)
)
}
}
.frame(width: 20, height: 20)
.padding(.trailing, 5)
.padding(.trailing, 20)
}
}
struct RelayStatusView_Previews: PreviewProvider {
static var previews: some View {
let connection = test_damus_state().pool.get_relay("relay")!.connection
let connection = test_damus_state().pool.get_relay("wss://relay.damus.io")!.connection
RelayStatusView(connection: connection)
}
}

View File

@ -28,41 +28,35 @@ struct RelayView: View {
if showActionButtons {
RemoveButton(privkey: privkey, showText: false)
}
else if let relay_connection {
RelayStatusView(connection: relay_connection)
}
}
RelayType(is_paid: state.relay_model_cache.model(with_relay_id: relay)?.metadata.is_paid ?? false)
if let meta = model_cache.model(with_relay_id: relay)?.metadata {
let meta = model_cache.model(with_relay_id: relay)?.metadata
RelayPicView(relay: relay, icon: meta?.icon, size: 55, highlight: .none, disable_animation: false)
VStack(alignment: .leading) {
HStack {
Text(meta?.name ?? relay)
.font(.headline)
.padding(.bottom, 2)
RelayType(is_paid: state.relay_model_cache.model(with_relay_id: relay)?.metadata.is_paid ?? false)
}
Text(relay)
.font(.subheadline)
.foregroundColor(.gray)
}
Spacer()
if let relay_connection {
RelayStatusView(connection: relay_connection)
.background(
NavigationLink(value: Route.RelayDetail(relay: relay, metadata: meta), label: {
EmptyView()
}).opacity(0.0).disabled(showActionButtons)
})
.buttonStyle(.plain)
.disabled(showActionButtons)
)
Spacer()
Image("info")
.resizable()
.frame(width: 20, height: 20)
.foregroundColor(Color.accentColor)
} else {
Text(relay)
.background(
NavigationLink(value: Route.RelayDetail(relay: relay, metadata: nil), label: {
EmptyView()
}).opacity(0.0).disabled(showActionButtons)
)
Spacer()
Image("question")
.resizable()
.frame(width: 20, height: 20)
.foregroundColor(.gray)
}
}
}