Unit 3: Advanced Data Display|Advanced Data Display

In this unit, you learned how to use collection views to display data sets. You also learned about Swift generics, worked with diffable data sources to make dynamic updates easy, and explored the power of compositional layouts to create advanced designs. In this guided project, you'll build a simple social network client app that encourages the user to follow good habits by ranking them against other users.

As you did for the Restaurant project in the previous unit, you'll use a server that runs on your computer. Also, as in Restaurant, your focus will be on the user interface; the app's data is provided for you along with a simulation that models users interacting with the app over time.

Part One: Server Details and Project Setup

Anytime you'll be working with data from a web service, it's best to start out by examining the data that the web service provides. It comes with default data, so take some time now to set up the server and to wrap your head around the details.

Run the Server

The Habits folder included with this project contains a macOS app for the server, HabitServer.app. Open the app. As in the Restaurant project, you may see a warning dialog. If you see this, click Open to indicate that you trust the app.

To start and stop the server, click the button in the Server section on the left. If you make changes to server resource files, you'll need to stop and restart the server.

Server application window

The server app lets you edit users, habits, categories, and the active user, all of which are defined in JSON files. You can also open the images folder that contains user profile images. If you want to put your own images in this directory, make sure their format is PNG. Note that the profile image for a user is always named for the user's ID.

To verify that the server is functioning properly, make sure it is running, then open your browser and load the URL http://localhost:8080. The browser should display text that indicates the status of the server. If you receive an error, the most common cause is that one of the JSON files has an invalid format. You'll need to verify that the JSON data is valid, close the application window, and restart the server. You can use the Reset Data button to discard your custom data and restore the original files.

Pro Tip: To check whether a JSON file is valid, execute python -m json.tool <JSON file> from a command prompt. The output will either be the JSON from the file (indicating that it's valid) or an error message explaining what's wrong.

As in the Restaurant project, you may see a prompt asking for permission to allow incoming connections to the server. If you do see it, click Allow.

Server Endpoints

For the Habits API service, every URL consists of http://localhost:8080 and one of the following endpoints:

/users: A GET request to this endpoint will return a dictionary containing the users of the social network.
/habits: A GET request to this endpoint will return a dictionary containing the habits a user can log.
/images: Combined with the name of an image, a GET request to this endpoint will return the profile image associated with a user.
/userStats: A GET request to this endpoint will return a summary of logged habits for all users. It can also be combined with a query parameter, ids, to return statistics for a subset of users.
/habitStats: A GET request to this endpoint will return a summary of user logs for all habits. It can also be combined with a query parameter, names, to return statistics for a subset of habits.
/combinedStats: A GET request to this endpoint will return a combined response comprising information from /userStats and /habitStats.
/userLeadingStats: Combined with a user ID, a GET request to this endpoint will return user statistics containing just those habits in which the user is leading. If a user isn't leading in any habits, no statistics will be returned.
/loggedHabit: A POST to this endpoint will log a new event related to one habit—the user's way of saying, for example, "I just took a walk."

JSON Structure

To examine the JSON data from the API, you'll use a command-line tool called curl. Open the Terminal app, then type the following command to see the users:

curl localhost:8080/users

At the root level of the JSON is a dictionary containing user ID keys; the corresponding values include the user names and IDs. (As in the previous project, if you compare this dictionary's values to users.json, you'll notice that the JSON returned by the server doesn't match up exactly with the JSON in the file due to the way the server handles the data.) In each dictionary of the JSON returned by the server, you'll see at least two of the following keys:

id is a unique String that distinguishes one user from another. All users have an id, and the id values are unique. If you modify the server's users.json file, make sure each id value remains unique.
name is a String that represents the name the user presents to the social network. All users have a name, but the server doesn't require user names to be unique.
color is a dictionary that specifies the hue, saturation, and brightness that define a color. The color is set by each user as a preference, and you'll use it to add an extra touch of each user's personality to the app. color can be nil.
bio is a string with additional information the user has chosen to share with others.

Now use curl to inspect all the habits.

curl localhost:8080/habits

Each item in the returned JSON dictionary of habit objects has the following properties:

The key of the dictionary is the habit name, which uniquely identifies it, and the value is the habit.
- name is the displayed name of the habit.
- category is a dictionary with three keys, name, color, and description, which define the category the habit belongs to.
- info is a string with additional descriptive information for the habit.

You can also use curl localhost:8080/categories to see all the categories. Note that you won't be using this endpoint in the app because there's no screen that uses categories as the primary display objects.

Dynamic Data

In this project, the server simulates an active social network, with users periodically logging their activities. Much of your app's behavior relies on the data generated by this activity. The built-in users (those in users.json) are assigned random rates for logging each of the habits, and this data is recorded in the server. The Habits service doesn't allow for browsing a time line of individual log entries; it aggregates all the entries to produce summaries. You can query for the habit log data in two ways: by user or by habit.

You'll need to start the simulation to see this data. In the HabitServer app, click Start under Simulation. You can use the slider to adjust how quickly the simulation runs. Drag the slider to the left to slow the simulation down so that it more closely mimics real-life activity, with seconds or minutes elapsing between logged habits. Drag it to the right to accelerate the simulation so that you can test how your app responds to changing data.

In Terminal, type:

curl localhost:8080/habitStats

In the returned array, you'll see objects with the following properties:

habit is the habit that the statistics were compiled for.
userCounts is an array of additional dictionary objects with two keys each:
- user is the user that logged the habit.
- count is the number of logged events.

Note that you can use an optional query string to specify a comma-separated list of specific habit names, for example ?names=Yoga.

The aggregated statistics for users have a similar structure. Type the following command in Terminal to see it:

curl localhost:8080/userStats

In the returned array, you'll see objects with the following properties:

user is the user that the statistics were compiled for.
habitCounts is an array of additional objects with two keys each:
- habit is the habit that the user has logged.
- count is the number of logged events.

Note that you can use an optional query string to specify a comma-separated list of specific habit names, for example ?ids=user0.

As a convenience, you can query for user statistics and habit statistics at the same time. Type the following command in Terminal:

curl localhost:8080/combinedStats

The returned JSON contains a root-level dictionary with two keys: userStatistics and habitStatistics. The structure of the corresponding arrays should be identical to the responses you get from /userStats and /habitStats requests.

Finally, try querying the server for habit lead statistics. Type the following in Terminal:

curl localhost:8080/userLeadingStats/user0

The returned object will have an identical structure to the objects in the array returned by the /userStats endpoint, but the data will contain only counts for those habits the user is leading. You may have to try several different user IDs before you get results with one or more habit counts, since a given user may not be leading in any habits.

Posting Data

There's one additional endpoint, loggedHabit, that requires a POST of JSON data. You'll use it to allow the user to log their own habits. The HabitServer app doesn't handle user accounts or logins, so it uses the contents of the activeUser.json file to identify the user currently using the app, as opposed to those who are simulated by the server. You won't learn how to use curl to test out this endpoint.

Part Two: Project Planning

In this app, you're working with two primary types of data: habits and users. However, those are just the building blocks that enable the key feature of the app—keeping up with and encouraging other users.

Given this basic goal, you can start thinking about how to use the user interface to engage users in this social network.

Features

You'll need to enable your app's users to:

View a list of habits.
View a list of users.
View the user statistics for a given habit.
View the habit statistics for a given user.
Log their habits and share them with the network.

Workflow

Since habits and users are complementary model objects, you can start with the idea that there should be one screen to display the list of habits and another to display the list of users. From these list screens, the user could tap on an item to view its details—the aggregated statistics. For example, tapping on a user in the users screen should show a list of the habit statistics for that user—how many times they've logged each habit.

You'll also need a way for users to log their own habits. You can handle this on a third top-level screen. You could use the habits screen for this, but you'd have to overload how the user interacts with the cells. It's reasonable to keep the logging function in its own screen to avoid that friction in the UI.

The app's functionality would be complete with these three main screens and two detail views. However, it wouldn't be that enjoyable to use. Most people expect a social network to allow them to follow each other and to flag their favorite topics. This is the perfect opportunity for a fourth main screen—a dashboard that displays a custom interface tuned to the user's individual preferences. To your list of user actions, add the following:

Toggle the favorite status of a habit.
Follow or unfollow a user.
View summary information about favorite habits and followed users at a glance.

Controllers

The app will consist of one view controller for each of the screens above. You'll tie the four main screens together with a tab bar controller, and you'll use navigation controllers to display the detail screens. A tab bar controller provides convenient access to each section of the app, and it clearly communicates to the user that the screens exist.

Networking

You'll place your networking code in its own set of protocols, extensions, and structs. This will keep its logic encapsulated and readily available to all the controllers that need it.

Views

This app will use collection views in every screen. Some will present simple lists, while others will use sophisticated layouts. You'll put all your knowledge of collection views and compositional layouts to work to make a user interface that feels smooth, and you'll use diffable data sources to allow the interface to update in real time as the social network simulation runs.

Models

Your model objects will all be structs that correspond to the various JSON types you receive from or post to the Habits web service. Note that these model objects often contain redundant copies. This is a common practice in web services when the extra cost of the redundant data is outweighed by the convenience of having everything you need returned by one call to the API.

Doing the work in your app to perform lookups is cumbersome and error-prone. For example, say you wanted to get the color of the category of a particular habit embedded in a bundle of user statistics. If you had to use the habit ID to sweep through a dictionary of habits, and then a category ID to sweep through another dictionary of categories, you'd have a lot of extra busywork: building and updating all the lookup tables, defining and implementing an interface to perform necessary lookups, and calling these methods all over your code. By including the category and color with the habit every time, the server greatly simplifies your tasks.

Part Three: Storyboard Workflow

Now that you've thought through the architecture and flow for the project, it's time to start building.

Project Setup

Create a new Xcode Single View App project named "Habits."

Before you can begin developing the app, you'll need to add an entry to Info.plist to allow the app to make requests to your server. Open the Info.plist file to view the default set of keys associated with a new iOS app. Hover over the top key, Information Property List, and a plus sign (+) will appear. Click it to begin adding a new key to the .plist.

As you did in your Restaurant app, you'll allow your Habits app to run over an unencrypted local HTTP connection. To allow HTTP connections, you'll need to add the App Transport Security Settings key. As you start typing the key's name, you can allow autocompletion to fill in the rest. Press Return to add the key.

The value for App Transport Security Settings is a dictionary. Click the down arrow next to the key name to expand the contents. Hover over the key name and click the plus sign (+).

Next, you'll add the key Allows Local Networking to the new dictionary, available in the dropdown. The value for this setting is a Boolean. Click the existing value and, in the popover that appears, change the value to YES.1

Allows Local Networking Entry

With these new entries, you're ready to begin developing an app that works with a local HTTP server.

Set Up the Tab Bar Controller

In the project planning phase, you established that you'll use a tab bar controller. Start by opening Main.storyboard and deleting the view controller in the scene.

Each of your main screens will rely on a navigation controller to display a title bar, and two of them will navigate to detail screens. Using the Object library, drag four UINavigationController objects onto the storyboard canvas. Each UINavigationController object has a UITableViewController attached to it, so you'll have to delete those before you continue. Drag four UICollectionViewController objects onto the canvas and set them as the root view controllers of the four navigation controllers.

Pro Tip: You can do this setup for one set of UINavigationController and UICollectionViewController and then copy and paste three more sets. Just be careful to select both controllers when moving them on the canvas.

Select each navigation controller's navigation bar and, in the Attributes inspector, check Prefers Large Titles.1 As you add additional view controllers to the navigation stacks, be sure to set their navigation items' Large Title property in the Attributes inspector to Never so that only the root view controller displays a large title.

Four navigation controllers with collection view controller roots, each having a preferred large title attribute set

With all four navigation controllers selected, choose Editor > Embed In > Tab Bar Controller. Then select the tab bar controller and, in the Attributes inspector, choose Is Initial View Controller.1

Initial setup of the tab bar controller with four tabs.

Working one scene at a time, select the tab bar at the bottom of each UINavigationController and use the Attributes inspector to give the bar item a title and icon,1 as follows:

Tab	Title	Icon
1	Home	house.fill
2	Habits	star.fill
3	People	person.2.fill
4	Log Habit	checkmark.square.fill

Tab bar with titles and icons

Now build and run the app. At the bottom of the screen, you should see a tab bar with four tabs, each showing an empty screen.

Create Main View Controllers

Your app will have one main collection view controller for each of the four tabs. Create a new Cocoa Touch Class called "HomeCollectionViewController" that is a subclass of UICollectionViewController. Repeat this step three more times to create "HabitCollectionViewController," "UserCollectionViewController," and "LogHabitCollectionViewController" classes.

Back in Main.storyboard, you'll need to adjust the class attribute of each collection view controller in the scene. Select the collection view controller under the first tab, then open the Identity inspector and set the Custom Class to HomeCollectionViewController. In the Attributes inspector for the navigation item, set the title to Home to match the title in the tab bar.

Set the Custom Class of the second, third, and fourth collection view controllers to HabitCollectionViewController, UserCollectionViewController, and LogHabitCollectionViewController. In the Attributes inspector for their navigation items, set the titles to Habits, People, and Log Habit.

Two of your main view controllers will use a Show segue to a detail view controller to allow the user to view statistics for a given user or a given habit. Start by creating your view controller classes. Because your detail screens will have a custom look—they'll display a rich view of the selected habit or user at the top, with a collection view below—you'll create two more Cocoa Touch classes that are subclasses of UIViewController: HabitDetailViewController and UserDetailViewController.

In Main.storyboard, drag two UIViewController objects from the Object library onto the canvas. Position them adjacent to the Habits Scene and the People Scene, and set their custom classes to HabitDetailViewController and UserDetailViewController.

When a cell in HabitCollectionViewController is tapped, it should push to the HabitDetailViewController. Control-drag from the prototype cell of HabitCollectionViewController to the HabitDetailViewController, creating a Show segue from one view controller to the next. Do the same to create a Show segue from UserCollectionViewController to UserDetailViewController. (Remember to set the Large Title property for the navigation item to Never for these new view controllers.)1

Navigation item for the People view controller with navigation item large title attribute set to Never

Part Four: Displaying a Collection of Habits

So that you don't have to build a lot of model and networking code before you see anything working in your app, you'll build the six screens one at a time, from the simplest to the most complex. You'll start with a basic design for each, then come back around to polish them.

Habit Model

Create a new Swift file called "Habit.swift" and define a Habit struct. It should have properties that correspond to the keys listed in the habits dictionary from the API. You can refer to the earlier section on JSON structure to review how the properties work.

struct Habit {
    let name: String
    let category: Category
    let info: String
}

Because a Habit has an embedded Category object, you'll have to create that struct in a new Category.swift file.

struct Category {
    let name: String
    let color: Color
}

A Category also has an embedded object: a Color. Add its declaration to a new Color.swift file. (For readability, you'll use the full names of the three components rather than h, s, and b.)

struct Color {
    let hue: Double
    let saturation: Double
    let brightness: Double
}

Habit Networking Code

In this unit, you learned how to leverage generics to reduce the amount of boilerplate code needed to handle network requests. You'll use that pattern to set up networking code that connects to the Habits service and vends data to your view controllers.

Create an API Request Protocol

The network layer in the Restaurant app (the MenuController) was very thin; it served as a pass-through processor for requests and responses. For the Habits service API, you have several different kinds of requests you'll need to make; if you tried to do something similar to what you did in Restaurant, you'd wind up writing a lot of repetitive code.

In the Generics lesson, you built a simple APIRequest protocol that streamlined network processing by providing a default implementation for handling URLSessionDataTasks. For the Habits app, you'll do away with a separate network controller in favor of a handful of lightweight structs that conform to a modified version of the APIRequest protocol that reduces the need for boilerplate code even more than the one you used in previous Unit 3 projects. Create a new Swift file called "APIRequest.swift."

To start, declare the protocol itself. It has one associated type—Response—that represents the type of object returned by a request. That should sound familiar; it's the same approach you used in the Swift Generics lab. This time, though, instead of requiring two methods for creating a request and decoding a response, the protocol will simply define four computed properties that will be used to build a URL request.

protocol APIRequest {
    associatedtype Response

    var path: String { get }
    var queryItems: [URLQueryItem]? { get }
    var request: URLRequest { get }
    var postData: Data? { get }
}

Everything you need to specify your different API requests is right there. You'll add the rest of the code for this protocol in a series of extensions. Before you write any code to send and receive responses, you'll need to add an extension for the parts of your API requests that never change: the host and port. You can also add two default implementations returning nil for the queryItems and postData properties in a separate extension, since they'll be unused in most of your request types.

extension APIRequest {
    var host: String { "localhost" }
    var port: Int { 8080 }
}

extension APIRequest {
    var queryItems: [URLQueryItem]? { nil }
    var postData: Data? { nil }
}

With that done, you can work on constructing an API request in a new extension on APIRequest.

extension APIRequest {
    var request: URLRequest {
        var components = URLComponents()

        components.scheme = "http"
        components.host = host
        components.port = port
        components.path = path
        components.queryItems = queryItems

        var request = URLRequest(url: components.url!)

        if let data = postData {
            request.httpBody = data
            request.addValue("application/json", forHTTPHeaderField: "Content-Type")
            request.httpMethod = "POST"
        }

        return request
    }
}

You'll notice that this code defines an implementation of request, one of the four declared properties of the protocol. It's easy to read and reason about. Four of the protocol's properties (two of them defined in the first extension) map directly to the various parts of a URLComponents instance, while data is used to make a POST request.

Now you'll write an extension with a method to send requests and handle results. It simply sends and unpacks the results of a data task, attempts to decode the resulting data, and returns either the data or an error.

extension APIRequest where Response: Decodable {
    func send(completion: @escaping (Result<Response, Error>) -> Void) {
        URLSession.shared.dataTask(with: request) { (data, _, error) in
            do {
                if let data = data {
                    let decoded = try JSONDecoder().decode(Response.self, from: data)
                    completion(.success(decoded))
                } else if let error = error {
                    completion(.failure(error))
                }
            } catch {

            }
        }.resume()
    }
}

As you typed, you probably noticed the interesting where clause in the declaration. Try deleting it. The Swift compiler will flag an error on the line that decodes the data, reading "Instance method decode(_:from:) requires that Self.Response conform to Decodable." You're using the protocol's associated Response type as an argument to the decoder's method, but the compiler can't guarantee that any type that adopts APIRequest will provide an associated type that is Decodable. By adding a generic type constraint to the protocol extension, you're limiting the use of the method inside it to only those types whose associated Response types are Decodable.

Create a Habit Request

Now you can leverage all this work to compactly describe your API request for habits. Getting a list of habits is a simple query; the endpoint is /habits. Create a new Swift file named "APIService.swift" and add the following struct:

struct HabitRequest: APIRequest {
    typealias Response = [String: Habit]

    var habitName: String?

    var path: String { "/habits" }
}

You'll also need to add extensions to your Habit, Category, and Color structs to make them adopt Codable. Do that underneath their declarations in their respective files. (Two of the implementations can be empty because all their constituent types adopt Codable and their coding keys match the names of the properties. The Color extension has to define a set of custom coding keys.)

extension Color: Codable {
    enum CodingKeys: String, CodingKey {
        case hue = "h"
        case saturation = "s"
        case brightness = "b"
    }
}

extension Category: Codable { }

extension Habit: Codable { }

Habit Collection View Controller Implementation

Before you write your view controller code, you'll need to do a bit more setup in your storyboard. In the Habits Scene, adjust the prototype cell by dragging its edges so that the cell fits the entire width of the collection view and is about 50 points high. Add a label from the Object library, using constraints to center it vertically in the cell and pin it 8 points from its leading edge.1

Label setup in the habits view controller collection view cell

A number of cells throughout the app will simply display one or two strings. There's no rule that requires a particular cell class be used by only one collection view controller, so you'll take advantage of this common use case to achieve some efficiency. Create a new Cocoa Touch class named PrimarySecondaryTextCollectionViewCell as a subclass of UICollectionViewCell to handle these kinds of cells. Create two outlets called primaryTextLabel and secondaryTextLabel.

class PrimarySecondaryTextCollectionViewCell: UICollectionViewCell {
    @IBOutlet var primaryTextLabel: UILabel!
    @IBOutlet var secondaryTextLabel: UILabel!
}

Back in Main.storyboard, use the Attributes and Identity inspectors to set the habit cell's reuse identifier to Habit1 and its custom class to PrimarySecondaryTextCollectionViewCell. Connect the cell's label to the primaryTextLabel outlet.2

Label setup in the habits view controller collection view cell

Now open HabitCollectionViewController.swift—you're ready to build your first bit of working UI.

Create a Model and View Model

In this project, you'll follow a common pattern for managing the data you receive from the server—the source of truth—separately from the data your collection view will display. By separating the model objects from the objects that you'll use to configure the collection view cells, you'll make your code easier to write and maintain. This might seem like an unnecessary step, but even in this simple view controller you'll see an immediate payoff. And for the home view controller, with its varied display data, this approach is essential. The pure approach of using models and view models is termed MVVM (Model-View-View Model); your implementation will be a bit of a hybrid between that and the MVC approach built into the UIKit framework.

Add the following code inside the declaration of HabitCollectionViewController.

typealias DataSourceType = UICollectionViewDiffableDataSource<ViewModel.Section, ViewModel.Item>

enum ViewModel {
    enum Section: Hashable, Equatable {
        case favorites
        case category(_ category: Category)
    }

    struct Item: Hashable, Equatable {
        let habit: Habit
        let isFavorite: Bool
    }
}

struct Model {
    var habitsByName = [String: Habit]()
}

var dataSource: DataSourceType!
var model = Model()

The ViewModel enum encapsulates everything your collection view needs to display its data. ViewModel has no cases—you're using it to create a namespace to enclose the two types of view model objects that will represent the section identifiers and item identifiers for the data source. This stylistic approach is optional; you could also have just declared Section and Item by themselves—or, to make the types more accurately reflect the kind of data they represent, you could have declared ViewModelSection and ViewModelItem types. Note that both are declared as Hashable because it's a generic type constraint for UICollectionViewDiffableDataSource.

The habit view controller will contain a Favorites section at the top, followed by one section for each category of habits. Each item will represent a habit. The isFavorite property is required to enable the data source to perform its automatic diffing between snapshots, which will animate a habit cell between the appropriate sections when the user toggles its favorite status. Because the Habit instances themselves don't contain that information, your view model approach allows you to handle this elegantly.

The Model struct isn't strictly necessary either, but it's useful as an explicit reference to the separation of the model from the view model. Its sole property is the dictionary of habits you receive from the API service. (In most of your view controllers—including this one, as it develops—the Model type will include multiple properties.)

The dataSource property is declared as you've done in prior lessons, as an implicitly unwrapped UICollectionViewDiffableDataSource instance. By typealiasing the data source type, you've made this declaration concise.

Finally, you have a model property to store the data model after it's fetched from the network. Notice that you don't have a viewModel property. You'll construct a new view model each time you receive an update from the API and use it to create a snapshot, so there's no need for you to maintain your own copy.

The compiler has some errors: Your ViewModel.Item and ViewModel.Section types don't conform to Hashable or Equatable, which is caused by Habit and Category not adopting these protocols. Add the following code to Habit.swift to add conformance. Note that the name is sufficient to distinguish habits, so there's no need to rely on any other properties to satisfy Hashable protocol requirements. (Also note that because Hashable inherits from Equatable, you get conformance to the latter without needing to explicitly spell it out in the extension declaration.)

extension Habit: Hashable {
    static func == (lhs: Habit, rhs: Habit) -> Bool {
        return lhs.name == rhs.name
    }

    func hash(into hasher: inout Hasher) {
        hasher.combine(name)
    }
}

Add the following code to Category.swift to eliminate the remainder of the errors.

extension Category: Hashable {
    static func == (lhs: Category, rhs: Category) -> Bool {
        return lhs.name == rhs.name
    }

    func hash(into hasher: inout Hasher) {
        hasher.combine(name)
    }
}

Delete Extraneous Code

Xcode adds template code to UICollectionViewController subclasses, but you don't need it when you use diffable data sources. In HabitCollectionViewController, delete all the code from viewDidLoad except the call to super, and then delete the rest of the code and comments in the class (except the code you just added).

Add Network Code

Add a new update method to get habit objects from the server and an empty declaration for a method to update the collection view once the API has returned data.

func update() {
    HabitRequest().send { result in
        switch result {
        case .success(let habits):
            self.model.habitsByName = habits
        case .failure:
            self.model.habitsByName = [:]
        }

        DispatchQueue.main.async {
            self.updateCollectionView()
        }
    }
}

func updateCollectionView() {
}

Notice how clean this method is! All your earlier work on network code now lets you concisely express data fetching in your view controller. When you receive a result from the API, you'll update the data model and then queue a collection view update on the main thread. (UI updates, remember, must always occur on the main thread.)

Configure the Snapshot

The updateCollectionView() method will be responsible for building a view model, using it to create a snapshot, and applying that snapshot to the diffable data source.

Before you dive into its implementation, there's one thing you'll have to address. You may have noticed that the API doesn't return the favorite status of Habit objects. A real-world service would probably store this information for each user and then vend the appropriate status when queried. But that requires the service to support user registration along with user login and sessions. You're only running a simulated social network, so there'll only be one real user—the other users don't need to flag favorite habits or follow users. So you'll store favorite and followed status locally using UserDefaults.

Create a new Swift file named "Settings.swift" and add the following code declaring a Settings struct that provides a shared instance similar to URLSession.shared.

struct Settings {
    static var shared = Settings()

    private let defaults = UserDefaults.standard
}

Before you add a way to access favorite habits, you'll add generic methods to archive and unarchive JSON from UserDefaults. You can assume that JSON encoding and decoding will work, so you can disable error propagation by using try!. Using that variant of the try keyword will cause a runtime error if the call to encode(_:) or decode(_:from:) throws an error, so there's no need to wrap your code in a do/catch block.

private func archiveJSON<T: Encodable>(value: T, key: String) {
    let data = try! JSONEncoder().encode(value)
    let string = String(data: data, encoding: .utf8)
    defaults.set(string, forKey: key)
}

private func unarchiveJSON<T: Decodable>(key: String) -> T? {
    guard let string = defaults.string(forKey: key),
        let data = string.data(using: .utf8) else {
            return nil
    }
    return try! JSONDecoder().decode(T.self, from: data)
}

With that setup done, you can add a computed property for favorite habits.

var favoriteHabits: [Habit] {
    get {
        return unarchiveJSON(key: "favoriteHabits") ?? []
    }
    set {
        archiveJSON(value: newValue, key: "favoriteHabits")
    }
}

You'll notice the string "favoriteHabits" is used twice. It's generally a good practice to use constants whenever a value is used more than once. Once again, you'll use an enum namespace to store the key string. This way, when additional keys are added later, they'll be nicely grouped and contained. As a bonus, it also makes the code more readable. Add the following:

enum Setting {
    static let favoriteHabits = "favoriteHabits"
}

And then change the instances of the "favoriteHabits" string to Setting.favoriteHabits.

Back in HabitCollectionViewController.swift, update your Model declaration to add a computed property for favorite habits to encapsulate the call to Settings.

struct Model {
    var habitsByName = [String: Habit]()
    var favoriteHabits: [Habit] {
        return Settings.shared.favoriteHabits
    }
}

Go back to the updateCollectionView() method of HabitCollectionViewController—you're ready to build and apply a snapshot.

First, you'll build a dictionary that maps each section to its associated array of items using a call to reduce(into:_:). In the closure, you'll create the appropriate item and add it to the dictionary.

let itemsBySection = model.habitsByName.values.reduce(into: [ViewModel.Section: [ViewModel.Item]]()) { partial, habit in
    let section: ViewModel.Section
    let item: ViewModel.Item

    if model.favoriteHabits.contains(habit) {
        section = .favorites
        item = ViewModel.Item(habit: habit, isFavorite: true)
    } else {
        section = .category(habit.category)
        item = ViewModel.Item(habit: habit, isFavorite: false)
    }

    partial[section, default: []].append(item)
}

Next, create an array of section IDs for all the categories, sorted by name. (Categories with no items—which would happen if the user adds all habits from a category to their favorites—have been automatically excluded from the dictionary above.)

let sectionIDs = itemsBySection.keys.sorted()

This line causes a compiler error, so you'll need to go up to the declaration of ViewModel.Section to make it adopt Comparable.

enum Section: Hashable, Equatable, Comparable {
    case favorites
    case category(_ category: Category)

    static func < (lhs: Section, rhs: Section) -> Bool {
        switch (lhs, rhs) {
        case (.category(let l), .category(let r)):
            return l.name < r.name
        case (.favorites, _):
            return true
        case (_, .favorites):
            return false
        }
    }
}

This switch statement uses a new form of pattern matching over a tuple: a comma-separated list of values. In each case, you address permutations of your left-hand and right-hand values. If they're both categories, you sort by name. If one or the other is .favorites, you ensure that it's sorted to the beginning.

Apply the Snapshot

Before you write the code to append your snapshot, think ahead. There are five more collection views to manage, so it'll be useful to have a generic way to build snapshots based on view models. Create a new Swift file named "UICollectionViewDiffableDataSource+ViewModel.swift" and add the following code (replacing import Foundation with UIKit) to declare two convenience methods for applying snapshots. Both methods work with an array of sections and a dictionary lookup associating sections with their corresponding arrays of items.

import UIKit

extension UICollectionViewDiffableDataSource {
    func applySnapshotUsing(sectionIDs: [SectionIdentifierType], itemsBySection: [SectionIdentifierType: [ItemIdentifierType]], sectionsRetainedIfEmpty: Set<SectionIdentifierType> = Set<SectionIdentifierType>()) {
        applySnapshotUsing(sectionIDs: sectionIDs, itemsBySection: itemsBySection, animatingDifferences: true, sectionsRetainedIfEmpty: sectionsRetainedIfEmpty)
    }

    func applySnapshotUsing(sectionIDs: [SectionIdentifierType], itemsBySection: [SectionIdentifierType: [ItemIdentifierType]], animatingDifferences: Bool, sectionsRetainedIfEmpty: Set<SectionIdentifierType> = Set<SectionIdentifierType>()) {
        var snapshot = NSDiffableDataSourceSnapshot<SectionIdentifierType, ItemIdentifierType>()

        for sectionID in sectionIDs {
            guard let sectionItems = itemsBySection[sectionID],
                sectionItems.count > 0 || sectionsRetainedIfEmpty.contains(sectionID) else { continue }

            snapshot.appendSections([sectionID])
            snapshot.appendItems(sectionItems, toSection: sectionID)
        }

        self.apply(snapshot, animatingDifferences: animatingDifferences)
    }
}

You'll be able to call the methods in this extension from all your view controllers, provided you construct an array of section identifiers and a dictionary mapping them to arrays of items. The additional parameters control whether to animate the updates and whether sections that have no items appear in the snapshot or are skipped (the default is to skip them).

Back in the updateCollectionView() method of HabitCollectionViewController, add the final line of code.

dataSource.applySnapshotUsing(sectionIDs: sectionIDs, itemsBySection: itemsBySection)

Congratulations! You've written all the code your view controller needs to manage its data and create snapshots. It's time to set up your collection view.

Set Up the Layout and Data Source

In HabitCollectionViewController, add a new method to create a UICollectionViewDiffableDataSource to feed data to the collection view. It'll dequeue and set up PrimarySecondaryTextCollectionViewCells according to the contents of the view model item from the snapshot.

func createDataSource() -> DataSourceType {
    let dataSource = DataSourceType(collectionView: collectionView) { (collectionView, indexPath, item) in
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Habit", for: indexPath) as! PrimarySecondaryTextCollectionViewCell

        cell.primaryTextLabel.text = item.habit.name

        return cell
    }

    return dataSource
}

Add another method to create a simple, list-style compositional layout.

func createLayout() -> UICollectionViewCompositionalLayout {
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(1))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)

    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .absolute(44))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitem: item, count: 1)

    let section = NSCollectionLayoutSection(group: group)
    section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10)

    return UICollectionViewCompositionalLayout(section: section)
}

In viewDidLoad(), add code to set up the collection view and fetch your data.

dataSource = createDataSource()
collectionView.dataSource = dataSource
collectionView.collectionViewLayout = createLayout()

Finally, override viewWillAppear(_:) and call update() so that this screen refreshes every time you visit it. (This won't be necessary now, but in the future users will toggle the favorite status of habits on different screens.)

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    update()
}

Make sure the server is running, then build and run your app. Switch to the Habits tab—et voilà! You should see a list of habits.

There's one more thing you should do to make the experience consistent. Right now, if you switch away from the Habits screen and come back, the order of the habits shuffles. You need to sort them in each section so that there's a consistent display. To do that, first make Habit adopt Comparable (in Habit.swift), which is a prerequisite for supporting the built-in collection sorting algorithms.

extension Habit: Comparable {
    static func < (lhs: Habit, rhs: Habit) -> Bool {
        return lhs.name < rhs.name
    }
}

Back in HabitCollectionViewController, adopt Comparable in ViewModel.Item.

struct Item: Hashable, Equatable, Comparable {
    let habit: Habit
    let isFavorite: Bool

    static func < (lhs: Item, rhs: Item) -> Bool {
        return lhs.habit < rhs.habit
    }
}

And, in updateCollectionView(), sort itemsBySection. You'll need to change its declaration from let to var, then add the following line of code.

itemsBySection = itemsBySection.mapValues { $0.sorted() }

mapValues(_:) is a handy method for dictionaries that applies the provided closure to each of the values in the dictionary. Try running the app again and make sure that the order of habits doesn't change each time you visit the page.

Add Headers

Category headers are the finishing touch for your habits screen. You've already done the work in your view model; you just need a bit more code to set them up.

Start by creating a new Cocoa Touch class file. Make it a UICollectionReusableView subclass named "NamedSectionHeaderView." Update the class with the following code that provides the required initializers and sets up the view with its one label subview and associated constraints.

class NamedSectionHeaderView: UICollectionReusableView {
    let nameLabel: UILabel = {
        let label = UILabel()
        label.textColor = .label
        label.font = UIFont.boldSystemFont(ofSize: 17)

        return label
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }

    private func setupView() {
        backgroundColor = .systemGray5

        addSubview(nameLabel)
        nameLabel.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            nameLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 12),
            nameLabel.centerYAnchor.constraint(equalTo: centerYAnchor)
        ])
    }
}

Back in HabitCollectionViewController.swift, find the createDataSource() method and add the following code to add a supplementary view provider to the data source. Note that you can use a snapshot to look up the correct section view model from the index path you're given.

dataSource.supplementaryViewProvider = { (collectionView, kind, indexPath) in
    let header = collectionView.dequeueReusableSupplementaryView(ofKind: "SectionHeader", withReuseIdentifier: "HeaderView", for: indexPath) as! NamedSectionHeaderView

    let section = dataSource.snapshot().sectionIdentifiers[indexPath.section]
    switch section {
    case .favorites:
        header.nameLabel.text = "Favorites"
    case .category(let category):
        header.nameLabel.text = category.name
    }

    return header
}

In createLayout(), add code to create the header and add it to the section. (The existing lines to create the section and set its content insets are included in the code segment below for context.)

let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .absolute(36))
let sectionHeader = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize, elementKind: "SectionHeader", alignment: .top)
sectionHeader.pinToVisibleBounds = true

let section = NSCollectionLayoutSection(group: group)
section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10)
section.boundarySupplementaryItems = [sectionHeader]

In viewDidLoad(), add the following line of code to register your new header class.

collectionView.register(NamedSectionHeaderView.self, forSupplementaryViewOfKind: "SectionHeader", withReuseIdentifier: "HeaderView")

Again, you'll notice that the "SectionHeader" and "HeaderView" strings are used in multiple places. Add the following at the top of the file, above the class definition:

private let sectionHeaderKind = "SectionHeader"
private let sectionHeaderIdentifier = "HeaderView"

Then replace the hardcoded strings throughout with the new constants.

Build and run your app again to see the headers in action. There's still one missing piece: You can't see the Favorites section of your habits view controller, because there's no way for users to manage their favorite habits yet.

Implement Favorite Habits

Before you add any UI code, add a convenience method to Settings to toggle the favorite status of a habit.

mutating func toggleFavorite(_ habit: Habit) {
    var favorites = favoriteHabits

    if favorites.contains(habit) {
        favorites = favorites.filter { $0 != habit }
    } else {
        favorites.append(habit)
    }

    favoriteHabits = favorites
}

To allow the user to easily toggle a habit's favorite status, you'll use a context menu that's activated with a long press. Go back to HabitCollectionViewController.swift. To provide a context menu from a collection view cell, declare the following delegate method.

override func collectionView(_ collectionView: UICollectionView, contextMenuConfigurationForItemAt indexPath: IndexPath, point: CGPoint) -> UIContextMenuConfiguration? {

}

The menu system in iOS is built on the UIMenu type. A menu can contain menu items that trigger actions along with submenus to create arbitrary hierarchies. UICollectionViewController handles a default long press behavior on its cells and will automatically display a context menu if you provide an implementation for the delegate method above.

To create a context menu configuration to return from your delegate method, you'll pass an action provider closure that sets up and returns a UIMenu instance to the UIContextMenuConfiguration initializer. To your empty delegate method, add the following code:

let config = UIContextMenuConfiguration(identifier: nil, previewProvider: nil) { _ in
    let item = self.dataSource.itemIdentifier(for: indexPath)!

    let favoriteToggle = UIAction(title: item.isFavorite ? "Unfavorite" : "Favorite") { (action) in
        Settings.shared.toggleFavorite(item.habit)
        self.updateCollectionView()
    }

    return UIMenu(title: "", image: nil, identifier: nil, options: [], children: [favoriteToggle])
}

return config

You don't need an identifier or preview for this context menu; all you'll do is provide the context menu itself. (Previews are used to provide additional context for the selected item, such as when long-pressing a link in Safari.) In the closure, you retrieve the appropriate view model and add a UIAction to the returned menu. The action is configured with another closure that executes when the user selects the menu item. In the action, you toggle the favorite status of the habit and update the collection view.

Try running your app and using the context menus to favorite and unfavorite habits. Long pressing should bring up the context menu as expected. (You might notice some output in your Xcode console about a constraints error. As long as your app runs as expected, you can ignore the error; it's a bug.)

Congratulations! You've built the first screen of your app. You'll find that the next screen you tackle—showing the list of users—will go a lot faster because of all the work you have done to enable generalized code.

Part Five: Displaying a Collection of Users

As you did for the habits screen, you'll set up the collection view cell in the People Scene's storyboard before you write your view controller code. Your prototype cell should already be square and 128 points on a side. Add a label from the Object library, using constraints to center it vertically and horizontally in the cell.1

Users view controller collection view cell setup

Set the cell's reuse identifier to User1 and its custom class to PrimarySecondaryTextCollectionViewCell. Connect the cell's label to the primaryTextLabel outlet.2

Create a Model and View Model

Create a new Swift File named User.swift and add the following code to define a user model. Since you know you'll need it to adopt Codable and Hashable, go ahead and add extensions to take care of that right now.

struct User {
    let id: String
    let name: String
    let color: Color?
    let bio: String?
}

extension User: Codable { }

extension User: Hashable {
    static func ==(_ lhs: User, _ rhs: User) -> Bool {
        return lhs.id == rhs.id
    }

    func hash(into hasher: inout Hasher) {
        hasher.combine(id)
    }
}

In Settings.swift, add a new key to the Setting namespace with the name and value of "followedUserIDs" and create a new property to store and retrieve the IDs of followed users. (You won't store the user objects themselves, since users might occasionally change things like their favorite color, which would invalidate this data.)

var followedUserIDs: [String] {
    get {
        return unarchiveJSON(key: Setting.followedUserIDs) ?? []
    }
    set {
        archiveJSON(value: newValue, key: Setting.followedUserIDs)
    }
}

Now go back to UserCollectionViewController.swift and delete all the extraneous template code, as you did for HabitCollectionViewController. To create a view model, add the following code inside the declaration of UserCollectionViewController. (Note that even though there's only one section in this collection view, you're still required to provide an argument for the SectionID generic type parameter. Any type will suffice to fulfill the requirement—Int is a reasonable choice. To maintain naming consistency, you'll make a Section typealias.) While you're there, typealias your data source type, create your model type, and add declarations for the data source and model properties.

typealias DataSourceType = UICollectionViewDiffableDataSource<ViewModel.Section, ViewModel.Item>

enum ViewModel {
    typealias Section = Int

    struct Item: Hashable {
        let user: User
        let isFollowed: Bool
    }
}

struct Model {
    var usersByID = [String:User]()
    var followedUsers: [User] {
        return Array(usersByID.filter { Settings.shared.followedUserIDs.contains($0.key) }.values)
    }
}

var dataSource: DataSourceType!
var model = Model()

Add Network and Snapshot Code

This time, fetching from the network and building a snapshot is, well, a snap. First, add a new API request type to APIService.swift to enable fetching users.

struct UserRequest: APIRequest {
    typealias Response = [String: User]

    var path: String { "/users" }
}

Because you'll want to be able to display the users sorted by name, extend User to adopt Comparable in User.swift.

extension User: Comparable {
    static func < (lhs: User, rhs: User) -> Bool {
        return lhs.name < rhs.name
    }
}

Now add a method to UserCollectionViewController to fetch users.

func update() {
    UserRequest().send { result in
        switch result {
        case .success(let users):
            self.model.usersByID = users
        case .failure:
            self.model.usersByID = [:]
        }

        DispatchQueue.main.async {
            self.updateCollectionView()
        }
    }
}

Finally, add an updateCollectionView() method. The implementation simply reduces the model's user dictionary into an array of view model instances, sets up a single section, and applies the snapshot.

func updateCollectionView() {
    let users = model.usersByID.values.sorted().reduce(into: [ViewModel.Item]()) { partial, user in
        partial.append(ViewModel.Item(user: user, isFollowed: model.followedUsers.contains(user)))
    }

    let itemsBySection = [0: users]

    dataSource.applySnapshotUsing(sectionIDs: [0], itemsBySection: itemsBySection)
}

Set Up the Layout and Data Source

The methods to set up the data source and compositional layout for the user collection view controller should also look familiar. Add a createDataSource() method to dequeue and configure a cell with a user's name.

func createDataSource() -> DataSourceType {
    let dataSource = DataSourceType(collectionView: collectionView) { (collectionView, indexPath, item) in
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "User", for: indexPath) as! PrimarySecondaryTextCollectionViewCell

        cell.primaryTextLabel.text = item.user.name

        return cell
    }

    return dataSource
}

The createLayout() method implements a grid-style interface with two columns of square cells. Feel free to experiment with the layout to find dimensions you prefer.

func createLayout() -> UICollectionViewCompositionalLayout {
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalHeight(1), heightDimension: .fractionalHeight(1))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)

    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalWidth(0.45))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitem: item, count: 2)
    group.interItemSpacing = .fixed(20)

    let section = NSCollectionLayoutSection(group: group)
    section.interGroupSpacing = 20
    section.contentInsets = NSDirectionalEdgeInsets(top: 20, leading: 20, bottom: 20, trailing: 20)

    return UICollectionViewCompositionalLayout(section: section)
}

In viewDidLoad(), set up your data source and layout and call update() to get the users from the API service.

override func viewDidLoad() {
    super.viewDidLoad()

    dataSource = createDataSource()
    collectionView.dataSource = dataSource
    collectionView.collectionViewLayout = createLayout()

    update()
}

Build and run your app and test out the users screen.

Part Six: Displaying Habit Details

The two screens you've built so far display static data: Users and habits don't change in this simulated social network. But when you select a habit from the Habits screen, the detail view will display live statistics, ranking the users who are logging it.

The two detail screens in this app are managed by plain old UIViewControllers so that you can provide a custom look, with details above the scrolling collection view. You'll start by setting that up in the storyboard.

Set Up the Habit Detail Scene

In Main.storyboard, go to the Habit Detail View Controller Scene. Drag three labels from the Object library to the top of the scene. Use the Attributes inspector to set them up according to the following table.

Text	Font	Alignment	Lines
Habit Name	Large Title	Left	1
Category	Subhead	Right	1
Info	Headline	Left	0

Arrange the Habit Name label to the left of the Category label, then select both and embed them in a horizontal stack view.

Habit name and category labels in a horizontal stack view

Position the Info label below, and embed it and the horizontal stack view in a vertical stack view.

Habit name and category label horizontal stack view and info label in a vertical stack view

In the Attributes inspector, set the following properties.

-	Alignment	Distribution	Spacing
Horizontal 1	First Baseline	Equal Spacing	12
Vertical 2	Fill	Fill	16

Now add constraints to pin the vertical stack view to its parent view's safe area with leading and trailing margins of 16 points, and a top margin of 20 points.1

Constraints for the vertical stack view in the habit detail view controller

Drag a collection view from the Object library to the scene and position it below the stack view. Add constraints to pin it to the leading, trailing, and bottom edges of the parent view's safe area with a margin of 0 points, and add a vertical spacing constraint of 20 points to the vertical stack view.1

Constraints for the collection view in the habit detail view controller

Open HabitDetailViewController.swift in the Assistant editor. Dragging from the storyboard, create outlets for your views:1

Habit Name label → nameLabel
Category label → categoryLabel
Info label → infoLabel
Collection view → collectionView

Outlets for the habit detail view controller

There's one last thing to do in the storyboard: Set up the collection view prototype cell. Resize the cell to be the width of the of the collection view and 44 points high. Add two labels to the cell, positioning one on either side. For the left-hand label, set its text to User Name and its font to Headline. Pin it 8 points from the leading edge of the cell and center it vertically. Set the text of the right-hand label to Count and its font to Body. Pin it 8 points from the trailing edge of the cell and align its first baseline to the left-hand label.1

Habit detail view controller collection view cell constraints

Set the cell's custom class to PrimarySecondaryTextCollectionViewCell and its reuse identifier to UserCount,1 then connect the User Name label to the primaryTextLabel outlet and the Count label to the secondaryTextLabel outlet.2

Set Up Static View Information

Switch to your HabitDetailViewController. Before you write the collection view-related code, add a property for the habit this view controller will handle and set up the top portion of your detail view by customizing the viewDidLoad() method.

var habit: Habit!

override func viewDidLoad() {
    super.viewDidLoad()

    nameLabel.text = habit.name
    categoryLabel.text = habit.category.name
    infoLabel.text = habit.info
}

You'll also need to create two custom initializers to enable a segue action from the habit collection view controller.

required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

init?(coder: NSCoder, habit: Habit) {
    self.habit = habit
    super.init(coder: coder)
}

Create a Model and View Model

With the storyboard set up, it's time to move on to creating the supporting model types for this view controller.

Create a new file named HabitStatistics.swift and declare the primary HabitStatistics model object that you'll receive from the API service.

struct HabitStatistics {
    let habit: Habit
    let userCounts: [UserCount]
}

extension HabitStatistics: Codable { }

You'll also need a UserCount.swift file for the embedded type.

struct UserCount {
    let user: User
    let count: Int
}

extension UserCount: Codable { }

extension UserCount: Hashable { }

In HabitDetailViewController.swift, typealias the data source type, declare your view model and model types, and declare properties for the model and data source. Also create a property for the habit instance you'll receive during the segue from the habit collection view controller.

typealias DataSourceType = UICollectionViewDiffableDataSource<ViewModel.Section, ViewModel.Item>

enum ViewModel {
    enum Section: Hashable {
        case leaders(count: Int)
        case remaining
    }

    enum Item: Hashable, Comparable {
        case single(_ stat: UserCount)
        case multiple(_ stats: [UserCount])

        static func < (lhs: HabitDetailViewController.ViewModel.Item, rhs: HabitDetailViewController.ViewModel.Item) -> Bool {
            switch (lhs, rhs) {
            case (.single(let lCount), .single(let rCount)):
                return lCount.count < rCount.count
            case (.multiple(let lCounts), .multiple(let rCounts)):
                return lCounts.first!.count < rCounts.first!.count
            case (.single, .multiple):
                return false
            case (.multiple, .single):
                return true
            }
        }
    }
}

struct Model {
    var habitStatistics: HabitStatistics?
    var userCounts: [UserCount] {
        habitStatistics?.userCounts ?? []
    }
}

var dataSource: DataSourceType!
var model = Model()

The Item view model type can represent a single user count or a collection of users. For now, you'll use it for a single user; later in the project, you'll use it to aggregate users who have the same number of log entries for the habit.

Add Network and Snapshot Code

Add a new declaration to APIService.swift for fetching habit statistics. Because you can ask for statistics for multiple habit names in one request, you'll provide a comma-separated list of IDs from the queryItems property.

struct HabitStatisticsRequest: APIRequest {
    typealias Response = [HabitStatistics]

    var habitNames: [String]?

    var path: String { "/habitStats" }

    var queryItems: [URLQueryItem]? {
        if let habitNames = habitNames {
            return [URLQueryItem(name: "names", value: habitNames.joined(separator: ","))]
        } else {
            return nil
        }
    }
}

In HabitDetailViewController, add your data-fetching code. You'll mostly use the pattern you've established with previous view controllers, but the completion closure is slightly more complicated: You'll have to unwrap the single result from the array of statistics returned from the API.

func update() {
    HabitStatisticsRequest(habitNames: [habit.name]).send { result in
        if case .success(let statistics) = result, statistics.count > 0 {
            self.model.habitStatistics = statistics[0]
        } else {
            self.model.habitStatistics = nil
        }

        DispatchQueue.main.async {
            self.updateCollectionView()
        }
    }
}

The if case syntax bears a little explanation. It's a helpful trick to avoid a more verbose switch statement when you're interested in one particular condition—in this case, a successful result with an array of at least one item. To understand the syntax, it may help to look at the equivalent code using switch:

switch result {
case .success(let statistics):
    if statistics.count > 0 {
        self.model.habitStatistics = statistics[0]
    } else {
        self.model.habitStatistics = nil
    }
default:
    self.model.habitStatistics = nil
}

Notice that both approaches use the case .success(let statistics) pattern to bind the statistics constant to the associated value in the case. In the first approach, you're assigning result directly to the pattern, and in the other you switch over the result.

Add an updateCollectionView() method to set up your view model and apply a snapshot.

func updateCollectionView() {
    let items = (self.model.habitStatistics?.userCounts.map { ViewModel.Item.single($0) } ?? []).sorted(by: >)

    dataSource.applySnapshotUsing(sectionIDs: [.remaining], itemsBySection: [.remaining: items])
}

Set Up the Layout and Data Source

Now add a createDataSource() method to configure your cells with user count information.

func createDataSource() -> DataSourceType {
    return DataSourceType(collectionView: collectionView) { (collectionView, indexPath, grouping) -> UICollectionViewCell? in
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "UserCount", for: indexPath) as! PrimarySecondaryTextCollectionViewCell

        switch grouping {
        case .single(let userStat):
            cell.primaryTextLabel.text = userStat.user.name
            cell.secondaryTextLabel.text = "\(userStat.count)"
        default:
            break
        }

        return cell
    }
}

And a createLayout() method for the compositional layout.

func createLayout() -> UICollectionViewCompositionalLayout {
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(1))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    item.contentInsets = NSDirectionalEdgeInsets(top: 12, leading: 12, bottom: 12, trailing: 12)

    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .absolute(44))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitem: item, count: 1)

    let section = NSCollectionLayoutSection(group: group)
    section.contentInsets = NSDirectionalEdgeInsets(top: 20, leading: 0, bottom: 20, trailing: 0)

    return UICollectionViewCompositionalLayout(section: section)
}

In viewDidLoad(), set up your data source and collection view and call the update() method to populate your data source.

dataSource = createDataSource()
collectionView.dataSource = dataSource
collectionView.collectionViewLayout = createLayout()

update()

You're almost done! The only remaining task is to present a detail view for a habit when the user taps it in the habit collection view.

Segue to the Habit Detail Screen

To set up the segue from the habit collection view controller, open Main.storyboard and select the Habits Scene, then open HabitCollectionViewController in the Assistant editor. Control-drag from the segue arrow between the habit collection view and the habit detail view to your code on the right.1 Create a new Segue Action named showHabitDetail with a HabitDetailViewController type and a sender argument.

Creating the segue action from the habit collection view controller to the habit detail view controller

Customize the resulting method as follows.

@IBSegueAction func showHabitDetail(_ coder: NSCoder, sender: UICollectionViewCell?) -> HabitDetailViewController? {
    guard let cell = sender,
        let indexPath = collectionView.indexPath(for: cell),
        let item = dataSource.itemIdentifier(for: indexPath) else {
        return nil
    }

    return HabitDetailViewController(coder: coder, habit: item.habit)
}

Make sure the simulation is running so that you have data to show, then build and run your app to test out the habit detail screen.

Perform Periodic Updates

This is the first screen in the app that displays dynamic information. As the simulated users continue to log their habits, your habit detail screen should reflect those changes. A simple technique is to poll the server at regular intervals using a timer. Create a new property for a timer in HabitDetailViewController.

var updateTimer: Timer?

Next, override the viewWillAppear(_:) and viewWillDisappear(_:) methods to start and stop the periodic updates. (There's no reason to continue to poll the server if the screen isn't visible.)

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    update()

    updateTimer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
        self.update()
    }
}

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)

    updateTimer?.invalidate()
    updateTimer = nil
}

You're done! The habit detail screen should update as new habits are logged, and the users will rearrange to reflect their changing rankings.

Part Seven: Displaying Person Details

The user detail screen is almost a mirror image of the habits detail screen, so you'll be tempted to copy and paste code from the habit detail view controller. Don't do it! For two reasons: First, you'll be cheating yourself out of the opportunity to practice and reinforce what you've learned. Second, you might think copying and pasting would save time, but you'll likely end up wasting time fixing any compiler errors or bugs you cause by not changing the names of variables or types.

Set Up the Person Detail Scene

In Main.storyboard, go to the User Detail View Controller Scene. Drag two labels and an image view from the Object library to the top of the scene. In the Attributes inspector, set the image of the image view to person.fill as a placeholder and set the tint to System Gray 6. Then set up the labels according to the following table.

Text	Font	Alignment	Lines
User Name	Large Title	Left	0
Bio	Subhead	Left	0

Arrange the image view to the left of the User Name label, then embed them in a horizontal stack view.

User name and bio labels in a horizontal stack view

Position the Bio label below, and embed it and the horizontal stack view in a vertical stack view.

Habit name and category horizontal stack view and info label in a vertical stack view

In the Attributes inspector, set the following properties:

-	Alignment	Distribution	Spacing
Horizontal 1	Center	Fill	20
Vertical 2	Fill	Fill	20

Now add constraints to pin the vertical stack view to its parent view's safe area with leading and trailing margins of 16 points and a top margin of 20 points.1

To fix the size of the image view, Control-drag from the image view to itself and add a self aspect ratio constraint of 1:1.2 Control-drag from the image view to the root view of the view controller and add an Equal Width constraint with a multiplier of 0.3.3

Top content of user detail view controller with constraints

Constraints for the collection view in the user detail view controller

Open UserDetailViewController.swift in the Assistant editor. Dragging from the storyboard, create outlets for your views:1

Image view → profileImageView
User Name label → userNameLabel
Bio label → bioLabel
Collection view → collectionView

User detail view controller outlets

Your last step is to set up the collection view prototype cell. Resize the cell to be the width of the of the collection view and 44 points high. Add two labels to the cell, positioning one on either side. For the left-hand label, set its text to Habit Name and its font to Headline. Pin it 8 points from the leading edge of the cell and center it vertically. Set the text of the right-hand label to Count and its font to Body. Pin it 8 points from the trailing edge of the cell and align its first baseline to the left-hand label.

Set the cell's custom class to PrimarySecondaryTextCollectionViewCell and its reuse identifier to HabitCount,1 then connect the Habit Name label to the primaryTextLabel outlet and the Count label to the secondaryTextLabel outlet.2

User detail cell outlets

Set Up Static View Information

Switch to your UserDetailViewController. Before you write the collection view-related code, add a property for the user this view controller will handle and set up the top portion of your detail view by customizing the viewDidLoad() method.

var user: User!

override func viewDidLoad() {
    super.viewDidLoad()

    userNameLabel.text = user.name
    bioLabel.text = user.bio
}

You'll also need to create two custom initializers to enable a segue action from the habit collection view controller.

required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

init?(coder: NSCoder, user: User) {
    self.user = user
    super.init(coder: coder)
}

Create a Model and View Model

With the storyboard set up, it's time to move on to creating the supporting model types for this view controller.

Create a new file named "UserStatistics.swift" and declare the primary UserStatistics model object that you'll receive from the API service.

struct UserStatistics {
    let user: User
    let habitCounts: [HabitCount]
}

extension UserStatistics: Codable { }

You'll also need a HabitCount.swift file for the embedded type.

struct HabitCount {
    let habit: Habit
    let count: Int
}

extension HabitCount: Codable { }

extension HabitCount: Hashable { }

In UserDetailViewController.swift, typealias the data source type, declare your view model and model types, and declare properties for the model and data source. You'll display the habits that the user leads in a section at the top of the collection view, followed by sections for each category of the remaining habits. You'll use HabitCount as the view model type for items in the collection view, since the properties of HabitCount map directly to the data you need to display in your cells. Your model will contain both sets of statistics.

typealias DataSourceType = UICollectionViewDiffableDataSource<ViewModel.Section, ViewModel.Item>

enum ViewModel {
    enum Section: Hashable, Comparable {
        case leading
        case category(_ category: Category)

        static func < (lhs: Section, rhs: Section) -> Bool {
            switch (lhs, rhs) {
            case (.leading, .category), (.leading, .leading):
                return true
            case (.category, .leading):
                return false
            case (category(let category1), category(let category2)):
                return category1.name > category2.name
            }
        }
    }

    typealias Item = HabitCount
}

struct Model {
    var userStats: UserStatistics?
    var leadingStats: UserStatistics?
}

var dataSource: DataSourceType!
var model = Model()

Add Network and Snapshot Code

As you may have guessed, based on the model, you'll query the API for all the user's habit counts as well as those the user leads. To enable both queries, add the following declarations to APIService.swift.

struct UserStatisticsRequest: APIRequest {
    typealias Response = [UserStatistics]

    var userIDs: [String]?

    var path: String { "/userStats" }

    var queryItems: [URLQueryItem]? {
        if let userIDs = userIDs {
            return [URLQueryItem(name: "ids", value: userIDs.joined(separator: ","))]
        } else {
            return nil
        }
    }
}

struct HabitLeadStatisticsRequest: APIRequest {
    typealias Response = UserStatistics

    var userID: String

    var path: String { "/userLeadingStats/\(userID)" }
}

In UserDetailViewController, add your data-fetching code. This time, you'll be issuing two requests independently. Each time you get a result back, you'll update your collection view.

func update() {
    UserStatisticsRequest(userIDs: [user.id]).send { result in
        switch result {
        case .success(let userStats):
            self.model.userStats = userStats[0]
        case .failure:
            self.model.userStats = nil
        }

        DispatchQueue.main.async {
            self.updateCollectionView()
        }
    }

    HabitLeadStatisticsRequest(userID: user.id).send { result in
        switch result {
        case .success(let userStats):
            self.model.leadingStats = userStats
        case .failure:
            self.model.leadingStats = nil
        }

        DispatchQueue.main.async {
            self.updateCollectionView()
        }
    }
}

You'll want a consistent sort order for the habit statistics in the snapshot, so before you create your snapshot code, extend HabitCount to adopt Comparable.

extension HabitCount: Comparable {
    static func < (lhs: HabitCount, rhs: HabitCount) -> Bool {
        return lhs.habit < rhs.habit
    }
}

Back in UserDetailViewController.swift, add an updateCollectionView() method to set up your view model and apply a snapshot.

func updateCollectionView() {
    guard let userStatistics = model.userStats,
        let leadingStatistics = model.leadingStats else { return }

    var itemsBySection = userStatistics.habitCounts.reduce(into: [ViewModel.Section: [ViewModel.Item]]()) { partial, habitCount in
        let section: ViewModel.Section

        if leadingStatistics.habitCounts.contains(habitCount) {
            section = .leading
        } else {
            section = .category(habitCount.habit.category)
        }

        partial[section, default: []].append(habitCount)
    }

    itemsBySection = itemsBySection.mapValues { $0.sorted() }

    let sectionIDs = itemsBySection.keys.sorted()

    dataSource.applySnapshotUsing(sectionIDs: sectionIDs, itemsBySection: itemsBySection)
}

Set Up the Layout and Data Source

Before you create your data source, you'll need to register a header view in viewDidLoad().

collectionView.register(NamedSectionHeaderView.self, forSupplementaryViewOfKind: "SectionHeader", withReuseIdentifier: "HeaderView")

Now add a createDataSource() method to configure your cells with habit log count information and to configure section headers.

func createDataSource() -> DataSourceType {
    let dataSource = DataSourceType(collectionView: collectionView) { (collectionView, indexPath, habitStat) -> UICollectionViewCell? in
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "HabitCount", for: indexPath) as! PrimarySecondaryTextCollectionViewCell

        cell.primaryTextLabel.text = habitStat.habit.name
        cell.secondaryTextLabel.text = "\(habitStat.count)"

        return cell
    }

    dataSource.supplementaryViewProvider = { (collectionView, category, indexPath) in
        let header = collectionView.dequeueReusableSupplementaryView(ofKind: "SectionHeader", withReuseIdentifier: "HeaderView", for: indexPath) as! NamedSectionHeaderView

        let section = dataSource.snapshot().sectionIdentifiers[indexPath.section]

        switch section {
        case .leading:
            header.nameLabel.text = "Leading"
        case .category(let category):
            header.nameLabel.text = category.name
        }

        return header
    }

    return dataSource
}

As before, you now have strings used in more than one place. Add two constant definitions above the class definition—one for the header reuse identifier and one for the header kind.

private let headerIdentifier = "HeaderView"
private let headerKind = "SectionHeader"

Change the strings in viewDidLoad() and createDataSource() to use the new constants.

Add a createLayout() method for the compositional layout.

func createLayout() -> UICollectionViewCompositionalLayout {
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(1))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    item.contentInsets = NSDirectionalEdgeInsets(top: 12, leading: 12, bottom: 12, trailing: 12)

    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .absolute(44))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitem: item, count: 1)

    let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .absolute(36))
    let sectionHeader = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize, elementKind: "header", alignment: .top)
    sectionHeader.pinToVisibleBounds = true

    let section = NSCollectionLayoutSection(group: group)
    section.contentInsets = NSDirectionalEdgeInsets(top: 20, leading: 0, bottom: 20, trailing: 0)
    section.boundarySupplementaryItems = [sectionHeader]

    return UICollectionViewCompositionalLayout(section: section)
}

And, in viewDidLoad(), set up your data source and collection view and call the update() method to populate your data source.

dataSource = createDataSource()
collectionView.dataSource = dataSource
collectionView.collectionViewLayout = createLayout()

update()

Segue to the Person Detail Screen

To set up the segue from the user collection view controller, open Main.storyboard and select the Person Detail Scene, then open UserCollectionViewController in the Assistant editor. Control-drag from the segue arrow between the user collection view and the user detail view to your code on the right. Create a new Segue Action named showUserDetail with a UserDetailViewController type and a sender argument.1

Creating the segue action from the user collection view controller to the user detail view controller

Customize the resulting method as follows.

@IBSegueAction func showUserDetail(_ coder: NSCoder, sender: UICollectionViewCell?) -> UserDetailViewController? {
    guard let cell = sender,
        let indexPath = collectionView.indexPath(for: cell),
        let item = dataSource.itemIdentifier(for: indexPath) else {
        return nil
    }

    return UserDetailViewController(coder: coder, user: item.user)
}

Now build and run your app and test out the user detail screen.

Perform Periodic Updates

You'll set up timed API polling for this detail screen as well. Create a new property for a timer in UserDetailViewController.

var updateTimer: Timer?

Next, override the viewWillAppear(_:) and viewWillDisappear(_:) methods to start and stop the periodic updates. As before, there's no reason to continue to poll the server if the screen isn't visible.

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    update()

    updateTimer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
        self.update()
    }
}

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)

    updateTimer?.invalidate()
    updateTimer = nil
}

Now the user detail screen should update as the user logs new habits.