onboarding: Suggest first post during onboarding
Testing of standard flow ------------------------ PASS Device: iPhone 14 Pro simulator iOS: 17.0 Damus: This commit Steps: 1. Delete and reinstall Damus 2. Go through onboarding until suggested users appear 3. Click "continue". Should slide into the post view. PASS 4. Post view should look similar to the Figma design file, but with examples as placeholders. PASS 5. Examples should switch every 3 seconds. PASS 6. Typing a first character causes the #introductions hashtag to be automatically added. PASS 7. Uploading an image makes progress view show up and not break layout. PASS 8. Clicking on "post" should post this note and dismiss onboarding view. PASS Testing of other flows ---------------------- PASS Device: iPhone 14 Pro simulator iOS: 17.0 Damus: This commit Special remark: Made local change to always show the onboarding suggestions, and speed up testing Coverage: 1. Clicking "skip" on suggested users view will skip into the post view. PASS 2. Clicking "cancel" on post view and then going to the normal post view reveals a blank draft. PASS 3. Clicking "cancel" dismisses onboarding view and does not post anything. PASS 4. Normal post view looks normal (not broken). PASS 5. Changing initial suggested post during onboarding, cancelling the post, and then re-entering normal post view reveals the draft with user modifications. PASS Changelog-Added: Suggest first post during onboarding Closes: https://github.com/damus-io/damus/issues/1338 Signed-off-by: Daniel D’Aquino <daniel@daquino.me> Signed-off-by: William Casarin <jb55@jb55.com>
This commit is contained in:
Daniel D’Aquino
committed by
William Casarin
William Casarin
parent
7c98489904
commit
bf43842590
123
damus/Views/Onboarding/OnboardingSuggestionsView.swift
Normal file
123
damus/Views/Onboarding/OnboardingSuggestionsView.swift
Normal file
@@ -0,0 +1,123 @@
|
||||
//
|
||||
// OnboardingSuggestionsView.swift
|
||||
// damus
|
||||
//
|
||||
// Created by klabo on 7/17/23.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
|
||||
fileprivate let first_post_example_1: String = NSLocalizedString("Hello everybody!\n\nThis is my first post on Damus, I am happy to meet you all 🤙. What’s up?\n\n#introductions", comment: "First post example given to the user during onboarding, as a suggestion as to what they could post first")
|
||||
fileprivate let first_post_example_2: String = NSLocalizedString("This is my first post on Nostr 💜. I love drawing and folding Origami!\n\nNice to meet you all! #introductions #plebchain ", comment: "First post example given to the user during onboarding, as a suggestion as to what they could post first")
|
||||
fileprivate let first_post_example_3: String = NSLocalizedString("For #Introductions! I’m a software developer.\n\nMy side interests include languages and I am striving to be a #polyglot - I am a native English speaker and can speak French, German and Japanese.", comment: "First post example given to the user during onboarding, as a suggestion as to what they could post first")
|
||||
fileprivate let first_post_example_4: String = NSLocalizedString("Howdy! I’m a graphic designer during the day and coder at night, but I’m also trying to spend more time outdoors.\n\nHope to meet folks who are on their own journeys to a peaceful and free life!", comment: "First post example given to the user during onboarding, as a suggestion as to what they could post first")
|
||||
|
||||
struct OnboardingSuggestionsView: View {
|
||||
|
||||
@StateObject var model: SuggestedUsersViewModel
|
||||
@State var current_page: Int = 0
|
||||
let first_post_examples: [String] = [first_post_example_1, first_post_example_2, first_post_example_3, first_post_example_4]
|
||||
let initial_text_suffix: String = "\n\n#introductions"
|
||||
|
||||
@Environment(\.presentationMode) private var presentationMode
|
||||
|
||||
func next_page() {
|
||||
withAnimation {
|
||||
current_page += 1
|
||||
}
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
NavigationView {
|
||||
TabView(selection: $current_page) {
|
||||
SuggestedUsersPageView(model: model, next_page: self.next_page)
|
||||
.navigationTitle(NSLocalizedString("Who to Follow", comment: "Title for a screen displaying suggestions of who to follow"))
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
.navigationBarItems(leading: Button(action: {
|
||||
self.next_page()
|
||||
}, label: {
|
||||
Text(NSLocalizedString("Skip", comment: "Button to dismiss the suggested users screen"))
|
||||
.font(.subheadline.weight(.semibold))
|
||||
}))
|
||||
.tag(0)
|
||||
|
||||
PostView(
|
||||
action: .posting(.user(model.damus_state.pubkey)),
|
||||
damus_state: model.damus_state,
|
||||
prompt_view: {
|
||||
AnyView(
|
||||
HStack {
|
||||
Image(systemName: "sparkles")
|
||||
Text(NSLocalizedString("Add your first post", comment: "Prompt given to the user during onboarding, suggesting them to write their first post"))
|
||||
}
|
||||
.foregroundColor(.secondary)
|
||||
.font(.callout)
|
||||
.padding(.top, 10)
|
||||
)
|
||||
},
|
||||
placeholder_messages: self.first_post_examples,
|
||||
initial_text_suffix: self.initial_text_suffix
|
||||
)
|
||||
.tag(1)
|
||||
}
|
||||
.tabViewStyle(.page(indexDisplayMode: .never))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fileprivate struct SuggestedUsersPageView: View {
|
||||
var model: SuggestedUsersViewModel
|
||||
var next_page: (() -> Void)
|
||||
|
||||
var body: some View {
|
||||
VStack {
|
||||
List {
|
||||
ForEach(model.groups) { group in
|
||||
Section {
|
||||
ForEach(group.users, id: \.self) { pk in
|
||||
if let user = model.suggestedUser(pubkey: pk) {
|
||||
SuggestedUserView(user: user, damus_state: model.damus_state)
|
||||
}
|
||||
}
|
||||
} header: {
|
||||
SuggestedUsersSectionHeader(group: group, model: model)
|
||||
}
|
||||
}
|
||||
}
|
||||
.listStyle(.plain)
|
||||
|
||||
Spacer()
|
||||
|
||||
Button(action: {
|
||||
self.next_page()
|
||||
}) {
|
||||
Text(NSLocalizedString("Continue", comment: "Button to dismiss suggested users view and continue to the main app"))
|
||||
.frame(minWidth: 300, maxWidth: .infinity, alignment: .center)
|
||||
}
|
||||
.buttonStyle(GradientButtonStyle())
|
||||
.padding([.leading, .trailing], 24)
|
||||
.padding(.bottom, 16)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct SuggestedUsersSectionHeader: View {
|
||||
let group: SuggestedUserGroup
|
||||
let model: SuggestedUsersViewModel
|
||||
var body: some View {
|
||||
HStack {
|
||||
Text(group.title.uppercased())
|
||||
Spacer()
|
||||
Button(NSLocalizedString("Follow All", comment: "Button to follow all users in this section")) {
|
||||
model.follow(pubkeys: group.users)
|
||||
}
|
||||
.font(.subheadline.weight(.semibold))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct SuggestedUsersView_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
OnboardingSuggestionsView(model: SuggestedUsersViewModel(damus_state: test_damus_state))
|
||||
}
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
//
|
||||
// SuggestedUsersView.swift
|
||||
// damus
|
||||
//
|
||||
// Created by klabo on 7/17/23.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
|
||||
struct SuggestedUsersView: View {
|
||||
|
||||
@StateObject var model: SuggestedUsersViewModel
|
||||
|
||||
@Environment(\.presentationMode) private var presentationMode
|
||||
|
||||
var body: some View {
|
||||
NavigationView {
|
||||
VStack {
|
||||
List {
|
||||
ForEach(model.groups) { group in
|
||||
Section {
|
||||
ForEach(group.users, id: \.self) { pk in
|
||||
if let user = model.suggestedUser(pubkey: pk) {
|
||||
SuggestedUserView(user: user, damus_state: model.damus_state)
|
||||
}
|
||||
}
|
||||
} header: {
|
||||
SuggestedUsersSectionHeader(group: group, model: model)
|
||||
}
|
||||
}
|
||||
}
|
||||
.listStyle(.plain)
|
||||
|
||||
Spacer()
|
||||
|
||||
Button(action: {
|
||||
presentationMode.wrappedValue.dismiss()
|
||||
}) {
|
||||
Text(NSLocalizedString("Continue", comment: "Button to dismiss suggested users view and continue to the main app"))
|
||||
.frame(minWidth: 300, maxWidth: .infinity, alignment: .center)
|
||||
}
|
||||
.buttonStyle(GradientButtonStyle())
|
||||
.padding([.leading, .trailing], 24)
|
||||
.padding(.bottom, 16)
|
||||
}
|
||||
.navigationTitle(NSLocalizedString("Who to Follow", comment: "Title for a screen displaying suggestions of who to follow"))
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
.navigationBarItems(trailing: Button(action: {
|
||||
presentationMode.wrappedValue.dismiss()
|
||||
}, label: {
|
||||
Text(NSLocalizedString("Skip", comment: "Button to dismiss the suggested users screen"))
|
||||
.font(.subheadline.weight(.semibold))
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct SuggestedUsersSectionHeader: View {
|
||||
let group: SuggestedUserGroup
|
||||
let model: SuggestedUsersViewModel
|
||||
var body: some View {
|
||||
HStack {
|
||||
Text(group.title.uppercased())
|
||||
Spacer()
|
||||
Button(NSLocalizedString("Follow All", comment: "Button to follow all users in this section")) {
|
||||
model.follow(pubkeys: group.users)
|
||||
}
|
||||
.font(.subheadline.weight(.semibold))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct SuggestedUsersView_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
SuggestedUsersView(model: SuggestedUsersViewModel(damus_state: test_damus_state))
|
||||
}
|
||||
}
|
||||
@@ -62,9 +62,28 @@ struct PostView: View {
|
||||
|
||||
@StateObject var image_upload: ImageUploadModel = ImageUploadModel()
|
||||
@StateObject var tagModel: TagModel = TagModel()
|
||||
|
||||
@State private var current_placeholder_index = 0
|
||||
|
||||
let action: PostAction
|
||||
let damus_state: DamusState
|
||||
let prompt_view: (() -> AnyView)?
|
||||
let placeholder_messages: [String]
|
||||
let initial_text_suffix: String?
|
||||
|
||||
init(
|
||||
action: PostAction,
|
||||
damus_state: DamusState,
|
||||
prompt_view: (() -> AnyView)? = nil,
|
||||
placeholder_messages: [String]? = nil,
|
||||
initial_text_suffix: String? = nil
|
||||
) {
|
||||
self.action = action
|
||||
self.damus_state = damus_state
|
||||
self.prompt_view = prompt_view
|
||||
self.placeholder_messages = placeholder_messages ?? [POST_PLACEHOLDER]
|
||||
self.initial_text_suffix = initial_text_suffix
|
||||
}
|
||||
|
||||
@Environment(\.presentationMode) var presentationMode
|
||||
|
||||
@@ -151,12 +170,10 @@ struct PostView: View {
|
||||
}
|
||||
}
|
||||
.disabled(posting_disabled)
|
||||
.font(.system(size: 14, weight: .bold))
|
||||
.frame(width: 80, height: 30)
|
||||
.foregroundColor(.white)
|
||||
.background(LINEAR_GRADIENT)
|
||||
.opacity(posting_disabled ? 0.5 : 1.0)
|
||||
.clipShape(Capsule())
|
||||
.bold()
|
||||
.buttonStyle(GradientButtonStyle(padding: 10))
|
||||
|
||||
}
|
||||
|
||||
func isEmpty() -> Bool {
|
||||
@@ -214,12 +231,19 @@ struct PostView: View {
|
||||
|
||||
var TextEntry: some View {
|
||||
ZStack(alignment: .topLeading) {
|
||||
TextViewWrapper(attributedText: $post, textHeight: $textHeight, cursorIndex: newCursorIndex, getFocusWordForMention: { word, range in
|
||||
focusWordAttributes = (word, range)
|
||||
self.newCursorIndex = nil
|
||||
}, updateCursorPosition: { newCursorIndex in
|
||||
self.newCursorIndex = newCursorIndex
|
||||
})
|
||||
TextViewWrapper(
|
||||
attributedText: $post,
|
||||
textHeight: $textHeight,
|
||||
initialTextSuffix: initial_text_suffix,
|
||||
cursorIndex: newCursorIndex,
|
||||
getFocusWordForMention: { word, range in
|
||||
focusWordAttributes = (word, range)
|
||||
self.newCursorIndex = nil
|
||||
},
|
||||
updateCursorPosition: { newCursorIndex in
|
||||
self.newCursorIndex = newCursorIndex
|
||||
}
|
||||
)
|
||||
.environmentObject(tagModel)
|
||||
.focused($focus)
|
||||
.textInputAutocapitalization(.sentences)
|
||||
@@ -230,22 +254,33 @@ struct PostView: View {
|
||||
.frame(height: get_valid_text_height())
|
||||
|
||||
if post.string.isEmpty {
|
||||
Text(POST_PLACEHOLDER)
|
||||
Text(self.placeholder_messages[self.current_placeholder_index])
|
||||
.padding(.top, 8)
|
||||
.padding(.leading, 4)
|
||||
.foregroundColor(Color(uiColor: .placeholderText))
|
||||
.allowsHitTesting(false)
|
||||
}
|
||||
}
|
||||
.onAppear {
|
||||
// Schedule a timer to switch messages every 3 seconds
|
||||
Timer.scheduledTimer(withTimeInterval: 3.0, repeats: true) { timer in
|
||||
withAnimation {
|
||||
self.current_placeholder_index = (self.current_placeholder_index + 1) % self.placeholder_messages.count
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var TopBar: some View {
|
||||
VStack {
|
||||
HStack(spacing: 5.0) {
|
||||
Button(NSLocalizedString("Cancel", comment: "Button to cancel out of posting a note.")) {
|
||||
Button(action: {
|
||||
self.cancel()
|
||||
}
|
||||
.foregroundColor(.primary)
|
||||
}, label: {
|
||||
Text(NSLocalizedString("Cancel", comment: "Button to cancel out of posting a note."))
|
||||
.padding(10)
|
||||
})
|
||||
.buttonStyle(NeutralButtonStyle())
|
||||
|
||||
if let error {
|
||||
Text(error)
|
||||
@@ -261,9 +296,14 @@ struct PostView: View {
|
||||
ProgressView(value: progress, total: 1.0)
|
||||
.progressViewStyle(.linear)
|
||||
}
|
||||
|
||||
Divider()
|
||||
.foregroundColor(DamusColors.neutral3)
|
||||
.padding(.top, 5)
|
||||
}
|
||||
.frame(height: 30)
|
||||
.padding()
|
||||
.padding(.top, 15)
|
||||
}
|
||||
|
||||
func handle_upload(media: MediaUpload) {
|
||||
@@ -312,7 +352,12 @@ struct PostView: View {
|
||||
HStack(alignment: .top) {
|
||||
ProfilePicView(pubkey: damus_state.pubkey, size: PFP_SIZE, highlight: .none, profiles: damus_state.profiles, disable_animation: damus_state.settings.disable_animation)
|
||||
|
||||
TextEntry
|
||||
VStack(alignment: .leading) {
|
||||
if let prompt_view {
|
||||
prompt_view()
|
||||
}
|
||||
TextEntry
|
||||
}
|
||||
}
|
||||
.id("post")
|
||||
|
||||
@@ -360,6 +405,7 @@ struct PostView: View {
|
||||
}
|
||||
|
||||
Editor(deviceSize: deviceSize)
|
||||
.padding(.top, 5)
|
||||
}
|
||||
}
|
||||
.frame(maxHeight: searching == nil ? deviceSize.size.height : 70)
|
||||
|
||||
@@ -11,6 +11,7 @@ struct TextViewWrapper: UIViewRepresentable {
|
||||
@Binding var attributedText: NSMutableAttributedString
|
||||
@EnvironmentObject var tagModel: TagModel
|
||||
@Binding var textHeight: CGFloat?
|
||||
let initialTextSuffix: String?
|
||||
|
||||
let cursorIndex: Int?
|
||||
var getFocusWordForMention: ((String?, NSRange?) -> Void)? = nil
|
||||
@@ -74,25 +75,41 @@ struct TextViewWrapper: UIViewRepresentable {
|
||||
}
|
||||
|
||||
func makeCoordinator() -> Coordinator {
|
||||
Coordinator(attributedText: $attributedText, getFocusWordForMention: getFocusWordForMention, updateCursorPosition: updateCursorPosition)
|
||||
Coordinator(attributedText: $attributedText, getFocusWordForMention: getFocusWordForMention, updateCursorPosition: updateCursorPosition, initialTextSuffix: initialTextSuffix)
|
||||
}
|
||||
|
||||
class Coordinator: NSObject, UITextViewDelegate {
|
||||
@Binding var attributedText: NSMutableAttributedString
|
||||
var getFocusWordForMention: ((String?, NSRange?) -> Void)? = nil
|
||||
let updateCursorPosition: ((Int) -> Void)
|
||||
let initialTextSuffix: String?
|
||||
var initialTextSuffixWasAdded: Bool = false
|
||||
|
||||
init(attributedText: Binding<NSMutableAttributedString>,
|
||||
getFocusWordForMention: ((String?, NSRange?) -> Void)?,
|
||||
updateCursorPosition: @escaping ((Int) -> Void)
|
||||
updateCursorPosition: @escaping ((Int) -> Void),
|
||||
initialTextSuffix: String?
|
||||
) {
|
||||
_attributedText = attributedText
|
||||
self.getFocusWordForMention = getFocusWordForMention
|
||||
self.updateCursorPosition = updateCursorPosition
|
||||
self.initialTextSuffix = initialTextSuffix
|
||||
}
|
||||
|
||||
func textViewDidChange(_ textView: UITextView) {
|
||||
attributedText = NSMutableAttributedString(attributedString: textView.attributedText)
|
||||
if let initialTextSuffix, !self.initialTextSuffixWasAdded {
|
||||
self.initialTextSuffixWasAdded = true
|
||||
var mutable = NSMutableAttributedString(attributedString: textView.attributedText)
|
||||
let originalRange = textView.selectedRange
|
||||
addUnattributedText(initialTextSuffix, to: &mutable, inRange: originalRange)
|
||||
attributedText = mutable
|
||||
DispatchQueue.main.async {
|
||||
self.updateCursorPosition(originalRange.location)
|
||||
}
|
||||
}
|
||||
else {
|
||||
attributedText = NSMutableAttributedString(attributedString: textView.attributedText)
|
||||
}
|
||||
processFocusedWordForMention(textView: textView)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user