Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

Migrate Navbar component

  • Loading branch information...
brtjkzl committed Oct 26, 2018
1 parent 6ce130a commit eda8644596ed7174982793ed0d408e38bdbd4b3f
@@ -11,5 +11,8 @@
"plugin:flowtype/recommended"
],
"parser": "babel-eslint",
"plugins": ["cypress", "react", "import", "jest", "flowtype"]
"plugins": ["cypress", "react", "import", "jest", "flowtype"],
"rules": {
"flowtype/space-after-type-colon": [2, "always", { "allowLineBreak": true }]
}
}

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

@@ -0,0 +1,17 @@
// @flow
import * as React from "react";

// TODO
const FacebookButton = () => <div>FacebookButton</div>;

export default FacebookButton;

// import { FACEBOOK_AUTH_PATH } from "routes/paths";

/* <Button
type="facebook"
onClick={() => window.location.assign(FACEBOOK_AUTH_PATH)}
>
<Icon type="facebook" color={COLOR_LIGHT} after={SPACING_SMALL} />
Sign in with Facebook
</Button>; */
@@ -0,0 +1,3 @@
export { default as FacebookButton } from "./FacebookButton";
export { default as SmallButton } from "./SmallButton";
export { default as SmallOutlineButton } from "./SmallOutlineButton";
@@ -0,0 +1,48 @@
// @flow
import * as React from "react";

// TODO
const UserDropdown = () => <div>UserDropdown</div>;

export default UserDropdown;

/* <Dropdown
toggle={openDropdown => (
<$NavbarToggle onClick={openDropdown}>
<Avatar email={currentUser.email} />
<Icon type="chevron" before={SPACING_SMALL} />
</$NavbarToggle>
)}
items={[
{
label: "Sign out",
callback: () => signOut()
}
]}
/> */

// import styled from "react-emotion";

// const $NavbarToggle = styled("div")({ cursor: "pointer" });

// export default $NavbarToggle;

// componentDidMount() {
// this.props.setCurrentUser();
// }

// import { setCurrentUser, signOut } from "state/auth/actions";

// const mapStateToProps = ({ Auth }) => ({
// currentUser: Auth.currentUser,
// });

// type Props = {
// currentUser: {
// email: string
// },
// userSignedIn: boolean,
// setCurrentUser: Function,
// signOut: Function,
// clearSearchResults: Function
// };
@@ -0,0 +1,3 @@
export { default as CollectionDropdown } from "./CollectionDropdown";
export { default as RatingDropdown } from "./RatingDropdown";
export { default as UserDropdown } from "./UserDropdown";
@@ -0,0 +1,7 @@
// @flow
import * as React from "react";

// TODO
const Logo = () => <div>Logo</div>;

export default Logo;
@@ -0,0 +1,38 @@
// @flow
import * as React from "react";
import { connect } from "react-redux";
import { clearSearchResults } from "state/search/actions";
import Logo from "ui/components/Logo";
import SearchBar from "ui/components/SearchBar";
import { UserDropdown } from "ui/components/Dropdown";
import { FacebookButton } from "ui/components/Button";
import Stack from "ui/containers/Stack";
import "./navbar.css";

const mapStateToProps = ({ Auth }) => ({
userSignedIn: Auth.userSignedIn
});

const mapDispatchToProps = {
clearSearchResults
};

type Props = {
userSignedIn: boolean,
clearSearchResults: Function
};

const Navbar = ({ userSignedIn, clearSearchResults }: Props) => (
<div className="navbar">
<Stack align="center" distribute="space-between">
<Logo onClick={clearSearchResults} />
<SearchBar />
{userSignedIn ? <UserDropdown /> : <FacebookButton />}
</Stack>
</div>
);

export default connect(
mapStateToProps,
mapDispatchToProps
)(Navbar);
@@ -0,0 +1,4 @@
.navbar {
margin-top: 36px;
margin-bottom: 60px;
}
@@ -0,0 +1,7 @@
// @flow
import * as React from "react";

// TODO
const SearchBar = () => <div>SearchBar</div>;

export default SearchBar;
@@ -3,16 +3,17 @@ import * as React from "react";
import { StickyFooter, StickyFooterWrapper } from "ui/containers/StickyFooter";
import Container from "ui/containers/Container";
import Footer from "ui/components/Footer";
import Navbar from "ui/components/Navbar";

type Props = {
children: React.Node
};

// TODO
const Layout = ({ children }: Props) => (
<StickyFooterWrapper>
<Container>
Navbar
<Navbar />

{children}
</Container>

@@ -0,0 +1,56 @@
// @flow
import * as React from "react";
import cx from "classnames";
import "./stack.css";

type Props = {
direction?: "row" | "column",
distribute?:
| "start"
| "center"
| "end"
| "space-between"
| "space-around"
| "space-evenly",
align?: "start" | "center" | "end",
padding?:
| "base"
| "top"
| "right"
| "bottom"
| "left"
| "vertical"
| "horizontal"
| "small"
| "small-top"
| "small-right"
| "small-bottom"
| "small-left"
| "small-vertical"
| "small-horizontal"
| "mini"
| "mini-top"
| "mini-right"
| "mini-bottom"
| "mini-left"
| "mini-vertical"
| "mini-horizontal",
children: React.Node
};

const Stack = ({ direction, distribute, align, padding, children }: Props) => (
<div
className={cx("flex", [
direction ? `flex-direction-${direction}` : null,
distribute ? `flex-distribute-${distribute}` : null,
align ? `flex-align-${align}` : null,
padding ? `padding-${padding}` : null
])}
>
{React.Children.map(children, child => (
<div>{child}</div>
))}
</div>
);

export default Stack;

0 comments on commit eda8644

Please sign in to comment.
You can’t perform that action at this time.