From f6051de45eaf23499f87149a2d317b9c8896e3a7 Mon Sep 17 00:00:00 2001 From: SanthoshM6576 <161164064+SanthoshM6576@users.noreply.github.com> Date: Sat, 27 Apr 2024 14:59:24 -0600 Subject: [PATCH 1/4] Update App.js --- src/App.js | 121 ++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 93 insertions(+), 28 deletions(-) diff --git a/src/App.js b/src/App.js index 00f6f46..e2bbd9e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,30 +1,37 @@ /*import logo from './logo.svg';*/ import "./App.css"; import BaseInput from "./BaseInput.js"; -import { useState, useRef } from "react"; +import { useState, useRef, useCallback, useEffect } from "react"; import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; -import { Grid, Box, Button } from '@mui/material'; +import { Grid, Box, Button } from "@mui/material"; import YourFavoriteSpotifyArtists from "./YourFavoriteSpotifyArtists.js"; import PickDate from "./PickDate.js"; -import ConcertList from "./ConcertList.js" +import ConcertList from "./ConcertList.js"; import AuthorizeSpotify from "./AuthorizeSpotify.js"; import SharePage from "./SharePage.js"; -import html2canvas from 'html2canvas'; +import html2canvas from "html2canvas"; import canvas2image from "@reglendo/canvas2image"; import GetSpotifyPlaylistArtistsWithShows from "./GetSpotifyPlaylistArtistsWithShows.js"; import YourSpotifyArtistsWithShows from "./YourSpotifyArtistsWithShows.js"; function App() { - let cachedStartDate = localStorage.getItem('startDate'); - let cachedEndDate = localStorage.getItem('endDate'); + let cachedStartDate = localStorage.getItem("startDate"); + let cachedEndDate = localStorage.getItem("endDate"); const [concerts, setConcerts] = useState([]); //all concerts is used to reoptimize the whole route... based on incoming concert const [allConcerts, setAllConcerts] = useState([]); const [userLocation, setUserLocation] = useState(null); - const [posterName, setPosterName] = useState('poster'); + const [posterName, setPosterName] = useState("poster"); const [followedArtists, setFollowedArtists] = useState([]); - const [startDate, setStartDate] = useState(cachedStartDate === null ? new Date() : new Date(cachedStartDate)); - const [endDate, setEndDate] = useState(cachedEndDate === null ? new Date() : new Date(cachedEndDate)); + const [artistName, setArtistName] = useState("Taylor Swift"); + const [artistList, setArtistList] = useState(null); + const [openDialog, setOpenDialog] = useState(false); + const [startDate, setStartDate] = useState( + cachedStartDate === null ? new Date() : new Date(cachedStartDate) + ); + const [endDate, setEndDate] = useState( + cachedEndDate === null ? new Date() : new Date(cachedEndDate) + ); const [mapStyle, setMapStyle] = useState("1fc21c527f198d4e"); const childRef = useRef(); @@ -34,23 +41,25 @@ function App() { childRef.current.handleRequestFromParent(artistName); }; + useEffect(() => { + if (artistName) console.log("Artist Name: ", artistName); + }, [artistName]); const handleDownloadImage = async function () { - const element = document.getElementById('sharepage'); + const element = document.getElementById("sharepage"); html2canvas(element, { logging: true, proxy: `${process.env.REACT_APP_BACKEND}/ImageProxy`, - backgroundColor: '#282c34', + backgroundColor: "#282c34", ignoreElements: (node) => { return node.nodeName === "IFRAME"; }, - scrollY: (window.scrollY * -1) - - }).then(canvas => { + scrollY: window.scrollY * -1, + }).then((canvas) => { canvas2image.saveAsPNG(canvas, posterName, canvas.width, canvas.height); }); - } + }; return (
@@ -58,36 +67,92 @@ function App() { className="App-header" container spacing={2} - alignItems="flex-start"> - + alignItems="flex-start" + > + - Taver + Taver - +

- - + setArtistName(value)} + newArtistList={setArtistList} + artistListFromParent={artistList} + clearArtistListFromParent={() => setArtistList([])} + openDialogFromParent={openDialog} + closeDialog={() => { + setOpenDialog(false); + }} + ref={childRef} + /> + } /> - } /> + + } + /> -

- - +

+ + - +

+ setPosterName={setPosterName} + />
- +
From 9c39e90c965b7310c77a5e4ef80f864e9ff9f59a Mon Sep 17 00:00:00 2001 From: SanthoshM6576 <161164064+SanthoshM6576@users.noreply.github.com> Date: Sat, 27 Apr 2024 14:59:56 -0600 Subject: [PATCH 2/4] Create FetchArtist.js --- src/FetchArtist.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/FetchArtist.js diff --git a/src/FetchArtist.js b/src/FetchArtist.js new file mode 100644 index 0000000..ce9a770 --- /dev/null +++ b/src/FetchArtist.js @@ -0,0 +1,20 @@ +export const FetchArtist = async (artistName) => { + const response = await fetch( + `${process.env.REACT_APP_BACKEND}/FindArtistWithShows/GetArtistsByName?artistName=${artistName}`, + { + method: "GET", + headers: { + "content-type": "application/json;charset=utf-8", + }, + } + ); + console.log(`response status code: ${response.status}`); + if (response.status === 200) { + let resJson = await response.json(); + console.log(`artist count: ${resJson.length}`); + resJson = resJson.filter((value) => value.images.length > 0); + console.log(`artist count: ${resJson.length}`); + return resJson; + } + return; +}; From 63b4651eca23306d183190d1f57887fc745e75e0 Mon Sep 17 00:00:00 2001 From: SanthoshM6576 <161164064+SanthoshM6576@users.noreply.github.com> Date: Sat, 27 Apr 2024 15:00:15 -0600 Subject: [PATCH 3/4] Update BaseInput.js --- src/BaseInput.js | 44 +++++++++++++++----------------------------- 1 file changed, 15 insertions(+), 29 deletions(-) diff --git a/src/BaseInput.js b/src/BaseInput.js index a607d0a..97d67f0 100644 --- a/src/BaseInput.js +++ b/src/BaseInput.js @@ -4,6 +4,7 @@ import { TextField, Button, Stack, FormControl, InputLabel, NativeSelect, Switch import moment from 'moment'; import DismissButton from "./DismissButton"; import ArtistChoiceList from "./ArtistChoiceList"; +import { FetchArtist } from "./FetchArtist"; const mapStyles = [ { mapId: "1fc21c527f198d4e", displayName: "Default Theme", buttonColorCss: "0070d2" }, @@ -36,7 +37,7 @@ function distanceInKmBetweenEarthCoordinates(lat1, lon1, lat2, lon2) { return earthRadiusKm * c; } -const BaseInput = forwardRef(({ setConcerts, setUserLocation, setMapStyle, startDate, setAllConcerts, endDate, concerts, allConcerts, userLocation }, ref) => { +const BaseInput = forwardRef(({ setConcerts, setUserLocation, setMapStyle, startDate, setAllConcerts, endDate, concerts, allConcerts, userLocation, updateArtistNameInParent, artistListFromParent, openDialogFromParent, closeDialog, newArtistList }, ref) => { useEffect(() => { function showPosition(position) { @@ -58,7 +59,6 @@ const BaseInput = forwardRef(({ setConcerts, setUserLocation, setMapStyle, start })); const [artistName, setArtistName] = useState("Taylor Swift"); - const [artistList, setArtistList] = useState(null); const submitArtistInfo = async (incomingArtistInfo) => { console.log(incomingArtistInfo); let incomingArtistName = incomingArtistInfo.name; @@ -120,6 +120,7 @@ const BaseInput = forwardRef(({ setConcerts, setUserLocation, setMapStyle, start sortArtist(allConcerts.concat(incomingConcerts), userLocation); } setOpen(false); + closeDialog(); } else { console.log("Some error occured"); } @@ -130,30 +131,11 @@ const BaseInput = forwardRef(({ setConcerts, setUserLocation, setMapStyle, start let handleSubmit = async (e) => { e.preventDefault(); - //request a list of artist from the backend based on artist name - await fetch(`${process.env.REACT_APP_BACKEND}/FindArtistWithShows/GetArtistsByName?artistName=${artistName}`, { - method: "GET", - headers: { - "content-type": "application/json;charset=utf-8", - } - }).then(async (res) => { - console.log(`response status code: ${res.status}`); - if (res.status === 200) { - let resJson = await res.json(); - console.log(`artist count: ${resJson.length}`); - resJson = resJson.filter( - (value) => value.images.length > 0 - ); - console.log(`artist count: ${resJson.length}`); - setArtistList(resJson); - setOpen(true); - } - return; - }).catch((err) => { - console.log("Some error occured"); - console.log(err); + FetchArtist(artistName).then((resJson) => { + // setArtistList(resJson); + newArtistList(resJson); + setOpen(true); }); - //submitArtist(artistName); }; @@ -230,6 +212,7 @@ const BaseInput = forwardRef(({ setConcerts, setUserLocation, setMapStyle, start const handleClose = () => { setOpen(false); + closeDialog(); }; const handleSwitchChange = () => { @@ -260,7 +243,10 @@ const BaseInput = forwardRef(({ setConcerts, setUserLocation, setMapStyle, start }, }} label="Enter Artist Name:" - value={artistName} onChange={(e) => setArtistName(e.target.value)} + value={artistName} onChange={(e) =>{ + setArtistName(e.target.value); + updateArtistNameInParent(e.target.value); + }} />