home and file screen

This commit is contained in:
2019-01-05 21:40:29 +03:00
parent 4206b4da3c
commit 0f440df594
3 changed files with 75 additions and 46 deletions

View File

@@ -8,12 +8,13 @@ import {
} from "@blueprintjs/core";
import * as React from "react";
import { connect } from "react-redux";
import { RouteComponentProps, withRouter } from "react-router";
import { Dispatch } from "redux";
import { IUserJSON } from "~../../src/entity/User";
import { IAppState } from "~redux/reducers";
import { logoutUser } from "~redux/user/actions";
interface IHomeProps {
interface IHomeProps extends RouteComponentProps {
user: IUserJSON | null;
logout: () => void;
}
@@ -24,47 +25,55 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
}
public render() {
console.log(this.props.location.pathname);
return (
<>
{this.props.user && (
<>
<Navbar>
<Navbar.Group align={Alignment.LEFT}>
<Navbar.Heading>Writer</Navbar.Heading>
<Navbar.Divider />
<Button
className={Classes.MINIMAL}
icon="home"
text="Home"
/>
<Button
className={Classes.MINIMAL}
icon="document"
text="Files"
/>
</Navbar.Group>
<Navbar.Group align={Alignment.RIGHT}>
<Popover
target={
<Button id="userButton">
{this.props.user.username}
</Button>
}
content={
<Menu>
<Menu.Item
icon="log-out"
text="Logout"
onClick={this.props.logout}
/>
</Menu>
}
/>
</Navbar.Group>
</Navbar>
</>
)}
</>
this.props.user && (
<>
<Navbar>
<Navbar.Group align={Alignment.LEFT}>
<Navbar.Heading>Writer</Navbar.Heading>
<Navbar.Divider />
<Button
className={Classes.MINIMAL}
icon="home"
text="Home"
active={this.props.location.pathname === "/"}
onClick={() => this.props.history.push("/")}
/>
<Button
className={Classes.MINIMAL}
icon="document"
text="Files"
active={
this.props.location.pathname === "/files"
}
onClick={() =>
this.props.history.push("/files")
}
/>
</Navbar.Group>
<Navbar.Group align={Alignment.RIGHT}>
<Popover
target={
<Button id="userButton">
{this.props.user.username}
</Button>
}
content={
<Menu>
<Menu.Item
icon="log-out"
text="Logout"
onClick={this.props.logout}
/>
</Menu>
}
/>
</Navbar.Group>
</Navbar>
<div id="MainScreen" />
</>
)
);
}
}
@@ -77,7 +86,9 @@ function mapDispatchToProps(dispatch: Dispatch) {
return { logout: () => dispatch(logoutUser()) };
}
export const Home = connect(
mapStateToProps,
mapDispatchToProps,
)(HomeComponent);
export const Home = withRouter(
connect(
mapStateToProps,
mapDispatchToProps,
)(HomeComponent),
);