Fakultas Ilmu Komputer UI

Commit 0c0e7ae1 authored by Zamil Majdy's avatar Zamil Majdy
Browse files

[#140382397] #6 Add Server.js implementation example

parent 340a3c6a
import React from 'react';
import {Menu, Segment, Image} from 'semantic-ui-react';
import {Link} from 'react-router'
import React from "react";
import {Menu, Segment, Image} from "semantic-ui-react";
import {Link} from "react-router";
import Server from "./lib/server";
export class TopMenu extends React.Component {
state = { activeItem: 'home' };
render() {
const { activeItem } = this.state;
return (
<Menu pointing secondary>
<Image as='a' size='small' src='/assets/img/logo.png' href='/'/>
<Menu.Menu position='right'>
<Menu.Item as={Link} to="/" name='home' />
<Menu.Item as={Link} to="/profile" name='profil' />
<Menu.Item as={Link} to="/logout" name='logout' />
{Server.isLoggedIn() ?
<Menu.Item as={Link} href="/api/api-auth/logout/?next=/" name='logout' /> :
<Menu.Item as={Link} href="/api/api-auth/login/?next=/" name='login' />
}
</Menu.Menu>
</Menu>
)
......
import React from 'react';
import Dashboard from './dashboard';
import ReactDOM from 'react-dom';
import {Router, Route, browserHistory} from 'react-router';
import {Segment} from 'semantic-ui-react';
import React from "react";
import Dashboard from "./dashboard";
import ReactDOM from "react-dom";
import {Router, Route, browserHistory} from "react-router";
import {Segment, Modal, Button, Icon, Image} from "semantic-ui-react";
import Server from "./lib/server"
export const Profile = () => (
<Segment>
......@@ -11,13 +11,51 @@ export const Profile = () => (
</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>
);
}
}
export const App = () => (
<Router history={browserHistory}>
<Route path="/" component={Dashboard}>
<Route component={Dashboard}>
<Route path="/" component={Greeting} />
<Route path="profile" component={Profile} />
<Route path="users" component={Profile} />
</Route>
</Router>
);
ReactDOM.render( <App />, document.getElementById('react-app'))
ReactDOM.render( <App />, document.getElementById('react-app'));
......@@ -148,3 +148,5 @@ GZIP_CONTENT_TYPES = (
'application/x-javascript',
'text/javascript'
)
SESSION_COOKIE_HTTPONLY = False
......@@ -28,7 +28,7 @@ router.register(r'users', UserViewSet)
urlpatterns = [
url(r'^api/api-auth/', include('rest_framework.urls', namespace='rest_framework')),
url(r'^api/$', schema_view),
url(r'^api$', schema_view),
url(r"^api/", include(router.urls)),
url(r'^admin/', admin.site.urls),
url(r'', apps.index, name="index"),
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment