Merge branch 'main' of https://github.com/msrjr91/Rhythmic into mei

client/src/assets/songs.js

@@ -0,0 +1,78 @@
+import comeonout from './music/zombiescomeonout.mp3'
+import fleshandbone from './music/zombiesfleshandbone.mp3'
+import alieninvasion from './music/zombiesalieninvasion.mp3'
+import spiderwebs from './music/nodoubtspiderwebs.mp3'
+import bang from './music/ajrbang.mp3'
+import thunder from './music/imaginethunder.mp3'
+import holiday from './music/turnstileholiday.mp3'
+import subdiv from './music/rushsubdivisions.mp3'
+import flybynight from './music/rushflybynight.mp3'
+import spirit from './music/rushspiritofradio.mp3'
+import limelight from './music/rushlimelight.mp3'
+import arcana from './music/behemotharcana.mp3'
+import needles from './music/deftonesneedlesandpins.mp3'
+import combustion from './music/meshuggahobzen.mp3'
+import bleed from './music/meshuggahbleed.mp3'
+import electricred from './music/meshuggahelectricred.mp3'
+
+
+const tracks = [
+    {
+        "postId": 21,
+        "song": spiderwebs
+    },
+    {
+        "postId": 31,
+        "song": electricred
+    },
+    {
+        "postId": 22,
+        "song": bang
+    },
+    {
+        "postId": 23,
+        "song": holiday
+    },
+    {
+        "postId": 24,
+        "song": needles
+    },
+    {
+        "postId": 25,
+        "song": thunder
+    },
+    {
+        "postId": 26,
+        "song": limelight
+    },
+    {
+        "postId": 27,
+        "song": spirit
+    },
+    {
+        "postId": 28,
+        "song": flybynight
+    },
+    {
+        "postId": 29,
+        "song": arcana
+    },
+    {
+        "postId": 30,
+        "song": subdiv
+    },
+    {
+        "postId": 32,
+        "song": comeonout
+    },
+    {
+        "postId": 33,
+        "song": fleshandbone
+    },
+    {
+        "postId": 34,
+        "song": alieninvasion
+    }
+]
+
+export default tracks

client/src/pages/Home.js

@@ -1,5 +1,9 @@
 import React, { useState, useContext } from 'react'
 import { DataContext } from '../DataContext'
+import React from 'react'
+// import { DataProvider} from '../DataProvider'
+import { useState, useContext } from 'react'
+import tracks from '../assets/songs'
 
 export default function Home(props) {
   const { comments, users, posts } = useContext(DataContext)
@@ -49,6 +53,14 @@ export default function Home(props) {
       return null
     }
   }
+  const song = (post) => {
+    const postSong = tracks.find(track => track.postId === post.id)
+    if(postSong){
+        return postSong.song
+    } else {
+        return null
+    }
+}
 
   // Test Comments
   // console.log("COMMENTS",comments)
@@ -72,6 +84,7 @@ export default function Home(props) {
                     <h3 className='p-artist'> {posterName(post)} </h3>
                   </div>
                   <div className='track-content'>
+                    <audio controls src={song(post)}/>
                     <p> {post['content']} </p>
                     <form className='comment-form'>
                       <input 

client/src/pages/Profile.js

@@ -2,17 +2,14 @@ import React, { useState, useEffect, useContext } from 'react'
 import { DataContext } from '../DataContext'
 import axios from 'axios'
 import { useNavigate } from 'react-router-dom'
+import tracks from '../assets/songs'
 
 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)
@@ -84,33 +81,14 @@ export default function Profile(){
           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 song = (post) => {
+        const postSong = tracks.find(track => track.postId === post.id)
+        if(postSong){
+            return postSong.song
+        } else {
+            return null
+        }
+    }
 
     const getComments = async () => {
         const response = await axios.get(`${URL}comments/user/${user.user.id}`)
@@ -138,28 +116,28 @@ export default function Profile(){
         <div className="profile">
         <img src={profileUser.avatar}/>
         <section className="profile-header"> 
-                <h2 style={{color: 'white'}}>
-                  {profileUser.username} / {profileUser.name}
-                </h2>
-                <button className="registerbtn" onClick={() => navigate('/profile/update')}>Update Profile</button>
-            <figure style={{marginLeft: '70vw'}}>
-                <figcaption style={{color: 'white'}}>
-                    Currently listening to..
-                </figcaption>
-                <audio controls src='null'/>
-            </figure> 
+          <h2 style={{color: 'white'}}>
+            {profileUser.username} / {profileUser.name}
+          </h2>
+          <figure style={{marginLeft: '70vw'}}>
+            <figcaption style={{color: 'white'}}>
+              Currently listening to..
+            </figcaption>
+            <audio controls src='null'/>
+          </figure>
+                <button className="registerbtn" onClick={() => navigate('/update')}>Update Profile</button>
         </section>
-
         <section className="profile-body">
           <div className="profile-body-inner">
+            <h3>Followers</h3>
             {
                 (allUsers && followers)?
-                <div className='profilefeed1' style={{border: '2px solid white'}}>Following/Liked Artists/Fans
+                <div className='profilefeed1'>
                 {
                     followers.map((follower)=>{
                         return (
                         <div key={follower.id}>
-                            <img src={followerAvatar(follower)}/>
+                            <img style={{width: '5vw'}} src={followerAvatar(follower)}/>
                             <h6>{followerName(follower)}</h6>
                         </div>
                     )
@@ -171,16 +149,17 @@ export default function Profile(){
 
 
             <div className="profile-body-inner">
+                <h3>Posts</h3>
                 {
                     (posts)?
-                    <div className='profilefeed2' style={{border: '2px solid white'}}>Albums/Songs/Playlists
+                    <div className='profilefeed2'>
                     {
                     posts.map((post)=>{
-                        // console.log(post.content)
                         return (
                         <div key={post.id}>
                             <img src={posterAvatar(post)}/>
                             <h6>{posterName(post)}</h6>
+                            <audio controls src={song(post)}/>
                             <p>{post.content}</p>
                         </div>
                         )
@@ -191,7 +170,7 @@ export default function Profile(){
 
             {
                 (comments)?
-                <div className='profilefeed3' style={{border: '2px solid white'}}>
+                <div className='profilefeed3'>
                 {
                 comments.map((comment)=>{
                     console.log(comment.content)

client/src/styles/App.css

@@ -52,6 +52,8 @@
   background-color: rgb(216, 161, 103);
   font-style: italic;
   font-size: 13px;
+  font-weight: bold;
+  margin-bottom: 2vh;
 }
 
 .registerbtn:hover {
@@ -236,7 +238,8 @@
 .artists-ctn {
     padding-left: 20px;
     text-align: center;
-
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
 }
 
 .artists-ctn img {
@@ -323,4 +326,10 @@
         width: 40vw;
         border-radius: 8px;
         background: rgba(255, 255, 255, 0.3);
-}
+}
+
+.profilefeed1{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+}
+