add upload history to stats UI

client/app/components/index.ts

@@ -2,4 +2,5 @@ export * from './embedded-youtube/embedded-youtube';
 export * from './header/header';
 export * from './navbar/navbar';
 export * from './sound-list/sound-list';
+export * from './upload-history/upload-history';
 export * from './uploader/uploader';

client/app/components/navbar/navbar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { IClaims } from '../../model';
+import { IClaims, Permissions } from '../../model';
 import { OauthService, StorageService } from '../../services';
 import './navbar.scss';
 
@@ -78,6 +78,10 @@ export class Navbar extends React.Component<Props, State> {
         {this.renderNavLink('Youtube Downloader', '/downloader')}
         {this.renderNavLink('Clips', '/clips')}
         {this.renderNavLink('Stats', '/stats')}
+        {claims &&
+          claims.permissions &&
+          claims.permissions === Permissions.Admin &&
+          this.renderNavLink('Admin', '/admin')}
         {this.renderLoginButton()}
 
         {claims && claims.email && <div className="navbar__email">{claims.email}</div>}

client/app/components/upload-history/upload-history.tsx

@@ -0,0 +1,46 @@
+import * as _ from 'lodash';
+import { DateTime } from 'luxon';
+import React from 'react';
+import { ISound } from '../../model';
+
+interface IProps {
+  sounds: ISound[];
+}
+
+export const UploadHistory = ({ sounds }: IProps) => {
+  const sortedSounds = _.orderBy(sounds, 'created_at', 'desc');
+  return (
+    <div className="card">
+      <div className="card__header">Upload History</div>
+      <table className="table">
+        <thead>
+          <tr>
+            <th>Date</th>
+            <th>Sound</th>
+            <th className="hide-tiny">Ext</th>
+            <th>Username</th>
+            <th className="hide-tiny">Email</th>
+          </tr>
+        </thead>
+        <tbody>
+          {sortedSounds.map((s: ISound, i) => {
+            const formattedDate = DateTime.fromISO(s.created_at).toLocaleString();
+            return (
+              <tr key={i}>
+                <td title={formattedDate}>{formattedDate}</td>
+                <td title={s.name}>{s.name}</td>
+                <td className="hide-tiny" title={s.extension}>
+                  {s.extension}
+                </td>
+                <td title={s.user.username}>{s.user.username}</td>
+                <td className="hide-tiny" title={s.user.email}>
+                  {s.user.email}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};