From 76395d9f5746d5368753390671b429751bdab2b4 Mon Sep 17 00:00:00 2001
From: edvardds <edvardds@stud.ntnu.no>
Date: Wed, 23 Sep 2020 21:18:57 +0200
Subject: [PATCH] linted project, and added some styling to artpage
---
frontend/src/Components/ArtPage.tsx | 8 ++++----
frontend/src/Components/ExhibitionPiece.tsx | 4 ++--
frontend/src/Components/LandingPage.tsx | 2 +-
frontend/src/Components/MainPage.tsx | 5 ++---
frontend/src/Components/NavButton.tsx | 4 ++--
frontend/src/Style/ArtPage.css | 19 +++++++++----------
6 files changed, 20 insertions(+), 22 deletions(-)
diff --git a/frontend/src/Components/ArtPage.tsx b/frontend/src/Components/ArtPage.tsx
index 2b1831e..7672040 100644
--- a/frontend/src/Components/ArtPage.tsx
+++ b/frontend/src/Components/ArtPage.tsx
@@ -1,4 +1,4 @@
-import React, {Context} from 'react';
+import React from 'react';
import ExhibitionPiece from './ExhibitionPiece';
import FavoriteButton from './FavoriteButton';
import DropDown from './DropDown';
@@ -44,9 +44,9 @@ class ArtPage extends React.Component<props, state> {
componentDidUpdate(prevProps: Readonly<props>, prevState: Readonly<state>): void {
const {pageId} = this.props; // No toString as it compares with prevState
- if (prevProps.pageId != pageId) { // We have changed page. Must update the options
+ if (prevProps.pageId !== pageId) { // We have changed page. Must update the options
const savedOptions = sessionStorage.getItem(pageId.toString());
- if (savedOptions != null) { // Stored something previously
+ if (savedOptions !== null) { // Stored something previously
const savedOptionsObject = JSON.parse(savedOptions); // Convert string to object
this.updateOptions(savedOptionsObject);
} else {
@@ -84,4 +84,4 @@ class ArtPage extends React.Component<props, state> {
}
}
-export default ArtPage;
\ No newline at end of file
+export default ArtPage;
diff --git a/frontend/src/Components/ExhibitionPiece.tsx b/frontend/src/Components/ExhibitionPiece.tsx
index 39e671f..f0cd503 100644
--- a/frontend/src/Components/ExhibitionPiece.tsx
+++ b/frontend/src/Components/ExhibitionPiece.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
import usePoetry from './usePoetry';
import SVGs from '../SVGs';
@@ -33,4 +33,4 @@ const ExhibitionPiece = (props: props) => {
);
};
-export default ExhibitionPiece;
\ No newline at end of file
+export default ExhibitionPiece;
diff --git a/frontend/src/Components/LandingPage.tsx b/frontend/src/Components/LandingPage.tsx
index 9f98f55..afdfb83 100644
--- a/frontend/src/Components/LandingPage.tsx
+++ b/frontend/src/Components/LandingPage.tsx
@@ -1,4 +1,4 @@
-import React, {ReactComponentElement, ReactElement} from 'react';
+import React, { ReactElement} from 'react';
import NavButton from './NavButton';
import "../Style/LandingPage.css"
import FavoriteLink from "./FavoriteLink";
diff --git a/frontend/src/Components/MainPage.tsx b/frontend/src/Components/MainPage.tsx
index 57075c6..e2a55d6 100644
--- a/frontend/src/Components/MainPage.tsx
+++ b/frontend/src/Components/MainPage.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import '../Style/MainPage.css';
-import ExhibitionPiece from './ExhibitionPiece';
import LandingPage from './LandingPage';
import ArtPage from './ArtPage';
@@ -22,13 +21,13 @@ class MainPage extends React.Component<props, state> {
state = {currentPage: 1, totalPages: 11}; // Index of which page to render. 0 is the landing page
determineRender() { // Decides what page will be rendered
- return this.state.currentPage == 0 ? <LandingPage/> :
+ return this.state.currentPage === 0 ? <LandingPage/> :
<ArtPage pageId={this.state.currentPage}/>;
}
changePage = (increment: boolean) => {
const newPage = increment ? this.state.currentPage + 1 : this.state.currentPage - 1;
- if (newPage == -1)
+ if (newPage === -1)
this.setState({currentPage: this.state.totalPages - 1}); // Negative modulo not supported
else
this.setState({currentPage: newPage % this.state.totalPages}); // Go to the new page or loop around if you've hit last page
diff --git a/frontend/src/Components/NavButton.tsx b/frontend/src/Components/NavButton.tsx
index 03d86be..c80a4a6 100644
--- a/frontend/src/Components/NavButton.tsx
+++ b/frontend/src/Components/NavButton.tsx
@@ -1,5 +1,4 @@
import React, {useContext} from 'react';
-import usePoetry from "./usePoetry";
import {PageContext} from "./MainPage";
import leftarrow from "../Media/left-arrow.png";
import rightarrow from "../Media/right-arrow.png";
@@ -13,13 +12,14 @@ const NavButton = (props: props) => {
console.log(context);
const onClick = () => {
- const increment: boolean = props.direction == "right";
+ const increment: boolean = props.direction === "right";
context.changePage(increment);
};
return (
<img
src={props.direction === "right" ? rightarrow : leftarrow}
+ alt={props.direction}
style={{ width: '4rem', height: '4rem' }}
onClick={onClick}
/>
diff --git a/frontend/src/Style/ArtPage.css b/frontend/src/Style/ArtPage.css
index 2a4e22c..11cc67c 100644
--- a/frontend/src/Style/ArtPage.css
+++ b/frontend/src/Style/ArtPage.css
@@ -1,12 +1,11 @@
.artpage {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
- grid-template-rows: 1fr 10fr 1fr;
+ grid-template-rows: 1fr 11fr;
height: 100vh;
grid-template-areas:
"favorite . dropdown"
- "left exhibition right"
- ". . ." ;
+ "left exhibition right";
}
.exhibition-piece {
@@ -29,6 +28,7 @@ svg {
}
.dropdown {
+ grid-area: dropdown;
grid-row: 1 / 2;
grid-column: 3 / 4;
display: flex;
@@ -37,6 +37,12 @@ svg {
margin-top: 1rem;
}
+.favorite-button {
+ grid-area: favorite;
+ margin-left: 2rem;
+ margin-top: 1rem;
+}
+
.background-one {
background-color: rgb(175, 213, 170);
}
@@ -65,19 +71,12 @@ svg {
font-family: "Comic Sans MS", serif;
}
-.navbutton {
- grid-row: 3 / 4;
- display: flex;
-}
.navbutton.left {
- grid-column: 1 / 2;
grid-area: left;
- flex-direction: row-reverse;
margin-right: 10rem;
}
.navbutton.right {
- grid-column: 3 / 4;
grid-area: right;
margin-left: 10rem;
}
--
GitLab