make tags deleteable

seperate sidebar for each different category page

src/elements/PageTitle/PageTitle.tsx

@@ -4,7 +4,7 @@ import GlobalInfos from '../../utils/GlobalInfos';
 
 interface props {
     title: string;
-    subtitle: string | null;
+    subtitle: string | number | null;
 }
 
 /**

src/elements/Popups/AddTagPopup/AddTagPopup.test.js

@@ -22,60 +22,14 @@ describe('<AddTagPopup/>', function () {
     });
 
     it('test tag click', function () {
-        const wrapper = shallow(<AddTagPopup/>);
-        wrapper.instance().addTag = jest.fn();
+        const wrapper = shallow(<AddTagPopup submit={jest.fn()} onHide={jest.fn()}/>);
 
         wrapper.setState({
             items: [{tag_id: 1, tag_name: 'test'}]
         }, () => {
             wrapper.find('Tag').first().dive().simulate('click');
-            expect(wrapper.instance().addTag).toHaveBeenCalledTimes(1);
-        });
-    });
-
-    it('test addtag', done => {
-        const wrapper = shallow(<AddTagPopup movie_id={1}/>);
-
-        global.fetch = prepareFetchApi({result: 'success'});
-
-        wrapper.setProps({
-            submit: jest.fn(() => {}),
-            onHide: jest.fn()
-        }, () => {
-            wrapper.instance().addTag(1, 'test');
-
-            expect(global.fetch).toHaveBeenCalledTimes(1);
-        });
-
-        process.nextTick(() => {
             expect(wrapper.instance().props.submit).toHaveBeenCalledTimes(1);
             expect(wrapper.instance().props.onHide).toHaveBeenCalledTimes(1);
-
-            global.fetch.mockClear();
-            done();
-        });
-    });
-
-    it('test failing addTag', done => {
-        const wrapper = shallow(<AddTagPopup movie_id={1}/>);
-
-        global.fetch = prepareFetchApi({result: 'fail'});
-
-        wrapper.setProps({
-            submit: jest.fn(() => {}),
-            onHide: jest.fn()
-        }, () => {
-            wrapper.instance().addTag(1, 'test');
-
-            expect(global.fetch).toHaveBeenCalledTimes(1);
-        });
-
-        process.nextTick(() => {
-            expect(wrapper.instance().props.submit).toHaveBeenCalledTimes(0);
-            expect(wrapper.instance().props.onHide).toHaveBeenCalledTimes(1);
-
-            global.fetch.mockClear();
-            done();
         });
     });
 });

src/elements/Popups/AddTagPopup/AddTagPopup.tsx

@@ -3,7 +3,6 @@ import Tag from '../../Tag/Tag';
 import PopupBase from '../PopupBase';
 import {callAPI} from '../../../utils/Api';
 import {TagType} from '../../../types/VideoTypes';
-import {GeneralSuccess} from '../../../types/GeneralTypes';
 
 interface props {
     onHide: () => void;
@@ -41,29 +40,13 @@ class AddTagPopup extends React.Component<props, state> {
                     this.state.items.map((i) => (
                         <Tag tagInfo={i}
                              onclick={(): void => {
-                                 this.addTag(i.tag_id, i.tag_name);
+                                 this.props.submit(i.tag_id, i.tag_name);
+                                 this.props.onHide();
                              }}/>
                     )) : null}
             </PopupBase>
         );
     }
-
-    /**
-     * add a new tag to this video
-     * @param tagid tag id to add
-     * @param tagname tag name to add
-     */
-    addTag(tagid: number, tagname: string): void {
-        callAPI('tags.php', {action: 'addTag', id: tagid, movieid: this.props.movie_id}, (result: GeneralSuccess) => {
-            if (result.result !== 'success') {
-                console.log('error occured while writing to db -- todo error handling');
-                console.log(result.result);
-            } else {
-                this.props.submit(tagid, tagname);
-            }
-            this.props.onHide();
-        });
-    }
 }
 
 export default AddTagPopup;

src/elements/Popups/SubmitPopup/SubmitPopup.test.js

@@ -0,0 +1,28 @@
+import {shallow} from "enzyme";
+import React from "react";
+import SubmitPopup from "./SubmitPopup";
+
+describe('<SubmitPopup/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<SubmitPopup/>);
+        wrapper.unmount();
+    });
+
+    it('test submit click', function () {
+        const func = jest.fn();
+        const wrapper = shallow(<SubmitPopup submit={() => func()}/>);
+
+        wrapper.find('Button').findWhere(p => p.props().title === 'Submit').simulate('click');
+
+        expect(func).toHaveBeenCalledTimes(1);
+    });
+
+    it('test cancel click', function () {
+        const func = jest.fn();
+        const wrapper = shallow(<SubmitPopup onHide={() => func()}/>);
+
+        wrapper.find('Button').findWhere(p => p.props().title === 'Cancel').simulate('click');
+
+        expect(func).toHaveBeenCalledTimes(1);
+    });
+});

src/elements/Popups/SubmitPopup/SubmitPopup.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PopupBase from '../PopupBase';
+import {Button} from '../../GPElements/Button';
+
+interface props {
+    onHide: (_: void) => void;
+    submit: (_: void) => void;
+}
+
+export default function SubmitPopup(props: props): JSX.Element {
+    return (
+        <PopupBase title='Are you sure?' onHide={props.onHide} height='160px' width='300px'>
+            <Button title='Submit' color={{backgroundColor: 'green'}} onClick={(): void => props.submit()}/>
+            <Button title='Cancel' color={{backgroundColor: 'red'}} onClick={(): void => props.onHide()}/>
+        </PopupBase>
+    );
+
+}