From 94d58237fc12ab76a8485085becddfa47975f156 Mon Sep 17 00:00:00 2001 From: phoebusyip <110261461+phoebusyip@users.noreply.github.com> Date: Thu, 1 Dec 2022 21:18:23 -0500 Subject: [PATCH] save songs to user database. doesn't properly show user saved songs yet though --- front-end/src/App.js | 6 +- front-end/src/components/SongCard.js | 71 ++++++++++++++ front-end/src/dashboard/Dashboard.js | 20 ++-- front-end/src/pages/SavedSongsList.js | 108 ++++++++++++++++++++++ front-end/src/pages/Test.js | 54 +++++------ package-lock.json | 1 - server/__pycache__/models.cpython-310.pyc | Bin 1871 -> 1871 bytes server/__pycache__/routes.cpython-310.pyc | Bin 2475 -> 2475 bytes server/app.js | 68 ++++++++++++-- server/models/User.js | 7 +- 10 files changed, 285 insertions(+), 50 deletions(-) create mode 100644 front-end/src/components/SongCard.js create mode 100644 front-end/src/pages/SavedSongsList.js diff --git a/front-end/src/App.js b/front-end/src/App.js index ffd4300..95ce03e 100644 --- a/front-end/src/App.js +++ b/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() { } /> } /> } /> - } /> + } /> + } /> + + diff --git a/front-end/src/components/SongCard.js b/front-end/src/components/SongCard.js new file mode 100644 index 0000000..e3b1949 --- /dev/null +++ b/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 ( + <> + + {props.rank} + + + + {props.title} + + + {props.artist} + + + + + {theme.direction === 'rtl' ? : } + + + + + + {theme.direction === 'rtl' ? : } + + + + + + + + + ); +} + +export default Song \ No newline at end of file diff --git a/front-end/src/dashboard/Dashboard.js b/front-end/src/dashboard/Dashboard.js index add0848..004175e 100644 --- a/front-end/src/dashboard/Dashboard.js +++ b/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" /> ) diff --git a/front-end/src/pages/SavedSongsList.js b/front-end/src/pages/SavedSongsList.js new file mode 100644 index 0000000..042b4f8 --- /dev/null +++ b/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 ( + <> +
+
+ + + + Current Top Hits + + + {songs + .filter(song => { + if (song === []) return song; + else if (song.title.toLowerCase().includes(search.toLowerCase())) return song; + return ''; + }) + .map((song, i) => { + return ( + + + + ) + })} + + + + + + +
+ + + ) +} + +export default SavedSongsList \ No newline at end of file diff --git a/front-end/src/pages/Test.js b/front-end/src/pages/Test.js index 22dd1af..1fdbb8c 100644 --- a/front-end/src/pages/Test.js +++ b/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 ( -// //
    -// // { -// // this.state.songs -// // .map(song => -// //
  • {song.title}
    • -// // ) -// // } -// // haha -// //
-// // ) -// // } -// } + // render() { + // return ( + //
    + // { + // this.state.songs + // .map(song => + //
  • {song.title}
    • + // ) + // } + // haha + //
+ // ) + // } + } -// export default Test \ No newline at end of file + export default Test \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 67a711d..366d1f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,6 @@ "": { "name": "webscrape", "version": "1.0.0", - "hasInstallScript": true, "license": "ISC", "dependencies": { "cookie-parser": "1.3.2", diff --git a/server/__pycache__/models.cpython-310.pyc b/server/__pycache__/models.cpython-310.pyc index 7d681b7926238a2711d82f06dc9e8c71454e3f76..9f4a7fab635e1d5152ad78f109da43dcf9931d16 100644 GIT binary patch delta 20 acmX@lcb< { console.log(`stdout: ${data}`); }); -childPython.stderr.on('data', (data) => { - console.error(`stderr: ${data}`); -}); - -childPython.on('close', (code) => { - console.log(`child process exited with code ${code}`); -}); +// childPython.stderr.on('data', (data) => { +// console.error(`stderr: ${data}`); +// }); +// childPython.on('close', (code) => { +// console.log(`child process exited with code ${code}`); +// }); const mongoose = require("mongoose"); //configure mongoose @@ -104,11 +108,55 @@ app.get('/allsongs', async (req,res)=>{ }) } }) +///////////////////////////////////// -- login stuff - phoebus + +// allow user to save a song name under his account +app.get('/savesong/:user/:songid', async (req, res) => { + try { + await User.updateOne({ _id: req.params.user }, { $addToSet: { savedSongs: req.params.songid } }); + res.sendStatus(200); + } catch (err) { + res.status(500).json({ error: err.message }); + } +}) + +// allow user to save a song name under his account +// this returns list of ID of user saved songs +app.get('/allsavedsongs/:id', async (req,res)=>{ + try { + const user = await User.findById(req.params.id.trim()) + res.json({ + saved_songs: user.savedSongs, + }) + } catch (err) { + console.error(err) + res.status(400).json({ + success: false, + error: err, + }) + } + }) + + //get a user by its id +app.get('/user/:id', async (req, res) => { + try { + const user = await User.findById(req.params.id.trim()) + res.json({ + user: user, + }) + } catch (err) { + res.status(400).json({ + error: err, + }) + } +}) +///////////////////////////////////////// -- login stuff - phoebus //get a song by its id -app.get('/:id', async (req, res) => { +app.get('/song/:id', async (req, res) => { try { const song = await Song.findById(req.params.id) + console.log("as") res.json({ song: song, }) diff --git a/server/models/User.js b/server/models/User.js index 95635a4..3acfdb1 100644 --- a/server/models/User.js +++ b/server/models/User.js @@ -16,9 +16,12 @@ const userSchema = new mongoose.Schema({ password: { required: true, type: String, + }, + savedSongs: { + type: [String], } }) -const User = mongoose.model('user', userSchema) +const User = mongoose.model('User', userSchema) -module.exports = User \ No newline at end of file +module.exports = User \ No newline at end of file