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

Rewrote app to use hooks and fixed multiple re-renders.

Browse Source
This commit is contained in:
Patrick Fic
2019-12-11 18:39:27 -08:00
parent 5c7523e6bd
commit f333301f67
16 changed files with 162 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
client/src/components/header/header.component.jsx
View File

@@ -3,20 +3,41 @@ import { Link } from "react-router-dom";
import { Menu, Icon } from "antd";
import "./header.styles.scss";
import SignOut from "../sign-out/sign-out.component";
import { useQuery } from "react-apollo";
import {
GET_LANDING_NAV_ITEMS,
GET_NAV_ITEMS
} from "../../graphql/metadata.queries";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import AlertComponent from "../alert/alert.component";
export default ({ landingHeader }) => {
let HookNavItems;
if (landingHeader) {
HookNavItems = useQuery(GET_LANDING_NAV_ITEMS);
} else {
HookNavItems = useQuery(GET_NAV_ITEMS);
}
export default ({ landingHeader, selectedNavItem, navItems }) => {
const handleClick = e => {
console.log("click ", e);
// this.setState({
// current: e.key
// });
};
if (HookNavItems.loading) return <LoadingSpinner />;
if (HookNavItems.error)
return <AlertComponent message={HookNavItems.error.message} />;
const navItems = JSON.parse(HookNavItems.data.masterdata_by_pk.value);
return (
<Menu
theme="dark"
className="header"
onClick={handleClick}
selectedKeys={selectedNavItem}
selectedKeys="Home"
mode="horizontal"
>
{navItems.map(navItem => (

45
client/src/components/header/header.container.jsx
View File

@@ -1,45 +0,0 @@
import React from "react";
import { Query } from "react-apollo";
import { Alert } from "antd";
import Header from "./header.component";
import Spin from "../loading-spinner/loading-spinner.component";
// import Skeleton from "../loading-skeleton/loading-skeleton.component";
import {
GET_SELECTED_NAV_ITEM,
GET_LANDING_NAV_ITEMS,
GET_NAV_ITEMS
} from "../../graphql/metadata.queries";
const HeaderContainer = ({ landingHeader }) => {
let GET_METADATA;
if (landingHeader) GET_METADATA = GET_LANDING_NAV_ITEMS;
else GET_METADATA = GET_NAV_ITEMS;
return (
<Query query={GET_SELECTED_NAV_ITEM}>
{({ loading, error, data: { selectedNavItem } }) => {
return (
<Query query={GET_METADATA}>
{({ loading, error, data }) => {
if (loading) return <Spin />;
if (error) return <Alert message={error.message} />;
const parsedNavItems = JSON.parse(data.masterdata_by_pk.value);
return (
<Header
landingHeader={landingHeader}
selectedNavItem={selectedNavItem}
navItems={parsedNavItems}
/>
);
}}
</Query>
);
}}
</Query>
);
};
export default HeaderContainer;