added about component, added config json, and refactored static data …

…fetching

public/static-data/configuration.json

@@ -0,0 +1,4 @@
+{
+    "title":"michel losier",
+    "about":"TWljaGVsIGlzIGFuIGFydGlzdCBpbiBQb3J0bGFuZCwgT1IuIEhlIGdyZXcgdXAgaW4gRmxvcmlkYSBhbmQgZWFybmVkIGhpcyBCLlMuIGluIEFudGhyb3BvbG9neSBhbmQgUnVzc2lhbiBhbmQgRWFzdCBFdXJvcGVhbiBTdHVkaWVzIGZyb20gRmxvcmlkYSBTdGF0ZSBVbml2ZXJzaXR5LiBJdCB3YXMgaW4gaGlzIHN0dWR5IG9mIGN1bHR1cmFsIGxpbmd1aXN0aWNzIHRoYXQgaGUgYmVjYW1lIGludGVyZXN0ZWQgaW4gdGhlIHJlbGF0aW9uc2hpcHMgb2YgdGV4dCBhbmQgaW1hZ2Ugd2hpY2ggZXZlbnR1YWxseSBsZWFkIGhpbSB0byB0aGUgY29taWMgYXJ0cy4gSGlzIHdvcmsgaXMgc3Ryb25nbHkgaW5mbHVlbmNlZCBieSBlY29sb2dpY2FsIGFuZCBwb2xpdGljYWwgZW52aXJvbm1lbnRzIGFuZCBzdHJpdmVzIHRvIHByZXNlbnQgdGhlc2UgZm9ybWF0aW9ucyB3aXRoIGEgc2Vuc2l0aXZlIGxpbmUgYW5kIGNoYXJhY3RlciBjZW50ZXJlZCBwb2V0aWMgbmFycmF0aXZlLg=="
+}

src/App.css

@@ -96,6 +96,31 @@
       color: #D4C134;
       border-bottom: 0.25rem solid #D4C134; }
 
+@keyframes slide-in {
+  from {
+    margin-left: 100%; }
+  to {
+    margin-left: 0; } }
+
+@keyframes fade-in {
+  from {
+    opacity: 0%; }
+  to {
+    opacity: 100%; } }
+
+.about-view {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: space-around;
+  min-height: 70vh;
+  padding: 2rem; }
+  .about-view .about-content {
+    background-color: white;
+    border: 1px solid #292820;
+    padding: 2rem;
+    width: 60%; }
+
 .image {
   display: block;
   max-width: 100%;

src/App.scss

@@ -3,9 +3,10 @@
 
 @import './components/main/main';
 @import './components/nav-bar/nav-bar';
+@import './components/about-view/about-view';
 
 @import './components/image/image';
 @import './components/featured-artwork/featured-artwork';
 @import './components/project-selection/project-selection';
 @import './components/project-card/project-card';
-@import './components/project-detail/project-detail';
+@import './components/project-detail/project-detail';

src/components/about-view/_about-view.scss

@@ -0,0 +1,17 @@
+@import '../../stylesheets/variables';
+
+.about-view{
+    display: flex;
+    align-content: center;
+    align-items:center;
+    justify-content: space-around;
+    min-height: 70vh;
+    padding: 2rem;
+    .about-content{
+        background-color: $color-white;
+        border: 1px solid $color-dark-grey;
+        padding: 2rem;
+        width:60%;
+    }
+
+}

src/components/about-view/about-view.component.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+
+class AboutView extends React.Component{
+    constructor(props){
+        super(props);
+    }
+
+    static propTypes = {
+        //received as base64
+        content: PropTypes.string,
+    }
+
+    render(){
+        return(
+            <div className="about-view">
+                <div className="about-content">
+                    {atob(this.props.content)}
+                </div>
+            </div>
+        )
+    }
+}
+
+export default AboutView;

src/components/main/main.component.jsx

@@ -5,6 +5,7 @@ import NavBar from '../nav-bar/nav-bar.component'
 import FeaturedArtwork from '../featured-artwork/featured-artwork.component';
 import ProjectSelection from '../project-selection/project-selection.component';
 import ProjectDetail from '../project-detail/project-detail.component';
+import AboutView from '../about-view/about-view.component';
 
 import StaticResourceService from '../../services/staticResourceService';
 
@@ -16,6 +17,7 @@ class Main extends React.Component {
         this.state = {
             artworks:[],
             projects:[],
+            configuration: null,
         }
     }
 
@@ -25,26 +27,23 @@ class Main extends React.Component {
             this.setState({
                 artworks: staticData.artworks,
                 projects: staticData.projects,
+                configuration: staticData.configuration,
             })
         })
     }
 
+
     fetchStaticData = () => {
-        return new Promise((resolve, reject) => {
-            const staticData = {
-                artworks:[],
-                projects:[],
+        return Promise.all([
+            staticResourceService.getArtworks(),
+            staticResourceService.getProjects(),
+            staticResourceService.getConfiguration(),
+        ]).then((data) => {
+            return {
+                artworks: data[0],
+                projects: data[1],
+                configuration: data[2],
             }
-
-            staticResourceService.getArtworks().then((artworks) => {
-                staticData.artworks = artworks;
-                return staticResourceService.getProjects();
-            }).then((projects) => {
-                staticData.projects = projects;
-                resolve(staticData);
-            }).catch((err) => {
-                reject(err);
-            })
         })
     }
 
@@ -57,7 +56,7 @@ class Main extends React.Component {
 
 
     render(){
-        const {artworks, projects} = this.state;
+        const {artworks, projects, configuration} = this.state;
         return(
             <div className="main">
                 <div className="main-header">
@@ -86,7 +85,17 @@ class Main extends React.Component {
                     />
                     <Route
                         path="/about"
-                        render={null}
+                        render={() => {
+                            return(
+                                <div>
+                                {configuration &&
+                                    <AboutView
+                                    content={configuration.about}
+                                    />
+                                }
+                                </div>
+                            )
+                        }}
                     />
                     <Route
                         exact={true}

src/services/staticResourceService.js

@@ -23,6 +23,14 @@ class StaticResourceService {
         })
         return http(request)
     }
+
+    getConfiguration = () => {
+        const request = new Request('/static-data/configuration.json', {
+            method: 'GET',
+            headers: this.baseHeaders,
+        })
+        return http(request)
+    }
 }
 
 export default StaticResourceService;