RecMu With Liked_Songs Component, About Us

Polfish · May 10, 2022 · 03c121f · 03c121f
1 parent 70f663f
commit 03c121f
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 42 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/recmu/api/src/schema.graphql b/recmu/api/src/schema.graphql
@@ -150,6 +150,11 @@ type Query {
     )
 }
 
+type Query {
+  getSongCatalog(songName: String): [String]
+    @cypher(statement: "MATCH (s:song) RETURN s.name")
+}
+
 type Query {
   songCount: Int @cypher(statement: "MATCH (n:song) RETURN count(*) as count")
 }

diff --git a/recmu/web-react/src/App.js b/recmu/web-react/src/App.js
@@ -49,6 +49,7 @@ import {
 import { SearchOutlined } from '@material-ui/icons'
 import Dashboard from './components/Dashboard'
 import LikedSongs from './components/LikedSongs'
+import SongCatalogue from './components/SongCatalogue.js'
 
 function Copyright() {
   return (
@@ -266,9 +267,12 @@ export default function App() {
           {/* <Route exact path="/businesses" component={UserList} />z */}
           {/* <Route path="/aboutUs" component={AboutUs} /> */}
           {/* <Route exact path="/users" component={UserList} /> */}
+
           <Route path="/About" component={AboutUsPage} />
           {/* <SongCatalogue /> */}
+          {/* <Route path="Dashboard" component={Dashboard} /> */}
           <Route path="/likedSongs" component={LikedSongs} />
+          <Route path="/SongCatalogue" component={SongCatalogue} />
         </Switch>
       </div>
     )
@@ -299,7 +303,21 @@ export default function App() {
               noWrap
               className={classes.title}
             >
-              RecMu
+              <Link to="/" className={classes.navLink}>
+                RecMu
+              </Link>
+            </Typography>
+
+            <Typography
+              component="h1"
+              variant="h6"
+              color="inherit"
+              noWrap
+              className={classes.aboutUs}
+            >
+              <Link to="/SongCatalogue" className={classes.navLink}>
+                Song Catalog
+              </Link>
             </Typography>
 
             <Typography

diff --git a/recmu/web-react/src/components/AboutUs.js b/recmu/web-react/src/components/AboutUs.js
@@ -9,18 +9,22 @@
 // }
 
 import * as React from 'react'
-//import * as ReactDOM from 'https://cdn.skypack.dev/[email protected]'
-// import styles from "./AboutUs.scss";
 import './AboutUs.scss'
 
 function AboutUsPage() {
   return (
     <div className="wrapper">
       <Card
-        img="https://images.unsplash.com/photo-1536304929831-ee1ca9d44906?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
-        title="The Everyday Salad"
-        description="Take your boring salads up a knotch. This recipe is perfect for lunch
-          and only contains 5 ingredients!"
+        img="https://images.unsplash.com/photo-1600442715242-3e496a4d7ec8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1469&q=80"
+        title="Welcome to RecMu"
+        description="Prepare for RecMu...The finest musical recommendations, finally within your reach. With RecMu, it’s easy to find the right music or podcast for every moment – on your phone, your computer, your tablet and more.
+
+        There are millions of tracks and episodes on RecMu. So whether you’re behind the wheel, working out, partying or relaxing, the right music or podcast is always at your fingertips. Choose what you want to listen to, or let RecMu surprise you.
+        
+        You can also browse through the collections of friends, artists, and celebrities, or create a radio station and just sit back.
+        
+        Soundtrack your life with RecMu. 
+        Brought to you by Anni Shao, Paul Chon and Pranav Ghaskadbi"
       />
     </div>
   )
@@ -34,13 +38,9 @@ function Card(props) {
         <h2 className="card__title">{props.title}</h2>
         <p className="card__description">{props.description}</p>
       </div>
-      <button className="card__btn">View Recipe</button>
+      {/* <button className="card__btn">View Recipe</button> */}
     </div>
   )
 }
 
-//ReactDOM.render(<AboutUsPage />, document.getElementById('root'))
-
-// export default AboutUs
-
 export default AboutUsPage
diff --git a/recmu/web-react/src/components/AboutUs.scss b/recmu/web-react/src/components/AboutUs.scss
@@ -33,22 +33,34 @@ body {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(12rem, 16rem));
   gap: 2rem;
-  justify-content: center;
+  justify-content: left;
+  align-items: center;
+  // height: 1200;
+  // width: 100%;
+
+  height: 80vh;
+  width: 40vh;
 }
 
 .card {
   overflow: hidden;
-  box-shadow: 0 2px 20px $clr-gray300;
+  // box-shadow: 0 2px 20px $clr-gray300;
   border-radius: $radius;
   display: flex;
   flex-direction: column;
+
+  // height: 2000;
+  // width: 1200px;
+
+  height: 90vh;
+  width: 80vw;
   justify-content: space-between;
   cursor: pointer;
   transition: transform 200ms ease-in;
-  background-color: #29e6a7;
+  background-color: whitesmoke;
 
   &__image {
-    height: 12rem;
+    height: 35rem;
     width: 100%;
     object-fit: cover;
   }

diff --git a/recmu/web-react/src/components/LikedSongs.js b/recmu/web-react/src/components/LikedSongs.js
@@ -14,11 +14,6 @@ const GET_LIKED_SONGS_QUERY = gql`
     findLikedSongs(userName: $userName)
   }
 `
-const GET_REL_ALBUMS_QUERY = gql`
-  query($albumName: String) {
-    findRelatedAlbums(albumName: $albumName)
-  }
-`
 
 const REMOVE_SONG_FROM_LIKES_QUERY = gql`
   query($userName: String, $songName: String) {
@@ -41,7 +36,7 @@ export default function LikedSongs() {
     console.log(error)
     return <p>Error: help!</p>
   }
-  console.log('Liked songs: ' + data)
+  console.log('Liked songs: ' + data.findLikedSongs)
 
   //   const [dislikeSongQuery, { loading2, error2, data2 }] = useLazyQuery(
   //     REMOVE_SONG_FROM_LIKES_QUERY

diff --git a/recmu/web-react/src/components/SongCatalogue.js b/recmu/web-react/src/components/SongCatalogue.js
@@ -1,11 +1,9 @@
 import React from 'react'
-//import { Link } from 'react-router-dom'
 import { makeStyles } from '@material-ui/core/styles'
 import Typography from '@material-ui/core/Typography'
 import Title from './Title'
 import { useQuery, gql } from '@apollo/client'
 import { Box, Card } from '@material-ui/core'
-//import clsx from 'clsx'
 import { useTheme } from '@material-ui/core/styles'
 import FavoriteIcon from '@mui/icons-material/Favorite'
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder'
@@ -22,36 +20,41 @@ const useStyles = makeStyles({
   },
 })
 
-const GET_COUNT_QUERY = gql`
-  query() {
-    findSongCatalog()
+const GETSONGCATALOG = gql`
+  query($name: String) {
+    getSongCatalog(name: $name)
   }
 `
 
-export default function Deposits({ songName }) {
-  const theme = useTheme()
+// const GET_COUNT_QUERY = gql`
+//   query($songName: String) {
+//     findRelatedSongs(songName: $songName)
+//   }
+// `
 
+export default function SongCatalogue() {
+  const theme = useTheme()
+  const songName = 'anything'
   const classes = useStyles(theme)
   //const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight)
 
-  const { loading, error, data } = useQuery(GET_COUNT_QUERY, {
-    variables: { songName },
-  })
+  // const { loading, error, data } = useQuery(GETSONGCATALOG, {
+  //   variables: { songName },
+  // })
+
+  const { loading, error, data } = useQuery(GETSONGCATALOG)
 
   if (loading) return 'Loading...'
   if (error) return <p>Error: help!</p>
+
+  console.log('Liked songs: ' + data.getSongCatalog)
   return (
     <React.Fragment>
       <h2>Our Music Catalog</h2>
-      <Title>Prepare your ears..{songName}</Title>
+      <Title>Prepare your ears..</Title>
       <Typography color="textSecondary" className={classes.depositContext}>
-        {data.findRelatedSongs.length} Songs found
+        {data.getSongCatalog.length} Songs found
       </Typography>
-      <div>
-        {/*<Link to="/songs" className={classes.navLink}>
-          View songs
-        </Link>*/}
-      </div>
       <Box
         sx={{
           display: 'flex',
@@ -64,7 +67,7 @@ export default function Deposits({ songName }) {
           flexdirection: 'column',
         }}
       >
-        {data.findRelatedSongs.map((result) => (
+        {data.getSongCatalog.map((result) => (
           // <h2 key={result.songName}>{result}</h2>
           <Card key={result.songName}>
             <Typography component="p" variant="h4" className={classes.results}>
@@ -79,3 +82,95 @@ export default function Deposits({ songName }) {
     </React.Fragment>
   )
 }
+
+// import React, { useState } from 'react'
+// import { useQuery, useLazyQuery, gql } from '@apollo/client'
+// import { useEffect } from 'react'
+// import ListGroup from 'react-bootstrap/ListGroup'
+// import Badge from 'react-bootstrap/Badge'
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+// import Button from 'react-bootstrap/Button'
+
+// import { faHeart } from '@fortawesome/free-solid-svg-icons'
+// import { faXmark } from '@fortawesome/free-solid-svg-icons'
+
+// export default function LikedSongs() {
+//   const [likedSongs, setLikedSongs] = useState([])
+//   const [userName, setUsername] = useState('Default')
+//   const [songToDislike, setSongToDislike] = useState('')
+
+//   const { loading, error, data } = useQuery(GET_LIKED_SONGS_QUERY, {
+//     variables: { userName },
+//   })
+//   if (loading) return 'Loading...'
+//   if (error) {
+//     console.log(error)
+//     return <p>Error: help!</p>
+//   }
+//   console.log('Liked songs: ' + data.findLikedSongs)
+
+//   //   const [dislikeSongQuery, { loading2, error2, data2 }] = useLazyQuery(
+//   //     REMOVE_SONG_FROM_LIKES_QUERY
+//   //   )
+//   //   const [dislikeSongQuery, { l, e, d }] = useLazyQuery(
+//   //     REMOVE_SONG_FROM_LIKES_QUERY
+//   //   )
+
+//   //   useEffect(() => {
+//   //     if (songToDislike) {
+//   //       dislikeSongQuery({
+//   //         variables: {
+//   //           userName: userName,
+//   //           songName: songToDislike,
+//   //         },
+//   //       })
+//   //     }
+//   //   }, [])
+
+//   //   const dislikeSong = (e) => {
+//   //     const songName = e.target.name
+//   //     setSongToDislike(songName)
+//   //     //   dislikeSongQuery({
+//   //     //     variables: { userName, songName },
+//   //     //   })
+//   //   }
+
+//   const createLikedSongsList = (row) => {
+//     return (
+//       <ListGroup.Item
+//         as="li"
+//         className="d-flex justify-content-between align-items-start"
+//       >
+//         <div className="ms-2 me-auto">
+//           <div className="fw-bold">{row}</div>
+//         </div>
+
+//         <FontAwesomeIcon
+//           className="mx-4"
+//           style={{ color: 'red', fontSize: '20px' }}
+//           icon={faHeart}
+//         />
+
+//         {/* <button name={row}>
+//           <FontAwesomeIcon
+//             style={{
+//               color: 'black',
+//               fontSize: '20px',
+//             }}
+//             icon={faXmark}
+//           />
+//           X
+//         </button> */}
+//       </ListGroup.Item>
+//     )
+//   }
+
+//   console.log('Liked songs: ', likedSongs)
+//   return (
+//     <div>
+//       <ListGroup>
+//         {data.findLikedSongs.map((i) => createLikedSongsList(i))}
+//       </ListGroup>
+//     </div>
+//   )
+// }
diff --git a/recmu/web-react/src/components/SongSearch.js b/recmu/web-react/src/components/SongSearch.js
@@ -71,8 +71,8 @@ export default function Deposits({ songName }) {
               {result}
             </Typography>
             {/* <FontAwesomeIcon icon="fa-solid fa-heart" /> */}
-            <FavoriteIcon />
-            <FavoriteBorderIcon />
+            {/* <FavoriteIcon />
+            <FavoriteBorderIcon /> */}
           </Card>
         ))}
       </Box>