diff --git a/backend/viber/urls.py b/backend/viber/urls.py index 83d2663..dbfcc63 100644 --- a/backend/viber/urls.py +++ b/backend/viber/urls.py @@ -10,7 +10,8 @@ path('getSearches//', views.getSearches, name='getSearches'), path('getFriends//', views.getFriends, name='getFriends'), path('delFriend/', views.delFriend, name='delFriend'), - path('addFriend/', views.addFriend, name='addFriend') - + path('addFriend/', views.addFriend, name='addFriend'), + path('getFavSong//', views.getFavSong, name='getFavSong'), + path('setFavSong/', views.setFavSong, name='setFavSong') ] \ No newline at end of file diff --git a/backend/viber/views.py b/backend/viber/views.py index 97cece2..d812a8d 100644 --- a/backend/viber/views.py +++ b/backend/viber/views.py @@ -159,4 +159,14 @@ def addFriend(request): userID = body["currUser"] friendID = body["friend"] - return JsonResponse({}) \ No newline at end of file + return JsonResponse({}) + +def getFavSong(request, id): + return JsonResponse({"song" : "Nikki - Logic"}) + +@csrf_exempt #remove the security checks for post request +def setFavSong(request): + if request.method == 'POST': + body = json.loads(request.body) + userID = body["UID"] + newSong = body["song"] \ No newline at end of file diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 89ef76a..0999bf3 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -6059,6 +6059,11 @@ "strip-eof": "^1.0.0" } }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" + }, "exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -12600,6 +12605,22 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "react-modal": { + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.11.2.tgz", + "integrity": "sha512-o8gvvCOFaG1T7W6JUvsYjRjMVToLZgLIsi5kdhFIQCtHxDkA47LznX62j+l6YQkpXDbvQegsDyxe/+JJsFQN7w==", + "requires": { + "exenv": "^1.2.0", + "prop-types": "^15.5.10", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + } + }, "react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -15438,6 +15459,14 @@ "makeerror": "1.0.x" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "1.7.4", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.4.tgz", diff --git a/frontend/package.json b/frontend/package.json index fb9e039..31748e8 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,6 +12,7 @@ "js-cookie": "^2.2.1", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-modal": "^3.11.2", "react-router-dom": "^5.2.0", "react-router-native": "^5.2.0", "react-scripts": "4.0.0", diff --git a/frontend/src/components/UserInfo.js b/frontend/src/components/UserInfo.js index cb69889..9317a2d 100644 --- a/frontend/src/components/UserInfo.js +++ b/frontend/src/components/UserInfo.js @@ -2,9 +2,10 @@ import React, { useState, useEffect } from 'react'; import axios from 'axios'; import { Text, Grid, Box, Button, Anchor, Form, FormField, TextInput } from 'grommet'; import { useHistory } from "react-router-dom"; - +import Modal from 'react-modal'; import SongComponent from './SongComponent'; +import EditableText from './EditableText' export default function UserInfo(props) { @@ -14,6 +15,38 @@ export default function UserInfo(props) { // history.push('/someRoute') + let customStyles = { + overlay: { backgroundColor: 'rgba(255, 255, 255, .90)' }, + content: { + top: '50%', + left: '50%', + right: 'auto', + bottom: 'auto', + width: '50%', + height: '50%', + padding: '0px', + marginRight: '-50%', + border: '', + transform: 'translate(-50%, -50%)' + } + }; + + var subtitle; + const [modalIsOpen, setIsOpen] = React.useState(false); + function openModal() { + setIsOpen(true); + } + + function afterOpenModal() { + // references are now sync'd and can be accessed. + // subtitle.style.color = '#f00'; + } + + function closeModal() { + setIsOpen(false); + } + + // const token = "BQAD4pJHqlvDpcne93XTG7S1rr09ik0H7unN8aH7bTBdpr-berpK_om4qW1JhLTullh-miTq8zrruznHFW4dviMyHyg79wig4ImJs0Vbxi-rOxsj-POxSZ_A_rTz6_AXf_e92dcP95n8o5ExBpNGaqGl5cGWrx6l" const token = props.token; @@ -37,9 +70,24 @@ export default function UserInfo(props) { {userInfo ?
-

Hello {userInfo.display_name}

+

+ Hello: + {userInfo.display_name} +

+ */} + + + +

Previous Searches

- +
@@ -56,11 +104,11 @@ export default function UserInfo(props) {

Friends

- + - +
@@ -77,6 +125,58 @@ export default function UserInfo(props) { ) } +function EditUser(props) { + return ( + + + + Spotify ID: {props.userInfo.display_name} + + Followers Favorite Songs: [] + + Most Searched Genres: Pop + + + + + + ) +} + +function FavoriteSong(props) { + const [favSong, setFavSong] = React.useState(null); + + useEffect(() => { + + axios.get(`http://127.0.0.1:8000/viber/getFavSong/${props.userInfo.display_name}/`) + .then(res => { + setFavSong(res.data.song); + }) + }, [favSong]); + + let updateFavSong = (newSong) => { + + }; + + return ( + +

My Favorite Song: (Click on text below to edit)

+ {/* setValue(event.target.value)} + + /> */} + {favSong ? + + : + 'Loading...' + } + + + ); +} + function PreviousSearches(props) { const [searches, setSearches] = useState(null); @@ -92,14 +192,14 @@ function PreviousSearches(props) { let viewPlaylist = (songID) => { props.history.push({ pathname: `/playlist/${songID}` }); } - + if (searches == null) { return ("LOADING...") } else { return ( - {searches.map((song, index) => ( viewPlaylist(song.track_id)}/>))} + {searches.map((song, index) => ( viewPlaylist(song.track_id)} />))} ) } @@ -121,7 +221,7 @@ function DisplayFriends(props) { return ("LOADING...") } else { return ( - friends.map((friend, index) => ()) + friends.map((friend, index) => ()) ) } } @@ -131,22 +231,22 @@ function Friend(props) { const [confirmDelete, setConfirmDelete] = useState(false); let deleteFriend = () => { - axios.post(`http://127.0.0.1:8000/viber/delFriend/`, {currUser: props.currUser.display_name, friend: props.friend.display_name}) - .then(res => { - props.history.push({ pathname: "/empty" }); - props.history.replace({ pathname: "/userinfo" }); - }) + axios.post(`http://127.0.0.1:8000/viber/delFriend/`, { currUser: props.currUser.display_name, friend: props.friend.display_name }) + .then(res => { + props.history.push({ pathname: "/empty" }); + props.history.replace({ pathname: "/userinfo" }); + }) } return (

{props.friend.display_name}

- - {confirmDelete ? - Confirm Delete