Skip to content

Commit 69e9a9a

Browse files
lassejacolassejaco
committed
fix dialog issue
1 parent 23f0af3 commit 69e9a9a

2 files changed

Lines changed: 99 additions & 150 deletions

File tree

‎lib/components/event-schedule-new/event/event.tsx‎

Lines changed: 97 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -133,39 +133,8 @@ const Event: React.FC<EventProps> = ({
133133
const timeOfDay = computeEventTimeString(event);
134134

135135
return (
136-
<div
137-
style={{
138-
// height: event.spanRows ? `minmax(120px, 100%)` : "auto"
139-
height: event.spanRows ? `${event.spanRows * 60}px` : "100%",
140-
}}
141-
className={cn(
142-
`group cursor-pointer`,
143-
"flex flex-col gap-4 border border-solid border-neutral-300 p-2 px-2 h-full shrink-0 relative overflow-hidden hover:border-black transition-all duration-300",
144-
typeClass,
145-
eventClassName
146-
)}
147-
{...draggableLink1}
148-
onClick={(e) => {
149-
const result = draggableLink1.onClick(e);
150-
151-
if (!result) return;
152-
153-
if (event.onClick) {
154-
event.onClick();
155-
} else if (!selectedEvent) {
156-
console.log("setting selected event");
157-
setSelectedEvent(event);
158-
}
159-
}}
160-
>
161-
<Dialog
162-
open={selectedEvent?.id === event.id}
163-
// onOpenChange={(open) => {
164-
// if (!open) {
165-
// setSelectedEvent(null);
166-
// }
167-
// }}
168-
>
136+
<>
137+
<Dialog open={selectedEvent?.id === event.id}>
169138
<DialogContent
170139
className={cn(
171140
"max-w-[95vw] w-[475px] max-h-[90vh] overflow-y-auto text-black border-[4px] border-solid !bg-white z-[10000000] gap-0 flex flex-col shrink-0",
@@ -265,38 +234,6 @@ const Event: React.FC<EventProps> = ({
265234
)}
266235
</div>
267236

268-
{/* <div className="text-sm"> */}
269-
{/* {computeEventTimeString(event).map((timeblock, index) => (
270-
<div key={index}>{timeblock}</div>
271-
))} */}
272-
{/* {computeEventTimeString(event).map((timeblock, index) => (
273-
<div
274-
key={index}
275-
className="mb-2 border-b last:border-b-0 pb-2"
276-
>
277-
<div className="font-medium text-gray-700">
278-
{formatDate(timeblock.start)}
279-
</div>
280-
<div className="flex items-center gap-1 mt-0.5">
281-
<span>
282-
{formatTime(timeblock.start)} -{" "}
283-
{formatTime(timeblock.end)}
284-
</span>
285-
{timeblock.name && (
286-
<span className="text-gray-600">
287-
• {timeblock.name}
288-
</span>
289-
)}
290-
</div>
291-
{timeblock.location && (
292-
<div className="text-gray-500 text-xs mt-0.5">
293-
📍 {timeblock.location}
294-
</div>
295-
)}
296-
</div>
297-
))} */}
298-
{/* </div> */}
299-
300237
<div className="text-sm">{convert(event.description)}</div>
301238

302239
{event.eventLink !== "https://devconnect.org/calendar" && (
@@ -328,93 +265,109 @@ const Event: React.FC<EventProps> = ({
328265
</div>
329266
)}
330267
</div>
331-
332-
{/* <div className="text-sm">{event.organizer}</div> */}
333268
</div>
334269
</div>
335270
</DialogContent>
336271
</Dialog>
337272

338-
<div className="flex h-full z-10">
339-
{/* <div className="flex flex-col mr-2 items-center shrink-0">
340-
<div className="text-[10px]">{startTime}</div>
341-
<div className="min-h-[10px] grow border-solid border-l border-l-neutral-400 self-center my-1"></div>
342-
<div className="text-[10px]">{endTime}</div>
343-
</div> */}
344-
<div className="flex flex-col grow justify-between items-stretch">
345-
<div
346-
className={cn(
347-
"text-sm font-medium line-clamp-1 shrink-0 flex items-center gap-2"
348-
)}
349-
>
350-
{isCoworking && (
351-
<Image
352-
src={DevconnectCubeLogo}
353-
alt="Devconnect Cube"
354-
className="w-[26px] object-contain"
355-
/>
356-
)}
357-
{isETHDay && (
358-
<Image
359-
src={ethDayImage}
360-
alt="ETH Day"
361-
className="w-[26px] object-contain"
362-
/>
363-
)}
364-
<div className="flex flex-col w-full">
365-
{eventName}
366-
<div className="flex gap-4 justify-between w-full">
367-
{timeOfDay.map((time, index) => (
368-
<div key={index} className="text-xs text-gray-600">
369-
{time}
370-
</div>
371-
))}
273+
<div
274+
style={{
275+
// height: event.spanRows ? `minmax(120px, 100%)` : "auto"
276+
height: event.spanRows ? `${event.spanRows * 60}px` : "100%",
277+
}}
278+
className={cn(
279+
`group cursor-pointer`,
280+
"flex flex-col gap-4 border border-solid border-neutral-300 p-2 px-2 h-full shrink-0 relative overflow-hidden hover:border-black transition-all duration-300",
281+
typeClass,
282+
eventClassName
283+
)}
284+
{...draggableLink1}
285+
onClick={(e) => {
286+
const result = draggableLink1.onClick(e);
287+
288+
if (!result) return;
289+
290+
if (event.onClick) {
291+
event.onClick();
292+
} else if (!selectedEvent) {
293+
console.log("setting selected event");
294+
setSelectedEvent(event);
295+
}
296+
}}
297+
>
298+
<div className="flex h-full z-10">
299+
<div className="flex flex-col grow justify-between items-stretch">
300+
<div
301+
className={cn(
302+
"text-sm font-medium line-clamp-1 shrink-0 flex items-center gap-2"
303+
)}
304+
>
305+
{isCoworking && (
306+
<Image
307+
src={DevconnectCubeLogo}
308+
alt="Devconnect Cube"
309+
className="w-[26px] object-contain"
310+
/>
311+
)}
312+
{isETHDay && (
313+
<Image
314+
src={ethDayImage}
315+
alt="ETH Day"
316+
className="w-[26px] object-contain"
317+
/>
318+
)}
319+
<div className="flex flex-col w-full">
320+
{eventName}
321+
<div className="flex gap-4 justify-between w-full">
322+
{timeOfDay.map((time, index) => (
323+
<div key={index} className="text-xs text-gray-600">
324+
{time}
325+
</div>
326+
))}
327+
</div>
372328
</div>
373329
</div>
374-
</div>
375330

376-
<div className="line-clamp-1 mt-2 text-xs uppercase font-medium grow flex items-end">
377-
{event.organizer}
378-
</div>
331+
<div className="line-clamp-1 mt-2 text-xs uppercase font-medium grow flex items-end">
332+
{event.organizer}
333+
</div>
379334

380-
{/* <div className="text-xs text-gray-600 mt-1">{event.location.text}</div> */}
381-
382-
<Separator className="my-1.5" />
383-
384-
<div
385-
className={cn("flex gap-4 justify-end", {
386-
"justify-between": !isCoworking,
387-
})}
388-
>
389-
{isCoworking && (
390-
<a
391-
href="https://tickets.devconnect.org/?mtm_campaign=devconnect.org&mtm_source=website"
392-
onClick={(e) => {
393-
e.stopPropagation();
394-
}}
395-
>
396-
<Button
397-
size="sm"
398-
color="blue-1"
399-
fill
400-
className="shrink-0 px-4 py-2 flex text-xs gap-2 items-center"
401-
>
402-
<Ticket className="shrink-0" size={16} />
403-
Tickets Available Now
404-
<Ticket className="shrink-0" size={16} />
405-
</Button>
406-
</a>
407-
)}
335+
<Separator className="my-1.5" />
408336

409337
<div
410-
className={cn(
411-
"flex gap-2 grow items-end justify-between text-[9px]",
412-
{ "!justify-end": isCoworking }
413-
)}
338+
className={cn("flex gap-4 justify-end", {
339+
"justify-between": !isCoworking,
340+
})}
414341
>
415-
<TypeTag category={event.eventType} size="sm" />
342+
{isCoworking && (
343+
<a
344+
href="https://tickets.devconnect.org/?mtm_campaign=devconnect.org&mtm_source=website"
345+
onClick={(e) => {
346+
e.stopPropagation();
347+
}}
348+
>
349+
<Button
350+
size="sm"
351+
color="blue-1"
352+
fill
353+
className="shrink-0 px-4 py-2 flex text-xs gap-2 items-center"
354+
>
355+
<Ticket className="shrink-0" size={16} />
356+
Tickets Available Now
357+
<Ticket className="shrink-0" size={16} />
358+
</Button>
359+
</a>
360+
)}
416361

417-
{/* {event.organizer && (
362+
<div
363+
className={cn(
364+
"flex gap-2 grow items-end justify-between text-[9px]",
365+
{ "!justify-end": isCoworking }
366+
)}
367+
>
368+
<TypeTag category={event.eventType} size="sm" />
369+
370+
{/* {event.organizer && (
418371
<div
419372
className={`rounded text-[10px] bg-[#bef0ff] px-2 py-0.5 flex gap-1.5 items-center`}
420373
>
@@ -423,22 +376,23 @@ const Event: React.FC<EventProps> = ({
423376
</div>
424377
)} */}
425378

426-
<DifficultyTag difficulty={event.difficulty} size="sm" />
379+
<DifficultyTag difficulty={event.difficulty} size="sm" />
427380

428-
{/* <div
381+
{/* <div
429382
className={`rounded text-[10px] px-2 bg-[#bef0ff] py-0.5 flex gap-1.5 items-center`}
430383
>
431384
{event.amountPeople}
432385
</div> */}
433-
{/* <div className="rounded text-[10px] bg-[#bef0ff] px-2 py-0.5 flex gap-1 items-center justify-end">
386+
{/* <div className="rounded text-[10px] bg-[#bef0ff] px-2 py-0.5 flex gap-1 items-center justify-end">
434387
<Star className="text-black shrink-0" size={11} />
435388
RSVP
436389
</div> */}
390+
</div>
437391
</div>
438392
</div>
439393
</div>
440394
</div>
441-
</div>
395+
</>
442396
);
443397
};
444398

‎lib/components/event-schedule-new/index.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -151,13 +151,8 @@ const NewScheduleIndex = ({
151151
setSelectedEvent,
152152
setSelectedDay,
153153
events,
154-
isCommunityCalendar = false,
155154
}: ScheduleProps) => {
156-
// const { selectedEvent, selectedDay, setSelectedEvent, setSelectedDay } = useCalendarStore()
157155
const eventRange = computeCalendarRange(events);
158-
// const [events] = useState<EventType[]>(dummyEvents);
159-
// const [events] = useState<EventType[]>(events);
160-
// Add state to track which date is being hovered
161156
const [hoveredDate, setHoveredDate] = useState<string | null>(null);
162157

163158
// Compute event placements for the unified grid
@@ -209,8 +204,8 @@ const NewScheduleIndex = ({
209204
selectedDay === date && "!bg-slate-100 !opacity-100",
210205
selectedDay !== null && "opacity-20"
211206
)}
212-
onMouseEnter={() => setHoveredDate(date)}
213-
onMouseLeave={() => setHoveredDate(null)}
207+
// onMouseEnter={() => setHoveredDate(date)}
208+
// onMouseLeave={() => setHoveredDate(null)}
214209
// onClick={() => {
215210
// if (selectedDay !== date) {
216211
// setSelectedDay(date);

0 commit comments

Comments
 (0)