Fakultas Ilmu Komputer UI

Commit f7534d55 authored by Zamil Majdy's avatar Zamil Majdy
Browse files

[#140382397] #5 Heavy refactor js to follow coding convention

parent a4e83878
......@@ -9,7 +9,12 @@
},
"rules": {
"func-names": ["error", "never"],
"react/prefer-stateless-function": [0, { "ignorePureComponents": true }]
"react/prefer-stateless-function": [0, { "ignorePureComponents": true }],
"import/extensions": ["off", "never"],
"import/no-unresolved": 0,
"no-underscore-dangle" : 0,
"linebreak-style" : 0,
"no-extra-bind" : 0
},
"parser": "babel-eslint",
"parserOptions": {
......
import React from 'react';
import ReactDOM from 'react-dom';
import ReactTestUtils from 'react-addons-test-utils' // ES6
import expect from 'expect';
import Root from '../root';
describe('root', function () {
it('renders without problems', function () {
let root = ReactTestUtils.renderIntoDocument(<Root/>);
expect(root).toExist();
});
it('changes without problems', function () {
let root = ReactTestUtils.renderIntoDocument(<Root/>);
const inputNode = ReactDOM.findDOMNode(root.refs.input);
const newValue = 'some text';
inputNode.value = newValue;
ReactTestUtils.Simulate.change(inputNode);
const nameNode = ReactDOM.findDOMNode(root.refs.name);
expect(nameNode.textContent).toEqual(newValue);
});
});
\ No newline at end of file
import expect from "expect";
import Logger from "../../lib/logger";
import {describe, beforeEach, it} from "mocha";
describe('logger log', function () {
beforeEach(function() {
expect(Logger, 'log');
Logger.log("testing log");
});
it('Logger sent log properly', function () {
expect(console.log).toHaveBeenCalled();
});
});
describe('logger error', function () {
beforeEach(function() {
expect(Logger, 'error');
Logger.error("testing error");
});
it('Logger sent error properly', function () {
expect(console.log).toHaveBeenCalled();
});
});
\ No newline at end of file
var component = TestUtils.renderIntoDocument(
<MyComponent />
);
\ No newline at end of file
import React from 'react';
import { Form, Input, Button, Image } from 'semantic-ui-react';
export default class FormLogin extends React.Component {
render = () => (
<div className="formLogin" >
<Image src="/assets/img/logo.png" size="small" verticalAlign="middle" /> <span>Company Login</span>
<Form>
<Form.Group widths="equal">
<Form.Field>
<label htmlFor="id"> Email </label>
<Input id="email" icon="user" iconPosition="left" placeholder="email" />
</Form.Field>
</Form.Group>
<Form.Group widths="equal">
<Form.Field>
<label htmlFor="password"> Password </label>
<Input id="password" icon="key" iconPosition="left" placeholder="password" />
</Form.Field>
</Form.Group>
<Button fluid color="blue">Login</Button>
</Form>
</div>
)
}
import React from 'react';
import { Modal, Button, Icon } from 'semantic-ui-react';
export default class ModalAlert extends React.Component {
static propTypes = {
onChangeValue: React.PropTypes.func.isRequired,
header: React.PropTypes.oneOfType([
React.PropTypes.node,
React.PropTypes.string,
]).isRequired,
content: React.PropTypes.oneOfType([
React.PropTypes.node,
React.PropTypes.string,
]).isRequired,
};
state = { open: false };
open = () => this.setState({ open: true });
close = () => this.setState({ open: false });
render() {
const { open } = this.state;
return (
<Modal
dimmer={false}
open={open}
onOpen={this.open}
onClose={this.close}
size="small"
trigger={<Button > Proceed <Icon name="right chevron" /></Button>}
>
<Modal.Header>{this.props.header}</Modal.Header>
<Modal.Content>
<p>{this.props.content}</p>
</Modal.Content>
<Modal.Actions>
<Button icon="check" content="All Done" onClick={this.props.onChangeValue} />
</Modal.Actions>
</Modal>
);
}
}
\ No newline at end of file
import React from 'react';
export default class Pane extends React.Component {
static displayName = 'Pane';
static propTypes = {
children: React.PropTypes.element.isRequired,
};
render = () => (
<div>
{this.props.children}
</div>
)
}
import React from 'react';
import { Form, Input, Button, Image } from 'semantic-ui-react';
export default class SsoLogin extends React.Component {
render = () => (
<div className="formLogin" >
<Image src="/assets/img/UI.png" size="tiny" verticalAlign="middle" /> <span> SSO Login</span>
<div className="input">
<Form>
<Form.Group widths="equal">
<Form.Field>
<label htmlFor="email">Email</label>
<Input id="email" icon="user" iconPosition="left" placeholder="email" />
</Form.Field>
</Form.Group>
<Form.Group widths="equal">
<Form.Field>
<label htmlFor="password">Password</label>
<Input id="password" icon="key" iconPosition="left" placeholder="password" />
</Form.Field>
</Form.Group>
<Button fluid color="blue" >Login</Button>
</Form>
</div>
</div>
)
}
import React from 'react';
export default class Tabs extends React.Component {
static displayName = 'Tabs';
static propTypes = {
selected: React.PropTypes.number.isRequired,
children: React.PropTypes.oneOfType([
React.PropTypes.array,
React.PropTypes.element,
]).isRequired,
};
static defaultProps = () => ({
selected: 0,
});
constructor(props) {
super(props);
this.state = {
selected: this.props.selected,
};
}
shouldComponentUpdate = (nextProps, nextState) => (
this.props !== nextProps || this.state !== nextState
);
handleClick = (index, event) => {
event.preventDefault();
this.setState({
selected: index,
});
};
_renderTitles = () => {
function labels(child, index) {
const activeClass = (this.state.selected === index ? 'active' : '');
return (
<li key={index}>
<button className={activeClass} onClick={this.handleClick.bind(this, index)}>
{child.props.label}
</button>
</li>
);
}
return (
<ul className="tabs__labels">
{this.props.children.map(labels.bind(this))}
</ul>
);
};
_renderContent = () => (
<div className="tabs__content">
{this.props.children[this.state.selected]}
</div>
);
render = () => (
<div className="tabs">
{this._renderTitles()}
{this._renderContent()}
</div>
);
}
import React from 'react';
import { Menu, Image } from 'semantic-ui-react';
import { Link } from 'react-router';
import Server from './../lib/server';
export default class TopMenu extends React.Component {
state = { activeItem: 'home' };
render() {
return (
<Menu pointing secondary>
<Image as="a" size="small" src="/assets/img/logo.png" href="/" />
<Menu.Menu position="right">
<Menu.Item as={Link} to="/home" name="home" />
<Menu.Item as={Link} to="/profile" name="profil" />
{Server.isLoggedIn() ?
<Menu.Item as={Link} href="/api/api-auth/logout/?next=/" name="logout" /> :
<Menu.Item as={Link} to="/login" name="login" />
}
</Menu.Menu>
</Menu>
);
}
}
import React, { Component } from "react";
import {Menu, Segment, Image} from "semantic-ui-react";
import {Link,Button, Header, Icon, Modal} from "react-router";
import Server from "./lib/server";
import React from 'react';
import TopMenu from './components/TopMenu';
export class TopMenu extends React.Component {
state = { activeItem: 'home' };
export default class Dashboard extends React.Component {
static propTypes = {
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.node),
React.PropTypes.node,
]).isRequired,
};
render() {
return (
<Menu pointing secondary>
<Image as='a' size='small' src='/assets/img/logo.png' href='/'/>
<Menu.Menu position='right'>
<Menu.Item as={Link} to="/home" name='home' />
<Menu.Item as={Link} to="/profile" name='profil' />
{Server.isLoggedIn() ?
<Menu.Item as={Link} href="/api/api-auth/logout/?next=/" name='logout' /> :
<Menu.Item as={Link} to="/login" name='login' />
}
</Menu.Menu>
</Menu>
)
}
render = () => (
<div>
<TopMenu />
{this.props.children}
</div>
)
}
export default class Dashboard extends React.Component {
render = () => {
return (
<div>
<TopMenu/>
{this.props.children}
</div>
)
}
}
\ No newline at end of file
import React from "react";
import Dashboard from "./dashboard";
import Login from './login';
import ReactDOM from "react-dom";
import {Router, Route, browserHistory} from "react-router";
import {Segment, Modal, Button, Icon,Input,Menu,Image as ImageComponent, Item , Header,Grid, Divider,TextArea, Form } from "semantic-ui-react";
import Server from "./lib/server"
export const Profile = () => (
<Segment>
<img src='http://semantic-ui.com/images/wireframe/media-paragraph.png' />
</Segment>
);
class Greeting extends React.Component {
state = {
username : "unknown-user",
modalOpen : true
};
closeModal = () => {this.setState({modalOpen: false})};
componentWillMount() {
Server.get("/users/me/")
.then(results => {
results.username && this.setState({username : results.username});
}, error => {
// console.log(error);
});
}
render () {
return (
<Modal open={this.state.modalOpen} basic size='small' onClose={this.closeModal}>
<Modal.Content>
<h1 style={{textAlign : 'center'}}>
<Icon loading name='like outline' size='large'/>
Hi {this.state.username}
<Icon loading name='like outline' size='large'/>
</h1>
</Modal.Content>
<Modal.Actions>
<Button color='green' inverted onClick={this.closeModal} >
<Icon name='checkmark' /> Hi
</Button>
</Modal.Actions>
</Modal>
);
}
}
var Tabs = React.createClass({
displayName: 'Tabs',
propTypes: {
selected: React.PropTypes.number,
children: React.PropTypes.oneOfType([
React.PropTypes.array,
React.PropTypes.element
]).isRequired
},
getDefaultProps: function () {
return {
selected: 0
};
},
getInitialState: function () {
return {
selected: this.props.selected
};
},
shouldComponentUpdate(nextProps, nextState) {
return this.props !== nextProps || this.state !== nextState;
},
handleClick: function (index, event) {
event.preventDefault();
this.setState({
selected: index
});
},
_renderTitles: function () {
function labels(child, index) {
var activeClass = (this.state.selected === index ? 'active' : '');
return (
<li key={index}>
<a href="#"
className={activeClass}
onClick={this.handleClick.bind(this, index)}>
{child.props.label}
</a>
</li>
);
}
return (
<ul className="tabs__labels">
{this.props.children.map(labels.bind(this))}
</ul>
);
},
_renderContent: function () {
return (
<div className="tabs__content">
{this.props.children[this.state.selected]}
</div>
);
},
render: function () {
return (
<div className="tabs">
{this._renderTitles()}
{this._renderContent()}
</div>
);
}
});
var Pane = React.createClass({
displayName: 'Pane',
propTypes: {
label: React.PropTypes.string.isRequired,
children: React.PropTypes.element.isRequired
},
render: function () {
return (
<div>
{this.props.children}
</div>
);
}
});
export const Home = () => (
<div>
<Tabs selected={0}>
<Pane label="Semua Lowongan">
<ItemExampleFloated/>
</Pane>
<Pane label="Lamaran saya">
<div>This is my tab 2 contents!</div>
</Pane>
</Tabs>
</div>
);
export const App = () => (
<Router history={browserHistory}>
<Route path="/login" component={Login} />
<Route component={Dashboard}>
<Route path="/" component={Greeting} />
<Route path="profile" component={Profile} />
<Route path="home" component={Home} />
<Route path="users" component={Profile} />
</Route>
</Router>
);
const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />;
export class ItemExampleFloated extends React.Component {
render() {
return (
<Item.Group relaxed>
<Item>
<Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
<Item.Content verticalAlign='middle'>
<Item.Header>Lowongan 1</Item.Header>
<Item.Description>{paragraph}</Item.Description>
<Item.Extra>
<div className="daftar">
<ModalExampleMultiple />
</div>
</Item.Extra>
</Item.Content>
</Item>
<Item>
<Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
<Item.Content verticalAlign='middle'>
<Item.Header>Lowongan 2</Item.Header>
<Item.Description>{paragraph}</Item.Description>
<Item.Extra>
<div className="daftar">
<ModalExampleMultiple />
</div>
</Item.Extra>
</Item.Content>
</Item>
<Item>
<Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
<Item.Content verticalAlign='middle'>
<Item.Header>Lowongan 3</Item.Header>
<Item.Description>{paragraph}</Item.Description>
<Item.Extra>
<div className="daftar">
<ModalExampleMultiple />
</div>
</Item.Extra>
</Item.Content>
</Item>
</Item.Group>
)
}
}
export class NestedModal extends React.Component {
state = { open: false }
open = () => this.setState({ open: true })
close = () => this.setState({ open: false })
render() {
const { open } = this.state
return (
<Modal
dimmer={false}
open={open}
onOpen={this.open}
onClose={this.close}
size='small'
trigger={<Button > Proceed <Icon name='right chevron' /></Button>}
>
<Modal.Header>Pendaftaran</Modal.Header>
<Modal.Content>
<p>Terima kasih sudah mendaftar!</p>
</Modal.Content>
<Modal.Actions>
<Button icon='check' content='All Done' onClick={this.props.onChangeValue} />
</Modal.Actions>
</Modal>
)
}
}
export class ModalExampleMultiple extends React.Component {