From 940111a8d2248699d8f08630d02b81729d7e7f7a Mon Sep 17 00:00:00 2001 From: Sohail Khan Date: Thu, 5 Nov 2020 13:59:25 -0600 Subject: [PATCH 1/2] save point --- frontend/package-lock.json | 29 +++++++ frontend/package.json | 1 + frontend/src/components/UserInfo.js | 119 +++++++++++++++++++++------- 3 files changed, 122 insertions(+), 27 deletions(-) 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..10795aa 100644 --- a/frontend/src/components/UserInfo.js +++ b/frontend/src/components/UserInfo.js @@ -2,6 +2,7 @@ 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'; @@ -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} */} +

{/* {JSON.stringify(userInfo)} */} + {/* */} + + + +

Previous Searches

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

Friends

- + - +
@@ -77,6 +125,23 @@ export default function UserInfo(props) { ) } +function EditUser(props) { + return( + + + + Spotify ID: {props.userInfo.display_name} + + My Favorite Song: {props.userInfo.display_name} + + Followers Favorite Songs: {props.userInfo.display_name} + + Most Searched Genres: {props.userInfo.display_name} + + + ) +} + function PreviousSearches(props) { const [searches, setSearches] = useState(null); @@ -92,14 +157,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 +186,7 @@ function DisplayFriends(props) { return ("LOADING...") } else { return ( - friends.map((friend, index) => ()) + friends.map((friend, index) => ()) ) } } @@ -131,22 +196,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 */} @@ -85,7 +85,7 @@ export default function UserInfo(props) { style={customStyles} contentLabel="Example Modal" > - + + Spotify ID: {props.userInfo.display_name} - - My Favorite Song: {props.userInfo.display_name} - Followers Favorite Songs: {props.userInfo.display_name} + Followers Favorite Songs: [] + + Most Searched Genres: Pop + + - Most Searched Genres: {props.userInfo.display_name} ) } +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);