Ui

backend/viber/urls.py

@@ -10,7 +10,8 @@
     path('getSearches/<str:id>/', views.getSearches, name='getSearches'),
     path('getFriends/<str:id>/', views.getFriends, name='getFriends'),
     path('delFriend/', views.delFriend, name='delFriend'),
-    path('addFriend/', views.addFriend, name='addFriend')
-
+    path('addFriend/', views.addFriend, name='addFriend'),
+    path('getFavSong/<str:id>/', views.getFavSong, name='getFavSong'),
+    path('setFavSong/', views.setFavSong, name='setFavSong')
 
 ]

backend/viber/views.py

@@ -159,4 +159,14 @@ def addFriend(request):
         userID = body["currUser"]
         friendID = body["friend"]
 
-    return JsonResponse({})
+    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"]

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",

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 ?
 
                 <div>
-                    <h1>Hello <Anchor target="_blank" href={userInfo.external_urls.spotify}><Text size="xlarge" color="brand">{userInfo.display_name}</Text></Anchor></h1>
+                    <h1>
+                        Hello:
+                        <Anchor target="_blank" href={userInfo.external_urls.spotify}><Text size="xlarge" color="brand">{userInfo.display_name}</Text></Anchor>
+                    </h1>
+                    <Button onClick={openModal} hoverIndicator={true} primary={true} label="More Info" />
                     {/* {JSON.stringify(userInfo)} */}
 
+                    {/* <button onClick={openModal}>Open Modal</button> */}
+                    <Modal
+                        isOpen={modalIsOpen}
+                        onAfterOpen={afterOpenModal}
+                        onRequestClose={closeModal}
+                        style={customStyles}
+                        contentLabel="Example Modal"
+                    >
+                        <EditUser userInfo={userInfo} />
+                    </Modal>
+
                     <Box
                         direction="row"
                         // border={{ color: 'brand', size: 'large' }}
@@ -48,19 +96,19 @@ export default function UserInfo(props) {
                         <Box style={{ height: '500px', width: '80%' }} overflow="scroll" margin="large" pad="medium" background="dark-3">
                             <div>
                                 <h2>Previous Searches</h2>
-                                <PreviousSearches userInfo={userInfo} history={history}/>
+                                <PreviousSearches userInfo={userInfo} history={history} />
                             </div>
                         </Box>
 
                         <Box overflow="scroll" style={{ height: '500px', width: '80%' }} margin="large" pad="medium" background="dark-3">
                             <div>
                                 <h2>Friends</h2>
                                 <Box margin="small" pad="small" background="light-3">
-                                    <AddFriend userInfo={userInfo} history={history}/>
+                                    <AddFriend userInfo={userInfo} history={history} />
                                 </Box>
 
                                 <Box overflow="scroll">
-                                    <DisplayFriends userInfo={userInfo} history={history}/>
+                                    <DisplayFriends userInfo={userInfo} history={history} />
                                 </Box>
                             </div>
                         </Box>
@@ -77,6 +125,58 @@ export default function UserInfo(props) {
     )
 }
 
+function EditUser(props) {
+    return (
+
+        <Box pad="medium" border={{ color: 'brand', size: 'large' }} style={{ width: '100%', height: '100%' }}>
+
+            <Text size="large" >Spotify ID: <Text size="medium" color="brand">{props.userInfo.display_name}</Text></Text>
+
+            <Text size="large" >Followers Favorite Songs: <Text size="medium" color="brand">[]</Text></Text>
+
+            <Text size="large" >Most Searched Genres: <Text size="medium" color="brand">Pop</Text></Text>
+
+            <FavoriteSong userInfo={props.userInfo}/>
+
+        </Box>
+
+    )
+}
+
+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 (
+        <Box>
+            <h3>My Favorite Song: (Click on text below to edit)</h3>
+            {/* <TextInput
+                placeholder="type here"
+                value={value}
+                onChange={event => setValue(event.target.value)}
+
+            /> */}
+            {favSong ? 
+                <EditableText value={favSong} callback = {updateFavSong} editClassName="form-control"/>
+                :
+                'Loading...'
+            }
+
+        </Box>
+    );
+}
+
 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 (
 
             <Box>
-                {searches.map((song, index) => (<SongComponent key={song.track_id} song={song} onClick={() => viewPlaylist(song.track_id)}/>))}
+                {searches.map((song, index) => (<SongComponent key={song.track_id} song={song} onClick={() => viewPlaylist(song.track_id)} />))}
             </Box>
         )
     }
@@ -121,7 +221,7 @@ function DisplayFriends(props) {
         return ("LOADING...")
     } else {
         return (
-            friends.map((friend, index) => (<Friend key={friend.display_name} currUser={props.userInfo} friend={friend} history={props.history}/>))
+            friends.map((friend, index) => (<Friend key={friend.display_name} currUser={props.userInfo} friend={friend} history={props.history} />))
         )
     }
 }
@@ -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 (
         <Box margin="small" pad="small" background="light-3">
             <h3>{props.friend.display_name}</h3>
-            
-            {confirmDelete ? 
-                <span>Confirm Delete<Button hoverIndicator={true} color="status-error" label="Yes" onClick={() => {deleteFriend()}}/></span>
+
+            {confirmDelete ?
+                <span>Confirm Delete<Button hoverIndicator={true} color="status-error" label="Yes" onClick={() => { deleteFriend() }} /></span>
                 :
-                <Button hoverIndicator={true} color="status-error" label="Delete" onClick={() => {setConfirmDelete(true)}}/>
+                <Button hoverIndicator={true} color="status-error" label="Delete" onClick={() => { setConfirmDelete(true) }} />
             }
 
 
@@ -161,26 +261,26 @@ function AddFriend(props) {
 
 
     let addFriendCall = () => {
-        
+
         if (validate()) {
-            axios.post(`http://127.0.0.1:8000/viber/addFriend/`, {currUser: props.userInfo.display_name, friend: value.username})
-            .then(res => {
-                props.history.push({ pathname: "/empty" });
-                props.history.replace({ pathname: "/userinfo" });
-            }) 
+            axios.post(`http://127.0.0.1:8000/viber/addFriend/`, { currUser: props.userInfo.display_name, friend: value.username })
+                .then(res => {
+                    props.history.push({ pathname: "/empty" });
+                    props.history.replace({ pathname: "/userinfo" });
+                })
         }
-        
+
     }
 
     let validate = () => {
 
-        if(!value.hasOwnProperty('username') || value.username.trim() == ""){
-            setErrors({"username": "Enter a name"});
+        if (!value.hasOwnProperty('username') || value.username.trim() == "") {
+            setErrors({ "username": "Enter a name" });
             return false;
         }
 
         return true;
-        
+
     }
 
     return (
@@ -190,7 +290,7 @@ function AddFriend(props) {
             onReset={() => setValue({})}
             onSubmit={addFriendCall}
             errors={errors}
-            // onValidate={validate}
+        // onValidate={validate}
         >
             <FormField name="username" htmlfor="text-input-id" label="Username">
                 <TextInput id="text-input-id" name="username" />