0.0.33

web/src/Api/index.js

@@ -59,6 +59,7 @@ export const PostLogin = (formValues) => {
           exp: expandedUser.exp,
           username: expandedUser.username,
           admin: expandedUser.admin,
+          mod: expandedUser.mod,
           refresh_token: expandedUser.refresh_token,
           refresh_exp: expandedUser.refresh_exp,
         }
@@ -92,6 +93,7 @@ export const PostRefreshToken = (refreshToken) => {
           exp: expandedUser.exp,
           username: expandedUser.username,
           admin: expandedUser.admin,
+          mod: expandedUser.mod,
           refresh_token: expandedUser.refresh_token,
           refresh_exp: expandedUser.refresh_exp,
         }

web/src/App.js

@@ -5,6 +5,7 @@ import Profile from './Pages/Profile';
 import Artist from './Pages/Artist';
 import Album from './Pages/Album';
 import Track from './Pages/Track';
+import TrackEdit from './Pages/TrackEdit';
 import User from './Pages/User';
 import Admin from './Pages/Admin';
 import Login from './Pages/Login';
@@ -36,6 +37,7 @@ const App = () => {
           <Route path="/u/:uuid" component={Profile} />
           <Route path="/artist/:uuid" component={Artist} />
           <Route path="/album/:uuid" component={Album} />
+          <Route path="/track/:uuid/edit" component={TrackEdit} />
           <Route path="/track/:uuid" component={Track} />
 
           <Route path="/admin" component={Admin} />

web/src/Pages/Admin.js

@@ -12,6 +12,7 @@ import { getConfigs, postConfigs } from '../Api/index'
 const Admin = () => {
   const history = useHistory();
   const { user } = useContext(AuthContext);
+
   const [loading, setLoading] = useState(true);
   const [configs, setConfigs] = useState({})
   const [toggle, setToggle] = useState(false);
@@ -47,8 +48,6 @@ const Admin = () => {
     )
   }
 
-
-
   return (
     <div className="pageWrapper">
       <h1>

web/src/Pages/Track.js

@@ -1,12 +1,15 @@
-import React, { useState, useEffect } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import '../App.css';
 import './Track.css';
 import TopUserTable from '../Components/TopUserTable';
 import ScaleLoader from 'react-spinners/ScaleLoader';
 import { getTrack } from '../Api/index'
 import { Link } from 'react-router-dom';
+import AuthContext from '../Contexts/AuthContext';
 
 const Track = (route) => {
+  const { user } = useContext(AuthContext);
+
   const [loading, setLoading] = useState(true);
   const [track, setTrack] = useState({});
 
@@ -76,7 +79,10 @@ const Track = (route) => {
   return (
     <div className="pageWrapper">
       <h1 style={{margin: 0}}>
-        {track.name}
+        {track.name} {user && <Link
+            key="editbuttonomg"
+            to={"/track/" + trackUUID + "/edit"}
+          >edit</Link>}
       </h1>
       <div className="pageBody">
         <div style={{display: `flex`, flexWrap: `wrap`, textAlign: `center`}}>

web/src/Pages/TrackEdit.js

@@ -0,0 +1,113 @@
+import React, { useContext, useState, useEffect } from 'react';
+import '../App.css';
+import './TrackEdit.css';
+import { useHistory } from 'react-router-dom';
+import ScaleLoader from 'react-spinners/ScaleLoader';
+import { getTrack } from '../Api/index'
+import { Link } from 'react-router-dom';
+import AuthContext from '../Contexts/AuthContext';
+
+const TrackEdit = (route) => {
+  const history = useHistory();
+  const { user } = useContext(AuthContext);
+
+  const [loading, setLoading] = useState(true);
+  const [track, setTrack] = useState({});
+
+  let trackUUID = false;
+  if (route && route.match && route.match.params && route.match.params.uuid) {
+    trackUUID = route.match.params.uuid;
+  } else {
+    trackUUID = false;
+  }
+
+  useEffect(() => {
+    if (!trackUUID) {
+      return false;
+    }
+
+    getTrack(trackUUID)
+      .then(data => {
+        setTrack(data);
+        setLoading(false);
+      })
+  }, [trackUUID])
+
+  if (!user) {
+    history.push("/login")
+  }
+
+  if (user && !user.mod) {
+    history.push("/Dashboard")
+  }
+
+  if (loading) {
+    return (
+      <div className="pageWrapper">
+        <ScaleLoader color="#6AD7E5" />
+      </div>
+    )
+  }
+
+  if (!trackUUID || !track) {
+    return (
+      <div className="pageWrapper">
+        Unable to fetch user
+      </div>
+    )
+  }
+
+  console.log(track)
+  let length = "0";
+  if (track.length && track.length !== '') {
+    length = new Date(track.length * 1000).toISOString().substr(11, 8)
+  }
+
+  let artists = [];
+  for (let artist of track.artists) {
+    const row = (
+      <Link
+        key={artist.uuid}
+        to={"/artist/" + artist.uuid}
+      >{artist.name} </Link>
+    );
+    artists.push(row);
+  }
+
+  let albums = [];
+  for (let album of track.albums) {
+    const row = (
+      <Link
+        key={album.uuid}
+        to={"/album/" + album.uuid}
+      >{album.name} </Link>
+    );
+    albums.push(row);
+  }
+
+  return (
+    <div className="pageWrapper">
+      <h1 style={{margin: 0}}>
+      {track.name} {<Link
+            key="editbuttonomg"
+            to={"/track/" + trackUUID}
+          >unedit</Link>}
+      </h1>
+      <div className="pageBody" style={{width: `900px`, textAlign: `center`}}>
+        <img src={process.env.REACT_APP_API_URL + "/img/" + track.img + "_full.jpg"} alt={track.name} style={{maxWidth: `300px`, maxHeight: `300px`}}/>
+        <br/>
+        <label>Primary Artist ({track.artists[0].name}):</label><br/>
+        <input type="text" value={track.artists[0].uuid} style={{width: `420px`}} disabled="true"/><br/>
+        <label>Primary Album ({track.albums[0].name})</label><br/>
+        <input type="text" value={track.albums[0].uuid} style={{width: `420px`}} disabled="true"/><br/>
+        <br/>
+        <label>MBID</label><br/>
+        <input type="text" value={track.mbid} style={{width: `420px`}} /><br/>
+        <label>Spotify ID</label><br/>
+        <input type="text" value={track.spotify_id} style={{width: `420px`}} /><br/>
+      </div>
+    </div>
+  );
+}
+
+export default TrackEdit;