Demo app

Author: Mat Schmid

.gitignore

@@ -0,0 +1,30 @@
+# Xcode
+#
+# gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore
+
+## User settings
+xcuserdata/
+
+## compatibility with Xcode 8 and earlier (ignoring not required starting Xcode 9)
+*.xcscmblueprint
+*.xccheckout
+
+## compatibility with Xcode 3 and earlier (ignoring not required starting Xcode 4)
+build/
+DerivedData/
+*.moved-aside
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+
+## Xcode Patch
+*.xcodeproj/*
+!*.xcodeproj/project.pbxproj
+!*.xcodeproj/xcshareddata/
+!*.xcworkspace/contents.xcworkspacedata
+/*.gcno

Models.swift

@@ -0,0 +1,35 @@
+//
+//  Models.swift
+//  Products
+//
+//  Created by Mat Schmid on 2019-06-10.
+//  Copyright © 2019 Shopify. All rights reserved.
+//
+
+import SwiftUI
+
+typealias UINetworkModel = Decodable & Identifiable
+
+struct Root: Decodable {    
+    var products: [Product]
+}
+
+struct Product: UINetworkModel {
+    var id: Int
+    
+    let title, body_html, vendor: String
+    let variants: [Variant]
+    let image: ProductImage
+}
+
+struct Variant: UINetworkModel {
+    var id: Int
+    
+    let title, price: String
+}
+
+struct ProductImage: UINetworkModel {
+    var id: Int
+
+    let src: String
+}

ProductDetailsView.swift

@@ -0,0 +1,30 @@
+//
+//  ProductDetailsView.swift
+//  Products
+//
+//  Created by Mat Schmid on 2019-06-10.
+//  Copyright © 2019 Shopify. All rights reserved.
+//
+
+import SwiftUI
+
+struct ProductDetailsView : View {
+    var product: Product
+    
+    var body: some View {
+        NavigationView {
+            VStack(alignment: .leading) {
+                ProductRow(product: product)
+                Text("Variants").font(.title).padding()
+                List(product.variants) { variant in
+                    VStack(alignment: .leading) {
+                        Text(variant.title)
+                        Text(variant.price)
+                    }
+                }
+            }
+            .navigationBarTitle(Text("Details"))
+        }
+        
+    }
+}

ProductFetcher.swift

@@ -0,0 +1,85 @@
+//
+//  ProductFetcher.swift
+//  Products
+//
+//  Created by Mat Schmid on 2019-06-10.
+//  Copyright © 2019 Shopify. All rights reserved.
+//
+
+import Foundation
+import SwiftUI
+import Combine
+
+enum LoadableState<T> {
+    case loading
+    case fetched(Result<T, FetchError>)
+}
+
+enum FetchError: Error {
+    case error(String)
+    
+    var localizedDescription: String {
+        switch self {
+        case .error(let message):
+            return message
+        }
+    }
+}
+
+class ProductFetcher: BindableObject {
+    private static let apiUrlString = "https://gist.githubusercontent.com/schmidyy/02fdec9b9e05a71312a550fc50f948e6/raw/7fc2facbbf9c3aa526f35a32d0c7fe74a4fc29a1/products.json"
+    var didChange = PassthroughSubject<ProductFetcher, Never>()
+    
+    var state: LoadableState<Root> = .loading {
+        didSet {
+            didChange.send(self)
+        }
+    }
+    
+    init() {
+        guard let apiUrl = URL(string: ProductFetcher.apiUrlString) else {
+            state = .fetched(.failure(.error("Malformed API URL.")))
+            return
+        }
+        
+        URLSession.shared.dataTask(with: apiUrl) { [weak self] (data, _, error) in
+            if let error = error {
+                self?.state = .fetched(.failure(.error(error.localizedDescription)))
+                return
+            }
+            
+            guard let data = data else {
+                self?.state = .fetched(.failure(.error("Malformed response data")))
+                return
+            }
+            let root = try! JSONDecoder().decode(Root.self, from: data)
+            
+            DispatchQueue.main.async { [weak self] in
+                self?.state = .fetched(.success(root))
+            }
+        }.resume()
+    }
+}
+
+class ImageFetcher: BindableObject {
+    var didChange = PassthroughSubject<Data, Never>()
+    
+    var data: Data = Data() {
+        didSet {
+            didChange.send(data)
+        }
+    }
+    
+    init(url: String) {
+        guard let imageUrl = URL(string: url) else {
+            return
+        }
+        
+        URLSession.shared.dataTask(with: imageUrl) { (data, _, _) in
+            guard let data = data else { return }
+            DispatchQueue.main.async { [weak self] in
+                self?.data = data
+            }
+        }.resume()
+    }
+}

ProductListView.swift

@@ -0,0 +1,44 @@
+//
+//  ProductListView.swift
+//  Products
+//
+//  Created by Mat Schmid on 2019-06-10.
+//  Copyright © 2019 Shopify. All rights reserved.
+//
+
+import SwiftUI
+
+struct ProductListView : View {
+    @ObjectBinding var productFetcher = ProductFetcher()
+    
+    private var stateContent: AnyView {
+        switch productFetcher.state {
+        case .loading:
+            return AnyView(
+                ActivityIndicator(style: .medium)
+            )
+        case .fetched(let result):
+            switch result {
+            case .failure(let error):
+                return AnyView(
+                    Text(error.localizedDescription)
+                )
+            case .success(let root):
+                return AnyView(
+                    List(root.products) { product in
+                        NavigationButton(destination: ProductDetailsView(product: product)) {
+                            ProductRow(product: product)
+                        }
+                    }
+                )
+            }
+        }
+    }
+    
+    var body: some View {
+        NavigationView {
+            stateContent
+            .navigationBarTitle(Text("Products"))
+        }
+    }
+}

ProductRow.swift

@@ -0,0 +1,23 @@
+//
+//  ProductRow.swift
+//  Products
+//
+//  Created by Mat Schmid on 2019-06-10.
+//  Copyright © 2019 Shopify. All rights reserved.
+//
+
+import SwiftUI
+
+struct ProductRow: View {
+    var product: Product
+    
+    var body: some View {
+        HStack {
+            LoadableImageView(with: product.image.src).frame(width: 60, height: 60)
+            VStack(alignment: .leading) {
+                Text(product.title)
+                Text(product.body_html).font(.caption)
+            }
+        }
+    }
+}