From bc4825839571a5e70d510c429dfad4545cbc189a Mon Sep 17 00:00:00 2001 From: Kavinda Jayakody Date: Mon, 13 Aug 2018 16:35:44 +0530 Subject: [PATCH 1/2] Configured the view project page --- OpenDF-UI/app/components/Card.js | 15 ++++- OpenDF-UI/app/components/CardBody.js | 21 +++++-- OpenDF-UI/app/components/ViewProject.js | 26 ++++++++ OpenDF-UI/app/containers/HomePage/messages.js | 2 +- .../app/containers/Investigators/index.js | 30 +++++----- OpenDF-UI/app/containers/ViewProject/index.js | 60 +++++++++++++++++-- OpenDF-UI/app/data.json | 21 +++---- 7 files changed, 138 insertions(+), 37 deletions(-) create mode 100644 OpenDF-UI/app/components/ViewProject.js diff --git a/OpenDF-UI/app/components/Card.js b/OpenDF-UI/app/components/Card.js index 1fc0f2e..34aaa85 100644 --- a/OpenDF-UI/app/components/Card.js +++ b/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 (
- ) + ); } } diff --git a/OpenDF-UI/app/components/CardBody.js b/OpenDF-UI/app/components/CardBody.js index d977c2b..761fa32 100644 --- a/OpenDF-UI/app/components/CardBody.js +++ b/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 (
- Project icon + Project icon

{this.props.details.title}

{this.props.details.text}

- +
); } diff --git a/OpenDF-UI/app/components/ViewProject.js b/OpenDF-UI/app/components/ViewProject.js new file mode 100644 index 0000000..4878e94 --- /dev/null +++ b/OpenDF-UI/app/components/ViewProject.js @@ -0,0 +1,26 @@ +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() { + console.log(this.props.details); + return ( +
+ +
+ ); + } +} diff --git a/OpenDF-UI/app/containers/HomePage/messages.js b/OpenDF-UI/app/containers/HomePage/messages.js index 038cb33..1a74ae9 100644 --- a/OpenDF-UI/app/containers/HomePage/messages.js +++ b/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', }, }); diff --git a/OpenDF-UI/app/containers/Investigators/index.js b/OpenDF-UI/app/containers/Investigators/index.js index e9732e1..da14533 100644 --- a/OpenDF-UI/app/containers/Investigators/index.js +++ b/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 /> } + leftAvatar={EH} /> } + leftAvatar={GN} /> } + leftAvatar={KS} /> } + leftAvatar={RP} /> diff --git a/OpenDF-UI/app/containers/ViewProject/index.js b/OpenDF-UI/app/containers/ViewProject/index.js index 7839914..4ae5cb4 100644 --- a/OpenDF-UI/app/containers/ViewProject/index.js +++ b/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 (
-

Hello { id }

+ + + +
+
+
+ project logo +
+

{this.state.project.text}

+
+

Author : {this.state.project.title}

+

+ {this.state.project.text} +

+
+ + +
); } } -ViewProject.propTypes = { - dispatch: PropTypes.func.isRequired, -}; - - function mapDispatchToProps(dispatch) { return { dispatch, diff --git a/OpenDF-UI/app/data.json b/OpenDF-UI/app/data.json index 36d64a0..f033ba9 100644 --- a/OpenDF-UI/app/data.json +++ b/OpenDF-UI/app/data.json @@ -2,45 +2,46 @@ "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", "investigator": "Investigator02", "company": "UCSC", + "image" : "https://redpiranha.net/sites/default/files/revslider/image/digital_forensics_slide_1.jpg", "id": 8 } ] From 6ea656df76e2f40113ed7982bd1f5a807c4e4bcd Mon Sep 17 00:00:00 2001 From: Kavinda Jayakody Date: Tue, 14 Aug 2018 18:11:05 +0530 Subject: [PATCH 2/2] Removed unnessary logs and sanitize the props --- OpenDF-UI/app/components/FormButtonElement.js | 33 ++++++++++--------- OpenDF-UI/app/components/ViewProject.js | 1 - OpenDF-UI/app/containers/AddProject/index.js | 4 +-- OpenDF-UI/app/data.json | 4 +-- 4 files changed, 21 insertions(+), 21 deletions(-) diff --git a/OpenDF-UI/app/components/FormButtonElement.js b/OpenDF-UI/app/components/FormButtonElement.js index e33c03e..9881cf1 100644 --- a/OpenDF-UI/app/components/FormButtonElement.js +++ b/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 ( - } - style={this.props.style} - backgroundColor={this.props.backgroundColor} - labelColor={this.props.labelColor} - onClick={this.props.click} - /> - ); - } + constructor(props) { + super(props); + } + + render() { + return ( + } + style={this.props.style} + backgroundColor={this.props.backgroundColor} + labelColor={this.props.labelColor} + onClick={this.props.click} + /> + ); + } } diff --git a/OpenDF-UI/app/components/ViewProject.js b/OpenDF-UI/app/components/ViewProject.js index 4878e94..34aaa85 100644 --- a/OpenDF-UI/app/components/ViewProject.js +++ b/OpenDF-UI/app/components/ViewProject.js @@ -16,7 +16,6 @@ export class Card extends React.Component { } render() { - console.log(this.props.details); return (
diff --git a/OpenDF-UI/app/containers/AddProject/index.js b/OpenDF-UI/app/containers/AddProject/index.js index 5bef7d0..be30a86 100644 --- a/OpenDF-UI/app/containers/AddProject/index.js +++ b/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, diff --git a/OpenDF-UI/app/data.json b/OpenDF-UI/app/data.json index f033ba9..a975da3 100644 --- a/OpenDF-UI/app/data.json +++ b/OpenDF-UI/app/data.json @@ -38,11 +38,11 @@ }, { "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", "image" : "https://redpiranha.net/sites/default/files/revslider/image/digital_forensics_slide_1.jpg", - "id": 8 + "id": 7 } ] } \ No newline at end of file