Odtnhj

var db = require("../dbconnection");

var music = 
 insertmusicTracks: function(data, callback) 
 db.query(
 "insert music_tracks set track_music_id=?, track_user_id=?, trackName=?, trackLyrics=?",
 [data.albumId, data.userId, data.songName, data.songLyrics],
 callback
 );
 ,
 selectmusicTracks: function(data, callback) 
 db.query(
 "select mo.track_music_id, mo.trackName, mo.trackLyrics, mt.authorName, mt.trackTitle, mt.trackYear, mt.trackcoverImg from music_tracks mo left join music_topics mt on mt.music_id=mo.track_music_id where mo.track_music_id=?",
 [data.trackmusicId],
 callback
 );
 
;

module.exports = music;

import React from "react";
import Link from "react-router-dom";

import Modal, Button from "react-bootstrap";

import Headericons from "../common/header-icons";
import Header from "../common/header";
import Footer from "../common/footer";
import Addtracklist from "../components/addmusictrack";
import dataTip from "data-tip";

import appController from "../../controllers/appController";

import musicService from "../../services/musicService";

class Musictracks extends React.Component 
 constructor(props) 
 super(props);
 this.state = 
 userId: "",
 isAdmin: false,
 albumName: "",
 musicId: this.props.match.params.musicid,
 trackData: 
 ;
 

 handleClose = () => 
 this.setState( show: false );
 ;

 handleShow = () => 
 this.setState( show: true );
 ;

 selectTracks = async () => 
 const selectmusicTracks = await musicService.selectmusicTracks(
 trackmusicId: this.props.match.params.musicid
 );

 this.setState(
 trackData: selectmusicTracks
 );

 console.log(this.state);
 ;

 showLyrics = async trackId => 
 this.setState(
 lyricId: trackId
 );
 console.log(this.state);
 ;

 async componentDidMount() 
 if (appController.isAdmin().role_id === 3) 
 await this.setState(
 userId: appController.isAdmin().userID,
 isAdmin: true
 );
 
 this.setState(
 albumName: this.props.match.params.title
 );

 await this.selectTracks();

 await this.showLyrics();
 

 render() 
 return (
 <div className="fluid-container">
 <Headericons />
 <Header />
 <div className="container" id="musictrackContainer">
 <h1>appController.removeHyphen(this.state.albumName)</h1>
 <div className="row">
 <Link className="btn btn-primary" id="previouspage" to="/music">
 ← Go Back
 </Link>
 </div>

 this.state.isAdmin === true ? (
 <div className="row" id="superAdmin">
 <div className="col-md-12">
 <i
 className="far fa-plus-square fa-2x"
 onClick=this.handleShow
 />
 </div>

 <div className="static-modal">
 <Modal show=this.state.show onHide=this.handleClose>
 <Modal.Header closeButton>
 <Modal.Title>Add Track</Modal.Title>
 </Modal.Header>
 <Modal.Body>
 <Addtracklist
 albumId=this.state.musicId
 userId=this.state.userId
 closeModal=this.handleClose
 />
 </Modal.Body>
 </Modal>
 </div>
 </div>
 ) : null
 <div className="row">
 <div className="col-md-4">
 <div className="trackContainer">
 <ol>
 this.state.trackData.map((rows, index) => (
 <div
 className="trackName data-tip-right"
 data-tip="View " + rows.trackName
 key=rows.trackName + "-" + rows.track_music_id
 onClick=e => this.showLyrics(index)
 >
 <li tabIndex=index>
 index + 1 + ". " + rows.trackName
 <i className="fas fa-arrow-right" />
 </li>
 </div>
 ))
 </ol>
 </div>
 </div>
 <div className="col-md-8">
 // This is where I'm stuck I'm not sure how I can render lyrics based off of the track name.
 this.state.trackData.map((row, index) =>
 this.state.lyricId === index ? (
 <div className="trackLyrics">row.trackLyrics</div>
 ) : null
 )
 </div>
 </div>
 </div>
 <Footer />
 </div>
 );
 


export default Musictracks;