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

 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>
+    );
   }
 }
 

frontend/src/Components/DropDown.tsx

+import React from 'react';
+
+const DropDown = () => {
+  return <div>DropDown</div>
+};
+
+export default DropDown;
\ No newline at end of file

frontend/src/Components/ExhibitionPiece.tsx

-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>
   );
 };

frontend/src/Components/FavoriteButton.tsx

+import React from 'react';
+
+const FavoriteButton = () => {
+  return <div>FavoriteButton</div>
+}
+
+export default FavoriteButton;
\ No newline at end of file

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} />

frontend/src/Components/NavButton.tsx

+import React from 'react';
+
+const NavButton = () => {
+  return <div>NavButton</div>
+};
+
+export default NavButton;
\ No newline at end of file

frontend/src/Components/usePoetry.tsx

+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