Commit da96e96e authored by Svein Olav Styve's avatar Svein Olav Styve

Fix merge conflict

parents bca0dd70 82e6da71
{
"text": "Here is some text loaded with ajax in json and this is great! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
{
"text": "Here is some text loaded with ajax in json about Grapefruit! :D Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
\ No newline at end of file
{
"text": "Here is some text loaded with ajax in json about Lime! :D Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
\ No newline at end of file
{
"text": "Here is some text loaded with ajax in json about TOMATO! :D Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/>
<path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"/>
<text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">410</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/>
<path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#71A"/>
<text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">420</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/>
<path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#9b3"/>
<text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">430</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/>
<path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#123"/>
<text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">440</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/>
<path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#71A"/>
<text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">420</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/>
<path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#9b3"/>
<text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">430</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/>
<path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#123"/>
<text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">440</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/>
<path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"/>
<text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">410</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/>
<path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#9b3"/>
<text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">430</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/>
<path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"/>
<text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">410</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/>
<path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#123"/>
<text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">440</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/>
<path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#71A"/>
<text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">420</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/>
<path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"/>
<text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">410</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/>
<path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#71A"/>
<text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">420</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/>
<path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#9b3"/>
<text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">430</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/>
<path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#123"/>
<text x="35" y="55" fontSize="48" fill="#FFF" textAnchor="middle">440</text>
</svg>
This diff is collapsed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
# https://www.robotstxt.org/robotstxt.html
User-agent: *
{
"text": "City
BY FREDERICK SEIDEL
Right now, a dog tied up in the street is barking
With the grief of being left,
A dog bereft.
Right now, a car is parking.
The dog emits
Petals of a barking flower and barking flakes of snow
That float upward from the street below
To where another victim sits:
Who listens to the whole city
And the dog honking like a car alarm,
And doesn’t mean the dog any harm,
And doesn’t feel any pity."
}
\ No newline at end of file
{
"text": "Text cat 0, tab 1"
}
\ No newline at end of file
{
"text": "Text cat 0, tab 2"
}
\ No newline at end of file
{
"text": "Text cat 0, tab 3"
}
\ No newline at end of file
{
"text": "Text cat 1, tab 0"
}
\ No newline at end of file
{
"text": "Text cat 1, tab 1"
}
\ No newline at end of file
{
"text": "Text cat 1, tab 2"
}
\ No newline at end of file
{
"text": "Text cat 1, tab 3"
}
\ No newline at end of file
{
"text": "Text cat 2, tab 0"
}
\ No newline at end of file
{
"text": "Text cat 2, tab 1"
}
\ No newline at end of file
{
"text": "Text cat 2, tab 2"
}
\ No newline at end of file
{
"text": "Text cat 2, tab 3"
}
\ No newline at end of file
{
"text": "Here is some text loaded with ajax in json and this is great! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
{
"text": "Here is some text loaded with ajax in json about Grapefruit! :D Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
\ No newline at end of file
{
"text": "Here is some text loaded with ajax in json about Lime! :D Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
\ No newline at end of file
{
"text": "Here is some text loaded with ajax in json about TOMATO! :D Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
\ No newline at end of file
import React from 'react';
import './App.css';
import Title from './components/Title';
import Artwork from './components/Artwork';
import './artwork.css';
import {render} from "react-dom";
import Tabs from './components/Tabs';
import DisplayChooser from './components/DisplayChooser';
import FavoriteSection from './components/FavoriteSection';
import SessionElement from './components/SessionElement';
import './navbar.css';
window.onbeforeunload = () => {
sessionStorage.clear();
};
......@@ -21,7 +16,6 @@ class App extends React.Component {
super(props);
this.handleArtworkChange = this.handleArtworkChange.bind(this);
this.getImageTitle = this.getImageTitle.bind(this);
this.handleCategoryChange = this.handleCategoryChange.bind(this);
this.checkForEmptyLocalStorage = this.checkForEmptyLocalStorage.bind(this);
this.saveAsFavorite = this.saveAsFavorite.bind(this);
......@@ -42,11 +36,11 @@ class App extends React.Component {
};
} else {
this.state = {
artwork: 0,
artwork: Math.floor((Math.random() * 4)),
categorySelections: {
textCat: 0,
imageCat: 0,
audioCat: 0,
textCat: Math.floor((Math.random() * 3)),
imageCat: Math.floor((Math.random() * 3)),
audioCat: Math.floor((Math.random() * 3)),
},
sessionHistory: [],
sessionCounter: 0
......@@ -54,6 +48,10 @@ class App extends React.Component {
}
}
componentDidMount() {
this.updateSession();
}
checkForEmptyLocalStorage() {
return !(localStorage.getItem('Text') === null || localStorage.getItem('Image') === null ||
localStorage.getItem('Audio') === null || localStorage.getItem('artwork') === null);
......@@ -86,7 +84,10 @@ class App extends React.Component {
});
};
sessionClicked = data => {
sessionClicked = (data, index) => {
this.setState({
sessionCounter: index + 1
})
let dataAsArray = data.split(";");
this.setState({
artwork: (parseInt(dataAsArray[0].split(":").pop()) - 1),
......@@ -101,7 +102,12 @@ class App extends React.Component {
updateSession = () => {
let newCombination = JSON.parse(sessionStorage.getItem('combinationHistory'));
if (newCombination === null) {
console.log("###");
newCombination = [];
} else {
// Remove forward history if manually selecting new artwork or category
newCombination = newCombination.splice(0, this.state.sessionCounter);
}
newCombination.push(
this.state.sessionCounter + "/" +
......@@ -111,22 +117,54 @@ class App extends React.Component {
"Audio:" + (parseInt(this.state.categorySelections.audioCat) + 1)
);
sessionStorage.setItem('combinationHistory', JSON.stringify(newCombination));
this.setState({
this.setState((oldState) => ({
sessionHistory: JSON.parse(sessionStorage.getItem('combinationHistory')),
sessionCounter: (this.state.sessionCounter + 1)
});
sessionCounter: (oldState.sessionCounter + 1)
}));
};
sessionBack = () => {
if (this.state.sessionCounter <= 1) return;
this.setState(oldState => {
let dataAsArray = oldState.sessionHistory[this.state.sessionCounter - 2].split(";");
return {
sessionCounter: (oldState.sessionCounter - 1),
artwork: (parseInt(dataAsArray[0].split(":").pop()) - 1),
categorySelections: {
textCat: (parseInt(dataAsArray[1].split(":").pop()) - 1),
imageCat: (parseInt(dataAsArray[2].split(":").pop()) - 1),
audioCat: (parseInt(dataAsArray[3].split(":").pop()) - 1)
}
}
});
}
sessionFwd = () => {
if (this.state.sessionCounter >= this.state.sessionHistory.length) return;
this.setState(oldState => {
let dataAsArray = oldState.sessionHistory[this.state.sessionCounter].split(";");
return {
sessionCounter: (oldState.sessionCounter + 1),
artwork: (parseInt(dataAsArray[0].split(":").pop()) - 1),
categorySelections: {
textCat: (parseInt(dataAsArray[1].split(":").pop()) - 1),
imageCat: (parseInt(dataAsArray[2].split(":").pop()) - 1),
audioCat: (parseInt(dataAsArray[3].split(":").pop()) - 1)
}
}
});
}
handleArtworkChange(artworkId) {
if (this.state.artwork === artworkId) return;
localStorage.setItem("artwork", artworkId);
this.setState({artwork: artworkId}, event => this.updateSession());
}
getImageTitle() {
let titles = ["Artwork 1", "Artwork 2", "Artwork 3", "Artwork 4"];
return titles[this.state.artwork] + JSON.stringify(this.state.categorySelections); // CategorySelection added for testing
}
handleCategoryChange(name, valueAsString) {
let value = parseInt(valueAsString);
const oldCatSel = this.state.categorySelections;
......@@ -189,8 +227,13 @@ class App extends React.Component {
categorySelections={categorySelections}/>
</div>
</div>
<FavoriteSection handler={this}/>
<SessionElement sessionHistory={sessionHistory} handler={this}/>
<FavoriteSection save={this.saveAsFavorite} open={this.openFavorite}/>
<SessionElement sessionHistory={sessionHistory}
sessionClicked={this.sessionClicked}
sessionIndex={this.state.sessionCounter}
backClicked={this.sessionBack}
fwdClicked={this.sessionFwd}
/>
</div>
);
}
......
import React from 'react';
import ReactDOM from 'react-dom';
import renderer from 'react-test-renderer';
import Title from './components/Title';
// Example
describe('My Test Suite', () => {
it('My Test Case', () => {
expect(true).toEqual(true);
});
});
// Snapshot Test Title-component
describe('Title', () => {
test('snapshot renders', () => {
const component = renderer.create(<Title title={"my title"} />);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
});
// Render App, TODO-MAYBE: must mock lots of stuff...
// it('renders without crashing', () => {
// const div = document.createElement('div');
// ReactDOM.render(<App />, div);
// ReactDOM.unmountComponentAtNode(div);
// });
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Title snapshot renders 1`] = `
<h1
className="Title"
>
my title
</h1>
`;
.theArtwork {
text-align: center;
display: grid;
grid-template-columns: 1fr 1fr;
}
.tabs{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 1;
}
.text {
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 5;
}
.theImage{
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 3;
grid-row-end: 5;
max-width: 700px;
max-height: 300px;
width: 100%;
height: auto;
}
.Image svg {
max-width: 90%;
max-height: auto;
margin-top: 5%;
}
.audio{
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 5;
grid-row-end: 5;
}
......@@ -5,7 +5,7 @@ import Audio from './Audio';
import Tabs from './Tabs';
import '../style/Artwork.css';
class Artwork extends React.Component {
export default class Artwork extends React.Component {
constructor(props) {
super(props);
......@@ -38,7 +38,4 @@ class Artwork extends React.Component {
</div>
);
}
}
export default Artwork;
import React from 'react';
import '../style/CategoryComponent.css';
export default class Categories extends React.Component {
constructor(props) {
super(props);
}