Merge pull request #88 from msrjr91/ryan

updateprofile button added

client/src/pages/Profile.js

@@ -1,54 +1,112 @@
 import React, { useState, useEffect, useContext } from 'react'
 import { DataContext } from '../DataContext'
 import axios from 'axios'
+import { useNavigate } from 'react-router-dom'
 
 export default function Profile(){
+    let navigate = useNavigate()
     const {user} = useContext(DataContext)
     const {users} = useContext(DataContext)
     const [followers, setFollowers] = useState(null)
+    const [userFollowers, setUserFollowers] = useState(null)
+    const [avatars, setAvatars] = useState([])
+    const [allUsers, setAllUsers] = useState(null)
+    // 
+    const [followerInfo, setFollowerInfo] = useState([])
+
     const [profileUser, setProfileUser] = useState(null)
     const [comments, setComments] = useState(null)
     const [posts, setPosts] = useState(null)
     const URL = `http://localhost:3001/`
 
+    const getAllUsers = async () => {
+        const response = await axios.get(`${URL}users`)
+        setAllUsers(Array.from(response.data))
+        console.log(allUsers)
+    }
+
     const getFollowers = async () => {
         const response = await axios.get(`${URL}followers/user/${user.user.id}`)
-        console.log(response.data)
+        console.log(Array.from(response.data))
+        setFollowers(Array.from(response.data))
     }
+
+    // const posterAvatar = (post) => {
+    //     const userAvatar = users.find(user => user.id === post.userId)
+    //     if(userAvatar){
+    //       return userAvatar.avatar
+    //     } else {
+    //       return null
+    //     }
+    //   }
+
+    // const posterName = (post) => {
+    //     const userName = users.find(user => user.id === post.userId)
+    //     if(userName){
+    //       return userName.username
+    //     } else {
+    //       return null
+    //     }
+    //   }
+
+    // const getFollowerInfo = async () => {
+    //     console.log('working')
+    //     const requests = await followers?.map((follower) => axios.get(URL + 'users/' + follower.followerId))
+    //     console.log(requests)
+    //     const requestResp = await axios.all(requests)?.then((responses) => {
+    //         console.log(responses)
+    //         responses.forEach((resp) => {
+    //             console.log(resp.data)
+    //             setFollowerInfo(followerInfo => [...followerInfo, resp.data])
+    //         })
+    //     })
+    //     console.log(requestResp)
+    // }
+    // console.log(followerInfo)
+
+    // const uniqueArr = followerInfo.filter((item, index) => {
+    //     return index === followerInfo.findIndex(obj => {
+    //       return JSON.stringify(obj) === JSON.stringify(item);
+    //     });
+    //   });
+
+    // const cleanArray = followerInfo.reduce((unique, o) => {
+    //     if(!unique.some(obj => obj.id === o.id)) {
+    //       unique.push(o);
+    //     } 
+    //     return unique;
+    // },[]);
+
     const getComments = async () => {
         const response = await axios.get(`${URL}comments/user/${user.user.id}`)
-        console.log(Array.from(response.data))
         setComments(Array.from(response.data))
     }
 
     const getPosts = async () => {
         const response = await axios.get(`${URL}posts/users/${user.user.id}`)
-        console.log(Array.from(response.data))
         setPosts(Array.from(response.data))
     }
     const getUser = async () => {
         const response = await axios.get(`${URL}users/${user.user.id}`)
-        console.log(response.data)
         setProfileUser(response.data)
-        console.log(profileUser)
     }
 
     useEffect(()=>{
-        console.log(user)
+        getAllUsers()
         getUser()
         getPosts()
         getComments()
         getFollowers()
     },[user])
 
-    return user && comments && posts ? (
+    return user && comments && posts && allUsers ? (
         <div>
-            {console.log(user.user)}
         <img src={'https://i.pravatar.cc/100'}/>
         <section className="profile-header"> 
                 <h2 style={{color: 'white', textShadow: '0 0 10px purple'}}>
                   {profileUser.username} / {profileUser.name}
                 </h2>
+                <button onClick={() => navigate('/updateprofile')}>Update Profile</button>
             <figure style={{marginLeft: '70vw'}}>
                 <figcaption style={{color: 'white', textShadow: '0 0 10px purple'}}>
                     Currently listening to..
@@ -58,15 +116,29 @@ export default function Profile(){
         </section>
 
         <section className="profile-body">
-            <div className='profilefeed1' style={{border: '2px solid white'}}>Following/Liked Artists/Fans</div>
+            {
+                (allUsers && followers)?
+                <div className='profilefeed1' style={{border: '2px solid white'}}>Following/Liked Artists/Fans
+                {
+                    allUsers.map((user)=>{
+                        return (
+                        <div key={user.id}>
+                            <img src={user.avatar}/>
+                            <h6>{user.name}</h6>
+                        </div>
+                    )
+                    })
+                }
+                </div>:null
+            }
                 {
                     (posts)?
                     <div className='profilefeed2' style={{border: '2px solid white'}}>Albums/Songs/Playlists
                     {
                     posts.map((post)=>{
-                        console.log(post.content)
+                        // console.log(post.content)
                         return (
-                        <div>
+                        <div key={post.id}>
                             <p>{post.content}</p>
                         </div>
                         )
@@ -81,7 +153,7 @@ export default function Profile(){
                 {
                 comments.map((comment)=>{
                     console.log(comment.content)
-                    return (<p>{comment.content}</p>)
+                    return (<p key={comment.id}>{comment.content}</p>)
                     })
                 }
                 </div>:null