Merge pull request #49 from taver-ca/fetchArtist

Fetch artist
taver-ca · Apr 27, 2024 · 1071b84 · 1071b84
2 parents 187a981 + 941945c
commit 1071b84
Show file tree

Hide file tree

Showing 4 changed files with 210 additions and 103 deletions.
diff --git 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,60 +41,118 @@ 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 (
     <div className="App">
       <Grid
         className="App-header"
         container
         spacing={2}
-        alignItems="flex-start">
-        <Grid direction={'column'} xs={10} md={3} spacing={2}>
+        alignItems="flex-start"
+      >
+        <Grid direction={"column"} xs={10} md={3} spacing={2}>
           <Box>
-            <img src={window.location.origin + '/Taver.png'} alt="Taver" />
+            <img src={window.location.origin + "/Taver.png"} alt="Taver" />
           </Box>
-          <PickDate updateStartDateInParent={setStartDate} updateEndDateInParent={setEndDate} />
+          <PickDate
+            updateStartDateInParent={setStartDate}
+            updateEndDateInParent={setEndDate}
+            artistName={artistName}
+            newArtistList={setArtistList}
+            openDialog={setOpenDialog}
+          />
           <p />
-          <BaseInput setConcerts={setConcerts} setUserLocation={setUserLocation} setMapStyle={setMapStyle} setAllConcerts={setAllConcerts} startDate={startDate} endDate={endDate} concerts={concerts} allConcerts={allConcerts} userLocation={userLocation} ref={childRef} />
-          <GetSpotifyPlaylistArtistsWithShows followedArtists={followedArtists} setFollowedArtists={setFollowedArtists} startDate={startDate} endDate={endDate}/>
+          <BaseInput
+            setConcerts={setConcerts}
+            setUserLocation={setUserLocation}
+            setMapStyle={setMapStyle}
+            setAllConcerts={setAllConcerts}
+            startDate={startDate}
+            endDate={endDate}
+            concerts={concerts}
+            allConcerts={allConcerts}
+            userLocation={userLocation}
+            updateArtistNameInParent={(value) => setArtistName(value)}
+            newArtistList={setArtistList}
+            artistListFromParent={artistList}
+            clearArtistListFromParent={() => setArtistList([])}
+            openDialogFromParent={openDialog}
+            closeDialog={() => {
+              setOpenDialog(false);
+            }}
+            ref={childRef}
+          />
+          <GetSpotifyPlaylistArtistsWithShows
+            followedArtists={followedArtists}
+            setFollowedArtists={setFollowedArtists}
+            startDate={startDate}
+            endDate={endDate}
+          />
           <Router>
             <Routes>
               <Route path="/" element={<AuthorizeSpotify />} />
             </Routes>
             <Routes>
-              <Route path="/ShowSpotifyArtists" element={<YourFavoriteSpotifyArtists startDate={startDate} endDate={endDate} followedArtists={followedArtists} setFollowedArtists={setFollowedArtists} />} />
+              <Route
+                path="/ShowSpotifyArtists"
+                element={
+                  <YourFavoriteSpotifyArtists
+                    startDate={startDate}
+                    endDate={endDate}
+                    followedArtists={followedArtists}
+                    setFollowedArtists={setFollowedArtists}
+                  />
+                }
+              />
             </Routes>
           </Router>
-          <p/>
-          <YourSpotifyArtistsWithShows artists={followedArtists} onChildClick={handleChildClick}/>
-          <ConcertList setConcerts={setConcerts} setAllConcerts={setAllConcerts} concerts={concerts}/>
+          <p />
+          <YourSpotifyArtistsWithShows
+            artists={followedArtists}
+            onChildClick={handleChildClick}
+          />
+          <ConcertList
+            setConcerts={setConcerts}
+            setAllConcerts={setAllConcerts}
+            concerts={concerts}
+          />
         </Grid>
-        <Grid item xs={10} md={5} direction={'row'}>
+        <Grid item xs={10} md={5} direction={"row"}>
           <div id="sharepage">
             <SharePage
               concerts={concerts}
               userLocation={userLocation}
               mapStyle={mapStyle}
-              setPosterName={setPosterName} />
+              setPosterName={setPosterName}
+            />
           </div>
-          <Button id="sharebutton" color="primary" onClick={handleDownloadImage} variant="contained">Share As Image</Button>
+          <Button
+            id="sharebutton"
+            color="primary"
+            onClick={handleDownloadImage}
+            variant="contained"
+          >
+            Share As Image
+          </Button>
         </Grid>
       </Grid>
     </div>

diff --git 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);
+                }}
             />
             <Button
               type="submit"
@@ -274,14 +260,14 @@ const BaseInput = forwardRef(({ setConcerts, setUserLocation, setMapStyle, start
       </Stack>
 
 
-      <Dialog open={open} onClose={handleClose}>
+      <Dialog open={open || openDialogFromParent} onClose={handleClose}>
         <DialogTitle>{"Uhhh? Which one exactly?"}</DialogTitle>
         <DialogContent>
           <DialogContentText>
             There are a few artists with similar names, please pick one.
           </DialogContentText>
           <List>
-            {artistList && <ArtistChoiceList artists={artistList} onArtistClick={submitArtistInfo} />
+            {artistListFromParent && <ArtistChoiceList artists={artistListFromParent} onArtistClick={submitArtistInfo} />
             }
           </List>
           <DialogActions>
@@ -325,4 +311,4 @@ const BaseInput = forwardRef(({ setConcerts, setUserLocation, setMapStyle, start
   );
 });
 
-export default BaseInput;
+export default BaseInput;
diff --git a/src/FetchArtist.js 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;
+};