stepus53/writer
1
0
Fork 0
mirror of https://github.com/usatiuk/writer.git synced 2025-10-29 00:17:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

home and file screen

Browse Source
This commit is contained in:
Stepan Usatiuk
2019-01-05 21:40:29 +03:00
parent 4206b4da3c
commit 0f440df594
3 changed files with 75 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/App.scss
View File

@@ -5,4 +5,10 @@
left: 0; left: 0;
right: 0; right: 0;
overflow: hidden; overflow: hidden;
}
.bp3-navbar {
.bp3-button {
margin-right: 0.25rem;
}
} }

14
frontend/src/App.tsx
View File

@@ -1,6 +1,12 @@
import * as React from "react"; import * as React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Route, RouteComponentProps, Switch, withRouter } from "react-router"; import {
Redirect,
Route,
RouteComponentProps,
Switch,
withRouter,
} from "react-router";
import { AuthScreen } from "~Auth/AuthScreen"; import { AuthScreen } from "~Auth/AuthScreen";
import { Home } from "~Home/Home"; import { Home } from "~Home/Home";
import { Landing } from "~Landing/Landing"; import { Landing } from "~Landing/Landing";
@@ -21,6 +27,12 @@ export function AppComponent(props: IAppComponentProps) {
path="/" path="/"
component={() => (loggedIn ? <Home /> : <Landing />)} component={() => (loggedIn ? <Home /> : <Landing />)}
/> />
<Route
path="/files"
component={() =>
loggedIn ? <Home /> : <Redirect to="/login" />
}
/>
<Route path="/(login|signup)/" component={AuthScreen} /> <Route path="/(login|signup)/" component={AuthScreen} />
</Switch> </Switch>
</> </>

101
frontend/src/Home/Home.tsx
View File

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