admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored header to pull from masterdata.

Browse Source
This commit is contained in:
Patrick Fic
2019-12-05 22:00:00 -08:00
parent 2842af38b7
commit 76b6b9c7b9
5 changed files with 96 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/App/App.js
View File

@@ -1,19 +1,20 @@
import React from "react";
import { ApolloProvider } from "react-apollo";
import { gql } from "apollo-boost";
import { HttpLink } from "apollo-link-http";
import { getMainDefinition } from "apollo-utilities";
import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
//Styling imports
import "./App.css";
import HeaderAppBar from "../components/header-app-bar/header-app-bar.component";
import HeaderAppBarContainer from "../components/header-app-bar/header-app-bar.container";
import SignIn from "../components/sign-in/sign-in.component";
import initialState from "../graphql/initial-state";
const graphqlEndpoint = process.env.REACT_APP_GRAPHQL_ENDPOINT || "https://bodyshop-dev-db.herokuapp.com/v1/graphql";
//Todo: Issue with this line. Not sure why.
const graphqlEndpoint =
process.env.REACT_APP_GRAPHQL_ENDPOINT ||
"https://bodyshop-dev-db.herokuapp.com/v1/graphql";
export default function App({ authState }) {
console.log("graphqlEndpoint", graphqlEndpoint);
@@ -36,10 +37,10 @@ export default function App({ authState }) {
data: initialState
});
console.log(client)
console.log(client);
return (
<ApolloProvider client={client}>
<HeaderAppBar />
<HeaderAppBarContainer />
<SignIn />
</ApolloProvider>
);

80
client/src/components/header-app-bar/header-app-bar.component.jsx
View File

@@ -3,10 +3,6 @@ import { Menu, Icon } from "antd";
const { SubMenu } = Menu;
class HeaderAppBar extends Component {
state = {
current: "alipay"
};
handleClick = e => {
console.log("click ", e);
this.setState({
@@ -15,47 +11,53 @@ class HeaderAppBar extends Component {
};
render() {
const { selectedNavItem, navItems } = this.props;
return (
<Menu
onClick={this.handleClick}
selectedKeys={[this.state.current]}
selectedKeys={selectedNavItem}
mode="horizontal"
>
<Menu.Item key="mail">
<Icon type="mail" />
Navigation One
</Menu.Item>
<Menu.Item key="app" disabled>
<Icon type="appstore" />
Navigation Two
</Menu.Item>
<SubMenu
title={
<span className="submenu-title-wrapper">
<Icon type="setting" />
Navigation Three - Submenu
</span>
}
>
<Menu.ItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Item 2">
<Menu.Item key="setting:3">Option 3</Menu.Item>
<Menu.Item key="setting:4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<Menu.Item key="alipay">
<a
href="https://ant.design"
target="_blank"
rel="noopener noreferrer"
>
Navigation Four - Link
</a>
</Menu.Item>
{navItems.map(navItem => (
<Menu.Item key={navItem.title}>{navItem.title}</Menu.Item>
))}
</Menu>
// <Menu.Item key="mail">
// <Icon type="mail" />
// Navigation One
// </Menu.Item>
// <Menu.Item key="app" disabled>
// <Icon type="appstore" />
// Navigation Two
// </Menu.Item>
// <SubMenu
// title={
// <span className="submenu-title-wrapper">
// <Icon type="setting" />
// Navigation Three - Submenu
// </span>
// }
// >
// <Menu.ItemGroup title="Item 1">
// <Menu.Item key="setting:1">Option 1</Menu.Item>
// <Menu.Item key="setting:2">Option 2</Menu.Item>
// </Menu.ItemGroup>
// <Menu.ItemGroup title="Item 2">
// <Menu.Item key="setting:3">Option 3</Menu.Item>
// <Menu.Item key="setting:4">Option 4</Menu.Item>
// </Menu.ItemGroup>
// </SubMenu>
// <Menu.Item key="alipay">
// <a
// href="https://ant.design"
// target="_blank"
// rel="noopener noreferrer"
// >
// Navigation Four - Link
// </a>
// </Menu.Item>
// </Menu>
);
}
}

44
client/src/components/header-app-bar/header-app-bar.container.jsx Normal file
View File

@@ -0,0 +1,44 @@
import React from "react";
import { Query } from "react-apollo";
import { gql } from "apollo-boost";
import { Spin, Alert } from "antd";
import HeaderAppBar from "./header-app-bar.component";
const GET_NAV_ITEMS = gql`
query nav_items {
masterdata_by_pk(key: "NAV_ITEMS") {
value
}
}
`;
const GET_SELECTED_NAV_ITEM = gql`
query selected_nav_item {
selectedNavItem @client
}
`;
const HeaderAppBarContainer = () => (
<Query query={GET_SELECTED_NAV_ITEM}>
{({ loading, error, data: { selectedNavItem } }) => {
console.log("Selected Nav item", selectedNavItem);
return (
<Query query={GET_NAV_ITEMS}>
{({ loading, error, data }) => {
if (loading) return <Spin size="large" />;
return (
<HeaderAppBar
selectedNavItem={selectedNavItem}
navItems={data.masterdata_by_pk.value}
/>
);
}}
</Query>
);
}}
</Query>
);
export default HeaderAppBarContainer;

2
client/src/graphql/initial-state.js
View File

@@ -1,3 +1,3 @@
export default {
currentSelectedNavItem: "wat",
selectedNavItem: "Home",
};

30
client/src/index.js
View File

@@ -2,13 +2,6 @@ import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { ApolloProvider } from "react-apollo";
import { createHttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloClient } from "apollo-boost";
import { typeDefs, resolvers } from "./graphql/resolvers";
import initialState from "./graphql/initial-state";
import * as serviceWorker from "./serviceWorker";
import "./index.css";
@@ -16,27 +9,10 @@ import { default as App } from "./App/App.container";
require("dotenv").config();
const httpLink = createHttpLink({
uri: "https://bodyshop-dev-db.herokuapp.com/v1/graphql"
});
const client = new ApolloClient({
link: httpLink,
cache: new InMemoryCache(),
typeDefs,
resolvers
});
client.writeData({
data: initialState
});
ReactDOM.render(
<ApolloProvider client={client}>
<BrowserRouter>
<App />
</BrowserRouter>
</ApolloProvider>,
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);