lol delete functionality implemented

taver-ca · Feb 5, 2024 · 4a7d54b · 4a7d54b
1 parent de647e0
commit 4a7d54b
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.7",
     "@mui/material": "^5.15.7",
     "@react-google-maps/api": "^2.19.2",
     "@testing-library/jest-dom": "^5.17.0",

diff --git a/src/App.js b/src/App.js
@@ -66,7 +66,7 @@ function App() {
                 <Route path="/ShowSpotifyArtists" element={<YourFavoriteSpotifyArtists onChildClick={handleChildClick} startDate={startDate} endDate={endDate} />} />
               </Routes>
             </Router>
-            <ConcertList concerts={concerts}></ConcertList>
+            <ConcertList setConcerts={setConcerts} setAllConcerts={setAllConcerts} concerts={concerts}></ConcertList>
           </Grid>
           <Grid item xs={6} md={6}>
             {isLoaded ? <Map concerts={concerts} userLocation={userLocation} mapStyle={mapStyle} /> : null}
@@ -79,7 +79,7 @@ function App() {
           spacing={2}>
           <Stack item xs={10} md={10} sx={{ display: { xs: 'flex', md: 'flex' } }}>
             <PickDate updateStartDateInParent={setStartDate} updateEndDateInParent={setEndDate} />
-            <BaseInput setConcerts={setConcerts} setUserLocation={setUserLocation} setMapStyle={setMapStyle}  setAllConcerts={setAllConcerts} startDate={startDate} endDate={endDate} concerts = {concerts} allConcerts = {allConcerts} userLocation={userLocation} ref={childRef} />
+            <BaseInput setConcerts={setConcerts} setUserLocation={setUserLocation} setMapStyle={setMapStyle} setAllConcerts={setAllConcerts} startDate={startDate} endDate={endDate} concerts = {concerts} allConcerts = {allConcerts} userLocation={userLocation} ref={childRef} />
             <Router>
             <Routes>
                 <Route path="/" element={<AuthorizeSpotify />} />
@@ -88,7 +88,7 @@ function App() {
                 <Route path="/ShowSpotifyArtists" element={<YourFavoriteSpotifyArtists onChildClick={handleChildClick} startDate={startDate} endDate={endDate} />} />
               </Routes>
             </Router>
-            <ConcertList concerts={concerts}></ConcertList>
+            <ConcertList setConcerts={setConcerts} setAllConcerts={setAllConcerts} concerts={concerts}></ConcertList>
           </Stack>
           <Stack item xs={2} md={2} sx={{ display: { xs: 'flex', md: 'flex' } }}>
             {isLoaded ? <Map concerts={concerts} userLocation={userLocation} mapStyle={mapStyle} /> : null}

diff --git a/src/BaseInput.js b/src/BaseInput.js
@@ -74,7 +74,7 @@ const BaseInput = forwardRef(({ setConcerts, setUserLocation, setMapStyle, start
         if (resJson.length < 1) {
           return;
         }
-        console.log(`resJson: ${resJson}`);
+        console.log(`resJson: ${resJson.length}`);
         console.log(`add incoming concerts into allconcerts`);
         console.log(`total Number Of Concerts Memorized: ${allConcerts.length}`);
         setAllConcerts((prev) => prev.concat(resJson), sortArtist(allConcerts.concat(resJson), userLocation));

diff --git a/src/ConcertList.js b/src/ConcertList.js
@@ -7,6 +7,10 @@ import ListItemAvatar from '@mui/material/ListItemAvatar';
 import Avatar from '@mui/material/Avatar';
 import Chip from '@mui/material/Chip';
 import { Stack } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+
 class ConcertList extends React.Component {
     constructor(props) {
         super(props);
@@ -16,16 +20,18 @@ class ConcertList extends React.Component {
         }
     }
 
+
     componentDidUpdate(prevProps) {
         if (prevProps.concerts !== this.props.concerts) {
-          this.setState({
-            concerts: this.props.concerts
-          });
+            this.setState({
+                concerts: this.props.concerts
+            });
         }
     }
 
     // Display spotify token 
     render() {
+
         const renderConcertList =
             this.state.concerts.map((concert, index) => {
                 return (
@@ -44,19 +50,38 @@ class ConcertList extends React.Component {
                             <ListItemText
                                 primary={`${concert.title}`}
                                 secondary={
-                                    <React.Fragment><Stack direction="row" spacing={1}>
-                                        <Chip color="primary" label={`${concert.location.name}`} />
-                                        <Chip color="primary" label={`${concert.date}`} />
-                                    </Stack>
+                                    <React.Fragment>
+                                        <Stack direction="row" spacing={1}>
+                                            <Chip color="primary" label={`${concert.location.name}`} />
+                                            <Chip color="primary" label={`${concert.date}`} />
+                                            <IconButton onClick={
+                                                () => {
+                                                    //alert(`You clicked the button! artist is ${concert.artist}`);
+                                                    //remove concerts of artist from local copy of concert list 
+                                                    console.log(`who we are deleting: ${concert.artist}`);                                                    
+                                                    var newConcerts = this.state.concerts;
+                                                    console.log(`concerts length before operation: ${newConcerts.length}`);
+                                                    var filteredConcerts = newConcerts.filter((concertInQuestion) => 
+                                                    {
+                                                        console.log(`${concertInQuestion.artist} vs ${concert.artist}`);
+                                                        return concertInQuestion.artist !== concert.artist;
+                                                    });
+                                                    console.log(`concerts length after operation: ${filteredConcerts.length}`);
+                                                    this.componentDidUpdate(filteredConcerts);
+                                                    //set the new concert list 
+                                                    this.props.setConcerts(filteredConcerts, this.props.setAllConcerts((prev) => prev.filter((concertInQuestion) => concertInQuestion.artist === concert.artist)));
+                                                }
+                                            } aria-label="delete">
+                                                <DeleteIcon sx={{ color: "red" }}/>
+                                            </IconButton>
+                                        </Stack>
                                     </React.Fragment>
                                 } />
                         </ListItemButton>
                     </ListItem>
                 );
             });
 
-
-
         return <div>
             <p>Upcoming Concerts: </p>
             <List

diff --git a/src/PickDate.js b/src/PickDate.js
@@ -10,8 +10,6 @@ function PickDate({ updateStartDateInParent, updateEndDateInParent }) {
     const oneYearFromNow = new Date(today);
     oneYearFromNow.setFullYear(today.getFullYear() + 1);
 
-
-
     const [startDate, setStartDate] = useState(cachedStartDate === null ? new Date() : new Date(cachedStartDate));
     const [endDate, setEndDate] = useState(cachedEndDate === null ? oneYearFromNow : new Date(cachedEndDate));