add new sortby button and allow sorting on homepage

apiGo/api/Video.go

@@ -31,23 +31,46 @@ func getVideoHandlers() {
 	 */
 	AddHandler("getMovies", VideoNode, func(info *HandlerInfo) []byte {
 		var args struct {
-			Tag int
+			Tag  uint32
+			Sort uint8
 		}
 		if err := FillStruct(&args, info.Data); err != nil {
 			fmt.Println(err.Error())
 			return nil
 		}
 
+		const (
+			date   = iota
+			likes  = iota
+			random = iota
+			names  = iota
+		)
+
+		var SortClause string
+		switch args.Sort {
+		case date:
+			SortClause = "ORDER BY create_date DESC, movie_name"
+			break
+		case likes:
+			SortClause = "ORDER BY likes DESC"
+			break
+		case random:
+			SortClause = "ORDER BY RAND()"
+			break
+		case names:
+			SortClause = "ORDER BY movie_name"
+			break
+		}
+
 		var query string
 		// 1 is the id of the ALL tag
 		if args.Tag != 1 {
 			query = fmt.Sprintf(`SELECT movie_id,movie_name,t.tag_name FROM videos
 					INNER JOIN video_tags vt on videos.movie_id = vt.video_id
 					INNER JOIN tags t on vt.tag_id = t.tag_id
-					WHERE t.tag_id = %d
+					WHERE t.tag_id = %d %s`, args.Tag, SortClause)
-					ORDER BY likes DESC, create_date, movie_name`, args.Tag)
 		} else {
-			query = "SELECT movie_id,movie_name, (SELECT 'All' as tag_name) FROM videos ORDER BY create_date DESC, movie_name"
+			query = fmt.Sprintf("SELECT movie_id,movie_name, (SELECT 'All' as tag_name) FROM videos %s", SortClause)
 		}
 
 		var result struct {

src/elements/DynamicContentContainer/DynamicContentContainer.tsx

@@ -41,18 +41,24 @@ class DynamicContentContainer<T> extends React.Component<Props<T>, state<T>> {
 
     componentDidUpdate(prevProps: Props<T>): void {
         // when source props change force update!
-        if (prevProps.data.length !== this.props.data.length) {
+        if (
-            this.clean();
+            // diff the two arrays
+            this.props.data
+                .filter((x) => !prevProps.data.includes(x))
+                .concat(prevProps.data.filter((x) => !this.props.data.includes(x))).length !== 0
+        ) {
+            this.clean((): void => {
                 this.loadPreviewBlock(this.InitialLoadNR);
+            });
         }
     }
 
     /**
      * clear all elements rendered...
      */
-    clean(): void {
+    clean(callback: () => void): void {
         this.loadindex = 0;
-        this.setState({loadeditems: []});
+        this.setState({loadeditems: []}, callback);
     }
 
     render(): JSX.Element {

src/pages/HomePage/HomePage.module.css

@@ -7,3 +7,56 @@
     float: right;
     margin-top: 25px;
 }
+
+
+/* Style The Dropdown Button */
+.dropbtn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    height: 100%;
+    cursor: pointer;
+    color: white;
+    text-align: center;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdownContent {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdownContent span {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    cursor: pointer;
+}
+
+/* Change color of dropdown links on hover */
+.dropdownContent span:hover {
+    background-color: #f1f1f1;
+}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdownContent {
+    display: block;
+}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.dropdown:hover .dropbtn {
+    background-color: #3574fe;
+}

src/pages/HomePage/HomePage.tsx

@@ -11,6 +11,16 @@ import {RouteComponentProps} from 'react-router';
 import SearchHandling from './SearchHandling';
 import {VideoTypes} from '../../types/ApiTypes';
 import {DefaultTags} from '../../types/GeneralTypes';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faSortDown} from '@fortawesome/free-solid-svg-icons';
+
+// eslint-disable-next-line no-shadow
+enum SortBy {
+    date,
+    likes,
+    random,
+    name
+}
 
 interface Props extends RouteComponentProps {}
 
@@ -19,6 +29,7 @@ interface state {
     subtitle: string;
     data: VideoTypes.VideoUnloadedType[];
     selectionnr: number;
+    sortby: string;
 }
 
 /**
@@ -42,13 +53,17 @@ export class HomePage extends React.Component<Props, state> {
             },
             subtitle: 'All Videos',
             data: [],
-            selectionnr: 0
+            selectionnr: 0,
+            sortby: 'Date Added'
         };
     }
 
+    sortState = SortBy.date;
+    tagState = DefaultTags.all;
+
     componentDidMount(): void {
         // initial get of all videos
-        this.fetchVideoData(DefaultTags.all.TagId);
+        this.fetchVideoData();
         this.fetchStartData();
     }
 
@@ -58,14 +73,11 @@ export class HomePage extends React.Component<Props, state> {
      *
      * @param tag tag to fetch videos
      */
-    fetchVideoData(tag: number): void {
+    fetchVideoData(): void {
         callAPI(
             APINode.Video,
-            {action: 'getMovies', Tag: tag},
+            {action: 'getMovies', Tag: this.tagState.TagId, Sort: this.sortState},
             (result: {Videos: VideoTypes.VideoUnloadedType[]; TagName: string}) => {
-                this.setState({
-                    data: []
-                });
                 this.setState({
                     data: result.Videos,
                     selectionnr: result.Videos.length
@@ -135,32 +147,80 @@ export class HomePage extends React.Component<Props, state> {
                             <Tag
                                 tagInfo={{TagName: 'All', TagId: DefaultTags.all.TagId}}
                                 onclick={(): void => {
-                                    this.fetchVideoData(DefaultTags.all.TagId);
+                                    this.tagState = DefaultTags.all;
+                                    this.fetchVideoData();
                                     this.setState({subtitle: 'All Videos'});
                                 }}
                             />
                             <Tag
                                 tagInfo={{TagName: 'Full Hd', TagId: DefaultTags.fullhd.TagId}}
                                 onclick={(): void => {
-                                    this.fetchVideoData(DefaultTags.fullhd.TagId);
+                                    this.tagState = DefaultTags.fullhd;
+                                    this.fetchVideoData();
                                     this.setState({subtitle: 'Full Hd Videos'});
                                 }}
                             />
                             <Tag
                                 tagInfo={{TagName: 'Low Quality', TagId: DefaultTags.lowq.TagId}}
                                 onclick={(): void => {
-                                    this.fetchVideoData(DefaultTags.lowq.TagId);
+                                    this.tagState = DefaultTags.lowq;
+                                    this.fetchVideoData();
                                     this.setState({subtitle: 'Low Quality Videos'});
                                 }}
                             />
                             <Tag
                                 tagInfo={{TagName: 'HD', TagId: DefaultTags.hd.TagId}}
                                 onclick={(): void => {
-                                    this.fetchVideoData(DefaultTags.hd.TagId);
+                                    this.tagState = DefaultTags.hd;
+                                    this.fetchVideoData();
                                     this.setState({subtitle: 'HD Videos'});
                                 }}
                             />
                         </SideBar>
+                        <div>
+                            <span style={{color: 'grey', marginRight: 5}}>Sort By: </span>
+                            <div className={style.dropdown}>
+                                <span className={style.dropbtn}>
+                                    <span>{this.state.sortby}</span>
+                                    <FontAwesomeIcon style={{marginLeft: 3, paddingBottom: 3}} icon={faSortDown} size='1x' />
+                                </span>
+                                <div className={style.dropdownContent}>
+                                    <span
+                                        onClick={(): void => {
+                                            this.sortState = SortBy.date;
+                                            this.setState({sortby: 'Date Added '});
+                                            this.fetchVideoData();
+                                        }}>
+                                        Date Added
+                                    </span>
+                                    <span
+                                        onClick={(): void => {
+                                            this.sortState = SortBy.likes;
+                                            this.setState({sortby: 'Most likes'});
+                                            this.fetchVideoData();
+                                        }}>
+                                        Most likes
+                                    </span>
+                                    <span
+                                        onClick={(): void => {
+                                            this.sortState = SortBy.random;
+                                            this.setState({sortby: 'Random'});
+                                            this.fetchVideoData();
+                                        }}>
+                                        Random
+                                    </span>
+                                    <span
+                                        onClick={(): void => {
+                                            this.sortState = SortBy.name;
+                                            this.setState({sortby: 'Name'});
+                                            this.fetchVideoData();
+                                        }}>
+                                        Name
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+
                         <VideoContainer data={this.state.data} />
                         <div className={style.rightinfo} />
                     </Route>