From 8c24b1aae6df4180ceb02f8087f89b4b0a24f346 Mon Sep 17 00:00:00 2001 From: Sam Bao Date: Sun, 27 Oct 2024 21:16:04 -0600 Subject: [PATCH] further organizing the components and moving things out of app.js --- src/App.js | 101 +--- src/Odyssey/Odyssey.js | 100 ++++ src/{ => Odyssey}/SharePage.js | 0 src/{ => Odyssey}/SharePageList.js | 0 src/{ => Odyssey}/map.js | 470 +++++++++--------- src/{Setup => TaleSetup}/ArtistChoiceList.js | 0 src/{Setup => TaleSetup}/ArtistsCarrousel.js | 0 src/{Setup => TaleSetup}/BaseInput.js | 0 src/{Setup => TaleSetup}/ConcertList.js | 0 src/{Setup => TaleSetup}/DismissButton.js | 0 src/{Setup => TaleSetup}/FetchArtist.js | 0 .../GetSpotifyPlaylistArtistsWithShows.js | 0 src/{Setup => TaleSetup}/PickDate.js | 0 src/{Setup => TaleSetup}/TaleSetup.js | 0 .../YourSpotifyArtistsWithShows.js | 0 15 files changed, 347 insertions(+), 324 deletions(-) create mode 100644 src/Odyssey/Odyssey.js rename src/{ => Odyssey}/SharePage.js (100%) rename src/{ => Odyssey}/SharePageList.js (100%) rename src/{ => Odyssey}/map.js (97%) rename src/{Setup => TaleSetup}/ArtistChoiceList.js (100%) rename src/{Setup => TaleSetup}/ArtistsCarrousel.js (100%) rename src/{Setup => TaleSetup}/BaseInput.js (100%) rename src/{Setup => TaleSetup}/ConcertList.js (100%) rename src/{Setup => TaleSetup}/DismissButton.js (100%) rename src/{Setup => TaleSetup}/FetchArtist.js (100%) rename src/{Setup => TaleSetup}/GetSpotifyPlaylistArtistsWithShows.js (100%) rename src/{Setup => TaleSetup}/PickDate.js (100%) rename src/{Setup => TaleSetup}/TaleSetup.js (100%) rename src/{Setup => TaleSetup}/YourSpotifyArtistsWithShows.js (100%) diff --git a/src/App.js b/src/App.js index 7b7dfdd..bfff648 100644 --- a/src/App.js +++ b/src/App.js @@ -2,12 +2,10 @@ import "./App.css"; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; -import { useState, useRef, useEffect } from "react"; -import { Grid, Box, Button } from "@mui/material"; -import TaleSetup from "./Setup/TaleSetup.js"; -import SharePage from "./SharePage.js"; -import html2canvas from "html2canvas"; -import canvas2image from "@reglendo/canvas2image"; +import { useState, useEffect } from "react"; +import { Grid } from "@mui/material"; +import TaleSetup from "./TaleSetup/TaleSetup.js"; +import Odyssey from "./Odyssey/Odyssey.js"; function App() { @@ -32,66 +30,14 @@ function App() { cachedEndDate === null ? new Date() : new Date(cachedEndDate) ); const [mapStyle, setMapStyle] = useState("1fc21c527f198d4e"); - const childRef = useRef(); - const triggerReEvaluation = (updatedArtistWishlist) => { - console.log("trigger re-evaluation"); - childRef.current.handleReEvaluation(updatedArtistWishlist); - } - const handleChildClick = (artistName) => { - childRef.current.handleRequestFromParent(artistName); - }; useEffect(() => { if (artistName) console.log("Artist Name: ", artistName); }, [artistName]); - const handleDownloadImage = async function () { - const element = document.getElementById("sharepage"); - html2canvas(element, { - logging: true, - proxy: `${process.env.REACT_APP_BACKEND}/GetImage`, - backgroundColor: "#282c34", - ignoreElements: (node) => { - return node.nodeName === "IFRAME"; - }, - scrollY: window.scrollY * -1, - }).then((canvas) => { - canvas2image.saveAsPNG(canvas, posterName, canvas.width, canvas.height); - }); - }; - const handleShareAsLink = async function () { - //gather json for artists, map coordinates, share page schedules, concert list, trip name, map style id, start date, end date - try { - let res = await fetch(`${process.env.REACT_APP_BACKEND}/SaveTrips`, { - method: "POST", - headers: { - "content-type": "application/json;charset=utf-8", - }, - body: JSON.stringify({ - ownerUsername: "", - startingPoint: userLocation, - gigs: concerts, - tripName: posterName, - startDate: startDate, - mapStyleId: mapStyle, - endDate: endDate - }) - }); - - - if (res.status === 200) { - let incomingConcerts = await res.json(); - } else { - console.log("Some error occured"); - } - } catch (err) { - console.log(err); - } - //make a request to taverondemand.azurewebsites.net/api/SaveTrips - }; return (
@@ -123,38 +69,15 @@ function App() { followedArtists={followedArtists} artistWishlist={artistWishlist} openDialog={openDialog} - triggerReEvaluation={triggerReEvaluation} isRequestTriggered={isRequestTriggered} /> - -
- -
- - - - - - - - - +
); diff --git a/src/Odyssey/Odyssey.js b/src/Odyssey/Odyssey.js new file mode 100644 index 0000000..d5045a2 --- /dev/null +++ b/src/Odyssey/Odyssey.js @@ -0,0 +1,100 @@ +import React from 'react'; +import { Grid, Button } from "@mui/material"; +// Import other components +import SharePage from "./SharePage.js"; +import html2canvas from "html2canvas"; +import canvas2image from "@reglendo/canvas2image"; + +const Odyssey = ({ + concerts, + userLocation, + mapStyle, + setPosterName, + posterName, + startDate, + endDate +}) => { + const handleShareAsLink = async function () { + //gather json for artists, map coordinates, share page schedules, concert list, trip name, map style id, start date, end date + try { + let res = await fetch(`${process.env.REACT_APP_BACKEND}/SaveTrips`, { + method: "POST", + headers: { + "content-type": "application/json;charset=utf-8", + }, + body: JSON.stringify({ + ownerUsername: "", + startingPoint: userLocation, + gigs: concerts, + tripName: posterName, + startDate: startDate, + mapStyleId: mapStyle, + endDate: endDate + }) + }); + + + if (res.status === 200) { + let incomingConcerts = await res.json(); + } else { + console.log("Some error occured"); + } + } catch (err) { + console.log(err); + } + //make a request to taverondemand.azurewebsites.net/api/SaveTrips + }; + const handleDownloadImage = async function () { + const element = document.getElementById("sharepage"); + html2canvas(element, { + logging: true, + proxy: `${process.env.REACT_APP_BACKEND}/GetImage`, + backgroundColor: "#282c34", + + ignoreElements: (node) => { + return node.nodeName === "IFRAME"; + }, + scrollY: window.scrollY * -1, + }).then((canvas) => { + canvas2image.saveAsPNG(canvas, posterName, canvas.width, canvas.height); + }); + }; + + return ( + +
+ +
+ + + + + + + + + + ); +}; + +export default Odyssey; + + + diff --git a/src/SharePage.js b/src/Odyssey/SharePage.js similarity index 100% rename from src/SharePage.js rename to src/Odyssey/SharePage.js diff --git a/src/SharePageList.js b/src/Odyssey/SharePageList.js similarity index 100% rename from src/SharePageList.js rename to src/Odyssey/SharePageList.js diff --git a/src/map.js b/src/Odyssey/map.js similarity index 97% rename from src/map.js rename to src/Odyssey/map.js index b800c1a..fea93af 100644 --- a/src/map.js +++ b/src/Odyssey/map.js @@ -1,235 +1,235 @@ -import React, { useState, useEffect, useRef, useLayoutEffect } from "react"; -import { GoogleMap, InfoWindowF, MarkerF, MarkerClusterer } from "@react-google-maps/api"; - -const concertToMarker = (concert) => { - return { - id: concert.title + concert.date, - name: concert.title, - artistImageUrl: concert.image.url, - address: concert.location.address, - position: { - lat: concert.location.gpsCoordinate.coords.latitude, - lng: concert.location.gpsCoordinate.coords.longitude, - }, - }; -}; - - - -function useWindowSize() { - const [size, setSize] = useState([0, 0]); - useLayoutEffect(() => { - function updateSize() { - setSize([window.innerWidth, window.innerHeight]); - } - window.addEventListener('resize', updateSize); - updateSize(); - return () => window.removeEventListener('resize', updateSize); - }, []); - return size; -} - -function Map({ concerts, userLocation, mapStyle }) { - const [activeMarker, setActiveMarker] = useState(null); - const mapRef = useRef(null); - const mapBoundsRef = useRef(null); - const freshBoundsRef = useRef(null); - const polylineRef = useRef(null); - const handleActiveMarker = (marker) => { - if (marker === activeMarker) { - return; - } - setActiveMarker(marker); - }; - - const markers = concerts.map(concertToMarker); - - const handleOnLoad = (map) => { - const bounds = new google.maps.LatLngBounds(); // eslint-disable-line - if (userLocation) { - bounds.extend({ - lat: Number(parseFloat(userLocation.coords.latitude).toFixed(4)), - lng: Number(parseFloat(userLocation.coords.longitude).toFixed(4)), - }); - } - map.fitBounds(bounds); - map.setCenter(bounds.getCenter()); - console.log("Placed Markers" + markers); - - let pathOptions = { - strokeColor: "#FF0000", - strokeOpacity: 0.8, - strokeWeight: 2, - fillColor: "#FF0000", - fillOpacity: 0.35, - clickable: false, - draggable: false, - editable: false, - visible: true, - radius: 30000, - zIndex: 1, - icons: [ - { - icon: { - path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, // eslint-disable-line - fillColor: "#FF0000", - strokeColor: "#FF0000", - }, - offset: "100%", - repeat: "100px", - }, - ], - }; - - freshBoundsRef.current = new google.maps.LatLngBounds(); // eslint-disable-line - mapBoundsRef.current = bounds; - mapRef.current = map; - polylineRef.current = new google.maps.Polyline(pathOptions); // eslint-disable-line - }; - - var path = - userLocation !== null - ? [ - { - lat: Number(parseFloat(userLocation.coords.latitude).toFixed(4)), - lng: Number(parseFloat(userLocation.coords.longitude).toFixed(4)), - }, - ...concerts.map((concert) => ({ - lat: concert.location.gpsCoordinate.coords.latitude, - lng: concert.location.gpsCoordinate.coords.longitude, - })), - ] - : concerts.map((concert) => ({ - lat: concert.location.gpsCoordinate.coords.latitude, - lng: concert.location.gpsCoordinate.coords.longitude, - })); - - - useEffect(() => { - if (mapRef.current !== null && mapBoundsRef.current !== null && freshBoundsRef.current !== null && polylineRef.current !== null) { - mapBoundsRef.current = freshBoundsRef.current; - markers.forEach(({ position }) => mapBoundsRef.current.extend(position)); - - if (userLocation) { - mapBoundsRef.current.extend({ - lat: Number(parseFloat(userLocation.coords.latitude).toFixed(4)), - lng: Number(parseFloat(userLocation.coords.longitude).toFixed(4)), - }); - } - - if (activeMarker === null) { - mapRef.current.fitBounds(mapBoundsRef.current, 10); - mapRef.current.setZoom(3); - } - else { - var index = markers.findIndex(marker => marker.id === activeMarker); - var centerMarker = markers[index]; - mapRef.current.setCenter(centerMarker.position); - mapRef.current.setZoom(10); - } - - polylineRef.current.setPath(path); - polylineRef.current.setMap(mapRef.current); - //mapRef.current.setCenter(freshBoundsRef.current.getCenter()); - } - }, [markers]); - const [width, height] = useWindowSize(); - const output = concerts.map((concert) => ({ artist: concert.artist, date: concert.date, location: concert.location, address: concert.location.address })); - - console.log(output); - - return ( - setActiveMarker(null)} - options={{ - mapId: mapStyle, - minZoom: 1, - maxZoom: 20, - disableDefaultUI: true - }} - mapContainerStyle={(width / height) >= 1 ? { width: "100wh", height: "75vh" } : { width: "100wh", height: "75vh" }} - > - {userLocation && ( - - )} - - { - var pathCopy = [...path]; - // build the clusteringPolyline - // get markerclusters with more than one marker inside them - var clustersGreaterThanOne = clusterer.clusters.filter((cluster) => cluster.markers.length > 1); - //console.log(`total number of clusters: ${clusterer.clusters.length}`); - //console.log("cluster with more than 1 marker: "); - clustersGreaterThanOne.forEach(cluster => console.log(cluster)); - - // replace all points in each cluster in path with the center point - clustersGreaterThanOne.forEach((cluster) => { - let centerPoint = cluster.getCenter(); - let cleanedUpCenterPoint = { lat: centerPoint.lat(), lng: centerPoint.lng() }; - - let clusterPoints = cluster.markers.map((marker) => { - let markerPosition = marker.getPosition(); - return { lat: markerPosition.lat(), lng: markerPosition.lng() }; - }); - - - pathCopy.forEach((point, index) => { - clusterPoints.forEach((clusterPoint) => { - if (clusterPoint.lat === point.lat && clusterPoint.lng === point.lng) { - pathCopy[index] = cleanedUpCenterPoint; - } - }); - }); - }); - - polylineRef.current.setPath(pathCopy); - }} - > - {(clusterer) => ( -
- {markers && - markers.map(({ id, name, position, artistImageUrl, address }) => ( - { - e.stop() - handleActiveMarker(id) - }} - > - {activeMarker === id ? ( - setActiveMarker(null)}> -
- {name} -

{name}

{address}

-
- - ) : null} - - ))} -
- )} - - - - ); -} - -export default Map; +import React, { useState, useEffect, useRef, useLayoutEffect } from "react"; +import { GoogleMap, InfoWindowF, MarkerF, MarkerClusterer } from "@react-google-maps/api"; + +const concertToMarker = (concert) => { + return { + id: concert.title + concert.date, + name: concert.title, + artistImageUrl: concert.image.url, + address: concert.location.address, + position: { + lat: concert.location.gpsCoordinate.coords.latitude, + lng: concert.location.gpsCoordinate.coords.longitude, + }, + }; +}; + + + +function useWindowSize() { + const [size, setSize] = useState([0, 0]); + useLayoutEffect(() => { + function updateSize() { + setSize([window.innerWidth, window.innerHeight]); + } + window.addEventListener('resize', updateSize); + updateSize(); + return () => window.removeEventListener('resize', updateSize); + }, []); + return size; +} + +function Map({ concerts, userLocation, mapStyle }) { + const [activeMarker, setActiveMarker] = useState(null); + const mapRef = useRef(null); + const mapBoundsRef = useRef(null); + const freshBoundsRef = useRef(null); + const polylineRef = useRef(null); + const handleActiveMarker = (marker) => { + if (marker === activeMarker) { + return; + } + setActiveMarker(marker); + }; + + const markers = concerts.map(concertToMarker); + + const handleOnLoad = (map) => { + const bounds = new google.maps.LatLngBounds(); // eslint-disable-line + if (userLocation) { + bounds.extend({ + lat: Number(parseFloat(userLocation.coords.latitude).toFixed(4)), + lng: Number(parseFloat(userLocation.coords.longitude).toFixed(4)), + }); + } + map.fitBounds(bounds); + map.setCenter(bounds.getCenter()); + console.log("Placed Markers" + markers); + + let pathOptions = { + strokeColor: "#FF0000", + strokeOpacity: 0.8, + strokeWeight: 2, + fillColor: "#FF0000", + fillOpacity: 0.35, + clickable: false, + draggable: false, + editable: false, + visible: true, + radius: 30000, + zIndex: 1, + icons: [ + { + icon: { + path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, // eslint-disable-line + fillColor: "#FF0000", + strokeColor: "#FF0000", + }, + offset: "100%", + repeat: "100px", + }, + ], + }; + + freshBoundsRef.current = new google.maps.LatLngBounds(); // eslint-disable-line + mapBoundsRef.current = bounds; + mapRef.current = map; + polylineRef.current = new google.maps.Polyline(pathOptions); // eslint-disable-line + }; + + var path = + userLocation !== null + ? [ + { + lat: Number(parseFloat(userLocation.coords.latitude).toFixed(4)), + lng: Number(parseFloat(userLocation.coords.longitude).toFixed(4)), + }, + ...concerts.map((concert) => ({ + lat: concert.location.gpsCoordinate.coords.latitude, + lng: concert.location.gpsCoordinate.coords.longitude, + })), + ] + : concerts.map((concert) => ({ + lat: concert.location.gpsCoordinate.coords.latitude, + lng: concert.location.gpsCoordinate.coords.longitude, + })); + + + useEffect(() => { + if (mapRef.current !== null && mapBoundsRef.current !== null && freshBoundsRef.current !== null && polylineRef.current !== null) { + mapBoundsRef.current = freshBoundsRef.current; + markers.forEach(({ position }) => mapBoundsRef.current.extend(position)); + + if (userLocation) { + mapBoundsRef.current.extend({ + lat: Number(parseFloat(userLocation.coords.latitude).toFixed(4)), + lng: Number(parseFloat(userLocation.coords.longitude).toFixed(4)), + }); + } + + if (activeMarker === null) { + mapRef.current.fitBounds(mapBoundsRef.current, 10); + mapRef.current.setZoom(3); + } + else { + var index = markers.findIndex(marker => marker.id === activeMarker); + var centerMarker = markers[index]; + mapRef.current.setCenter(centerMarker.position); + mapRef.current.setZoom(10); + } + + polylineRef.current.setPath(path); + polylineRef.current.setMap(mapRef.current); + //mapRef.current.setCenter(freshBoundsRef.current.getCenter()); + } + }, [markers]); + const [width, height] = useWindowSize(); + const output = concerts.map((concert) => ({ artist: concert.artist, date: concert.date, location: concert.location, address: concert.location.address })); + + console.log(output); + + return ( + setActiveMarker(null)} + options={{ + mapId: mapStyle, + minZoom: 1, + maxZoom: 20, + disableDefaultUI: true + }} + mapContainerStyle={(width / height) >= 1 ? { width: "100wh", height: "75vh" } : { width: "100wh", height: "75vh" }} + > + {userLocation && ( + + )} + + { + var pathCopy = [...path]; + // build the clusteringPolyline + // get markerclusters with more than one marker inside them + var clustersGreaterThanOne = clusterer.clusters.filter((cluster) => cluster.markers.length > 1); + //console.log(`total number of clusters: ${clusterer.clusters.length}`); + //console.log("cluster with more than 1 marker: "); + clustersGreaterThanOne.forEach(cluster => console.log(cluster)); + + // replace all points in each cluster in path with the center point + clustersGreaterThanOne.forEach((cluster) => { + let centerPoint = cluster.getCenter(); + let cleanedUpCenterPoint = { lat: centerPoint.lat(), lng: centerPoint.lng() }; + + let clusterPoints = cluster.markers.map((marker) => { + let markerPosition = marker.getPosition(); + return { lat: markerPosition.lat(), lng: markerPosition.lng() }; + }); + + + pathCopy.forEach((point, index) => { + clusterPoints.forEach((clusterPoint) => { + if (clusterPoint.lat === point.lat && clusterPoint.lng === point.lng) { + pathCopy[index] = cleanedUpCenterPoint; + } + }); + }); + }); + + polylineRef.current.setPath(pathCopy); + }} + > + {(clusterer) => ( +
+ {markers && + markers.map(({ id, name, position, artistImageUrl, address }) => ( + { + e.stop() + handleActiveMarker(id) + }} + > + {activeMarker === id ? ( + setActiveMarker(null)}> +
+ {name} +

{name}

{address}

+
+ + ) : null} + + ))} +
+ )} + + + + ); +} + +export default Map; diff --git a/src/Setup/ArtistChoiceList.js b/src/TaleSetup/ArtistChoiceList.js similarity index 100% rename from src/Setup/ArtistChoiceList.js rename to src/TaleSetup/ArtistChoiceList.js diff --git a/src/Setup/ArtistsCarrousel.js b/src/TaleSetup/ArtistsCarrousel.js similarity index 100% rename from src/Setup/ArtistsCarrousel.js rename to src/TaleSetup/ArtistsCarrousel.js diff --git a/src/Setup/BaseInput.js b/src/TaleSetup/BaseInput.js similarity index 100% rename from src/Setup/BaseInput.js rename to src/TaleSetup/BaseInput.js diff --git a/src/Setup/ConcertList.js b/src/TaleSetup/ConcertList.js similarity index 100% rename from src/Setup/ConcertList.js rename to src/TaleSetup/ConcertList.js diff --git a/src/Setup/DismissButton.js b/src/TaleSetup/DismissButton.js similarity index 100% rename from src/Setup/DismissButton.js rename to src/TaleSetup/DismissButton.js diff --git a/src/Setup/FetchArtist.js b/src/TaleSetup/FetchArtist.js similarity index 100% rename from src/Setup/FetchArtist.js rename to src/TaleSetup/FetchArtist.js diff --git a/src/Setup/GetSpotifyPlaylistArtistsWithShows.js b/src/TaleSetup/GetSpotifyPlaylistArtistsWithShows.js similarity index 100% rename from src/Setup/GetSpotifyPlaylistArtistsWithShows.js rename to src/TaleSetup/GetSpotifyPlaylistArtistsWithShows.js diff --git a/src/Setup/PickDate.js b/src/TaleSetup/PickDate.js similarity index 100% rename from src/Setup/PickDate.js rename to src/TaleSetup/PickDate.js diff --git a/src/Setup/TaleSetup.js b/src/TaleSetup/TaleSetup.js similarity index 100% rename from src/Setup/TaleSetup.js rename to src/TaleSetup/TaleSetup.js diff --git a/src/Setup/YourSpotifyArtistsWithShows.js b/src/TaleSetup/YourSpotifyArtistsWithShows.js similarity index 100% rename from src/Setup/YourSpotifyArtistsWithShows.js rename to src/TaleSetup/YourSpotifyArtistsWithShows.js