reformattings

no redirect on tagclick on homepage
no multiple add of same tag possible
This commit is contained in:
2020-10-25 18:48:23 +00:00
parent 812c45cb13
commit 777cc2a712
43 changed files with 493 additions and 448 deletions

View File

@ -1,9 +1,9 @@
import React from "react";
import React from 'react';
import ReactDom from 'react-dom';
import style from './AddTagPopup.module.css'
import Tag from "../Tag/Tag";
import {Line} from "../PageTitle/PageTitle";
import GlobalInfos from "../../GlobalInfos";
import style from './AddTagPopup.module.css';
import Tag from '../Tag/Tag';
import {Line} from '../PageTitle/PageTitle';
import GlobalInfos from '../../GlobalInfos';
/**
* component creates overlay to add a new tag to a video
@ -84,7 +84,7 @@ class AddTagPopup extends React.Component {
*/
keypress(event) {
// hide if escape is pressed
if (event.key === "Escape") {
if (event.key === 'Escape') {
this.props.onHide();
}
}
@ -95,7 +95,7 @@ class AddTagPopup extends React.Component {
* @param tagname tag name to add
*/
addTag(tagid, tagname) {
console.log(this.props)
console.log(this.props);
const updateRequest = new FormData();
updateRequest.append('action', 'addTag');
updateRequest.append('id', tagid);
@ -104,8 +104,8 @@ class AddTagPopup extends React.Component {
fetch('/api/tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
if (result.result !== "success") {
console.log("error occured while writing to db -- todo error handling");
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);
@ -142,8 +142,8 @@ class AddTagPopup extends React.Component {
xOld = e.clientX;
yOld = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - dy) + "px";
elmnt.style.left = (elmnt.offsetLeft - dx) + "px";
elmnt.style.top = (elmnt.offsetTop - dy) + 'px';
elmnt.style.left = (elmnt.offsetLeft - dx) + 'px';
}
function closeDragElement() {

View File

@ -1,9 +1,9 @@
import React from "react";
import React from 'react';
import {shallow} from 'enzyme'
import "@testing-library/jest-dom"
import {shallow} from 'enzyme';
import '@testing-library/jest-dom';
import AddTagPopup from "./AddTagPopup";
import AddTagPopup from './AddTagPopup';
describe('<AddTagPopup/>', function () {
it('renders without crashing ', function () {
@ -14,10 +14,10 @@ describe('<AddTagPopup/>', function () {
it('test tag insertion', function () {
const wrapper = shallow(<AddTagPopup/>);
wrapper.setState({
items: [{tag_id: 1, tag_name: 'test'}, {tag_id: 2, tag_name: "ee"}]
items: [{tag_id: 1, tag_name: 'test'}, {tag_id: 2, tag_name: 'ee'}]
}, () => {
expect(wrapper.find('Tag')).toHaveLength(2);
expect(wrapper.find('Tag').first().dive().text()).toBe("test");
expect(wrapper.find('Tag').first().dive().text()).toBe('test');
});
});
@ -36,13 +36,13 @@ describe('<AddTagPopup/>', function () {
it('test addtag', done => {
const wrapper = shallow(<AddTagPopup/>);
global.fetch = prepareFetchApi({result: "success"});
global.fetch = prepareFetchApi({result: 'success'});
wrapper.setProps({
submit: jest.fn(() => {}),
onHide: jest.fn()
}, () => {
wrapper.instance().addTag(1, "test");
wrapper.instance().addTag(1, 'test');
expect(global.fetch).toHaveBeenCalledTimes(1);
});
@ -59,13 +59,13 @@ describe('<AddTagPopup/>', function () {
it('test failing addTag', done => {
const wrapper = shallow(<AddTagPopup/>);
global.fetch = prepareFetchApi({result: "fail"});
global.fetch = prepareFetchApi({result: 'fail'});
wrapper.setProps({
submit: jest.fn(() => {}),
onHide: jest.fn()
}, () => {
wrapper.instance().addTag(1, "test");
wrapper.instance().addTag(1, 'test');
expect(global.fetch).toHaveBeenCalledTimes(1);
});

View File

@ -1,7 +1,7 @@
import React from "react";
import React from 'react';
import style from './InfoHeaderItem.module.css';
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {Spinner} from "react-bootstrap";
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {Spinner} from 'react-bootstrap';
/**
* a component to display one of the short quickinfo tiles on dashboard
@ -15,8 +15,8 @@ class InfoHeaderItem extends React.Component {
}} className={style.infoheaderitem} style={{backgroundColor: this.props.backColor}}>
<div className={style.icon}>
<FontAwesomeIcon style={{
verticalAlign: "middle",
lineHeight: "130px"
verticalAlign: 'middle',
lineHeight: '130px'
}} icon={this.props.icon} size='5x'/>
</div>
{this.props.text !== null && this.props.text !== undefined ?

View File

@ -1,6 +1,6 @@
import {shallow} from "enzyme";
import React from "react";
import InfoHeaderItem from "./InfoHeaderItem";
import {shallow} from 'enzyme';
import React from 'react';
import InfoHeaderItem from './InfoHeaderItem';
describe('<InfoHeaderItem/>', function () {
it('renders without crashing ', function () {
@ -10,34 +10,34 @@ describe('<InfoHeaderItem/>', function () {
it('renders correct text', function () {
const wrapper = shallow(<InfoHeaderItem text='mytext'/>);
expect(wrapper.find(".maintext").text()).toBe("mytext");
expect(wrapper.find('.maintext').text()).toBe('mytext');
});
it('renders correct subtext', function () {
const wrapper = shallow(<InfoHeaderItem text='mimi' subtext='testtext'/>);
expect(wrapper.find(".subtext").text()).toBe("testtext");
expect(wrapper.find('.subtext').text()).toBe('testtext');
});
it('test no subtext if no text defined', function () {
const wrapper = shallow(<InfoHeaderItem subtext='testi'/>);
expect(wrapper.find(".subtext")).toHaveLength(0);
expect(wrapper.find('.subtext')).toHaveLength(0);
});
it('test custom click handler', function () {
const func = jest.fn();
const wrapper = shallow(<InfoHeaderItem onClick={() => func()}/>);
expect(func).toBeCalledTimes(0);
wrapper.simulate("click");
wrapper.simulate('click');
expect(func).toBeCalledTimes(1);
});
it('test insertion of loading spinner', function () {
const wrapper = shallow(<InfoHeaderItem text={null}/>);
expect(wrapper.find("Spinner").length).toBe(1);
expect(wrapper.find('Spinner').length).toBe(1);
});
it('test loading spinner if undefined', function () {
const wrapper = shallow(<InfoHeaderItem/>);
expect(wrapper.find("Spinner").length).toBe(1);
expect(wrapper.find('Spinner').length).toBe(1);
});
});

View File

@ -1,6 +1,6 @@
import React from "react";
import Modal from 'react-bootstrap/Modal'
import {Form} from "react-bootstrap";
import React from 'react';
import Modal from 'react-bootstrap/Modal';
import {Form} from 'react-bootstrap';
/**
* creates modal overlay to define a new Tag
@ -30,7 +30,7 @@ class NewTagPopup extends React.Component {
<Form.Group>
<Form.Label>Tag Name:</Form.Label>
<Form.Control id='namefield' type='text' placeholder='Enter Tag name' onChange={(v) => {
this.value = v.target.value
this.value = v.target.value;
}}/>
<Form.Text className='text-muted'>
This Tag will automatically show up on category page.
@ -59,8 +59,8 @@ class NewTagPopup extends React.Component {
fetch('/api/tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((result) => {
if (result.result !== "success") {
console.log("error occured while writing to db -- todo error handling");
if (result.result !== 'success') {
console.log('error occured while writing to db -- todo error handling');
console.log(result.result);
}
this.props.onHide();

View File

@ -1,8 +1,8 @@
import React from "react";
import React from 'react';
import {shallow} from 'enzyme'
import "@testing-library/jest-dom"
import NewTagPopup from "./NewTagPopup";
import {shallow} from 'enzyme';
import '@testing-library/jest-dom';
import NewTagPopup from './NewTagPopup';
describe('<NewTagPopup/>', function () {
it('renders without crashing ', function () {
@ -14,7 +14,7 @@ describe('<NewTagPopup/>', function () {
const mockSuccessResponse = {};
const mockJsonPromise = Promise.resolve(mockSuccessResponse);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise,
json: () => mockJsonPromise
});
global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
@ -23,7 +23,7 @@ describe('<NewTagPopup/>', function () {
const wrapper = shallow(<NewTagPopup/>);
wrapper.setProps({
onHide: () => {
func()
func();
}
});

View File

@ -1,6 +1,6 @@
import React from "react";
import style from "./PageTitle.module.css"
import GlobalInfos from "../../GlobalInfos";
import React from 'react';
import style from './PageTitle.module.css';
import GlobalInfos from '../../GlobalInfos';
/**
* Component for generating PageTitle with bottom Line

View File

@ -1,7 +1,7 @@
import React from 'react';
import {shallow} from 'enzyme'
import {shallow} from 'enzyme';
import PageTitle from "./PageTitle";
import PageTitle from './PageTitle';
describe('<Preview/>', function () {
it('renders without crashing ', function () {
@ -13,19 +13,19 @@ describe('<Preview/>', function () {
const wrapper = shallow(<PageTitle>heyimachild</PageTitle>);
const children = wrapper.children();
expect(children.at(children.length - 2).text()).toBe("heyimachild");
expect(children.at(children.length - 2).text()).toBe('heyimachild');
});
it('renders pagetitle prop', function () {
const wrapper = shallow(<PageTitle title='testtitle'/>);
expect(wrapper.find(".pageheader").text()).toBe("testtitle<Line />");
expect(wrapper.find('.pageheader').text()).toBe('testtitle<Line />');
});
it('renders subtitle prop', function () {
const wrapper = shallow(<PageTitle subtitle='testsubtitle'/>);
expect(wrapper.find(".pageheadersubtitle").text()).toBe("testsubtitle");
expect(wrapper.find('.pageheadersubtitle').text()).toBe('testsubtitle');
});
});

View File

@ -1,8 +1,8 @@
import React from "react";
import style from "./Preview.module.css";
import Player from "../../pages/Player/Player";
import {Spinner} from "react-bootstrap";
import GlobalInfos from "../../GlobalInfos";
import React from 'react';
import style from './Preview.module.css';
import Player from '../../pages/Player/Player';
import {Spinner} from 'react-bootstrap';
import GlobalInfos from '../../GlobalInfos';
/**
* Component for single preview tile
@ -62,7 +62,7 @@ class Preview extends React.Component {
* handle the click event of a tile
*/
itemClick() {
console.log("item clicked!" + this.state.name);
console.log('item clicked!' + this.state.name);
this.props.viewbinding.changeRootElement(
<Player

View File

@ -1,7 +1,7 @@
import React from 'react';
import {shallow} from 'enzyme'
import {shallow} from 'enzyme';
import Preview, {TagPreview} from "./Preview";
import Preview, {TagPreview} from './Preview';
describe('<Preview/>', function () {
it('renders without crashing ', function () {
@ -23,7 +23,7 @@ describe('<Preview/>', function () {
wrapper.setProps({
viewbinding: {
changeRootElement: () => {
func()
func();
}
}
});
@ -38,7 +38,7 @@ describe('<Preview/>', function () {
const mockSuccessResponse = 'testsrc';
const mockJsonPromise = Promise.resolve(mockSuccessResponse);
const mockFetchPromise = Promise.resolve({
text: () => mockJsonPromise,
text: () => mockJsonPromise
});
global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
@ -49,7 +49,7 @@ describe('<Preview/>', function () {
process.nextTick(() => {
// received picture should be rendered into wrapper
expect(wrapper.find(".previewimage").props().src).not.toBeNull();
expect(wrapper.find('.previewimage').props().src).not.toBeNull();
global.fetch.mockClear();
done();
@ -61,7 +61,7 @@ describe('<Preview/>', function () {
const wrapper = shallow(<Preview/>);
// expect load animation to be visible
expect(wrapper.find(".loadAnimation")).toHaveLength(1);
expect(wrapper.find('.loadAnimation')).toHaveLength(1);
});
});
@ -84,7 +84,7 @@ describe('<TagPreview/>', function () {
const wrapper = shallow(<TagPreview/>);
wrapper.setProps({
categorybinding: () => {
func()
func();
}
});

View File

@ -1,6 +1,6 @@
import React from "react";
import style from "./SideBar.module.css"
import GlobalInfos from "../../GlobalInfos";
import React from 'react';
import style from './SideBar.module.css';
import GlobalInfos from '../../GlobalInfos';
/**
* component for sidebar-info

View File

@ -1,8 +1,8 @@
import React from "react";
import SideBar, {SideBarItem, SideBarTitle} from "./SideBar";
import React from 'react';
import SideBar, {SideBarItem, SideBarTitle} from './SideBar';
import "@testing-library/jest-dom"
import {shallow} from "enzyme";
import '@testing-library/jest-dom';
import {shallow} from 'enzyme';
describe('<SideBar/>', function () {
it('renders without crashing ', function () {
@ -12,16 +12,16 @@ describe('<SideBar/>', function () {
it('renders childs correctly', function () {
const wrapper = shallow(<SideBar>test</SideBar>);
expect(wrapper.children().text()).toBe("test");
expect(wrapper.children().text()).toBe('test');
});
it('sidebar Item renders without crashing', function () {
const wrapper = shallow(<SideBarItem>Test</SideBarItem>);
expect(wrapper.children().text()).toBe("Test");
expect(wrapper.children().text()).toBe('Test');
});
it('renderes sidebartitle correctly', function () {
const wrapper = shallow(<SideBarTitle>Test</SideBarTitle>);
expect(wrapper.children().text()).toBe("Test");
expect(wrapper.children().text()).toBe('Test');
});
});

View File

@ -1,7 +1,7 @@
import React from "react";
import React from 'react';
import styles from "./Tag.module.css"
import CategoryPage from "../../pages/CategoryPage/CategoryPage";
import styles from './Tag.module.css';
import CategoryPage from '../../pages/CategoryPage/CategoryPage';
/**
* A Component representing a single Category tag

View File

@ -1,8 +1,8 @@
import React from "react";
import Tag from './Tag'
import React from 'react';
import Tag from './Tag';
import "@testing-library/jest-dom"
import {shallow} from 'enzyme'
import '@testing-library/jest-dom';
import {shallow} from 'enzyme';
describe('<Tag/>', function () {
it('renders without crashing ', function () {
@ -12,7 +12,7 @@ describe('<Tag/>', function () {
it('renders childs correctly', function () {
const wrapper = shallow(<Tag>test</Tag>);
expect(wrapper.children().text()).toBe("test");
expect(wrapper.children().text()).toBe('test');
});
it('click event triggered and setvideo callback called', function () {
@ -27,7 +27,7 @@ describe('<Tag/>', function () {
expect(func).toBeCalledTimes(0);
wrapper.simulate("click");
wrapper.simulate('click');
expect(func).toBeCalledTimes(1);
});
@ -36,11 +36,11 @@ describe('<Tag/>', function () {
const func = jest.fn();
const wrapper = shallow(<Tag
onclick={() => {func()}}>test</Tag>);
onclick={() => {func();}}>test</Tag>);
expect(func).toBeCalledTimes(0);
wrapper.simulate("click");
wrapper.simulate('click');
expect(func).toBeCalledTimes(1);
});

View File

@ -1,6 +1,6 @@
import React from "react";
import Preview from "../Preview/Preview";
import style from "./VideoContainer.module.css"
import React from 'react';
import Preview from '../Preview/Preview';
import style from './VideoContainer.module.css';
/**
* A videocontainer storing lots of Preview elements
@ -39,7 +39,7 @@ class VideoContainer extends React.Component {
))}
{/*todo css for no items to show*/}
{this.state.loadeditems.length === 0 ?
"no items to show!" : null}
'no items to show!' : null}
{this.props.children}
</div>
);
@ -56,7 +56,7 @@ class VideoContainer extends React.Component {
* @param nr number of previews to load
*/
loadPreviewBlock(nr) {
console.log("loadpreviewblock called ...")
console.log('loadpreviewblock called ...');
let ret = [];
for (let i = 0; i < nr; i++) {
// only add if not end
@ -84,7 +84,7 @@ class VideoContainer extends React.Component {
if (window.innerHeight + document.documentElement.scrollTop + 200 >= document.documentElement.offsetHeight) {
this.loadPreviewBlock(8);
}
}
};
}
export default VideoContainer;

View File

@ -1,6 +1,6 @@
import {shallow} from "enzyme";
import React from "react";
import VideoContainer from "./VideoContainer";
import {shallow} from 'enzyme';
import React from 'react';
import VideoContainer from './VideoContainer';
describe('<VideoContainer/>', function () {
it('renders without crashing ', function () {
@ -25,6 +25,6 @@ describe('<VideoContainer/>', function () {
it('no items available', () => {
const wrapper = shallow(<VideoContainer data={[]}/>);
expect(wrapper.find('Preview')).toHaveLength(0);
expect(wrapper.find(".maincontent").text()).toBe("no items to show!");
expect(wrapper.find('.maincontent').text()).toBe('no items to show!');
});
});