From f9fff53a5c35783d00831229a41de5d152f17c64 Mon Sep 17 00:00:00 2001
From: Thor-Herman Van Eggelen <theggele@stud.ntnu.no>
Date: Sat, 12 Sep 2020 16:59:23 +0200
Subject: [PATCH] Create ArtPage skeleton and poetry retrieval #7 #4
The array should contain the different artworks
Indexing is based on the pageId
---
frontend/src/Components/ArtPage.tsx | 19 ++++++++--
frontend/src/Components/DropDown.tsx | 7 ++++
frontend/src/Components/ExhibitionPiece.tsx | 29 +++++++++++++--
frontend/src/Components/FavoriteButton.tsx | 7 ++++
frontend/src/Components/MainPage.tsx | 2 +-
frontend/src/Components/NavButton.tsx | 7 ++++
frontend/src/Components/usePoetry.tsx | 40 +++++++++++++++++++++
7 files changed, 104 insertions(+), 7 deletions(-)
create mode 100644 frontend/src/Components/DropDown.tsx
create mode 100644 frontend/src/Components/FavoriteButton.tsx
create mode 100644 frontend/src/Components/NavButton.tsx
create mode 100644 frontend/src/Components/usePoetry.tsx
diff --git a/frontend/src/Components/ArtPage.tsx b/frontend/src/Components/ArtPage.tsx
index a69be6f..e0f22c1 100644
--- a/frontend/src/Components/ArtPage.tsx
+++ b/frontend/src/Components/ArtPage.tsx
@@ -1,6 +1,12 @@
import React from 'react';
+import ExhibitionPiece from './ExhibitionPiece';
+import FavoriteButton from './FavoriteButton';
+import DropDown from './DropDown';
+import NavButton from './NavButton';
-interface props {
+;
+
+type props = {
pageId: number; // The id of the page
}
@@ -10,9 +16,16 @@ class ArtPage extends React.Component<props> {
super(props);
}
-
render() {
- return <div>ArtPage</div>;
+ return (
+ <div className={"artpage"}>
+ <FavoriteButton />
+ <DropDown />
+ <ExhibitionPiece artId={this.props.pageId} />
+ <NavButton />
+ <NavButton />
+ </div>
+ );
}
}
diff --git a/frontend/src/Components/DropDown.tsx b/frontend/src/Components/DropDown.tsx
new file mode 100644
index 0000000..ce3aefc
--- /dev/null
+++ b/frontend/src/Components/DropDown.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const DropDown = () => {
+ return <div>DropDown</div>
+};
+
+export default DropDown;
\ No newline at end of file
diff --git a/frontend/src/Components/ExhibitionPiece.tsx b/frontend/src/Components/ExhibitionPiece.tsx
index 9a4aab4..38ba99d 100644
--- a/frontend/src/Components/ExhibitionPiece.tsx
+++ b/frontend/src/Components/ExhibitionPiece.tsx
@@ -1,9 +1,32 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import usePoetry from './usePoetry';
+
+const SVGs = [ // Collection of Artworks that will be displayed
+ <svg viewBox={"50 50 200 80"}>
+ <rect width={"200"} height={80} fill={"blue"} />
+ </svg>,
+ // TODO: ADD SVGS IN HERE
+]
+
+type props = {
+ artId: number;
+}
+
+const ExhibitionPiece = (props: props) => {
+ const [title, poem, author] = usePoetry(props.artId-1); // Calls on the usePoetry hook to retrieve the poem corresponding to Id
-const ExhibitionPiece = () => {
return (
<div className={'exhibition-piece'}>
- Exhib Piece
+ <div>
+ {title}
+ {author}
+ </div>
+ <div>
+ {SVGs[props.artId-1]}
+ </div>
+ <div>
+ {poem}
+ </div>
</div>
);
};
diff --git a/frontend/src/Components/FavoriteButton.tsx b/frontend/src/Components/FavoriteButton.tsx
new file mode 100644
index 0000000..c926277
--- /dev/null
+++ b/frontend/src/Components/FavoriteButton.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const FavoriteButton = () => {
+ return <div>FavoriteButton</div>
+}
+
+export default FavoriteButton;
\ No newline at end of file
diff --git a/frontend/src/Components/MainPage.tsx b/frontend/src/Components/MainPage.tsx
index 17c5939..b3f81d9 100644
--- a/frontend/src/Components/MainPage.tsx
+++ b/frontend/src/Components/MainPage.tsx
@@ -7,7 +7,7 @@ import ArtPage from './ArtPage';
class MainPage extends React.Component {
- state = {currentPage: 0}; // Index of which page to render. 0 is the landing page
+ state = {currentPage: 1}; // Index of which page to render. 0 is the landing page
determineRender() {
return this.state.currentPage == 0 ? <LandingPage /> : <ArtPage pageId={this.state.currentPage} />
diff --git a/frontend/src/Components/NavButton.tsx b/frontend/src/Components/NavButton.tsx
new file mode 100644
index 0000000..2265f92
--- /dev/null
+++ b/frontend/src/Components/NavButton.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const NavButton = () => {
+ return <div>NavButton</div>
+};
+
+export default NavButton;
\ No newline at end of file
diff --git a/frontend/src/Components/usePoetry.tsx b/frontend/src/Components/usePoetry.tsx
new file mode 100644
index 0000000..f02531d
--- /dev/null
+++ b/frontend/src/Components/usePoetry.tsx
@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+
+const poets = [
+ "Walt Whitman",
+ "William Shakespeare",
+ "Alexander Pope",
+ "Edgar Allan Poe",
+ "Emily Bronte",
+ "John Keats",
+ "Oscar Wilde",
+ "William Wordsworth",
+ "Charlotte Bronte",
+ "Eliza Cook"
+]
+
+type dataResponse = {
+ title: string;
+ author: string;
+ lines: Array<string>;
+ linecount: number;
+}
+
+const usePoetry = (poetId: number) => { // Custom hook for retrieving poetry. Enter id and it will retrieve the corresponding poem
+ const [poem, setPoem] = useState<Array<string> | null>(null); // The poem itself. Initialized as null
+ const [title, setTitle] = useState("");
+ const [author, setAuthor] = useState("");
+
+ useEffect(() => { // Will run every time the Id changes
+ fetch(`https://poetrydb.org/author,poemcount,linecount/${poets[poetId]};1;4`) // GET request to poetryDb
+ .then((response) => response.json()) // Convert response to json
+ .then((data: Array<dataResponse>) => {
+ setPoem(data[0].lines); // Update the state
+ setTitle(data[0].title);
+ setAuthor(data[0].author);
+ });
+ }, [poetId]);
+
+ return [title, poem, author];
+}
+export default usePoetry;
\ No newline at end of file
--
GitLab