Working on new SwiftUI Profiles

Assets.xcassets/twitter-outline.imageset/Contents.json

@@ -0,0 +1,26 @@
+{
+  "images" : [
+    {
+      "filename" : "twitter-outline.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "template-rendering-intent" : "template"
+  }
+}

Sources/EditProfileViewController.swift

@@ -10,7 +10,7 @@ class EditProfileViewController: UIViewController {
     private var imageView: EditImageButton!
     private var imagePicker: ImagePicker!
     private var bioTextField: TextView!
-    private var twitterButton: Button!
+    private var twitterButton: SoapButton!
 
     private var image: UIImage?
 
@@ -86,7 +86,7 @@ class EditProfileViewController: UIViewController {
         bioTextField.text = user.bio
         view.addSubview(bioTextField)
 
-        twitterButton = Button(size: .small)
+        twitterButton = SoapButton(size: .small)
         twitterButton.backgroundColor = .twitter
         twitterButton.translatesAutoresizingMaskIntoConstraints = false
         twitterButton.setTitle(NSLocalizedString("connect_twitter", comment: ""), for: .normal)

Sources/Scenes/Authentication/ViewControllers/AuthenticationEmailViewController.swift

@@ -18,8 +18,8 @@ class AuthenticationEmailViewController: ViewControllerWithKeyboardConstraint {
         return textField
     }()
 
-    private let submitButton: Button = {
-        let button = Button(size: .large)
+    private let submitButton: SoapButton = {
+        let button = SoapButton(size: .large)
         button.translatesAutoresizingMaskIntoConstraints = false
         button.setTitle(NSLocalizedString("next", comment: ""), for: .normal)
         button.addTarget(self, action: #selector(didSubmit), for: .touchUpInside)

Sources/Scenes/Authentication/ViewControllers/AuthenticationFollowViewController.swift

@@ -17,8 +17,8 @@ class AuthenticationFollowViewController: UIViewController {
         return label
     }()
 
-    private let followButton: Button = {
-        let button = Button(size: .large)
+    private let followButton: SoapButton = {
+        let button = SoapButton(size: .large)
         button.translatesAutoresizingMaskIntoConstraints = false
         button.setTitle(NSLocalizedString("follow", comment: ""), for: .normal)
         button.addTarget(self, action: #selector(didSubmit), for: .touchUpInside)

Sources/Scenes/Authentication/ViewControllers/AuthenticationPinViewController.swift

@@ -16,8 +16,8 @@ class AuthenticationPinViewController: ViewControllerWithKeyboardConstraint {
         return textField
     }()
 
-    private let submitButton: Button = {
-        let button = Button(size: .large)
+    private let submitButton: SoapButton = {
+        let button = SoapButton(size: .large)
         button.translatesAutoresizingMaskIntoConstraints = false
         button.setTitle(NSLocalizedString("next", comment: ""), for: .normal)
         button.addTarget(self, action: #selector(didSubmit), for: .touchUpInside)

Sources/Scenes/Authentication/ViewControllers/AuthenticationRegistrationViewController.swift

@@ -25,8 +25,8 @@ class AuthenticationRegistrationViewController: ViewControllerWithKeyboardConstr
         return textField
     }()
 
-    private let submitButton: Button = {
-        let button = Button(size: .large)
+    private let submitButton: SoapButton = {
+        let button = SoapButton(size: .large)
         button.translatesAutoresizingMaskIntoConstraints = false
         button.setTitle(NSLocalizedString("submit", comment: ""), for: .normal)
         button.addTarget(self, action: #selector(didSubmit), for: .touchUpInside)

Sources/Scenes/Authentication/ViewControllers/AuthenticationStartViewController.swift

@@ -24,8 +24,8 @@ class AuthenticationStartViewController: UIViewController {
         return text
     }()
 
-    private let submitButton: Button = {
-        let button = Button(size: .large)
+    private let submitButton: SoapButton = {
+        let button = SoapButton(size: .large)
         button.translatesAutoresizingMaskIntoConstraints = false
         button.setTitle(NSLocalizedString("continue_email", comment: ""), for: .normal)
         button.setTitleColor(.black, for: .normal)

Sources/Scenes/NotificationPrompt/NotificationPromptViewController.swift

@@ -59,7 +59,7 @@ class NotificationPromptViewController: DrawerViewController {
         content.font = .rounded(forTextStyle: .body, weight: .semibold)
         view.addSubview(content)
 
-        let settingsButton = Button(size: .large)
+        let settingsButton = SoapButton(size: .large)
         settingsButton.translatesAutoresizingMaskIntoConstraints = false
         settingsButton.backgroundColor = .white
         settingsButton.setTitle("Go to Settings", for: .normal)

Sources/Scenes/PMFSurveyPrompt/PMFSurveyPromptViewController.swift

@@ -33,7 +33,7 @@ class PMFSurveyPromptViewController: DrawerViewController {
         content.font = .rounded(forTextStyle: .body, weight: .semibold)
         view.addSubview(content)
 
-        let survey = Button(size: .large)
+        let survey = SoapButton(size: .large)
         survey.translatesAutoresizingMaskIntoConstraints = false
         survey.setTitle("Complete Survey", for: .normal)
         survey.addTarget(self, action: #selector(openSurvey), for: .touchUpInside)

Sources/Scenes/Profile/ProfileView.swift

@@ -0,0 +1,201 @@
+//
+//  ProfileView.swift
+//  Soapbox
+//
+//  Created by Jeffrey Reiner on 5/28/21.
+//
+
+import SwiftUI
+
+struct PillButtonStyle: ButtonStyle {
+    var bgColor: Color = Color(.brandColor)
+    var fgColor: Color = .white
+
+    func makeBody(configuration: Self.Configuration) -> some View {
+        configuration.label
+            .frame(height: 40)
+            .padding(.horizontal, 20)
+            .background(bgColor)
+            .clipShape(Capsule())
+            .foregroundColor(fgColor)
+            .font(.body.weight(.semibold))
+            .scaleEffect(configuration.isPressed ? 0.95 : 1)
+            .animation(
+                .spring(response: 0.3, dampingFraction: 0.5, blendDuration: 0.4)
+                .delay(0)
+            )
+    }
+}
+
+struct IconButtonStyle: ButtonStyle {
+    var bgColor: Color
+    var fgColor: Color
+
+    func makeBody(configuration: Self.Configuration) -> some View {
+        configuration.label
+            .frame(width: 40, height: 40)
+            .background(bgColor)
+            .foregroundColor(fgColor)
+            .font(.body.weight(.semibold))
+            .clipShape(Circle())
+            .scaleEffect(configuration.isPressed ? 0.95 : 1)
+            .animation(
+                .spring(response: 0.3, dampingFraction: 0.5, blendDuration: 0.4)
+                .delay(0)
+            )
+    }
+}
+
+struct ActivityIndicator: UIViewRepresentable {
+
+    @Binding var isAnimating: Bool
+    let style: UIActivityIndicatorView.Style = .medium
+
+    func makeUIView(context: UIViewRepresentableContext<ActivityIndicator>) -> UIActivityIndicatorView {
+        let indicator = UIActivityIndicatorView(style: style);
+
+        indicator.color = UIColor.white
+
+        return indicator
+    }
+
+    func updateUIView(_ uiView: UIActivityIndicatorView, context: UIViewRepresentableContext<ActivityIndicator>) {
+        isAnimating ? uiView.startAnimating() : uiView.stopAnimating()
+    }
+}
+
+extension String {
+   func widthOfString(usingFont font: UIFont) -> CGFloat {
+        let fontAttributes = [NSAttributedString.Key.font: font]
+        let size = self.size(withAttributes: fontAttributes)
+        return size.width
+    }
+}
+
+struct PillButtonWithLoadingIndicator: View {
+    var label: String
+    var isLoading: Bool
+    var action: () -> Void;
+
+    var body: some View {
+        Button(action: action) {
+            HStack(spacing: 0) {
+                if isLoading {
+                    ActivityIndicator(isAnimating: .constant(isLoading))
+                } else {
+                    Text(label)
+                }
+            }.frame(width: label.widthOfString(usingFont: UIFont.systemFont(ofSize: 17, weight: .bold)))
+        }.buttonStyle(PillButtonStyle())
+    }
+}
+
+struct IconButton: View {
+    var icon: Image;
+    var type: Style = .primary
+    var action: () -> Void;
+
+    enum Style {
+        case primary, secondary
+    }
+
+    var body: some View {
+        Button(action: action) {
+            icon
+        }
+            .buttonStyle(IconButtonStyle(
+                bgColor: type == .primary ? Color(.brandColor) : Color(.systemGray5),
+                fgColor: type == .primary ? .white : .primary)
+            )
+    }
+}
+
+struct ProfilePicture: View {
+    var body: some View {
+        Image(systemName: "")
+            .frame(width: 80, height: 80)
+            .background(Color(.brandColor))
+            .clipShape(Circle())
+    }
+}
+
+struct ProfileView: View {
+    var profile: APIClient.Profile
+
+    var display_name: String = "Amy"
+    var bio: String = "About Me. Think you can beat my Flappy Bird score? Try me."
+    var followers_count: String = "1,100"
+    var following_count: String = "2,400"
+
+    @State private var isFollowing = true
+    @State private var isNotifying = true
+
+    @State private var isLoading = false;
+
+    func toggleFollowing() {
+        isLoading = true
+
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
+            isFollowing.toggle()
+
+            isLoading = false
+        }
+    }
+
+    func toggleNotifying() {
+        isNotifying.toggle()
+    }
+
+    var body: some View {
+        ScrollView() {
+            VStack(alignment: .leading, spacing: 20) {
+                VStack(alignment: .leading, spacing: 10) {
+                    ProfilePicture()
+
+                    Text(profile.displayName).font(.system(size: 24)).fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
+
+                    Text(profile.bio)
+                }
+
+                HStack(spacing: 10) {
+                    Text(String(profile.following)).bold() + Text(" ") + Text("Following").foregroundColor(.secondary)
+
+                    Text(String(profile.followers)).bold() + Text(" ") + Text("Followers").foregroundColor(.secondary)
+
+                    Spacer()
+                }
+
+                HStack(spacing: 10) {
+                    PillButtonWithLoadingIndicator(label: isFollowing ? "Following" : "Follow", isLoading: isLoading, action: toggleFollowing)
+
+                    IconButton(icon: isNotifying ? Image(systemName: "bell.fill") : Image(systemName: "bell"), type: isNotifying ? .primary : .secondary, action: toggleNotifying)
+
+                    if (profile.linkedAccounts.first(where: { $0.provider == "twitter" }) != nil) {
+                        IconButton(icon: Image("twitter-outline"), type: .secondary, action: {})
+                    }
+
+                    Spacer()
+                }
+            }.padding(20)
+
+            Divider()
+
+            VStack {
+                HStack {
+                    Text("Your Bubble").font(.system(size: 24)).bold()
+
+                    Spacer()
+                }
+            }.padding(20)
+
+        }
+
+
+    }
+}
+
+struct ProfileView_Previews: PreviewProvider {
+    static var previews: some View {
+        ProfileView().preferredColorScheme(.light)
+    }
+}

Sources/Scenes/Profile/ProfileViewController.swift

@@ -1,6 +1,7 @@
 import AlamofireImage
 import GSImageViewerController
 import UIKit
+import SwiftUI
 
 protocol ProfileViewControllerOutput {
     func loadData()
@@ -86,12 +87,20 @@ class ProfileViewController: ViewControllerWithRemoteContent<APIClient.Profile>
         badge.isUserInteractionEnabled = true
         return badge
     }()
-
+    
     override func viewDidLoad() {
         super.viewDidLoad()
 
         view.backgroundColor = .background
-
+
+        // NOTE: Try to add Profile to view controller
+
+        let childView = UIHostingController(rootView: ProfileView())
+        addChild(childView)
+        childView.view.frame = view.frame
+        view.addSubview(childView.view)
+        childView.didMove(toParent: self)
+
         contentView.addSubview(stack)
 
         headerView.button.setTitle(NSLocalizedString("follow", comment: ""), for: .normal)

Sources/Scenes/RoomCreation/RoomCreationView.swift

@@ -49,8 +49,8 @@ class RoomCreationView: DrawerViewController, UITextFieldDelegate {
         return label
     }()
 
-    private let button: Button = {
-        let button = Button(size: .large)
+    private let button: SoapButton = {
+        let button = SoapButton(size: .large)
         button.translatesAutoresizingMaskIntoConstraints = false
         button.setTitle(NSLocalizedString("start_room", comment: ""), for: .normal)
         button.backgroundColor = .white

Sources/Scenes/RoomPreview/RoomPreviewViewController.swift

@@ -70,7 +70,7 @@ class RoomPreviewViewController: DrawerViewController {
         muted.textAlignment = .center
         view.addSubview(muted)
 
-        let button = Button(size: .regular)
+        let button = SoapButton(size: .regular)
         button.translatesAutoresizingMaskIntoConstraints = false
         button.setTitle(NSLocalizedString("join_in", comment: ""), for: .normal)
         button.addTarget(self, action: #selector(didTapJoin), for: .touchUpInside)

Sources/Scenes/StoryCreation/StoryCreationViewController.swift

@@ -36,7 +36,7 @@ class StoryCreationViewController: DrawerViewController {
     }()
 
     private let shareButton: UIButton = {
-        let button = Button(size: .regular)
+        let button = SoapButton(size: .regular)
         button.translatesAutoresizingMaskIntoConstraints = false
         button.backgroundColor = .white
         button.setTitleColor(.black, for: .normal)

Sources/UI/Buttons/Button+LoadingIndicator.swift

@@ -1,6 +1,6 @@
 import UIKit
 
-class ButtonWithLoadingIndicator: Button {
+class ButtonWithLoadingIndicator: SoapButton {
     var isLoading: Bool = false {
         didSet {
             if isLoading {
@@ -23,7 +23,7 @@ class ButtonWithLoadingIndicator: Button {
         return indicator
     }()
 
-    override init(size: Button.Size) {
+    override init(size: SoapButton.Size) {
         super.init(size: size)
 
         addSubview(activityIndicator)