refactor: move upload history to its own page

client/app/components/index.ts

@@ -2,5 +2,4 @@ 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,12 +1,11 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { IClaims, Permissions } from '../../model';
 import { OauthService, StorageService } from '../../services';
+import { AppStore } from '../../stores';
 import './navbar.scss';
 
 interface Props {
-  claims?: IClaims;
-  open: boolean;
+  appStore: AppStore;
   onNavClick: () => void;
 }
 
@@ -37,7 +36,7 @@ export class Navbar extends React.Component<Props, State> {
   };
 
   renderLoginButton() {
-    const { claims } = this.props;
+    const { claims } = this.props.appStore;
 
     if (!this.state.oauthUrl) {
       return null;
@@ -69,19 +68,17 @@ export class Navbar extends React.Component<Props, State> {
   };
 
   render() {
-    const { claims, open } = this.props;
-    const openClass = open ? 'navbar--open' : '';
+    const { claims, navbarOpen, hasModPermissions, hasAdminPermissions } = this.props.appStore;
+    const openClass = navbarOpen ? 'navbar--open' : '';
     return (
       <div className={'navbar ' + openClass}>
         {this.renderNavLink('Soundboard', '/', { exact: true })}
+        {hasModPermissions() && this.renderNavLink('Upload History', '/upload-history')}
         {this.renderNavLink('Video Archive', '/video-archive')}
         {this.renderNavLink('Youtube Downloader', '/downloader')}
         {this.renderNavLink('Clips', '/clips')}
         {this.renderNavLink('Stats', '/stats')}
-        {claims &&
-          claims.permissions &&
-          claims.permissions === Permissions.Admin &&
-          this.renderNavLink('Admin', '/admin')}
+        {hasAdminPermissions() && this.renderNavLink('Admin', '/admin')}
         {this.renderLoginButton()}
 
         {claims && claims.email && <div className="navbar__email">{claims.email}</div>}

client/app/components/sound-list/sound-list.tsx

@@ -5,6 +5,7 @@ import './sound-list.scss';
 interface Props {
   soundList: SoundType[];
   type: 'sounds' | 'clips';
+  title: string;
   onPlayDiscord?: (sound: SoundType) => void;
   showDiscordPlay?: boolean;
 }
@@ -47,13 +48,13 @@ export class SoundList extends React.Component<Props, State> {
   }
 
   render() {
-    const { showDiscordPlay, soundList, type } = this.props;
+    const { showDiscordPlay, soundList, title, type } = this.props;
 
     return (
       <div className="card">
         <div className="card__header" style={{ display: 'flex' }}>
           <div>
-            <span>{type}</span>
+            <span>{title}</span>
             <i className="fa fa fa-volume-up" aria-hidden="true" />
           </div>
           <div style={{ flex: 1 }} />

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

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