0.0.9

- Fix mobile menu auto collapse on select
- Add /u/ route for public user profiles (Added private flag to db - to implement later)
- Add /user route for your own profile / edit profile
- Added handling for if API is offline/incorrect
- Add index.html loading spinner while react bundle downloads
- Change HashRouter to BrowserRouter
- Added sources column to scrobbles

web/src/Components/HomeBanner.js

@@ -11,8 +11,10 @@ const HomeBanner = () => {
   useEffect(() => {
     getStats()
       .then(data => {
-        setBannerData(data);
-        setIsLoading(false);
+        if (data.users) {
+          setBannerData(data);
+          setIsLoading(false);
+        }
       })
   }, [])
 

web/src/Components/Navigation.js

@@ -45,38 +45,41 @@ const Navigation = () => {
         {user ?
         <Nav className="navLinkLoginMobile" navbar>
           {loggedInMenuItems.map(menuItem =>
-            <NavItem>
-              <Link
+            <NavItem key={menuItem}>
+                <Link
                 key={menuItem}
                 className="navLinkMobile"
                 style={active === menuItem ? activeStyle : {}}
                 to={menuItem}
+                onClick={toggleCollapsed}
               >{menuItem}</Link>
             </NavItem>
           )}
           <Link
-            to="/profile"
-            style={active === "profile" ? activeStyle : {}}
+            to="/user"
+            style={active === "user" ? activeStyle : {}}
             className="navLinkMobile"
-            >Profile</Link>
+            onClick={toggleCollapsed}
+            >{user.username}</Link>
           {user.admin &&
             <Link
               to="/admin"
               style={active === "admin" ? activeStyle : {}}
               className="navLink"
+              onClick={toggleCollapsed}
             >Admin</Link>}
           <Link to="/" className="navLink" onClick={Logout}>Logout</Link>
         </Nav>
       : <Nav className="navLinkLoginMobile" navbar>
               {menuItems.map(menuItem =>
-                <NavItem>
+                <NavItem key={menuItem}>
                   <Link
                     key={menuItem}
                     className="navLinkMobile"
                     style={active === menuItem ? activeStyle : {}}
                     to={menuItem === "Home" ? "/" : menuItem}
-                  >
-                    {menuItem}
+                    onClick={toggleCollapsed}
+                  >{menuItem}
                   </Link>
                 </NavItem>
               )}
@@ -85,6 +88,7 @@ const Navigation = () => {
                   to="/Login"
                   style={active === "Login" ? activeStyle : {}}
                   className="navLinkMobile"
+                  onClick={toggleCollapsed}
                   >Login</Link>
               </NavItem>
               <NavItem>
@@ -92,6 +96,7 @@ const Navigation = () => {
                   to="/Register"
                   className="navLinkMobile"
                   style={active === "Register" ? activeStyle : {}}
+                  onClick={toggleCollapsed}
                 >Register</Link>
               </NavItem>
             </Nav>
@@ -132,8 +137,8 @@ const Navigation = () => {
       {user ?
         <div className="navLinkLogin">
             <Link
-              to="/profile"
-              style={active === "profile" ? activeStyle : {}}
+              to="/user"
+              style={active === "user" ? activeStyle : {}}
               className="navLink"
             >{user.username}</Link>
             {user.admin &&

web/src/Components/ScrobbleTable.js

@@ -14,9 +14,9 @@ const ScrobbleTable = (props) => {
            </thead>
            <tbody>
               {
-                  props.data && props.data.items &&
-                  props.data.items.map(function (element) {
-                     return <tr>
+                  props.data &&
+                  props.data.map(function (element) {
+                     return <tr key={element.uuid}>
                        <td>{element.time}</td>
                        <td>{element.track}</td>
                        <td>{element.artist}</td>