refactor: move upload history to its own page

client/app/pages/clips/clips.tsx

@@ -37,7 +37,7 @@ export class Clips extends React.Component<Props, State> {
     return (
       <div className="content">
         <div className="column">
-          <SoundList soundList={this.state.clipList} type="clips" />
+          <SoundList soundList={this.state.clipList} type="clips" title="Clips" />
         </div>
       </div>
     );

client/app/pages/index.ts

@@ -5,4 +5,5 @@ export * from './not-found/not-found';
 export * from './oauth/oauth';
 export * from './soundboard/soundboard';
 export * from './stats/stats';
+export * from './upload-history/upload-history';
 export * from './video-archive/video-archive';

client/app/pages/soundboard/soundboard.tsx

@@ -72,6 +72,7 @@ export class Soundboard extends React.Component<Props, State> {
         <Uploader onComplete={this.onUploadComplete} />
         <SoundList
           soundList={soundList}
+          title="Sounds"
           type="sounds"
           onPlayDiscord={this.onPlayDiscord}
           showDiscordPlay={appStore!.hasModPermissions()}

client/app/pages/stats/stats.tsx

@@ -1,16 +1,11 @@
 import { chain, map } from 'lodash';
-import { inject, observer } from 'mobx-react';
 import React, { Component } from 'react';
 import { HorizontalBar } from 'react-chartjs-2';
-import { UploadHistory } from '../../components';
 import { ISound } from '../../model';
 import { axios, SoundService } from '../../services';
-import { AppStore } from '../../stores';
 import './stats.scss';
 
-interface IProps {
-  appStore: AppStore;
-}
+interface IProps {}
 
 interface IState {
   data: {
@@ -24,8 +19,6 @@ interface IState {
  * a page to show discord chat statistics
  * currently keeps track of number messages that contain external links
  */
-@inject('appStore')
-@observer
 export class Stats extends Component<IProps, IState> {
   constructor(props: any) {
     super(props);
@@ -74,15 +67,12 @@ export class Stats extends Component<IProps, IState> {
       },
     };
 
-    const { claims, hasModPermissions } = this.props.appStore;
-
     return (
       <div className="content">
         <div className="card">
           <div className="card__header">Posts containing links</div>
           <HorizontalBar data={data} />
         </div>
-        {claims && <UploadHistory sounds={this.state.sounds} showDiscordPlay={hasModPermissions()} />}
       </div>
     );
   }

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

@@ -0,0 +1,81 @@
+import orderBy from 'lodash/orderBy';
+import { DateTime } from 'luxon';
+import { inject, observer } from 'mobx-react';
+import React from 'react';
+import { ClipPlayerControl } from '../../components/clip-player-control/clip-player-control';
+import { ISound } from '../../model';
+import { SoundService } from '../../services';
+import { AppStore } from '../../stores';
+
+interface IProps {
+  appStore: AppStore;
+}
+
+interface IState {
+  sounds: ISound[];
+}
+
+@inject('appStore')
+@observer
+export class UploadHistory extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props);
+    this.state = {
+      sounds: [],
+    };
+  }
+
+  componentDidMount() {
+    SoundService.getSounds().then(sounds => {
+      this.setState({ sounds });
+    });
+  }
+
+  renderUploadHistory = (sounds: ISound[], showDiscordPlay: boolean) => {
+    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>
+    );
+  };
+  public render() {
+    const { hasModPermissions } = this.props.appStore;
+    const { sounds } = this.state;
+    return <div className="content">{this.renderUploadHistory(sounds, hasModPermissions())}</div>;
+  }
+}