Merge pull request #99 from DartExplore/issue#algo

Issue#88

src/components/ClientContext/ClientContext.tsx

@@ -40,3 +40,19 @@ export const FilterContext = createContext<FilterContextType>({
     throw new Error("setFilter function must be overridden by a Provider");
   },
 });
+
+export interface UserContextType {
+  user: {
+    currentStationName: string;
+  };
+  setUser: (user: UserContextType["user"]) => void;
+}
+
+export const UserContext = createContext<UserContextType>({
+  user: {
+    currentStationName: "",
+  },
+  setUser: () => {
+    throw new Error("setUser function must be overridden by a Provider");
+  },
+});

src/components/DirectionsModal/DirectionsModal.css

@@ -0,0 +1,22 @@
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(0 0 0 / 50%);
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 10%;
+}
+
+.modal-content {
+  background-color: #fff;
+  border: solid;
+  padding: 2em;
+  width: 25em;
+  max-width: 90%;
+  box-shadow: 0 0 20px rgb(0 0 0 / 20%);
+  border-radius: 8px;
+}

src/components/DirectionsModal/DirectionsModal.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+
+import "./DirectionsModal.css";
+
+interface DirectionsModalProps {
+  show: boolean;
+  onClose: () => void;
+  placeName: string;
+  stationName: string;
+  currentStationName?: string;
+}
+
+const DirectionsModal: React.FC<DirectionsModalProps> = ({
+  show,
+  onClose,
+  placeName,
+  stationName,
+  currentStationName,
+}) => {
+  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  const buildGoogleMapsUrl = (station: string, place: string) => {
+    const encodedStation = encodeURIComponent(station);
+    const encodedPlace = encodeURIComponent(place);
+    return `https://www.google.com/maps/dir/${encodedStation}/${encodedPlace}`;
+  };
+
+  if (!show) return null;
+
+  const googleMapsUrl = buildGoogleMapsUrl(stationName, placeName);
+  const currentGoogleMapsUrl = currentStationName
+    ? buildGoogleMapsUrl(currentStationName, placeName)
+    : null;
+
+  return (
+    <div className="modal-overlay" onClick={handleOverlayClick}>
+      <div className="modal-content">
+        <h2>Directions to {placeName}</h2>
+        {currentGoogleMapsUrl && (
+          <div>
+            <a
+              href={currentGoogleMapsUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Google maps from current station
+            </a>
+          </div>
+        )}
+        <div>
+          <a href={googleMapsUrl} target="_blank" rel="noopener noreferrer">
+            Google maps from final station
+          </a>
+        </div>
+        <div>
+          <p>
+            Information about&nbsp;
+            <a
+              href="https://www.dart.org/fare/general-fares-and-overview/fares#fareoptions"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              purchasing station tickets
+            </a>
+          </p>
+        </div>
+        <div>
+          <button onClick={onClose}>Close</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DirectionsModal;

src/components/PlaceCard/PlaceCard.css

@@ -8,6 +8,7 @@
   flex-direction: column;
   gap: 0.5em;
   padding: 0.25em;
+  cursor: pointer;
 }
 
 .place-card .name {

src/components/PlaceCard/PlaceCard.tsx

@@ -6,16 +6,18 @@ interface PlaceCardProps {
   emoji: string;
   stationName: string;
   title: string;
+  onPlaceClick: () => void;
 }
 
 const PlaceCard: React.FC<PlaceCardProps> = ({
   placeName,
+  onPlaceClick,
   emoji,
   stationName,
   title,
 }) => {
   return (
-    <div className="place-card">
+    <div className="place-card" onClick={onPlaceClick}>
       <div className="name" title={title}>
         {placeName}
       </div>

src/components/Places/Places.tsx

@@ -1,8 +1,13 @@
 import { useState, useEffect, useContext } from "react";
-import { FilterContext, ClientContext } from "../ClientContext/ClientContext";
+import {
+  FilterContext,
+  ClientContext,
+  UserContext,
+} from "../ClientContext/ClientContext";
 import PlaceCard from "../PlaceCard/PlaceCard";
 import PointOfInterest from "../interfaces/PointOfInterest";
 import Station from "../interfaces/Station";
+import DirectionsModal from "../DirectionsModal/DirectionsModal";
 
 import "./Places.css";
 
@@ -14,6 +19,21 @@ const Places = () => {
   const [error, setError] = useState<ErrorType | null>(null);
   const { filter } = useContext(FilterContext);
   const { client } = useContext(ClientContext);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedPlaceName, setSelectedPlaceName] = useState("");
+  const [selectedStationName, setSelectedStationName] = useState("");
+  const { user } = useContext(UserContext);
+
+  const handlePlaceClick = (placeName: string, stationName: string) => {
+    setSelectedPlaceName(placeName);
+    setSelectedStationName(stationName);
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setSelectedPlaceName("");
+  };
 
   useEffect(() => {
     const fetchData = async () => {
@@ -71,12 +91,20 @@ const Places = () => {
           <PlaceCard
             key={poi.poiId}
             placeName={poi.name}
+            onPlaceClick={() => handlePlaceClick(poi.name, station.name)}
             emoji="🌎" // I imagine we'll use the pic_url from the back end and the put emoji's in there
             stationName={station.name}
             title={poi.name}
           />
         ))
       )}
+      <DirectionsModal
+        show={isModalOpen}
+        onClose={handleCloseModal}
+        placeName={selectedPlaceName}
+        stationName={selectedStationName}
+        currentStationName={user.currentStationName}
+      />
     </div>
   );
 };

src/components/PlacesFilter/PlacesFilter.tsx

@@ -1,5 +1,5 @@
 import { useState, useContext, useEffect } from "react";
-import { FilterContext } from "../ClientContext/ClientContext";
+import { FilterContext, UserContext } from "../ClientContext/ClientContext";
 import Station from "../interfaces/Station";
 import Amenity from "../interfaces/Amenity";
 import NearestStationSetter from "../NearestStationSetter/NearestStationSetter";
@@ -18,7 +18,7 @@ const PlacesFilter = () => {
   const [types, setTypes] = useState<string[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [selectAllTypes, setSelectAllTypes] = useState(false);
-  const [selectAllAmenities, setSelectAllAmenities] = useState(false);
+  const { user, setUser } = useContext(UserContext);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -74,6 +74,15 @@ const PlacesFilter = () => {
 
     if (name === "currentStation") {
       newValue = parseInt(value, 10);
+
+      // Set currentStationName based on the selected stationId
+      const selectedStation = stations.find(
+        (station) => station.stationId === newValue
+      );
+      setUser({
+        ...user,
+        currentStationName: selectedStation ? selectedStation.name : "",
+      });
     }
 
     setFormState({
@@ -84,9 +93,6 @@ const PlacesFilter = () => {
 
   const handleAmenityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value, checked } = event.target;
-    if (!checked) {
-      setSelectAllAmenities(false);
-    }
     let currentAmenityIds = formState.amenityIds.split(",").filter(Boolean);
     if (checked && !currentAmenityIds.includes(value)) {
       currentAmenityIds.push(value);
@@ -132,20 +138,6 @@ const PlacesFilter = () => {
     });
   };
 
-  const handleSelectAllAmenitiesChange = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    const checked = event.target.checked;
-    setSelectAllAmenities(checked);
-    const allAmenities = amenities
-      .map((amenity) => amenity.amenityId.toString())
-      .join(",");
-    setFormState({
-      ...formState,
-      amenityIds: checked ? allAmenities : "",
-    });
-  };
-
   return (
     <div className="places-filter">
       <form onSubmit={handleSubmit}>
@@ -224,18 +216,6 @@ const PlacesFilter = () => {
         <div className="filter-group">
           <label>Amenities</label>
           <div className="filter-split">
-            <div>
-              <label>
-                <input
-                  type="checkbox"
-                  id="selectAllAmenities"
-                  name="selectAllAmenities"
-                  checked={selectAllAmenities}
-                  onChange={handleSelectAllAmenitiesChange}
-                />
-                Select All
-              </label>
-            </div>
             {amenities.map((amenity) => (
               <div>
                 <label key={amenity.amenityId}>

src/components/Planner/Planner.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { FilterContext } from "../ClientContext/ClientContext";
+import { FilterContext, UserContext } from "../ClientContext/ClientContext";
 import "./Planner.css";
 
 import Places from "../Places/Places";
@@ -17,19 +17,25 @@ const Planner = () => {
     returnStationsWithNoPOIs: false,
   });
 
+  const [user, setUser] = useState({
+    currentStationName: "",
+  });
+
   return (
     <FilterContext.Provider value={{ filter, setFilter }}>
-      <main className="planner">
-        <div className="planner-container">
-          <header>
-            <h1>DARTable places</h1>
-          </header>
-          <div className="planner-view">
-            <PlacesFilter />
-            <Places />
+      <UserContext.Provider value={{ user, setUser }}>
+        <main className="planner">
+          <div className="planner-container">
+            <header>
+              <h1>DARTable places</h1>
+            </header>
+            <div className="planner-view">
+              <PlacesFilter />
+              <Places />
+            </div>
           </div>
-        </div>
-      </main>
+        </main>
+      </UserContext.Provider>
     </FilterContext.Provider>
   );
 };