I am building an app that will store multiple Nintendo consoles and their details (kinda like Mactracker but for Nintendo stuff).

I wanna store certain consoles in categories on the main menu but I'm not sure how I could do it (I'm pretty new to swiftui so sorry if that's a stupid question).

I already have categories set on MainMenu based on the category I've put in my consoles array. But I can't get the console menu (where all the consoles are) to store the consoles only of the category I tap on.

My consoles array has multiple consoles but I've put just one to save space.

Main Menu:

import SwiftUI

struct MainMenu: View {
    var con: [ConsoleDetails] = ConsoleList.consoles
    var body: some View {
        NavigationView{
            List(ConsoleList.categories.sorted(by: {$0.key > $1.key}), id:\.key){con in
                NavigationLink(destination: ConsoleMenu(), label:{
                    Image(systemName: "folder.fill")
                    
                        .scaledToFit()
                        .frame(height: 30)
                        .cornerRadius(4)
                        .padding(.vertical, 4)
                    VStack{
                        Text(con.key)
                            .fontWeight(.semibold)
                        
                    }
                }).navigationTitle("app.name")
                
            }
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        MainMenu()
    }
}

ConsoleMenu:

import SwiftUI

struct ConsoleMenu: View {
    var con: [ConsoleDetails] = ConsoleList.consoles
    var body: some View {
        NavigationView{
            List(con, id:\.id){ cons in
                NavigationLink(destination: ConsoleDetailView(con: cons), label:{
                    Image(cons.imgName)
                        .resizable()
                        .scaledToFit()
                        .frame(height: 50)
                        .cornerRadius(4)
                        .padding(.vertical, 4)
                    VStack{
                        Text(cons.consoleName)
                            .fontWeight(.semibold)
                    }
                }).navigationTitle("\(cons.category)")
            }
        }
    }
}

struct ConsoleSection_Previews: PreviewProvider {
    static var previews: some View {
        ConsoleMenu()
            .preferredColorScheme(.dark)
    }
}

Consoles:

import Foundation
struct ConsoleDetails: Identifiable{
    let id = UUID()
    var imgName: String = ""
    var consoleName: String = ""
    var description: String = ""
    var initialPrice: Double = 0.0
    var ReleaseDate: String = ""
    var Discontinuation: Int = 0
    var category: String = ""
}

struct ConsoleList{
    
    static let categories = Dictionary(grouping: consoles, by: {$0.category } )
    
    static let consoles = [
        
        ConsoleDetails(imgName: "FAMICOM",
                       consoleName: "Famicom",
                       description: "It was released in 1983 in Japan and due to it success it gave birth to the NES",
                       initialPrice: 179,
                       ReleaseDate: "Release Date: July 15, 1983",
                       Discontinuation: 2003,
                       category: "Home Consoles"),
//there's more consoles but I just put one to save space on here

CodePudding user response：

Few modifications:

In main view use only categories and pass only useful consoles to console menu :

struct MainMenu: View {
    // Use categories ordered by reversed alphabetical order
    var categories = ConsoleList.categories.sorted(by: {$0.key > $1.key})
//    var con: [ConsoleDetails] = ConsoleList.consoles
    var body: some View {
        NavigationView{
            // Loop on categories
            List(categories, id:\.key){category in
                NavigationLink(destination: ConsoleMenu(con: category.value), label:{
                    Image(systemName: "folder.fill")
                    
                        .scaledToFit()
                        .frame(height: 30)
                        .cornerRadius(4)
                        .padding(.vertical, 4)
                    VStack{
                        Text(category.key)
                            .fontWeight(.semibold)
                        
                    }
                }).navigationTitle("app.name")
                
            }
        }
    }
}

In Console menu use the consoles furnished by main menu

struct ConsoleMenu: View {
    // Consoles are given by caller
    var con: [ConsoleDetails] /* = ConsoleList.consoles */
    var body: some View {
        NavigationView{
            List(con, id:\.id){ cons in
                NavigationLink(destination: ConsoleDetailView(con: cons), label:{
                    Image(cons.imgName)
                        .resizable()
                        .scaledToFit()
                        .frame(height: 50)
                        .cornerRadius(4)
                        .padding(.vertical, 4)
                    VStack{
                        Text(cons.consoleName)
                            .fontWeight(.semibold)
                    }
                }).navigationTitle("\(cons.category)")
            }
        }
    }
}