added links to case study on home

related to #10
irulabs · Feb 11, 2018 · 43df3f2 · 43df3f2
1 parent 0e37cbd
commit 43df3f2
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 12 deletions.
diff --git a/app/src/components/Card.js b/app/src/components/Card.js
@@ -1,13 +1,15 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
-const Card = ({ image, client, blurb }) => {
+const Card = ({ image, client, blurb, link }) => {
   // whole card clicks through to case study
   return (
     <div className="w-100 w-30-ns tl">
       <img alt="" src={ image } className="w-100" />
       <div className="ph1">
-        <p className="b">{ client }</p>
+        <h3 className="b f4">{ client }</h3>
         <p>{ blurb }</p>
+        <Link className="b link pointer underline black" to={ `/case-study/${link}` } ><p> Read More </p> </Link>
       </div>
     </div>
   )

diff --git a/app/src/components/ScrollToTop.js b/app/src/components/ScrollToTop.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+
+class ScrollToTop extends Component {
+  componentDidUpdate(prevProps) {
+    if (this.props.location !== prevProps.location) {
+      window.scrollTo(0, 0)
+    }
+  }
+
+  render() {
+    return this.props.children
+  }
+}
+
+export default withRouter(ScrollToTop);
diff --git a/app/src/components/Work.js b/app/src/components/Work.js
@@ -13,16 +13,22 @@ const Work = () => {
       <div className="flex-ns justify-between-ns">
         <Card
           image={ quodl }
-          client="Etiam Nibh"
-          blurb="Nullam id dolor id nibh ultricies vehicula ut id elit."/>
+          client="Quodl"
+          blurb="A real-time quiz app to increase in-lecture engagement and support learning"
+          link="quodl"
+        />
         <Card
           image={ exploratory }
-          client="Risus Egestas"
-          blurb="Nullam quis risus eget urna mollis ornare vel eu leo."/>
+          client="Building Exploratory"
+          blurb="A Single Page app showcasing locally listed buildings in London Borough of Islington"
+          link="building-exploratory"
+        />
         <Card
           image={ berkeley }
-          client="Commodo Dolor"
-          blurb="Lorem ipsum dolor sit amet, consectetur adipiscing elit."/>
+          client="Berkeley Homes"
+          blurb="Encouraging reporting of positive and negative safety behaviours on construction sites"
+          link="berkeley"
+          />
 
       </div>
     </section>

diff --git a/app/src/index.js b/app/src/index.js
@@ -4,6 +4,7 @@ import App from './components/App';
 import BuildingExploratory from './components/BuildingExploratory';
 import Quodl from './components/Quodl';
 import Berkeley from './components/Berkeley';
+import ScrollToTop from './components/ScrollToTop';
 import './index.css';
 import {
     BrowserRouter as Router,
@@ -16,12 +17,14 @@ import registerServiceWorker from './registerServiceWorker';
 
 ReactDOM.render(
     <Router>
+        <ScrollToTop>
         <div>
-            <Route exact path="/" component={App} />
-            <Route exact path="/case-study/building-exploratory" component={BuildingExploratory} />
-            <Route exact path="/case-study/quodl" component={Quodl} />
-            <Route exact path="/case-study/berkeley" component={Berkeley} />
+        <Route exact path="/" component={App} />
+        <Route exact path="/case-study/building-exploratory" component={BuildingExploratory} />
+        <Route exact path="/case-study/quodl" component={Quodl} />
+        <Route exact path="/case-study/berkeley" component={Berkeley} />
         </div>
+        </ScrollToTop>
     </Router>,
     document.getElementById('root'));
 registerServiceWorker();