make tags on random page filterable

src/pages/RandomPage/RandomPage.tsx

@@ -2,16 +2,21 @@ import React from 'react';
 import style from './RandomPage.module.css';
 import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar';
 import Tag from '../../elements/Tag/Tag';
-import PageTitle from '../../elements/PageTitle/PageTitle';
+import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
 import VideoContainer from '../../elements/VideoContainer/VideoContainer';
 import {APINode, callAPI} from '../../utils/Api';
 import {TagType} from '../../types/VideoTypes';
 import {VideoTypes} from '../../types/ApiTypes';
 import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler';
+import {IconButton} from '../../elements/GPElements/Button';
+import {faPlusCircle} from '@fortawesome/free-solid-svg-icons';
+import AddTagPopup from '../../elements/Popups/AddTagPopup/AddTagPopup';
 
 interface state {
     videos: VideoTypes.VideoUnloadedType[];
     tags: TagType[];
+    filterTags: TagType[];
+    addTagPopup: boolean;
 }
 
 interface GetRandomMoviesType {
@@ -29,8 +34,10 @@ class RandomPage extends React.Component<{}, state> {
         super(props);
 
         this.state = {
+            addTagPopup: false,
             videos: [],
-            tags: []
+            tags: [],
+            filterTags: []
         };
 
         this.keypress = this.keypress.bind(this);
@@ -56,42 +63,56 @@ class RandomPage extends React.Component<{}, state> {
                     {this.state.tags.map((m) => (
                         <Tag key={m.TagId} tagInfo={m} />
                     ))}
+                    <Line />
+                    <SideBarTitle>Filter Tags:</SideBarTitle>
+                    {this.state.filterTags.map((m) => (
+                        <Tag key={m.TagId} tagInfo={m} />
+                    ))}
+                    <IconButton
+                        title='Add'
+                        icon={faPlusCircle}
+                        onClick={(): void => {
+                            this.setState({addTagPopup: true});
+                        }}
+                    />
                 </SideBar>
 
-                {this.state.videos.length !== 0 ? (
-                    <VideoContainer data={this.state.videos}>
-                        <div className={style.Shufflebutton}>
-                            <button onClick={(): void => this.shuffleclick()} className={style.btnshuffle}>
-                                Shuffle
-                            </button>
-                        </div>
-                    </VideoContainer>
-                ) : (
-                    <div>No Data found!</div>
-                )}
+                {this.state.videos.length !== 0 ? <VideoContainer data={this.state.videos} /> : <div>No Data found!</div>}
+                <div className={style.Shufflebutton}>
+                    <button onClick={(): void => this.loadShuffledvideos(this.LoadNR)} className={style.btnshuffle}>
+                        Shuffle
+                    </button>
+                </div>
+                {this.state.addTagPopup ? (
+                    <AddTagPopup
+                        onHide={(): void => this.setState({addTagPopup: false})}
+                        submit={(tagId: number, tagName: string): void => {
+                            this.setState({filterTags: [...this.state.filterTags, {TagId: tagId, TagName: tagName}]}, (): void => {
+                                this.loadShuffledvideos(this.LoadNR);
+                            });
+                        }}
+                    />
+                ) : null}
             </div>
         );
     }
 
-    /**
-     * click handler for shuffle btn
-     */
-    shuffleclick(): void {
-        this.loadShuffledvideos(this.LoadNR);
-    }
-
     /**
      * load random videos from backend
      * @param nr number of videos to load
      */
     loadShuffledvideos(nr: number): void {
-        callAPI<GetRandomMoviesType>(APINode.Video, {action: 'getRandomMovies', Number: nr}, (result) => {
-            this.setState({videos: []}); // needed to trigger rerender of main videoview
-            this.setState({
-                videos: result.Videos,
-                tags: result.Tags
-            });
-        });
+        callAPI<GetRandomMoviesType>(
+            APINode.Video,
+            {action: 'getRandomMovies', Number: nr, TagFilter: this.state.filterTags.map((t) => t.TagId)},
+            (result) => {
+                this.setState({videos: []}); // needed to trigger rerender of main videoview
+                this.setState({
+                    videos: result.Videos,
+                    tags: result.Tags
+                });
+            }
+        );
     }
 
     /**