UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

Day 42 Moonshot. Task #2

Forums > 100 Days of SwiftUI

Hi,

I'm puzzled by task two. I don't recall any of the tutorials in project 8 covering the process of moving individual code chunks to a different view. When I looked it up, I found this video: Link but I'm somewhat hesitant to use a method different from the ones Paul teaches. Can you guide me to the tutorial in project 8 where Paul discuss moving code to other views?

Thanks!

3      

Im really confused how to connect these two swift views.

In this new CrewScrollView.swift i only have this :) I have no idea how to connect this file to MissionView.swift

import SwiftUI

struct CrewScrollView: View {

    let crew:

    var body: some View {
      ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                ForEach(crew, id: \.role) { crewMember in
                    NavigationLink {
                        AstronautView(astronaut: crewMember.astronaut)
                    } label: {
                        HStack {
                            Image(crewMember.astronaut.id)
                                .resizable()
                                .frame(width: 104, height: 72)
                                .clipShape(Circle())
                                .overlay(
                                    Circle()
                                        .strokeBorder(.white, lineWidth: 1)
                                )

                            VStack(alignment: .leading) {
                                Text(crewMember.astronaut.name)
                                    .foregroundStyle(Color.white)
                                    .font(.headline)
                                Text(crewMember.role)
                                    .foregroundStyle(Color.secondary)
                            }
                        }
                    }
                }
            }
        }
    }
}

#Preview {
    CrewScrollView()
}

3      

I just looked back at the lessons for project 8, and can't seem to find what you are looking for. I wonder if that section got deleted at some point, but the challenge questions were not re-written to account for that.

In this lesson, https://www.hackingwithswift.com/books/ios-swiftui/merging-codable-structs Paul basically walks you through how to add a ScrollView of astronauts in MissionView. But, when I did the project, it used to have another section after that where he talks about how cluttered the MissionView.swift file was getting, and how we could declutter it a bit by moving that ScrollView of Astronauts into its own file. That looks like what you've done above.

That way, we can basically take all of that code that we had previously written in MissionView.swift, move it to a separate file (CrewScrollView.swift) and replace all that code in MissionView.swift with one line of code. A call to the initializer for CrewScrollView.

CrewScrollView(mission: mission)

Because CrewScrollView conforms to View it can be created inside of an HStack or VStack just like any other view can, by simply calling its initializer.

Now, the MissionView.swift file is much easier to look at, and that's basically all this is trying to accomplish.


In the challenge, Paul wants you to do that same thing with the rectangle dividers that he had you create in the same lesson.

Rectangle()
    .frame(height: 2)
    .foregroundColor(.lightBackground)
    .padding(.vertical)

He asks you to add this to MissionView.swift in 2 different places. But that is taking up 8 lines of code. So, you could make this into a separate View to declutter MissionView.swift even further. Since these are being used as dividers, you could create a new file called RectangleDividerView.swift (or something like that) and then try to create your own view that creates the same thing as shown above. But then you can replace those 8 lines of code in MissionView.swift with just 2 lines of code instead.

3      

Hi! Thanks for the response. So, I didn't go crazy, and there wasn't any mention of how to move a piece of code to a new file earlier, right? 😄 I googled it, and I think the simplest way to do it is indeed by using structs but my problem was how to connect the code from CrewScrollView to MissionView. ChatGPT suggested that I needed to create let crew: [MissionView.CrewMember] at the beginning of the code, so I did it, and it works, but I had the feeling it was quite straightforward, and I should have known how to do it without asking ChatGPT :)

3      

Hi again @Fly0strich

Im trying third task and i got this code:

//
//  GridView.swift
//  Moonshot
//
//  Created by Filip Pokłosiewicz on 24/10/2023.
//

import SwiftUI

struct GridView: View {

    let missions: [Mission]
    let astronauts: [String: Astronaut]

    var body: some View {
        ScrollView {
            LazyVGrid (columns: columns ) {
                ForEach(missions) { mission in
                    NavigationLink {
                        MissionView(mission: mission, astronauts: astronauts)

                    } label: {
                        VStack {
                            Image(mission.image)
                                .resizable()
                                .scaledToFit()
                                .frame(width: 100, height: 100)
                                .padding()

                            VStack {
                                Text(mission.displayName)
                                    .font(.headline)
                                    .foregroundColor(.white)

                                Text(mission.formattedLaunchDate)
                                    .font(.caption)
                                    .foregroundColor(.white.opacity(0.5))
                            }
                            .padding(.vertical)
                            .frame(maxWidth: .infinity)
                            .background(.lightBackground)
                        }
                        .clipShape(RoundedRectangle(cornerRadius: 30))
                        .overlay(
                            (RoundedRectangle(cornerRadius: 30))
                                .stroke(.lightBackground)
                        )
                    }
                }
            }
        }
        .padding([.horizontal, .vertical])
    }
}

But i got error: "Cannot find 'columns' in scope" What am i doing wrong here? :)

3      

You are trying to use columns as a parameter for LazyVGrid(columns:) but columns has not been defined as a constant in your GridView struct.

This line of code is in my project, but I don't remember if it's something that Paul gave us to use. I assume so.

let columns = [GridItem(.adaptive(minimum: 150))]

3      

Hacking with Swift is sponsored by Essential Developer

SPONSORED Join a FREE crash course for mid/senior iOS devs who want to achieve an expert level of technical and practical skills – it’s the fast track to being a complete senior developer! Hurry up because it'll be available only until April 28th.

Click to save your free spot now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.