Location page displays city groups with all available concert locations

software/src/data/api/cityApi.ts

@@ -0,0 +1,7 @@
+import axios from "axios"
+
+const BASE_URL = "http://localhost:3000/cities"
+
+export async function getAllCities() {
+  return await axios.get(BASE_URL)
+}

software/src/data/models/cityModel.ts

@@ -1,5 +1,12 @@
 export class CityModel {
-  id: Number
-  name: String
-  country: String
+  id: number
+  name: string
+  country: string
+  image: string
+  locations: Array<{
+    id: number
+    name: string
+    address: string
+    image: string
+  }>
 }

software/src/data/models/filterModel.ts

@@ -1,4 +0,0 @@
-export class FilterModel {
-  icon: string
-  name: string
-}

software/src/data/models/genreModel.ts

@@ -1,4 +1,4 @@
 export class GenreModel {
-  id: Number
-  name: String
+  id: number
+  name: string
 }

software/src/data/models/locationModel.ts

@@ -1,9 +1,11 @@
-import { CityModel } from "./cityModel"
-
 export class LocationModel {
   id: number
   name: string
   address: string
-  city: CityModel
   image: string
+  city: {
+    id: number
+    name: string
+    country: string
+  }
 }

software/src/data/models/memberModel.ts

@@ -2,6 +2,6 @@ import { BandModel } from "./bandModel"
 
 export class MemberModel {
   id: Number
-  name: String
-  image: String
+  name: string
+  image: string
 }

software/src/data/models/showModel.ts

@@ -1,9 +1,9 @@
 import { LocationModel } from "./locationModel"
 
 export class ShowModel {
-  id: Number
-  inStock: Number
-  date: String
-  price: Number
+  id: number
+  inStock: number
+  date: string
+  price: number
   location: LocationModel
 }

software/src/data/stores/showStore.ts

@@ -7,12 +7,17 @@ import { getAllBands } from "../api/bandApi";
 import { BandModel } from "../models/bandModel";
 import { LocationModel } from "../models/locationModel";
 import { getAllLocations } from "../api/locationApi";
+import { getAllGenres } from "../api/genreApi";
+import { CityModel } from "../models/cityModel";
+import { getAllCities } from "../api/cityApi";
 
 export const useShowStore = defineStore("showStore", {
   state: () => ({
     tours: useLocalStorage<Array<TourModel>>("hackmycart/showStore/tours", []),
     bands: useLocalStorage<Array<BandModel>>("hackmycart/showStore/bands", []),
-    locations: useLocalStorage<Array<LocationModel>>("hackmycart/showStore/locations", [])
+    locations: useLocalStorage<Array<LocationModel>>("hackmycart/showStore/locations", []),
+    cities: useLocalStorage<Array<CityModel>>("hackmycart/showStore/cities", []),
+    genres: useLocalStorage<Array<GenreModel>>("hackmycart/showStore/genres", [])
   }),
   
   actions: {
@@ -31,6 +36,16 @@ export const useShowStore = defineStore("showStore", {
         .then(result => {
           this.locations = result.data
         })
+
+      await getAllGenres()
+        .then(result => {
+          this.genres = result.data
+        })
+
+      await getAllCities()
+        .then(result => {
+          this.cities = result.data
+        })
     }
   }
 })