Make popup title clickable for notes dialogue

Author: Braqzen

src/App.tsx

@@ -6,6 +6,7 @@ import { TagOption } from "./components/right-sidebar/tag";
 import LeftSidebar from "./components/leftSidebar";
 import RightSidebar from "./components/rightSidebar";
 import rawEvents from "../events.json";
+import NotesDialog from "./components/right-sidebar/noteDialogue";
 
 function App() {
   const [events, setEvents] = useState<Event[]>([]);
@@ -24,6 +25,8 @@ function App() {
   const [selectedRegionTags, setSelectedRegionTags] = useState<TagOption[]>([]);
   const [selectedTypeTags, setSelectedTypeTags] = useState<TagOption[]>([]);
   const map = useRef<L.Map | null>(null);
+  const [notes, setNotes] = useState<Event | null>(null);
+  const [openNotes, setOpenNotes] = useState(false);
 
   useEffect(() => {
     const data = rawEvents.map((event) => ({
@@ -62,6 +65,8 @@ function App() {
         selectedTile={selectedTile}
         map={map}
         filteredEvents={filteredEvents}
+        setNotes={setNotes}
+        setOpenNotes={setOpenNotes}
       />
 
       <RightSidebar
@@ -72,7 +77,19 @@ function App() {
         onDateChange={setSelectedDateTags}
         onRegionChange={setSelectedRegionTags}
         onTypeChange={setSelectedTypeTags}
+        notes={notes}
+        setNotes={setNotes}
+        openNotes={openNotes}
+        setOpenNotes={setOpenNotes}
       />
+
+      {notes && (
+        <NotesDialog
+          open={openNotes}
+          event={notes}
+          onClose={() => setOpenNotes(false)}
+        />
+      )}
     </div>
   );
 }

src/components/map.tsx

@@ -15,6 +15,8 @@ interface EventMapProps {
   selectedTile: TileLayerOption;
   map: RefObject<L.Map | null>;
   filteredEvents: Event[];
+  setNotes: (event: Event | null) => void;
+  setOpenNotes: (open: boolean) => void;
 }
 
 const EventMap = ({
@@ -23,6 +25,8 @@ const EventMap = ({
   selectedTile,
   map,
   filteredEvents,
+  setNotes,
+  setOpenNotes,
 }: EventMapProps) => {
   const markers = useRef<Map<number, L.Marker | null>>(new Map());
   const [showRoute, setShowRoute] = useState(false);
@@ -115,6 +119,8 @@ const EventMap = ({
                 event={event}
                 filteredEvents={filteredEvents}
                 onSelectEvent={onSelectEvent}
+                setNotes={setNotes}
+                setOpenNotes={setOpenNotes}
               />
             </Popup>
           </Marker>

src/components/map/popup.tsx

@@ -5,9 +5,17 @@ interface PopupProps {
   event: Event;
   filteredEvents: Event[];
   onSelectEvent: (event: Event) => void;
+  setNotes: (event: Event | null) => void;
+  setOpenNotes: (open: boolean) => void;
 }
 
-const PopupContent = ({ event, filteredEvents, onSelectEvent }: PopupProps) => {
+const PopupContent = ({
+  event,
+  filteredEvents,
+  onSelectEvent,
+  setNotes,
+  setOpenNotes,
+}: PopupProps) => {
   const currentIndex = filteredEvents.findIndex((r) => r.id === event.id);
 
   const handlePrev = () => {
@@ -22,11 +30,22 @@ const PopupContent = ({ event, filteredEvents, onSelectEvent }: PopupProps) => {
     }
   };
 
+  const handleTitleClick = () => {
+    setNotes(event);
+    setOpenNotes(true);
+  };
+
   return (
     <Box sx={{ "& p": { mb: 0.2, mt: 0 } }}>
       <Typography
         variant="h6"
-        sx={{ fontWeight: "bold", fontSize: "1.3rem", mb: 1 }}
+        onClick={handleTitleClick}
+        sx={{
+          fontWeight: "bold",
+          fontSize: "1.3rem",
+          mb: 1,
+          cursor: "pointer",
+        }}
       >
         {event.name}
       </Typography>

src/components/right-sidebar/cardDrawer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Drawer, Box, IconButton, Typography } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import EventCard from "../right-sidebar/eventCard";
@@ -11,6 +11,10 @@ interface CardsDrawerProps {
   filteredEvents: Event[];
   selectedEvent: Event | null;
   onSelectEvent: (event: Event) => void;
+  notes: Event | null;
+  setNotes: (event: Event | null) => void;
+  openNotes: boolean;
+  setOpenNotes: (open: boolean) => void;
 }
 
 const CardsDrawer = ({
@@ -19,10 +23,11 @@ const CardsDrawer = ({
   filteredEvents,
   selectedEvent,
   onSelectEvent,
+  notes,
+  setNotes,
+  openNotes,
+  setOpenNotes,
 }: CardsDrawerProps) => {
-  const [openNotes, setOpenNotes] = useState(false);
-  const [notes, setNotes] = useState<Event | null>(null);
-
   useEffect(() => {
     if (openNotes && selectedEvent) {
       setNotes(selectedEvent);

src/components/rightSidebar.tsx

@@ -15,6 +15,10 @@ interface Props {
   onDateChange: (tags: TagOption[]) => void;
   onRegionChange: (tags: TagOption[]) => void;
   onTypeChange: (tags: TagOption[]) => void;
+  notes: Event | null;
+  setNotes: (event: Event | null) => void;
+  openNotes: boolean;
+  setOpenNotes: (open: boolean) => void;
 }
 
 const RightSidebar = ({
@@ -25,6 +29,10 @@ const RightSidebar = ({
   onDateChange,
   onRegionChange,
   onTypeChange,
+  notes,
+  setNotes,
+  openNotes,
+  setOpenNotes,
 }: Props) => {
   const [openFilterDrawer, setOpenFilterDrawer] = useState(false);
   const [openCardsDrawer, setOpenCardsDrawer] = useState(false);
@@ -77,6 +85,10 @@ const RightSidebar = ({
         filteredEvents={filteredEvents}
         selectedEvent={selectedEvent}
         onSelectEvent={onSelectEvent}
+        notes={notes}
+        setNotes={setNotes}
+        openNotes={openNotes}
+        setOpenNotes={setOpenNotes}
       />
     </>
   );