Tests for all Components

2020-06-12 15:57:30 +00:00
parent 751e09f54b
commit e95dd62ffd
27 changed files with 639 additions and 225 deletions
--- a/src/pages/CategoryPage/CategoryPage.js
+++ b/src/pages/CategoryPage/CategoryPage.js
@ -0,0 +1,109 @@
+import React from "react";
+import SideBar from "../../elements/SideBar/SideBar";
+import Tag from "../../elements/Tag/Tag";
+
+import {TagPreview} from "../../elements/Preview/Preview";
+import NewTagPopup from "../../elements/NewTagPopup/NewTagPopup";
+
+class CategoryPage extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+
+        this.props = props;
+
+        this.state = {
+            loadedtags: [],
+            selected: null
+        };
+    }
+
+    componentDidMount() {
+        this.loadTags();
+    }
+
+    render() {
+        return (
+            <>
+                <div className='pageheader'>
+                    <span className='pageheadertitle'>Categories</span>
+                    <span
+                        className='pageheadersubtitle'>{!this.state.selected ? this.state.loadedtags.length + " different Tags" : this.state.selected}</span>
+                    <hr/>
+                </div>
+                <SideBar>
+                    <div className='sidebartitle'>Default Tags:</div>
+                    <Tag>All</Tag>
+                    <Tag>FullHd</Tag>
+                    <Tag>LowQuality</Tag>
+                    <Tag>HD</Tag>
+                    <hr/>
+                    <button data-testid='btnaddtag' className='btn btn-success' onClick={() => {
+                        this.setState({popupvisible: true})
+                    }}>Add a new Tag!
+                    </button>
+                </SideBar>
+
+                {!this.state.selected ?
+                    (<div className='maincontent'>
+                        {this.state.loadedtags ?
+                            this.state.loadedtags.map((m) => (
+                                <TagPreview
+                                    key={m.tag_name}
+                                    name={m.tag_name}
+                                    tag_id={m.tag_id}
+                                    viewbinding={this.props.viewbinding}
+                                    categorybinding={this.setPage}/>
+                            )) :
+                            "loading"}
+                    </div>) :
+                    <>
+                        {this.selectionelements}
+                        <button data-testid='backbtn' className="btn btn-success"
+                                onClick={this.loadCategoryPageDefault}>Back
+                        </button>
+                    </>
+                }
+
+                {this.state.popupvisible ?
+                    <NewTagPopup show={this.state.popupvisible}
+                                 onHide={() => {
+                                     this.setState({popupvisible: false});
+                                     this.loadTags();
+                                 }}/> :
+                    null
+                }
+
+            </>
+        );
+    }
+
+    setPage = (element, tagname) => {
+        this.selectionelements = element;
+
+        this.setState({selected: tagname});
+    };
+
+    loadCategoryPageDefault = () => {
+        this.setState({selected: null});
+    };
+
+    /**
+     * load all available tags from db.
+     */
+    loadTags() {
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'getAllTags');
+
+        // fetch all videos available
+        fetch('/api/Tags.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json()
+                .then((result) => {
+                    this.setState({loadedtags: result});
+                }))
+            .catch(() => {
+                console.log("no connection to backend");
+            });
+    }
+}
+
+export default CategoryPage;