Changes as per the code review.

feature/appm-store/pbac
Menaka Jayawardena 7 years ago
parent 426dea0afc
commit cec54c3dc0

@ -16,22 +16,19 @@
* under the License. * under the License.
*/ */
import Theme from './theme';
import React, {Component} from 'react'; import React, {Component} from 'react';
import AuthHandler from './api/authHandler'; import AuthHandler from './api/authHandler';
import createHistory from 'history/createBrowserHistory'; import createHistory from 'history/createBrowserHistory';
import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom' import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { import {
ApplicationCreate, ApplicationCreate,
ApplicationEdit,
ApplicationListing, ApplicationListing,
BaseLayout, BaseLayout,
Login, Login,
NotFound, NotFound,
PlatformCreate, PlatformCreate,
PlatformListing, PlatformListing
ApplicationEdit
} from './components'; } from './components';
@ -64,19 +61,13 @@ class Base extends Component {
if (!AuthHandler.isTokenExpired()) { if (!AuthHandler.isTokenExpired()) {
this.setState({user: user}); this.setState({user: user});
} else { } else {
console.log("expired!");
this.setState({user: null}); this.setState({user: null});
} }
} }
} }
componentDidMount() {
}
render() { render() {
if (this.state.user !== null) { if (this.state.user !== null) {
console.log("Have User.");
return ( return (
<div> <div>
<BaseLayout user={this.state.user}> <BaseLayout user={this.state.user}>
@ -98,7 +89,6 @@ class Base extends Component {
</div> </div>
) )
} else { } else {
console.log("No user");
return (<Redirect to={"/login"}/>) return (<Redirect to={"/login"}/>)
} }
@ -119,61 +109,18 @@ class Publisher extends Component {
selectedType: null, selectedType: null,
selectedTheme: null selectedTheme: null
}; };
this.setTheme = this.setTheme.bind(this);
}
componentDidMount() {
/**
*Loading the theme files based on the the user-preference.
*/
let themeConfig = Theme.loadThemeConfigs();
themeConfig.then(this.setTheme).catch(function (error) {
console.log(error);
});
}
/**
* To set the theme based on the configuration file.
* @param response Configuration file data.
*/
setTheme(response) {
this.setState({
selectedType: response.data.theme.type,
selectedTheme: response.data.theme.value
});
Theme.currentThemeType = this.state.selectedType;
Theme.currentTheme = this.state.selectedTheme;
Theme.selectedTheme =
(Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
if (this.state.selectedType === "default") {
let defaultTheme = require("material-ui/styles/baseThemes/" + this.state.selectedTheme);
this.setState({
muiTheme: getMuiTheme(defaultTheme.default)
});
} else {
let customTheme = require("./themes/" + this.state.selectedTheme);
this.setState({
muiTheme: getMuiTheme(customTheme.default)
});
}
} }
render() { render() {
return ( return (
<div className="App"> <div className="App">
<MuiThemeProvider> <Router basename="publisher" history={history}>
<Router basename="publisher" history={history}> <Switch>
<Switch> <Route path="/login" component={Login}/>
<Route path="/login" component={Login}/> <Route path="/logout" component={Login}/>
<Route path="/logout" component={Login}/> <Route component={Base}/>
<Route component={Base}/> </Switch>
</Switch> </Router>
</Router>
</MuiThemeProvider>
</div> </div>
); );
} }

@ -88,7 +88,7 @@ class BaseLayout extends Component {
id="search" id="search"
name="search" name="search"
placeholder={'Search for Applications'} placeholder={'Search for Applications'}
onChange={(event) => console.log(event.target.value)} onChange={(event) => console.log(event.target.value)} //TODO: Remove this
/> />
</div> </div>
</div> </div>

@ -16,7 +16,6 @@
* under the License. * under the License.
*/ */
import Theme from '../../theme';
import React, {Component} from 'react'; import React, {Component} from 'react';
import {withRouter} from 'react-router-dom'; import {withRouter} from 'react-router-dom';
import {Button, Col, Row, Table} from 'reactstrap'; import {Button, Col, Row, Table} from 'reactstrap';
@ -48,13 +47,13 @@ class ApplicationListing extends Component {
application: {}, application: {},
drawer: {}, drawer: {},
appListStyle: {}, appListStyle: {},
//TODO: Remove this declaration.
image: [{id: "1", src: "https://www.greenfoot.org/images/logos/macos.png"}, image: [{id: "1", src: "https://www.greenfoot.org/images/logos/macos.png"},
{ {
id: "2", id: "2",
src: "http://dl1.cbsistatic.com/i/r/2016/08/08/0e67e43a-5a45-41ab-b81d-acfba8708044/resize/736x552/0c0ee669677b5060a0fa1bfb0c7873b4/android-logo-promo-470.png" src: "http://dl1.cbsistatic.com/i/r/2016/08/08/0e67e43a-5a45-41ab-b81d-acfba8708044/resize/736x552/0c0ee669677b5060a0fa1bfb0c7873b4/android-logo-promo-470.png"
}] }]
}; };
this.scriptId = "application-listing";
} }
headers = [ headers = [
@ -126,10 +125,6 @@ class ApplicationListing extends Component {
componentWillMount() { componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
// let getApps = ApplicationMgtApi.getApplications(); // let getApps = ApplicationMgtApi.getApplications();
// getApps.then(response => { // getApps.then(response => {
// let apps = this.setData(response.data.applications); // let apps = this.setData(response.data.applications);
@ -199,7 +194,6 @@ class ApplicationListing extends Component {
} }
onRowClick() { onRowClick() {
console.log("sfsdfsdf");
let style = { let style = {
width: '500px', width: '500px',
marginLeft: '500px' marginLeft: '500px'
@ -226,8 +220,6 @@ class ApplicationListing extends Component {
return image.id !== imageId return image.id !== imageId
}); });
console.log(rem);
this.setState({image: rem}); this.setState({image: rem});
} }

@ -37,13 +37,13 @@ class ApplicationCreate extends Component {
this.scriptId = "application-create"; this.scriptId = "application-create";
this.setStepData = this.setStepData.bind(this); this.setStepData = this.setStepData.bind(this);
this.removeStepData = this.removeStepData.bind(this); this.removeStepData = this.removeStepData.bind(this);
this.handleSubmit = this.handleSubmit.bind(this); this.onSubmit = this.onSubmit.bind(this);
this.handleCancel = this.handleCancel.bind(this); this.handleCancel = this.handleCancel.bind(this);
this.handleYes = this.handleYes.bind(this); this.handleYes = this.handleYes.bind(this);
this.handleNo = this.handleNo.bind(this); this.handleNo = this.handleNo.bind(this);
this.handlePrev = this.handlePrev.bind(this); this.onPrevClick = this.onPrevClick.bind(this);
this.handleNext = this.handleNext.bind(this); this.onNextClick = this.onNextClick.bind(this);
this.close = this.close.bind(this); this.onClose = this.onClose.bind(this);
this.state = { this.state = {
finished: false, finished: false,
stepIndex: 0, stepIndex: 0,
@ -60,20 +60,16 @@ class ApplicationCreate extends Component {
this.setState({open: this.props.open}); this.setState({open: this.props.open});
} }
close() {
this.props.close();
}
handleBack() { onClose() {
let currentStep = this.state.stepIndex; this.setState({stepIndex: 0}, this.props.close());
let nextStep = currentStep === 0 ? currentStep : currentStep - 1;
this.setState({stepIndex: nextStep}, console.log(this.state.stepIndex));
} }
/** /**
* Handles next button click event. * Handles next button click event.
* */ * */
handleNext() { onNextClick() {
console.log("Handle Next"); //TODO: Remove this console.log("Handle Next"); //TODO: Remove this
const {stepIndex} = this.state; const {stepIndex} = this.state;
this.setState({ this.setState({
@ -85,7 +81,7 @@ class ApplicationCreate extends Component {
/** /**
* Handles form submit. * Handles form submit.
* */ * */
handleSubmit() { onSubmit() {
let stepData = this.state.stepData; let stepData = this.state.stepData;
let applicationCreationPromise = ApplicationMgtApi.createApplication(stepData); let applicationCreationPromise = ApplicationMgtApi.createApplication(stepData);
applicationCreationPromise.then(response => { applicationCreationPromise.then(response => {
@ -110,7 +106,7 @@ class ApplicationCreate extends Component {
* Handled [ < Prev ] button click. * Handled [ < Prev ] button click.
* This clears the data in the current step and returns to the previous step. * This clears the data in the current step and returns to the previous step.
* */ * */
handlePrev() { onPrevClick() {
const {stepIndex} = this.state; const {stepIndex} = this.state;
if (stepIndex > 0) { if (stepIndex > 0) {
this.removeStepData(); this.removeStepData();
@ -128,7 +124,7 @@ class ApplicationCreate extends Component {
let tmpStepData = this.state.stepData; let tmpStepData = this.state.stepData;
tmpStepData.push({step: step, data: data}); tmpStepData.push({step: step, data: data});
this.setState({stepData: tmpStepData}, this.handleNext()) this.setState({stepData: tmpStepData}, this.onNextClick())
}; };
/** /**
@ -170,7 +166,7 @@ class ApplicationCreate extends Component {
case 0: case 0:
return ( return (
<Step1 <Step1
handleNext={this.handleNext} handleNext={this.onNextClick}
setData={this.setStepData} setData={this.setStepData}
removeData={this.removeStepData} removeData={this.removeStepData}
/> />
@ -178,8 +174,8 @@ class ApplicationCreate extends Component {
case 1: case 1:
return ( return (
<Step2 <Step2
handleNext={this.handleNext} handleNext={this.onNextClick}
handlePrev={this.handlePrev} handlePrev={this.onPrevClick}
setData={this.setStepData} setData={this.setStepData}
removeData={this.removeStepData} removeData={this.removeStepData}
/> />
@ -187,8 +183,8 @@ class ApplicationCreate extends Component {
case 2: case 2:
return ( return (
<Step3 <Step3
handleFinish={this.handleNext} handleFinish={this.onNextClick}
handlePrev={this.handlePrev} handlePrev={this.onPrevClick}
setData={this.setStepData} setData={this.setStepData}
removeData={this.removeStepData} removeData={this.removeStepData}
/> />
@ -196,7 +192,7 @@ class ApplicationCreate extends Component {
case 3: { case 3: {
return ( return (
<Step4 <Step4
handleNext={this.handleNext} handleNext={this.onNextClick}
setData={this.setStepData} setData={this.setStepData}
removeData={this.removeStepData} removeData={this.removeStepData}
/> />
@ -225,17 +221,17 @@ class ApplicationCreate extends Component {
</Row> </Row>
<Row> <Row>
<Col> <Col>
{this.getStepContent(this.state.stepIndex)} {this.getStepContent(stepIndex)}
</Col> </Col>
</Row> </Row>
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
{this.state.stepIndex === 0 ? <div/> : {stepIndex === 0 ? <div/> :
<Button color="primary" onClick={this.handlePrev}>Back</Button>} <Button color="primary" onClick={this.onPrevClick}>Back</Button>}
<Button color="secondary" onClick={this.close}>Cancel</Button> <Button color="secondary" onClick={this.onClose}>Cancel</Button>
{this.state.finished ? {finished ?
<Button color="primary" onClick={this.handleSubmit}>Finish</Button> : <Button color="primary" onClick={this.onSubmit}>Finish</Button> :
<Button color="primary" onClick={this.handleNext}>Continue</Button>} <Button color="primary" onClick={this.onNextClick}>Continue</Button>}
</ModalFooter> </ModalFooter>
</Modal> </Modal>
</div>); </div>);

@ -33,8 +33,8 @@ import {Badge, FormGroup, Input, Label} from 'reactstrap';
* *
* Parent Component: Create * Parent Component: Create
* Props: * Props:
* * handleNext : {type: function, Invokes handleNext function in Parent.} * * onNextClick : {type: function, Invokes onNextClick function in Parent.}
* * handlePrev : {type: function, Invokes handlePrev function in Parent} * * onPrevClick : {type: function, Invokes onPrevClick function in Parent}
* * setData : {type: function, Invokes setStepData function in Parent} * * setData : {type: function, Invokes setStepData function in Parent}
* * removeData : {type: Invokes removeStepData function in Parent} * * removeData : {type: Invokes removeStepData function in Parent}
* */ * */
@ -55,7 +55,6 @@ class Step1 extends Component {
identifier: "", identifier: "",
shortDescription: "" shortDescription: ""
}; };
this.scriptId = "application-create-step2";
} }
/** /**
@ -81,27 +80,6 @@ class Step1 extends Component {
this.setState({defValue: defaultValue}) this.setState({defValue: defaultValue})
} }
/**
* Invokes the handleNext function in Create component.
* */
handleNext() {
let fields = [{name: "Title", value: this.state.title},
{name: "Short Description", value: this.state.shortDescription},
{name: "Description", value: this.state.description},
{name: "Banner", value: this.state.banner},
{name: "Screenshots", value: this.state.screenshots},
{name: "Identifier", value: this.state.identifier},
{name: "Icon", value: this.state.icon}];
this.validate(fields);
}
/**
* Invokes the handlePrev function in Create component.
* */
handlePrev() {
this.props.handlePrev();
}
/** /**
* Handles Chip delete function. * Handles Chip delete function.
* Removes the tag from state.tags * Removes the tag from state.tags
@ -114,94 +92,12 @@ class Step1 extends Component {
this.setState({tags: this.chipData}); this.setState({tags: this.chipData});
}; };
/**
* Validate the form.
* */
validate(fields) {
let errors = {};
let errorsPresent = false;
fields.forEach(function (field) {
switch (field.name) {
case 'Title': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Identifier': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Short Description': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Description': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Banner': {
if (field.value.length === 0) {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Icon': {
if (field.value.length === 0) {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Screenshots': {
if (field.value.length < 3) {
errors[field.name] = "3 " + field.name + " are required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
}
});
if (!errorsPresent) {
this.setStepData();
} else {
this.setState({errors: errors}, console.log(errors));
}
}
/** /**
* Creates an object with the current step data and persist in the parent. * Creates an object with the current step data and persist in the parent.
* */ * */
setStepData() { setStepData() {
let stepData = {}; let stepData = {};
this.props.setData("step1", {step: stepData});
this.props.setData("step2", {step: stepData});
}; };
/** /**

@ -31,7 +31,7 @@ import {FormGroup, Input, Label} from 'reactstrap';
* *
* Parent Component: Create * Parent Component: Create
* Props: * Props:
* 1. handleNext: {type: function, Invokes handleNext function of parent component} * 1. onNextClick: {type: function, Invokes onNextClick function of parent component}
* 2. setData : {type: function, Sets current form data to the state of the parent component} * 2. setData : {type: function, Sets current form data to the state of the parent component}
* 3. removeData: {type: function, Invokes the removeStepData function click of parent} * 3. removeData: {type: function, Invokes the removeStepData function click of parent}
* */ * */
@ -40,7 +40,6 @@ class Step2 extends Component {
super(); super();
this.setPlatforms = this.setPlatforms.bind(this); this.setPlatforms = this.setPlatforms.bind(this);
this.setStepData = this.setStepData.bind(this); this.setStepData = this.setStepData.bind(this);
this.cancel = this.cancel.bind(this);
this.platforms = []; this.platforms = [];
this.state = { this.state = {
finished: false, finished: false,
@ -53,7 +52,6 @@ class Step2 extends Component {
title: "", title: "",
titleError: "" titleError: ""
}; };
this.scriptId = "application-create-step1";
} }
componentDidMount() { componentDidMount() {
@ -84,17 +82,11 @@ class Step2 extends Component {
* Persist the current form data to the state. * Persist the current form data to the state.
* */ * */
setStepData() { setStepData() {
console.log("Platforms", this.state.platforms);
let step = { let step = {
store: this.state.store, store: this.state.store,
platform: this.state.platforms[this.state.platformSelectedIndex] platform: this.state.platforms[this.state.platformSelectedIndex]
}; };
console.log(step); this.props.setData("step2", {step: step});
this.props.setData("step1", {step: step});
}
cancel() {
} }
/** /**
@ -106,8 +98,6 @@ class Step2 extends Component {
let selectedPlatform = this.state.platforms.filter((platform) => { let selectedPlatform = this.state.platforms.filter((platform) => {
return platform.identifier === id; return platform.identifier === id;
}); });
console.log(selectedPlatform);
this.setState({platform: selectedPlatform}); this.setState({platform: selectedPlatform});
}; };
@ -115,7 +105,6 @@ class Step2 extends Component {
* Triggers when changing the Store selection. * Triggers when changing the Store selection.
* */ * */
onChangeStore(event) { onChangeStore(event) {
console.log(event.target.value);
this.setState({store: event.target.value}); this.setState({store: event.target.value});
}; };
@ -128,7 +117,6 @@ class Step2 extends Component {
<Input <Input
type="select" type="select"
name="store" name="store"
id="store"
className="input-custom" className="input-custom"
onChange={this.onChangeStore.bind(this)} onChange={this.onChangeStore.bind(this)}
> >
@ -141,7 +129,6 @@ class Step2 extends Component {
<Input <Input
type="select" type="select"
name="store" name="store"
id="store"
onChange={this.onChangePlatform.bind(this)} onChange={this.onChangePlatform.bind(this)}
> >
{this.state.platforms.length > 0 ? this.state.platforms.map(platform => { {this.state.platforms.length > 0 ? this.state.platforms.map(platform => {

@ -34,8 +34,8 @@ import AppImage from "../../../UIComponents/AppImage/AppImage";
* *
* Parent Component: Create * Parent Component: Create
* Props: * Props:
* * handleNext : {type: function, Invokes handleNext function in Parent.} * * onNextClick : {type: function, Invokes onNextClick function in Parent.}
* * handlePrev : {type: function, Invokes handlePrev function in Parent} * * onPrevClick : {type: function, Invokes onPrevClick function in Parent}
* * setData : {type: function, Invokes setStepData function in Parent} * * setData : {type: function, Invokes setStepData function in Parent}
* * removeData : {type: Invokes removeStepData function in Parent} * * removeData : {type: Invokes removeStepData function in Parent}
* */ * */
@ -56,52 +56,6 @@ class Step3 extends Component {
identifier: "", identifier: "",
shortDescription: "" shortDescription: ""
}; };
this.scriptId = "application-create-step2";
}
/**
* Create a tag on Enter key press and set it to the state.
* Clears the tags text field.
* Chip gets two parameters: Key and value.
* */
addTags(event) {
let tags = this.state.tags;
if (event.charCode === 13) {
event.preventDefault();
tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value});
this.setState({tags, defValue: ""}, console.log(tags));
}
}
/**
* Set the value for tag.
* */
handleTagChange(event) {
let defaultValue = this.state.defValue;
defaultValue = event.target.value;
this.setState({defValue: defaultValue})
}
/**
* Invokes the handleNext function in Create component.
* */
handleNext() {
let fields = [{name: "Title", value: this.state.title},
{name: "Short Description", value: this.state.shortDescription},
{name: "Description", value: this.state.description},
{name: "Banner", value: this.state.banner},
{name: "Screenshots", value: this.state.screenshots},
{name: "Identifier", value: this.state.identifier},
{name: "Icon", value: this.state.icon}];
this.validate(fields);
}
/**
* Invokes the handlePrev function in Create component.
* */
handlePrev() {
this.props.handlePrev();
} }
/** /**
@ -110,170 +64,30 @@ class Step3 extends Component {
* */ * */
handleRequestDelete(event) { handleRequestDelete(event) {
this.chipData = this.state.tags; this.chipData = this.state.tags;
console.log(event.target); console.log(event.target); //TODO: Remove Console log.
const chipToDelete = this.chipData.map((chip) => chip.value).indexOf(event.target.value); const chipToDelete = this.chipData.map((chip) => chip.value).indexOf(event.target.value);
this.chipData.splice(chipToDelete, 1); this.chipData.splice(chipToDelete, 1);
this.setState({tags: this.chipData}); this.setState({tags: this.chipData});
}; };
/**
* Creates Chip array from state.tags.
* */
renderChip(data) {
return (
<Chip
key={data.key}
onRequestDelete={() => this.handleRequestDelete(data.key)}
className="applicationCreateChip">
{data.value}
</Chip>
);
}
onVisibilitySelect(event, index, value) {
console.log(value);
let comp = <SelectField> <MenuItem value={0} primaryText="Public"/>
<MenuItem value={1} primaryText="Roles"/>
<MenuItem value={2} primaryText="Devices"/> </SelectField>;
if (value === 1) {
this.setState({visibilityComponent: comp});
} else if (value === 2) {
} else {
}
};
/**
* Validate the form.
* */
validate(fields) {
let errors = {};
let errorsPresent = false;
fields.forEach(function (field) {
switch (field.name) {
case 'Title': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Identifier': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Short Description': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Description': {
if (field.value === "") {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Banner': {
if (field.value.length === 0) {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Icon': {
if (field.value.length === 0) {
errors[field.name] = field.name + " is required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
case 'Screenshots': {
if (field.value.length < 3) {
errors[field.name] = "3 " + field.name + " are required!";
errorsPresent = true;
} else {
errorsPresent = false;
}
break;
}
}
});
if (!errorsPresent) {
this.setStepData();
} else {
this.setState({errors: errors}, console.log(errors));
}
}
/** /**
* Creates an object with the current step data and persist in the parent. * Creates an object with the current step data and persist in the parent.
* */ * */
setStepData() { setStepData() {
let stepData = { let stepData = {
icon: this.state.icon, icon: this.state.icon,
name: this.state.name,
tags: this.state.tags,
banner: this.state.banner, banner: this.state.banner,
category: this.categories[this.state.category], screenshots: this.state.screenshots
identifier: this.state.identifier,
screenshots: this.state.screenshots,
description: this.state.description,
shortDescription: this.state.shortDescription
}; };
this.props.setData("step2", {step: stepData}); this.props.setData("step2", {step: stepData});
}; };
/**
* Set text field values to state.
* */
onTextFieldChange(event, value) {
let field = event.target.id;
switch (field) {
case "name": {
this.setState({name: value});
break;
}
case "shortDescription": {
this.setState({shortDescription: value});
break;
}
case "description": {
this.setState({description: value});
break;
}
case "identifier": {
this.setState({identifier: value});
break;
}
}
};
/** /**
* Removed user uploaded banner. * Removed user uploaded banner.
* */ * */
removeBanner(event, d) { removeBanner(event, d) {
console.log(event, d); console.log(event, d); //TODO: Remove this
this.setState({banner: []}); this.setState({banner: []});
}; };
@ -288,11 +102,11 @@ class Step3 extends Component {
* Removes selected screenshot. * Removes selected screenshot.
* */ * */
removeScreenshot(event) { removeScreenshot(event) {
console.log(event.target) console.log(event.target) //TODO: Remove this.
}; };
//TODO: Remove inline css.
render() { render() {
console.log(this.state.visibilityComponent);
return ( return (
<div className="createStep2Content"> <div className="createStep2Content">
<div> <div>
@ -312,7 +126,7 @@ class Step3 extends Component {
onDrop={(screenshots, rejected) => { onDrop={(screenshots, rejected) => {
let tmpScreenshots = this.state.screenshots; let tmpScreenshots = this.state.screenshots;
tmpScreenshots.push(screenshots); tmpScreenshots.push(screenshots);
console.log(screenshots); console.log(screenshots); //TODO: Remove this
this.setState({ this.setState({
screenshots: tmpScreenshots screenshots: tmpScreenshots
}); });

@ -38,8 +38,8 @@ import Switch from '../../../UIComponents/Switch/Switch'
* *
* Parent Component: Create * Parent Component: Create
* Props: * Props:
* * handleFinish : {type: function, Invokes handleNext function in Parent.} * * handleFinish : {type: function, Invokes onNextClick function in Parent.}
* * handlePrev : {type: function, Invokes handlePrev function in Parent} * * onPrevClick : {type: function, Invokes onPrevClick function in Parent}
* * setData : {type: function, Invokes setStepData function in Parent} * * setData : {type: function, Invokes setStepData function in Parent}
* * removeData : {type: Invokes removeStepData function in Parent} * * removeData : {type: Invokes removeStepData function in Parent}
* */ * */
@ -60,7 +60,7 @@ class Step4 extends Component {
/** /**
* Handles finish button click. * Handles finish button click.
* This invokes handleNext function in parent component. * This invokes onNextClick function in parent component.
* */ * */
handleFinish() { handleFinish() {
this.props.handleFinish(); this.props.handleFinish();

@ -36,12 +36,10 @@ class ApplicationEdit extends Component {
handleTabClick(event) { handleTabClick(event) {
event.stopPropagation(); event.stopPropagation();
console.log(typeof event.target.value);
const key = event.target.value; const key = event.target.value;
switch (key) { switch (key) {
case "1": { case "1": {
console.log("Step1");
this.setState({activeTab: 1, general: "active", release: "", pkgmgt: ""}); this.setState({activeTab: 1, general: "active", release: "", pkgmgt: ""});
break; break;
} }
@ -78,12 +76,13 @@ class ApplicationEdit extends Component {
} }
render() { render() {
console.log(this.state);
return ( return (
<div id="application-edit-base"> <div id="application-edit-base">
<Row id="application-edit-header"> <Row id="application-edit-header">
<Col xs="3"> <Col xs="3">
<a className="back-to-app" onClick={this.handleOnBackClick.bind(this)}><i className="fw fw-left-arrow"></i></a> <a className="back-to-app" onClick={this.handleOnBackClick.bind(this)}>
<i className="fw fw-left-arrow"></i>
</a>
</Col> </Col>
<Col> <Col>
Application Name Application Name

@ -33,6 +33,7 @@ class GeneralInfo extends Component {
} }
} }
//TODO: Remove Console logs.
render() { render() {
return ( return (
<div className="app-edit-general-info"> <div className="app-edit-general-info">

@ -26,8 +26,8 @@ class CreateRelease extends Component {
super(); super();
this.onTestMethodChange = this.onTestMethodChange.bind(this); this.onTestMethodChange = this.onTestMethodChange.bind(this);
this.showUploadArtifacts = this.showUploadArtifacts.bind(this); this.showUploadArtifacts = this.showUploadArtifacts.bind(this);
this.handleBack = this.handleBack.bind(this); this.onBackClick = this.onBackClick.bind(this);
this.backToRelease = this.backToRelease.bind(this); this.onBackToRelease = this.onBackToRelease.bind(this);
this.state = { this.state = {
open: true, open: true,
hiddenMain: false hiddenMain: false
@ -47,11 +47,11 @@ class CreateRelease extends Component {
this.setState({hiddenMain: true}) this.setState({hiddenMain: true})
} }
handleBack() { onBackClick() {
this.props.handleBack(); this.props.handleBack();
} }
backToRelease() { onBackToRelease() {
this.setState({hiddenMain: false}); this.setState({hiddenMain: false});
} }
@ -64,7 +64,7 @@ class CreateRelease extends Component {
{this.state.hiddenMain ? {this.state.hiddenMain ?
<div> <div>
<UploadPackage <UploadPackage
backToRelease={this.backToRelease} backToRelease={this.onBackToRelease}
selectedChannel={channel} selectedChannel={channel}
/> />
</div> : </div> :
@ -72,7 +72,7 @@ class CreateRelease extends Component {
<div> <div>
<Row> <Row>
<div className="release-header"> <div className="release-header">
<a onClick={this.handleBack}>{"<-"}</a> <a onClick={this.onBackClick}>{"<-"}</a>
<span id="create-release-header"> <span id="create-release-header">
<strong>{channel} Release</strong> <strong>{channel} Release</strong>
</span> </span>

@ -28,7 +28,7 @@ class UploadPackage extends Component {
} }
handleBack() { handleBack() {
this.props.backToRelease(); this.props.onBackToRelease();
} }
render() { render() {

@ -26,20 +26,20 @@ class ReleaseManager extends Component {
constructor() { constructor() {
super(); super();
this.getNoReleaseContent = this.getNoReleaseContent.bind(this); this.getNoReleaseContent = this.getNoReleaseContent.bind(this);
this.createRelease = this.createRelease.bind(this); this.onCreateRelease = this.onCreateRelease.bind(this);
this.handleBackPress = this.handleBackPress.bind(this); this.onBackClick = this.onBackClick.bind(this);
this.state = { this.state = {
createRelease: false, createRelease: false,
onGoing: "" onGoing: ""
} }
} }
createRelease(event) { onCreateRelease(event) {
event.preventDefault(); event.preventDefault();
this.setState({createRelease: true, onGoing: event.target.value}) this.setState({createRelease: true, onGoing: event.target.value})
} }
handleBackPress() { onBackClick() {
this.setState({createRelease: false}); this.setState({createRelease: false});
} }
@ -60,7 +60,7 @@ class ReleaseManager extends Component {
className="button-add" className="button-add"
id={release.toLowerCase()} id={release.toLowerCase()}
value={release} value={release}
onClick={this.createRelease} onClick={this.onCreateRelease}
> >
Create a Release Create a Release
</Button> </Button>
@ -76,7 +76,7 @@ class ReleaseManager extends Component {
{this.state.createRelease ? {this.state.createRelease ?
<CreateRelease <CreateRelease
channel={this.state.onGoing} channel={this.state.onGoing}
handleBack={this.handleBackPress} handleBack={this.onBackClick}
/> : /> :
<div id="release-mgt-content"> <div id="release-mgt-content">
<Row> <Row>

@ -16,7 +16,6 @@
* under the License. * under the License.
*/ */
import Theme from '../../theme';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Chip from 'material-ui/Chip'; import Chip from 'material-ui/Chip';
import Dropzone from 'react-dropzone'; import Dropzone from 'react-dropzone';
@ -79,18 +78,6 @@ class PlatformCreate extends Component {
{key: 2, value: 'Boolean'}, {key: 2, value: 'Boolean'},
{key: 3, value: 'File'}] {key: 3, value: 'File'}]
}; };
this.scriptId = "platform-create";
}
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
} }
/** /**

@ -16,7 +16,6 @@
* under the License. * under the License.
*/ */
import Theme from '../../theme';
import React, {Component} from 'react'; import React, {Component} from 'react';
import {withRouter} from 'react-router-dom'; import {withRouter} from 'react-router-dom';
import TextField from 'material-ui/TextField'; import TextField from 'material-ui/TextField';
@ -41,7 +40,6 @@ class PlatformListing extends Component {
platforms: [], platforms: [],
asc: true asc: true
}; };
this.scriptId = "platform-listing";
} }
headers = [ headers = [
@ -72,17 +70,6 @@ class PlatformListing extends Component {
} }
]; ];
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
componentDidMount() { componentDidMount() {
let platformsPromise = PlatformMgtApi.getPlatforms(); let platformsPromise = PlatformMgtApi.getPlatforms();
platformsPromise.then( platformsPromise.then(

@ -16,10 +16,11 @@
* under the License. * under the License.
*/ */
import qs from 'qs';
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Redirect, Switch} from 'react-router-dom'; import {Redirect, Switch} from 'react-router-dom';
import AuthHandler from '../../../api/authHandler'; import AuthHandler from '../../../api/authHandler';
import {Button, Card, CardBlock, CardSubtitle, CardTitle, Col, Form, FormGroup, Input, Label} from 'reactstrap'; import {Button, Card, CardBlock, CardTitle, Col, Form, FormGroup, Input, Label} from 'reactstrap';
/** /**
* The Login Component. * The Login Component.
@ -42,20 +43,15 @@ class Login extends Component {
} }
} }
componentWillMount() {
console.log("IN Login")
}
componentDidMount() { componentDidMount() {
console.log("in Login") let queryString = this.props.location.search;
// let queryString = this.props.location.search; console.log(queryString);
// console.log(queryString); queryString = queryString.replace(/^\?/, '');
// queryString = queryString.replace(/^\?/, ''); /* With QS version up we can directly use {ignoreQueryPrefix: true} option */
// /* With QS version up we can directly use {ignoreQueryPrefix: true} option */ let params = qs.parse(queryString);
// let params = qs.parse(queryString); if (params.referrer) {
// if (params.referrer) { this.setState({referrer: params.referrer});
// this.setState({referrer: params.referrer}); }
// }
} }
handleLogin(event) { handleLogin(event) {
@ -135,29 +131,31 @@ class Login extends Component {
<div id="login-container"> <div id="login-container">
{/*TODO: Style the components.*/} {/*TODO: Style the components.*/}
<Card id="login-card"> <Card id="login-card">
<CardBlock> <CardBlock>
<CardTitle>WSO2 IoT APP Publisher</CardTitle> <CardTitle>WSO2 IoT APP Publisher</CardTitle>
<Form onSubmit={this.handleLogin.bind(this)}> <Form onSubmit={this.handleLogin.bind(this)}>
<FormGroup row> <FormGroup row>
<Label for="userName" sm={2}>User Name:</Label> <Label for="userName" sm={2}>User Name:</Label>
<Col sm={10}> <Col sm={10}>
<Input type="text" name="userName" id="userName" placeholder="User Name" onChange={this.onUserNameChange.bind(this)}/> <Input type="text" name="userName" id="userName" placeholder="User Name"
</Col> onChange={this.onUserNameChange.bind(this)}/>
</Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Label for="password" sm={2}>Password:</Label> <Label for="password" sm={2}>Password:</Label>
<Col sm={10}> <Col sm={10}>
<Input type="password" name="text" id="password" placeholder="Password" onChange={this.onPasswordChange.bind(this)}/> <Input type="password" name="text" id="password" placeholder="Password"
</Col> onChange={this.onPasswordChange.bind(this)}/>
</FormGroup> </Col>
<FormGroup check row> </FormGroup>
<Col sm={{ size: 10, offset: 2 }}> <FormGroup check row>
<Button type="submit" id="login-btn">Submit</Button> <Col sm={{size: 10, offset: 2}}>
</Col> <Button type="submit" id="login-btn">Login</Button>
</FormGroup> </Col>
</Form> </FormGroup>
</CardBlock> </Form>
</CardBlock>
</Card> </Card>
</div>); </div>);
} else { } else {

Loading…
Cancel
Save