From f9c3922670cc57a05c5275871c6fa55ce84ed2ec Mon Sep 17 00:00:00 2001
From: Mitchell <mgerb42@gmail.com>
Date: Sat, 24 Aug 2019 13:22:05 -0500
Subject: [PATCH] refactor: move upload history to its own page

---
 client/app/app.tsx                            |  3 +-
 client/app/components/index.ts                |  1 -
 client/app/components/navbar/navbar.tsx       | 17 ++--
 .../app/components/sound-list/sound-list.tsx  |  5 +-
 .../upload-history/upload-history.tsx         | 53 ------------
 client/app/pages/clips/clips.tsx              |  2 +-
 client/app/pages/index.ts                     |  1 +
 client/app/pages/soundboard/soundboard.tsx    |  1 +
 client/app/pages/stats/stats.tsx              | 12 +--
 .../pages/upload-history/upload-history.tsx   | 81 +++++++++++++++++++
 client/app/stores/app.store.ts                |  8 +-
 client/app/wrapper.tsx                        |  2 +-
 12 files changed, 104 insertions(+), 82 deletions(-)
 delete mode 100644 client/app/components/upload-history/upload-history.tsx
 create mode 100644 client/app/pages/upload-history/upload-history.tsx

diff --git a/client/app/app.tsx b/client/app/app.tsx
index 657f933..7ca4ff1 100644
--- a/client/app/app.tsx
+++ b/client/app/app.tsx
@@ -2,7 +2,7 @@ import { Provider } from 'mobx-react';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
-import { Admin, Clips, Downloader, NotFound, Oauth, Soundboard, Stats, VideoArchive } from './pages';
+import { Admin, Clips, Downloader, NotFound, Oauth, Soundboard, Stats, UploadHistory, VideoArchive } from './pages';
 import './scss/index.scss';
 import { rootStoreInstance } from './stores';
 import { Wrapper } from './wrapper';
@@ -14,6 +14,7 @@ const App: any = (): any => {
         <Wrapper>
           <Switch>
             <Route exact path="/" component={Soundboard} />
+            <Route path="/upload-history" component={UploadHistory} />
             <Route path="/downloader" component={Downloader} />
             <Route path="/clips" component={Clips} />
             <Route path="/oauth" component={Oauth} />
diff --git a/client/app/components/index.ts b/client/app/components/index.ts
index 82ef969..732c2bb 100644
--- a/client/app/components/index.ts
+++ b/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';
diff --git a/client/app/components/navbar/navbar.tsx b/client/app/components/navbar/navbar.tsx
index 745baeb..6871ec8 100644
--- a/client/app/components/navbar/navbar.tsx
+++ b/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>}
diff --git a/client/app/components/sound-list/sound-list.tsx b/client/app/components/sound-list/sound-list.tsx
index e1ca27d..247a282 100644
--- a/client/app/components/sound-list/sound-list.tsx
+++ b/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 }} />
diff --git a/client/app/components/upload-history/upload-history.tsx b/client/app/components/upload-history/upload-history.tsx
deleted file mode 100644
index 2f83f5e..0000000
--- a/client/app/components/upload-history/upload-history.tsx
+++ /dev/null
@@ -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>
-  );
-};
diff --git a/client/app/pages/clips/clips.tsx b/client/app/pages/clips/clips.tsx
index e7281fa..1803dce 100644
--- a/client/app/pages/clips/clips.tsx
+++ b/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>
     );
diff --git a/client/app/pages/index.ts b/client/app/pages/index.ts
index ddc5e7b..71c19eb 100644
--- a/client/app/pages/index.ts
+++ b/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';
diff --git a/client/app/pages/soundboard/soundboard.tsx b/client/app/pages/soundboard/soundboard.tsx
index 8e376f3..0397ebc 100644
--- a/client/app/pages/soundboard/soundboard.tsx
+++ b/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()}
diff --git a/client/app/pages/stats/stats.tsx b/client/app/pages/stats/stats.tsx
index a7b69f8..3ee56c6 100644
--- a/client/app/pages/stats/stats.tsx
+++ b/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>
     );
   }
diff --git a/client/app/pages/upload-history/upload-history.tsx b/client/app/pages/upload-history/upload-history.tsx
new file mode 100644
index 0000000..f3cac38
--- /dev/null
+++ b/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>;
+  }
+}
diff --git a/client/app/stores/app.store.ts b/client/app/stores/app.store.ts
index 4a0266f..3d24a37 100644
--- a/client/app/stores/app.store.ts
+++ b/client/app/stores/app.store.ts
@@ -41,7 +41,11 @@ export class AppStore {
     this.navbarOpen = !this.navbarOpen;
   };
 
-  public hasModPermissions = () => {
-    return this.claims && this.claims.permissions >= Permissions.Mod;
+  public hasModPermissions = (): boolean => {
+    return !!this.claims && this.claims.permissions >= Permissions.Mod;
+  };
+
+  public hasAdminPermissions = (): boolean => {
+    return !!this.claims && this.claims.permissions >= Permissions.Admin;
   };
 }
diff --git a/client/app/wrapper.tsx b/client/app/wrapper.tsx
index 7940396..e6eaa9c 100644
--- a/client/app/wrapper.tsx
+++ b/client/app/wrapper.tsx
@@ -18,7 +18,7 @@ export const Wrapper = inject('appStore')(
       return (
         <div>
           <Header onButtonClick={appStore.toggleNavbar} />
-          <Navbar claims={appStore.claims} open={appStore.navbarOpen} onNavClick={onNavClick} />
+          <Navbar appStore={appStore} onNavClick={onNavClick} />
           <div className={'wrapper ' + openClass}>{children}</div>
         </div>
       );