created new category page

load random picture of category to tags list

src/elements/Preview.js

@@ -39,7 +39,7 @@ class Preview extends React.Component {
     render() {
         return (
             <div className='videopreview' onClick={() => this.itemClick()}>
-                <div className='previewtitle'>{this.state.name}</div>
+                <div className='previewtitle videopreviewtitle'>{this.state.name}</div>
                 <div className='previewpic'>
                     <img className='previewimage'
                          src={this.state.previewpicture}
@@ -61,4 +61,49 @@ class Preview extends React.Component {
     }
 }
 
+export class TagPreview extends React.Component {
+    constructor(props: P, context: any) {
+        super(props, context);
+
+        this.props = props;
+
+        this.state = {
+            thumbnail: null
+        };
+    }
+
+    componentDidMount() {
+        this.loadPreview();
+    }
+
+
+    render() {
+        return (
+            <div className='videopreview' onClick={() => this.itemClick()}>
+                <div className='previewtitle tagpreviewtitle'>{this.props.name}</div>
+                <div className='previewpic'>
+                    <img className='previewimage'
+                         src={this.state.thumbnail}
+                         alt='Pic loading.'/>
+                </div>
+                <div className='previewbottom'>
+
+                </div>
+            </div>
+        );
+    }
+
+    loadPreview() {
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'getRandomTagPreview');
+        updateRequest.append('id', this.props.tag_id);
+
+        fetch('/api/Tags.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.text())
+            .then((result) => {
+                this.setState({thumbnail: result});
+            });
+    }
+}
+
 export default Preview;