feat: add favorites - update dependencies

client/app/pages/clips/clips.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { SoundList, SoundType } from '../../components';
+import { SoundList } from '../../components';
+import { SoundType } from '../../model';
 import { axios } from '../../services';
 
 interface Props {}
@@ -23,7 +24,7 @@ export class Clips extends React.Component<Props, State> {
   private getClipList() {
     axios
       .get('/api/cliplist')
-      .then(response => {
+      .then((response) => {
         this.setState({
           clipList: response.data,
         });
@@ -37,7 +38,8 @@ export class Clips extends React.Component<Props, State> {
     return (
       <div className="content">
         <div className="column">
-          <SoundList soundList={this.state.clipList} type="clips" title="Clips" />
+          {/* no need for permissions on this component - set false */}
+          <SoundList soundList={this.state.clipList} type="clips" title="Clips" hasModPermissions={false} />
         </div>
       </div>
     );

client/app/pages/oauth/oauth.tsx

@@ -13,7 +13,7 @@ export class Oauth extends React.Component<Props, State> {
   }
 
   componentDidMount() {
-    const params = queryString.parse(this.props.location.search);
+    const params: any = queryString.parse(this.props.location.search);
 
     if (params['code']) {
       // do stuff here

client/app/pages/soundboard/soundboard.tsx

@@ -1,6 +1,7 @@
 import { inject, observer } from 'mobx-react';
 import React from 'react';
-import { SoundList, SoundType, Uploader } from '../../components';
+import { SoundList, Uploader } from '../../components';
+import { SoundType } from '../../model';
 import { axios, SoundService } from '../../services';
 import { AppStore } from '../../stores';
 import './soundboard.scss';
@@ -39,7 +40,7 @@ export class Soundboard extends React.Component<Props, State> {
     if (!this.soundListCache) {
       axios
         .get('/api/soundlist')
-        .then(response => {
+        .then((response) => {
           this.soundListCache = response.data;
           this.setState({
             soundList: response.data,
@@ -64,18 +65,42 @@ export class Soundboard extends React.Component<Props, State> {
     SoundService.playSound(sound);
   };
 
+  onFavorite = (sound: SoundType) => {
+    this.props.appStore?.addFavorite(sound);
+  };
+
+  onDeleteFavorite = (sound: SoundType) => {
+    this.props.appStore?.removeFavorite(sound);
+  };
+
   render() {
     const { soundList } = this.state;
-    const { appStore } = this.props;
+
+    if (!this.props.appStore) {
+      return null;
+    }
+    const { hasModPermissions, getFavorites } = this.props.appStore;
+
     return (
       <div className="content">
         <Uploader onComplete={this.onUploadComplete} />
+        {((hasModPermissions && getFavorites().length) || 0 > 0) && (
+          <SoundList
+            soundList={getFavorites()}
+            title="Favorites"
+            type="favorites"
+            onPlayDiscord={this.onPlayDiscord}
+            hasModPermissions={hasModPermissions()}
+            onFavorite={this.onDeleteFavorite}
+          />
+        )}
         <SoundList
           soundList={soundList}
           title="Sounds"
           type="sounds"
           onPlayDiscord={this.onPlayDiscord}
-          showDiscordPlay={appStore!.hasModPermissions()}
+          hasModPermissions={hasModPermissions()}
+          onFavorite={this.onFavorite}
         />
       </div>
     );

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

@@ -26,12 +26,12 @@ export class UploadHistory extends React.Component<IProps, IState> {
   }
 
   componentDidMount() {
-    SoundService.getSounds().then(sounds => {
+    SoundService.getSounds().then((sounds) => {
       this.setState({ sounds });
     });
   }
 
-  renderUploadHistory = (sounds: ISound[], showDiscordPlay: boolean) => {
+  renderUploadHistory = (sounds: ISound[], hasModPermissions: boolean) => {
     const sortedSounds = orderBy(sounds, 'created_at', 'desc');
     return (
       <div className="card">
@@ -63,7 +63,13 @@ export class UploadHistory extends React.Component<IProps, IState> {
                     {s.user.email}
                   </td>
                   <td>
-                    <ClipPlayerControl showDiscordPlay={showDiscordPlay} sound={s} type="sounds"></ClipPlayerControl>
+                    <ClipPlayerControl
+                      onPlayBrowser={(sound) => SoundService.playAudioInBrowser(sound, 'sounds')}
+                      onPlayDiscord={SoundService.playSound}
+                      hasModPermissions={hasModPermissions}
+                      sound={s}
+                      type="sounds"
+                    ></ClipPlayerControl>
                   </td>
                 </tr>
               );