Configured the view project page

OpenDF-UI/app/components/Card.js

@@ -1,12 +1,25 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import CardBody from './CardBody';
 
 export class Card extends React.Component {
+
+  static get propTypes() {
+    return {
+      details: PropTypes.object,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.props = props;
+  }
+
   render() {
     return (
       <article className="card">
         <CardBody details={this.props.details} />
       </article>
-    )
+    );
   }
 }

OpenDF-UI/app/components/CardBody.js

@@ -1,29 +1,42 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import ButtonElement from './ButtonElement';
 
 const styles = {
   media: {
     width: '100%',
+    height: '250px',
     // paddingTop: '56.25%', // 16:9
   },
-  card : {
+  card: {
     width: '500px',
-  }
+  },
 };
 
 export default class CardBody extends React.Component {
 
+  static get propTypes() {
+    return {
+      details: PropTypes.object,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.props = props;
+  }
+
   render() {
     return (
       <div className="card-body" style={styles.card} >
 
-        <img style={styles.media} alt="Project icon" src="https://images.pexels.com/photos/68147/waterfall-thac-dray-nur-buon-me-thuot-daklak-68147.jpeg?auto=compress&cs=tinysrgb&h=350" />
+        <img style={styles.media} alt="Project icon" src={this.props.details.image} />
 
         <h2>{this.props.details.title}</h2>
 
         <p className="body-content">{this.props.details.text}</p>
 
-        <ButtonElement label={'More'} backgroundColor={'#4FC3F7'} labelColor={'#fff'} labelPosition={'after'} click={'/project/' + this.props.details.id } />
+        <ButtonElement label={'More'} backgroundColor={'#4FC3F7'} labelColor={'#fff'} labelPosition={'after'} click={`/project/${this.props.details.id}`} data={'hello'} />
       </div>
     );
   }

OpenDF-UI/app/components/FormButtonElement.js

@@ -6,20 +6,21 @@ import FontIcon from 'material-ui/FontIcon';
 
 export default class FormButtonElement extends RaisedButton {
 
-    constructor(props) {
-      super(props);
-    }
-    render() {
-      return (
-        <RaisedButton
-          label={this.props.label}
-          labelPosition={this.props.labelPosition}
-          icon={<FontIcon className="muidocs-icon-action-home" />}
-          style={this.props.style}
-          backgroundColor={this.props.backgroundColor}
-          labelColor={this.props.labelColor}
-          onClick={this.props.click}
-        />
-      );
-    }
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <RaisedButton
+        label={this.props.label}
+        labelPosition={this.props.labelPosition}
+        icon={<FontIcon className="muidocs-icon-action-home" />}
+        style={this.props.style}
+        backgroundColor={this.props.backgroundColor}
+        labelColor={this.props.labelColor}
+        onClick={this.props.click}
+      />
+    );
+  }
 }

OpenDF-UI/app/components/ViewProject.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CardBody from './CardBody';
+
+export class Card extends React.Component {
+
+  static get propTypes() {
+    return {
+      details: PropTypes.object,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.props = props;
+  }
+
+  render() {
+    return (
+      <article className="card">
+        <CardBody details={this.props.details} />
+      </article>
+    );
+  }
+}

OpenDF-UI/app/containers/AddProject/index.js

@@ -84,7 +84,7 @@ export class AddProject extends React.Component {
     fetch('http://localhost:8080/projects', {
       method: 'POST',
       headers: {
-        'Accept': 'application/json',
+        Accept: 'application/json',
         'Content-Type': 'application/json',
       },
       body: JSON.stringify(project),
@@ -108,7 +108,7 @@ export class AddProject extends React.Component {
     })
     .catch((error) => {
       if (error.message === 'Failed to fetch') {
-        toast.error('Error while saving the project! ' + error.message, {
+        toast.error(`Error while saving the project! ${error.message}`, {
           position: toast.POSITION.TOP_CENTER,
           autoClose: 3000,
           hideProgressBar: true,

OpenDF-UI/app/containers/HomePage/messages.js

@@ -8,6 +8,6 @@ import { defineMessages } from 'react-intl';
 export default defineMessages({
   header: {
     id: 'app.components.HomePage.header',
-    defaultMessage: 'Welcome to OpendDF',
+    defaultMessage: 'Welcome to OpenDF',
   },
 });

OpenDF-UI/app/containers/Investigators/index.js

@@ -22,29 +22,29 @@ import {List, ListItem} from 'material-ui/List';
 
 const styles = {
   Papers: {
-    margin:10,
-    padding:10,
+    margin: 10,
+    padding: 10,
   },
   TextFields:{
     width: 500,
   },
-  Button:{
-    float: 'right'
+  Button: {
+    float: 'right',
   },
-  Divider:{
-    backgroundColor:'#000a12',
+  Divider: {
+    backgroundColor: '#000a12',
   },
-  Subheader:{
-    color:'#007ac1',
+  Subheader: {
+    color: '#007ac1',
   }
 };
 
 export class Investigators extends React.Component { // eslint-disable-line react/prefer-stateless-function
   state = {
-             value: 0,
-           };
+    value: 0,
+  };
 
- handleChange = (event, index, value) => this.setState({value});
+  handleChange = (event, index, value) => this.setState({ value });
 
 
   render() {
@@ -73,19 +73,19 @@ export class Investigators extends React.Component { // eslint-disable-line reac
                 />
                 <ListItem
                   primaryText="Eric Hoffman"
-                  leftAvatar={<Avatar src="images/kolage-128.jpg" />}
+                  leftAvatar={<Avatar>EH</Avatar>}
                 />
                 <ListItem
                   primaryText="Grace Ng"
-                  leftAvatar={<Avatar src="images/uxceo-128.jpg" />}
+                  leftAvatar={<Avatar>GN</Avatar>}
                 />
                 <ListItem
                   primaryText="Kerem Suer"
-                  leftAvatar={<Avatar src="images/kerem-128.jpg" />}
+                  leftAvatar={<Avatar>KS</Avatar>}
                 />
                 <ListItem
                   primaryText="Raquel Parrado"
-                  leftAvatar={<Avatar src="images/raquelromanp-128.jpg" />}
+                  leftAvatar={<Avatar>RP</Avatar>}
                 />
               </List>
 

OpenDF-UI/app/containers/ViewProject/index.js

@@ -6,28 +6,76 @@
 
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
+import { Grid, Row, Col } from 'react-flexbox-grid';
+import { Card } from '../../components/Card';
+import projectData from '../../data.json';
 
 let id;
 
+const styles = {
+  mainDiv: {
+    padding: '20px',
+    width: '100%',
+    textAlign: 'center',
+  },
+  image: {
+    height: '200px',
+    borderRadius: '5px',
+  },
+  center: {
+    textAlign: 'center',
+  },
+  hr: {
+    width: '80%',
+    height: '3px',
+    backgroundColor: 'black',
+  },
+};
+
 export class ViewProject extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
+
+  constructor(props) {
+    super(props);
+    this.props = props;
+
+    this.state = {
+      project: {},
+    };
+  }
+
   componentWillMount() {
     id = this.props.params.id;
+    this.setState({
+      project: projectData.projects[id - 1],
+    });
   }
 
   render() {
     return (
       <div>
-        <h3>Hello { id } </h3>
+        <Grid fluid>
+          <Row>
+            <Col lg={12}>
+              <header className="app-header"></header>
+              <div style={styles.mainDiv}>
+                <div>
+                  <img src={this.state.project.image} style={styles.image} alt="project logo" />
+                </div>
+                <h1> {this.state.project.text} </h1>
+                <hr style={styles.hr} />
+                <h2>Author : {this.state.project.title} </h2>
+                <p>
+                  {this.state.project.text}
+                </p>
+              </div>
+            </Col>
+          </Row>
+        </Grid>
       </div>
     );
   }
 }
 
-ViewProject.propTypes = {
-  dispatch: PropTypes.func.isRequired,
-};
-
-
 function mapDispatchToProps(dispatch) {
   return {
     dispatch,

OpenDF-UI/app/data.json

@@ -2,46 +2,47 @@
   "projects": [
     {
       "id": 1,
-      "title": "Pasan Ranathunga",
-      "text": "CNN purchased Casey Neistat's Beme app for $25million.",
-      "image": "https://source.unsplash.com/user/erondu/600x400"
+      "title": "Open Frost",
+      "text": "A pilot project for testing OpenDF",
+      "image": "https://redpiranha.net/sites/default/files/revslider/image/digital_forensics_slide_1.jpg"
     },
     {
       "id": 2,
-      "title": "Malith Senaweera",
-      "text": "Learn our tips and tricks on living a nomadic lifestyle",
-      "image": "https://source.unsplash.com/user/_vickyreyes/600x400"
+      "title": "NCE recovery",
+      "text": "Data recovery project of NCE",
+      "image": "https://www.jsainvestigations.com/wp-content/uploads/2014/05/jsacomputerforensicservicesphoto.jpg"
     },
     {
       "id": 3,
       "title": "Pasan Ranathunga",
       "text": "The first ever decoupled starter theme for React & the WP-API",
-      "image": "https://source.unsplash.com/user/ilyapavlov/600x400"
+      "image": "https://redpiranha.net/sites/default/files/revslider/image/digital_forensics_slide_1.jpg"
     },
     {
       "id": 4,
       "title": "rehrumesh",
       "text": "CNN purchased Casey Neistat's Beme app for $25million.",
-      "image": "https://source.unsplash.com/user/erondu/600x400"
+      "image": "https://redpiranha.net/sites/default/files/revslider/image/digital_forensics_slide_1.jpg"
     },
     {
       "id": 5,
       "title": "Pasan Ranathunga",
       "text": "Learn our tips and tricks on living a nomadic lifestyle",
-      "image": "https://source.unsplash.com/user/_vickyreyes/600x400"
+      "image": "https://redpiranha.net/sites/default/files/revslider/image/digital_forensics_slide_1.jpg"
     },
     {
       "id": 6,
       "title": "Agent Milindu",
       "text": "The first ever decoupled starter theme for React & the WP-API",
-      "image": "https://source.unsplash.com/user/ilyapavlov/600x400"
+      "image": "https://redpiranha.net/sites/default/files/revslider/image/digital_forensics_slide_1.jpg"
     },
     {
       "title": "Open Frost",
-      "text": " A pilot project for testing OpenDF React UI",
+      "text": "A pilot project for testing OpenDF React UI",
       "investigator": "Investigator02",
       "company": "UCSC",
-      "id": 8
+      "image" : "https://redpiranha.net/sites/default/files/revslider/image/digital_forensics_slide_1.jpg",
+      "id": 7
     }
   ]
 }