Skip to content

Commit

Permalink
fixed navbar bug + more fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
Joe Lewis committed Dec 3, 2018
1 parent eed5bbd commit 413a9f3
Show file tree
Hide file tree
Showing 6 changed files with 195 additions and 30 deletions.
23 changes: 21 additions & 2 deletions client/public/css/writango.css
Expand Up @@ -16,7 +16,7 @@ body {
}

.writango-menu-container {
font-size: 25px !important;
/* font-size: 16px ; */
}

.landing-block {
Expand All @@ -34,4 +34,23 @@ body {

.font-color-blue {
color: #096dd9
}
}

/* .ant-menu-item-selected {
border-bottom: 2px solid transparent !important;
color: rgba(0, 0, 0, 0.65) !important;
}
.ant-menu-item-selected a {
border-bottom: 2px solid transparent !important;
color: rgba(0, 0, 0, 0.65) !important;
}
.ant-menu-item-custom-selected {
border-bottom: 2px solid ##1890ff !important;
color: #1890ff !important;
}
.ant-menu-item-custom-selected a {
border-bottom: 2px solid ##1890ff !important;
color: #1890ff !important;
} */
28 changes: 26 additions & 2 deletions client/public/js/bundle.js

Large diffs are not rendered by default.

54 changes: 54 additions & 0 deletions client/src/components/HomeMenu.js
@@ -0,0 +1,54 @@
import React, {Component} from 'react';
import {createBrowserHistory} from 'history';
import {Menu} from 'antd';
import {Link} from "react-router-dom";
import Model from '../models.js'
import $ from 'jquery';

class HomeMenu extends Component {

constructor(props) {
super(props);
// this.history = createBrowserHistory()
// window.historyy = this.history;
this.state = {
selectedKeys: []
}
}

componentWillMount() {
var self = this;
window.j = $;
$(window).on('RefreshMenu', function() {
self.setState({selectedKeys: []})
})
}

componentWillUnmount() {
this.unlisten();
}

onSelect(item) {
this.setState({selectedKeys: [item.key]})
}

render() {
return (<Menu
// theme="dark"
mode="horizontal"
defaultSelectedKeys={[]}
selectedKeys={this.state.selectedKeys}
style={{ lineHeight: '64px' }}
className="writango-menu-container"
onSelect={this.onSelect.bind(this)}
>
<Menu.Item key="posts" ><Link to={"/writes/"+Model.session.user.id}>Posts</Link></Menu.Item>
<Menu.Item key="drafts">Drafts</Menu.Item>
<Menu.Item key="write">Write</Menu.Item>
{/* <Menu.Item key="3">nav 3</Menu.Item> */}
</Menu>
)
}
}

export default HomeMenu;
48 changes: 32 additions & 16 deletions client/src/components/Index.js
Expand Up @@ -2,12 +2,16 @@ import React, {Component} from "react";
import { Layout, Menu, Breadcrumb, Icon, Dropdown } from 'antd';
import { Row, Col } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { BrowserRouter as Router, Route, Link, NavLink } from "react-router-dom";
import Landing from './Landing.js'
import PostList from './PostList.js'
import HomeMenu from './HomeMenu.js'
import Model from '../models'
import {createBrowserHistory} from 'history';
import $ from 'jquery';


var PostList = () => <div> post list </div>
// var PostList = () => <div> post list </div>
var DraftList = () => <div> draft list </div>
var PostView = () => <div> post view </div>
var PostEdit = () => <div> post edit </div>
Expand All @@ -32,31 +36,42 @@ const UserMenu = (
</Menu>
);



class Index extends Component{
constructor(props) {
super(props)
this.state = {
selectedKey: ''
}
}

setSelectedKey(key) {
console.log(key);
this.setState({selectedKey: key});
}

onSelect(item) {
this.setState({selectedKey: item.key})
}

componentDidUpdate() {
}

render(){
return(
<Route path="/">
<Layout className="layout">
<Header className="writango-header">
<div className="writango-logo"><Link style={{ textDecoration: 'none', color: '#555'}} to="/"> <span className="font-color-blue">W</span>RITANG<span className="font-color-blue">O</span></Link></div>
<div onClick={() => { $(window).trigger('RefreshMenu') }} className="writango-logo"><Link style={{ textDecoration: 'none', color: '#555'}} to="/"> <span className="font-color-blue">W</span>RITANG<span className="font-color-blue">O</span></Link></div>
<Dropdown overlay={Model.session.user.anonymous ? AnonymousMenu : UserMenu} trigger={['click']}>
<a style={{float: "right"}} className="ant-dropdown-link" href="#">
{Model.session.user.anonymous ? "Hello, Mr. Anonymous!" : Model.session.user.email} <Icon type="down" />
</a>
</Dropdown>
<Menu
// theme="dark"
mode="horizontal"
// defaultSelectedKeys={['2']}
style={{ lineHeight: '64px' }}
className="writango-menu-container"
>
<Menu.Item key="1"><Link to={"/writes/posts"}>Posts</Link></Menu.Item>
<Menu.Item key="2">Drafts</Menu.Item>
<Menu.Item key="3">Write</Menu.Item>
{/* <Menu.Item key="3">nav 3</Menu.Item> */}
</Menu>
<HomeMenu selectedKey={this.state.selectedKey} onSelect={this.onSelect.bind(this)}/>
</Header>
<Content style={{ padding: '0 50px', background: '#fff' }}>
<Content style={{ padding: '50px 50px', background: '#fff' }}>
<div>
<Route path="/" exact component={Landing} />
<Route path="/writes/:username" exact component={PostList} />
Expand All @@ -69,6 +84,7 @@ class Index extends Component{
Just another weekend project created with the awesome <a href="https://github.com/prosemirror">Prosemirror</a> library & other open source technologies. Follow me <a href="https://twitter.com/@vettijoe">@vettijoe</a>, <a href="https://github.com/joelewis">github.com/joelewis</a> and <a href="https://hexopress.com/@joe">hexopress.com/@joe</a>.
</Footer>
</Layout>
</Route>
);
}
}
Expand Down
33 changes: 33 additions & 0 deletions client/src/components/PostList.js
@@ -0,0 +1,33 @@
import React, {Component} from "react";
import Model from "../models.js"
import { List, Card, Icon } from "antd";
class PostList extends Component {
constructor(props) {
super(props);
this.state = {
posts: []
}
}

componentWillMount() {
var self = this;
Model.loadPosts(this.props.match.params.username).then(() => {
self.setState({
posts: Model.posts
})
})
}

render() {
return (
<Card title="Posts" style={{minHeight: '100vh'}}>
<div className="no-post-placeholder">
<p><Icon type="smile" style={{margin: '0 10px'}}/>You have no posts yet. <a href="#">Start Writing!</a></p>
</div>
</Card>

)
}
}

export default PostList;
39 changes: 29 additions & 10 deletions client/src/models.js
@@ -1,17 +1,36 @@
import $ from 'jquery';
/**
* Client DB
* Holds the information necessary for components
* TODO: Use a proper state management library
*/
var model = {
session: {},
posts: [],
drafts: [],
currentDoc: {}
};

var session = {};

var loadSession = function() {
model.loadSession = function() {
return $.get('/session/get').done((resp) => {
session.session_key = resp.session_key;
session.user = resp.user;
model.session.session_key = resp.session_key;
model.session.user = resp.user;
})
}

window.session = session;
model.loadPosts = function(userkey) {
return $.get('/posts/@'+userkey).done(resp => {
model.posts = resp.posts;
})
};


model.loadDrafts = function() {
return $.get('/drafts').done(resp => {
model.drafts = resp.drafts;
})
};

window.model = model;

export default {
session,
loadSession
};
export default model;

0 comments on commit 413a9f3

Please sign in to comment.