save songs to user database. doesn't properly show user saved songs y…

…et though

front-end/src/App.js

@@ -3,6 +3,7 @@ import Login from './pages/Login'
 import Dashboard from './dashboard/Dashboard' 
 import Profile from './pages/Profile' 
 import Song from './pages/Song'
+import SavedSongsList from './pages/SavedSongsList'
 import './App.css';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { green, pink } from '@mui/material/colors';
@@ -40,7 +41,10 @@ function App() {
               <Route path="/" element={<Dashboard />} /> 
               <Route path="/profile" element={<Profile />} /> 
               <Route path="/:id" element={<Song />} /> 
-              <Route path="/test" element={<TestML />} /> 
+              <Route path="/test" element={<TestML />} />
+              <Route path="/viewsavedsongs" element={<SavedSongsList />} /> 
+
+
             </Routes> 
           </main>
         </Router>

front-end/src/components/SongCard.js

@@ -0,0 +1,71 @@
+import './SongCard.css' 
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import SkipPreviousIcon from '@mui/icons-material/SkipPrevious';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import SkipNextIcon from '@mui/icons-material/SkipNext';
+import { useTheme } from '@mui/material/styles';
+import Link from '@mui/material/Link';
+import no_url from '../images/no_url.png'
+import { useState, useEffect } from 'react';
+import axios from "axios"
+import {useParams} from 'react-router-dom' 
+
+
+const Song = props => {
+  const [savedSongs, setSavedSongs] = useState(0);
+  const theme = useTheme();
+  // console.log(props) 
+  // console.log("user", props.user);
+
+
+  return (
+    <>
+    <Card className = 'Song'>
+      <span className = "song-id">{props.rank}</span>
+      <Box sx={{ display: 'flex', flexDirection: 'column', width: 160, }}>
+        <CardContent sx={{ flex: '1 0 auto', overflow: 'scroll', height: '70px' }}>
+          <Typography className="song-title" component="div" variant="h5">
+            <Link href={"/" + props.id}>{props.title}</Link>
+          </Typography>
+          <Typography variant="subtitle1" color="text.secondary" component="div">
+            {props.artist} 
+          </Typography>
+        </CardContent>
+        <Box sx={{ display: 'flex', alignItems: 'center', pl: 1, pb: 1 }}>
+          <IconButton aria-label="previous">
+            {theme.direction === 'rtl' ? <SkipNextIcon /> : <SkipPreviousIcon />}
+          </IconButton>
+          <IconButton aria-label="play/pause">
+            <PlayArrowIcon sx={{ height: 38, width: 38 }} />
+          </IconButton>
+          <IconButton aria-label="next">
+            {theme.direction === 'rtl' ? <SkipPreviousIcon /> : <SkipNextIcon />}
+          </IconButton>
+        </Box>
+      </Box>
+      <CardMedia
+        component="img"
+        sx={{ width: 120 }}
+        image={props.cover == "no_url" ? no_url : props.cover} 
+        alt="Album cover"
+      />
+    </Card>
+    <button onClick={() => 
+      axios.get(`${process.env.REACT_APP_BACKEND}/savesong/${props.user}/${props.id}`) 
+      .then(res =>{ 
+          // setSongs(res.data.songs) 
+      })
+      .catch(err => console.log(err))
+    }>SAVE SONG</button>
+
+    </>
+  );
+}  
+
+export default Song 

front-end/src/dashboard/Dashboard.js

@@ -32,14 +32,14 @@ const Dashboard = (props) => {
         });
     }, [])
 
-    useEffect(() => { 
-        console.log(localStorage.getItem('token'))
-        axios.get(`${process.env.REACT_APP_BACKEND}/user`, {
-            headers: { Authorization: `JWT ${localStorage.getItem('token')}` } 
-        })
-        .then(res=>console.log(res)) 
-        .catch(err=>console.log(err))
-    }) 
+    // useEffect(() => { 
+    //     console.log(localStorage.getItem('token'))
+    //     axios.get(`${process.env.REACT_APP_BACKEND}/user`, {
+    //         headers: { Authorization: `JWT ${localStorage.getItem('token')}` } 
+    //     })
+    //     .then(res=>console.log(res)) 
+    //     .catch(err=>console.log(err))
+    // }) 
 
     //placeholder
     const search = '' 
@@ -70,7 +70,9 @@ const Dashboard = (props) => {
                                         cover = {song.url} 
                                         artist = {song.artist} 
                                         id = {song._id} 
-                                        rank = {i + 1} 
+                                        rank = {i + 1}
+                                        // NEED TO VALIDATE IF USER IS SIGNED IN
+                                        user = "638672dfe7e787c5ead8774c" 
                                     />
                                 </Grid> 
                             ) 

front-end/src/pages/SavedSongsList.js

@@ -0,0 +1,108 @@
+import './Dashboard.css' 
+import Header from '../components/Header' 
+import SongCard from '../components/SongCard'
+import { useEffect, useState } from 'react'
+import Typography from '@mui/material/Typography';
+import axios from "axios"
+import Grid from '@mui/material/Grid';
+import CustomPopup from "../components/SongPopup"
+import UserCard from '../components/UserCard' 
+import jwt_decode from "jwt-decode"
+
+const SavedSongsList = (props) => { 
+
+    const [songs, setSongs] = useState([])
+    const [sid, setSid] = useState([])
+    const [search, setSearch] = useState('')
+
+//////**************************************************************** - phoebus */
+
+    // console.log("songs: ", songs);
+    // console.log("sid: ", sid);
+
+    // this gets you list of song ids
+    useEffect(() => { 
+        //********************** hardcoded user, need to validate if user has signed in yet */
+        axios.get(`${process.env.REACT_APP_BACKEND}/allsavedsongs/638672dfe7e787c5ead8774c`) 
+        .then(res =>{ 
+            setSid(res.data.saved_songs) 
+        })
+        .catch(err => console.log(err))
+    }, [])
+
+    // now i need to create a list of song objects to display on the website
+    useEffect(() => { 
+        //********************** hardcoded user, need to validate if user has signed in yet */
+
+        sid.map((sid) =>{
+            axios.get(`${process.env.REACT_APP_BACKEND}/song/${sid}`) 
+            .then(res =>{
+                setSongs(current => [...current, res.data.song]);
+            })
+            .catch(err => console.log(err))
+        })
+    }, [sid])
+
+// current bug: each songid is being added to list of song objects twice
+//////**************************************************************** - phoebus */
+
+
+    // const test = async() => {
+    //     // declare the data fetching function
+    //     const fetchData = async () => {
+    //       const res = await axios.get(`${process.env.REACT_APP_BACKEND}/allsavedsongs/638672dfe7e787c5ead8774c`);
+    //       res.data.saved_songs.map((sid) =>{
+    //         axios.get(`${process.env.REACT_APP_BACKEND}/song/${sid}`) 
+    //         .then(res =>{
+    //             setSongs(current => [...current, res.data.song]);
+    //         })
+    //         .catch(err => console.log(err));
+
+    //     })
+
+
+
+    return ( 
+        <>
+        <div> 
+            <Header setSearch={setSearch}/> 
+            <Grid container spacing ={4} justifyContent='center' padding='20px'> 
+                <Grid item xs={12} md={6}>
+                    <Typography component="h2" variant="h2" padding='20px' sx={{fontSize: '24px'}}>
+                        Current Top Hits 
+                    </Typography>
+                    <Grid container spacing={4} justifyContent='center' padding='20px'> 
+                        {songs
+                        .filter(song => { 
+                            if (song === []) return song; 
+                            else if (song.title.toLowerCase().includes(search.toLowerCase())) return song; 
+                            return ''; 
+                        })
+                        .map((song, i) => { 
+                            return (
+                                <Grid md ={6}>
+                                    <SongCard 
+                                        title = {song.title} 
+                                        cover = {song.url} 
+                                        artist = {song.artist} 
+                                        id = {song._id} 
+                                        rank = {i + 1}
+                                        // NEED TO VALIDATE IF USER IS SIGNED IN
+                                        user = "638672dfe7e787c5ead8774c" 
+                                    />
+                                </Grid> 
+                            ) 
+                        })}
+                    </Grid>
+
+                </Grid> 
+
+            </Grid>
+
+        </div>
+        </>
+
+    )
+}
+
+export default SavedSongsList 

front-end/src/pages/Test.js

@@ -1,31 +1,31 @@
-// import React from 'react';
-// import axios from 'axios';
-// import {useState} from 'react'; 
+import React from 'react';
+import axios from 'axios';
+import {useState} from 'react'; 
 
-// const Test = () => {
-//     const [songs, setSongs] = useState([]) 
+const Test = () => {
+    const [songs, setSongs] = useState([]) 
 
-//     // componentDidMount() {
-//       // axios.get(`http://localhost/8888/getAllSongs`)
-//       //   .then(res => {
-//       //     const songs = res.data;
-//       //     this.setState({ songs });
-//       //   })
-//     // }
+    componentDidMount() {
+      axios.get(`http://localhost/8888/allsavedsongs`)
+        .then(res => {
+          const songs = res.data;
+          this.setState({ songs });
+        })
+    }
 
-//     // render() {
-//       // return (
-//       //   <ul>
-//       //     {
-//       //       this.state.songs
-//       //         .map(song =>
-//       //           <li key={song.id}>{song.title}</li>
-//       //         )
-//       //     }
-//       //     haha
-//       //   </ul>
-//       // )
-//     // }
-//   }
+    // render() {
+      // return (
+      //   <ul>
+      //     {
+      //       this.state.songs
+      //         .map(song =>
+      //           <li key={song.id}>{song.title}</li>
+      //         )
+      //     }
+      //     haha
+      //   </ul>
+      // )
+    // }
+  }
 
-//   export default Test 
+  export default Test