1- import { component$ , useSignal } from "@builder.io/qwik" ;
1+ import { component$ , useSignal , useTask$ } from "@builder.io/qwik" ;
22import { routeLoader$ } from "@builder.io/qwik-city" ;
3- import { MapPinIcon as MapPin } from "lucide-qwik" ; // Keep MapPin for the modal button
43
54import { MapWrapper as Leaflet } from "@/components/leaflet-map" ;
65import { getEvents } from "~/api/EndPoint" ;
@@ -39,82 +38,92 @@ export const usePlaces = routeLoader$(async (event) => {
3938 return { data : data . data , success : data . success } ;
4039} ) ;
4140
41+
4242export default component$ ( ( ) => {
4343 const events = useEvents ( ) ;
4444 const places = usePlaces ( ) ;
4545 const showMap = useSignal ( false ) ;
46- const combinedMapData = useSignal < unknown > ( ) ;
47- // --- Data Transformation (Remains the same) ---
48- const placesDataForMap =
49- places . value . data ?. map ( ( place ) => ( {
50- id : place . Places ?. PlaceID ,
51- name : place . Places ?. Name ,
52- image : ( place . Places ?. ImageURL as string ) || "/placeholder.svg" ,
53- badge : "Place" ,
54- location : place . Places ?. Address ,
55- description : place . Places ?. Description ,
56- tags : [ "Quiet" , "WiFi" , "Coffee" ] , // Example tags, ideally fetch from DB
57- creator : place . Users ?. Username , // Placeholder
58- rating : 4.8 , // Placeholder, fetch actual rating if available
59- coords : [ place . Places ?. Lat , place . Places ?. Lng ] as [ number , number ] ,
60- } ) ) || [ ] ;
61-
62- // Add events to the map data as well
63- const eventsDataForMap =
64- events . value . data ?. map ( ( event ) => ( {
65- id : event . eventID ,
66- name : event . name ,
67- image : event . image || "/placeholder.svg" ,
68- badge : "Event" ,
69- location : event . place ?. Places ?. Name || "Location TBD" ,
70- description : event . description ,
71- tags : [ "Study" , "Meetup" ] ,
72- creator : event . creator || "Anonymous" ,
73- rating : 4.7 , // Placeholder for events
74- coords : [
75- event . place ?. Places ?. Lat ?? 0 ,
76- event . place ?. Places ?. Lng ?? 0 ,
77- ] as [ number , number ] ,
78- } ) ) || [ ] ;
79- combinedMapData . value = [ ...placesDataForMap , ...eventsDataForMap ] ;
80-
81- const eventsDataForCards =
82- events . value . data ?. map ( ( event ) => ( {
83- id : event . eventID ,
84- title : event . name ,
85- image : event . image || "/placeholder.svg" ,
86- badge : "Event" , // Or derive from event type/tags
87- type : "Study Group" , // Or derive from event type
88- date : event . date ,
89- time : event . date ,
90- location : event . location || "Location TBD" ,
91- creator : event . creator || "Anonymous" ,
92- attendees : event . attendees ?? 8 , // Fetch real attendee count if available
93- spotsLeft : 5 , // Fetch real spots left if available
94- } ) ) || [ ] ;
95-
96- const placesApiDataForCards =
97- places . value . data ?. map ( ( place ) => {
98- return {
46+ const combinedMapData = useSignal ( [ ] ) ;
47+ const eventsDataForCards = useSignal < any [ ] > ( [ ] ) ;
48+ const placesApiDataForCards = useSignal < any [ ] > ( [ ] ) ;
49+
50+ useTask$ ( ( { track } ) => {
51+ track ( ( ) => places . value . data ) ;
52+ track ( ( ) => events . value . data ) ;
53+
54+ const placesDataForMap =
55+ places . value . data ?. map ( ( place ) => ( {
9956 id : place . Places ?. PlaceID ,
10057 name : place . Places ?. Name ,
101- image : place . Places ?. ImageURL as string ,
102- badge : "Popular" , // Or derive dynamically
58+ image : ( place . Places ?. ImageURL as string ) || "/placeholder.svg" ,
59+ badge : "Place" ,
10360 location : place . Places ?. Address ,
10461 description : place . Places ?. Description ,
105- tags : [ "Quiet" , "WiFi" , "Coffee" ] , // Fetch real tags if available
62+ tags : [ "Quiet" , "WiFi" , "Coffee" ] , // Example tags, ideally fetch from DB
10663 creator : place . Users ?. Username , // Placeholder
107- rating : 4.8 , // Fetch real rating if available
108- coords : [ place . Places ?. Lat , place . Places ?. Lng ] as [ number , number ] , // Keep coords if needed by card, though maybe not displayed
109- } ;
110- } ) || [ ] ;
64+ rating : 4.8 , // Placeholder, fetch actual rating if available
65+ coords : [ place . Places ?. Lat , place . Places ?. Lng ] as [ number , number ] ,
66+ } ) ) || [ ] ;
67+
68+ // Add events to the map data as well
69+ const eventsDataForMap =
70+ events . value . data ?. map ( ( event ) => ( {
71+ id : event . eventID ,
72+ name : event . name ,
73+ image : event . image || "/placeholder.svg" ,
74+ badge : "Event" ,
75+ location : event . place ?. Places ?. Name || "Location TBD" ,
76+ description : event . description ,
77+ tags : [ "Study" , "Meetup" ] ,
78+ creator : event . creator || "Anonymous" ,
79+ rating : 4.7 , // Placeholder for events
80+ coords : [
81+ event . place ?. Places ?. Lat ?? 0 ,
82+ event . place ?. Places ?. Lng ?? 0 ,
83+ ] as [ number , number ] ,
84+ } ) ) || [ ] ;
85+ // @ts -ignore
86+ combinedMapData . value = [ ...placesDataForMap , ...eventsDataForMap ] ;
87+
88+ eventsDataForCards . value =
89+ events . value . data ?. map ( ( event ) => ( {
90+ id : event . eventID ,
91+ title : event . name ,
92+ image : event . image || "/placeholder.svg" ,
93+ badge : "Event" , // Or derive from event type/tags
94+ type : "Study Group" , // Or derive from event type
95+ date : event . date ,
96+ time : event . date ,
97+ location : event . location || "Location TBD" ,
98+ creator : event . creator || "Anonymous" ,
99+ attendees : event . attendees ?? 8 , // Fetch real attendee count if available
100+ spotsLeft : 5 , // Fetch real spots left if available
101+ } ) ) || [ ] ;
102+
103+ placesApiDataForCards . value =
104+ places . value . data ?. map ( ( place ) => {
105+ return {
106+ id : place . Places ?. PlaceID ,
107+ name : place . Places ?. Name ,
108+ image : place . Places ?. ImageURL as string ,
109+ badge : "Popular" , // Or derive dynamically
110+ location : place . Places ?. Address ,
111+ description : place . Places ?. Description ,
112+ tags : [ "Quiet" , "WiFi" , "Coffee" ] , // Fetch real tags if available
113+ creator : place . Users ?. Username , // Placeholder
114+ rating : 4.8 , // Fetch real rating if available
115+ coords : [ place . Places ?. Lat , place . Places ?. Lng ] as [ number , number ] , // Keep coords if needed by card, though maybe not displayed
116+ } ;
117+ } ) || [ ] ;
118+ } ) ;
119+
111120 return (
112121 < div class = "min-h-screen bg-[#FFF8F0]" >
113122 < HeroSection />
114123
115124 < TabsSection
116- placesApiData = { placesApiDataForCards }
117- eventsData = { eventsDataForCards }
125+ placesApiData = { placesApiDataForCards . value }
126+ eventsData = { eventsDataForCards . value }
118127 />
119128
120129 < CommunitySection />
@@ -150,7 +159,7 @@ export default component$(() => {
150159 < div class = "h-[calc(90vh-6rem)] w-full overflow-hidden rounded-md border border-[#E6D7C3]" >
151160 < Leaflet
152161 // Pass combined places and events data for markers
153- places = { combinedMapData as any }
162+ places = { combinedMapData . value as any }
154163 // TODO: Get user's actual location or a default center
155164 location = { [ 51.505 , - 0.09 ] as any } // Default location
156165 />
@@ -166,9 +175,9 @@ export default component$(() => {
166175 onClick$ = { ( ) => ( showMap . value = true ) }
167176 class = "fixed bottom-24 right-6 z-40 inline-flex h-12 items-center justify-center rounded-full bg-[#D98E73] px-5 py-2 text-sm font-medium text-white shadow-lg ring-offset-background transition-colors hover:bg-[#C27B62] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
168177 >
169- < MapPin class = "mr-2 h-5 w-5" />
170178 View Map
171179 </ button >
180+
172181 </ div >
173182 ) ;
174183} ) ;
0 commit comments