posts have mp3s

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

@@ -5,6 +5,7 @@ import React from 'react'
 import { useState, useEffect, useContext } from 'react'
 import axios from 'axios'
 import { ScrollView } from 'react'
+import tracks from '../assets/songs'
 
 
 const Home = (props) => {
@@ -18,17 +19,6 @@ const Home = (props) => {
     setFormValues({ ...formValues, [e.target.name]: e.target.value })
   }
 
-  // const [ avatars, setAvatars ] = useState([])
-  //
-  // const getCommentAvatars = () => {
-  //   for(let i = 0; i < comments.length; i++){
-  //     setAvatars(avatars=>[...avatars, "https://i.pravatar.cc/100"])
-
-  //     //axios call for each comment's userId
-  //     //setAvatars based on comment userId's avatar
-  // }}
-  // getCommentAvatars()
-
   const posterAvatar = (post) => {
     const userAvatar = users.find(user => user.id === post.userId)
     if(userAvatar){
@@ -64,6 +54,14 @@ const Home = (props) => {
       return null
     }
   }
+  const song = (post) => {
+    const postSong = tracks.find(track => track.postId === post.id)
+    if(postSong){
+        return postSong.song
+    } else {
+        return null
+    }
+}
 
   console.log("COMMENTS",comments)
 
@@ -83,6 +81,7 @@ const Home = (props) => {
                   <div className='post-div'>
                   <img src={posterAvatar(post)}/>
                   <h3>{posterName(post)}</h3>
+                  <audio controls src={song(post)}/>
                   <p>{post['content']}</p>
 
                   <form className='comment-form'>
@@ -143,30 +142,6 @@ const Home = (props) => {
             )
           })
         }
-
-            {/* {
-              for(let i = 0; i < comments.length; i++)(
-                let avatar = "https://i.pravatar.cc/100"
-                return (
-                  <div className="comment-div">
-                    <img src={avatar}/>
-                    <p>{comment[i]['content']}</p>
-                  </div>
-                ))
-            } */}
-            {/* {
-              comments?.map((comment,index) => {
-                // let avatar = "https://i.pravatar.cc/100"
-                return(
-                  <div className="comment-div">
-                    <img src={comment['avatar']}/>
-                    <p>{comment['content']}</p>
-                  </div>
-
-                  
-                )
-              })
-            } */}
       </div>
       </div>
       </div>
@@ -189,7 +164,7 @@ const Home = (props) => {
               if(user.isArtist === true){
                 return (
                 <h2>
-                  <img src={user['avatar']}/>
+                  <img style={{width: '7vw'}} src={user['avatar']}/>
                   {user.name}
                 </h2>
                 )
@@ -207,41 +182,3 @@ const Home = (props) => {
 
 export default Home
 
-
-
-
-        // {/* {props.getComments.map((comments) => (
-
-        //   <div className="comment-feed">
-        //     <DataProvider>
-        // <DataContext.Consumer>
-        //     {(context) => (
-        //         <h1>{comments.content}</h1>
-        //     )}
-        // </DataContext.Consumer>
-        //    </DataProvider>
-        //   </div>
-
-        // ))} */}
-
-        // {/* <DataContext.Consumer>
-        //   {
-        //     comments.map((comment)=>(
-        //       <p>{comment.content}</p>
-        //     ))
-        //   }
-        // </DataContext.Consumer> */}
-
-
-
-  {/* // // <section className="welcome-signin"> */}
-  // {/* <button className="signinbtn" onClick={() => navigate('/signin')}>
-  //       Sign In
-  //   </button> */}
-  //   {/* <div className="register">
-  //     <button className="registerbtn" onClick={() => navigate('/register')}>What's Your Rhythm?</button>
-  //   </div> */}
-  //   {/* <div>
-  //     <button className="profilebtn" onClick={() => navigate('/profile')}>Profile</button>
-  //   </div> */}
-  //   {/* </section> */}

client/src/pages/Profile.js

@@ -2,6 +2,7 @@ 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()
@@ -84,33 +85,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}`)
@@ -142,24 +124,19 @@ export default function Profile(){
                   {profileUser.username} / {profileUser.name}
                 </h2>
                 <button className="registerbtn" onClick={() => navigate('/update')}>Update Profile</button>
-            <figure style={{marginLeft: '70vw'}}>
-                <figcaption style={{color: 'white'}}>
-                    Currently listening to..
-                </figcaption>
-                <audio controls src='null'/>
-            </figure> 
         </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 +148,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 +169,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

@@ -51,6 +51,8 @@ body {
     background-color: rgb(209, 150, 87);
     font-style: italic;
     font-size: 13px;
+    font-weight: bold;
+    margin-bottom: 2vh;
 }
 
 .home-container {
@@ -187,7 +189,8 @@ body {
     padding-left: 20px;
     /* background: rgba(255, 255, 255, 0.3); */
     text-align: center;
-
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
 }
 
 .artists-container img {
@@ -276,4 +279,10 @@ body {
         width: 40vw;
         border-radius: 8px;
         background: rgba(255, 255, 255, 0.3);
-}
+}
+
+.profilefeed1{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+}
+